resources/src/mediawiki.special.search.styles.less

   1 /* Special:Search */
   2 @import 'mediawiki.skin.variables.less';
   3 @import 'mediawiki.mixins.less';
   4
   5 /* stylelint-disable selector-class-pattern */
   6 #mw-content-text {
   7         .searchresults {
   8                 margin-bottom: 1em;
   9         }
  10
  11         .mw-search-nonefound,
  12         .mw-search-exists,
  13         .mw-search-createlink,
  14         .searchdidyoumean {
  15                 margin-bottom: 0;
  16                 float: none;
  17         }
  18
  19         // If more than one message is present at the same time, add a bit of margin in between
  20         .searchdidyoumean + .searchresults .mw-search-createlink,
  21         .mw-search-nonefound + .mw-search-createlink {
  22                 margin-top: 12px;
  23         }
  24
  25         // Default top margin for the search result
  26         .mw-search-results {
  27                 margin-top: 32px;
  28         }
  29 }
  30
  31 /* needs extra specificity to override `.mw-body p` selector */
  32 .mw-body .mw-search-nonefound {
  33         font-size: 1.2em;
  34 }
  35
  36 .searchmatch {
  37         font-weight: bold;
  38 }
  39
  40 .mw-search-form-wrapper {
  41         margin-bottom: 24px;
  42 }
  43
  44 .mw-search-results {
  45         margin: 0;
  46
  47         li {
  48                 list-style: none;
  49                 margin-bottom: 24px;
  50
  51                 a {
  52                         font-size: 114%;
  53                 }
  54         }
  55 }
  56
  57 .mw-search-results-container,
  58 .mw-search-results-info {
  59         float: left;
  60 }
  61
  62 @media only screen and ( min-width: @min-width-breakpoint-tablet ) {
  63         .mw-search-results-container,
  64         .mw-search-results-info {
  65                 width: ~'calc( 100% / 12 * 7 )';
  66         }
  67 }
  68
  69 .searchResultImage {
  70         display: flex;
  71
  72         .searchResultImage-thumbnail {
  73                 flex-shrink: 0;
  74                 width: 90px;
  75                 height: 90px;
  76                 text-align: center;
  77                 vertical-align: top;
  78                 padding-right: 1em;
  79
  80                 > div {
  81                         padding: 0.5em;
  82                 }
  83
  84                 .searchResultImage-thumbnail-placeholder {
  85                         background-color: @background-color-neutral-subtle;
  86                         box-sizing: border-box;
  87                         width: inherit;
  88                         height: inherit;
  89                         border: @border-subtle;
  90                         fill: @color-placeholder;
  91                         display: flex;
  92                         justify-content: center;
  93                         align-items: center;
  94                 }
  95
  96                 img {
  97                         width: 100%;
  98                         /* Note: below !important required to override an unrelated !important in minerva skin */
  99                         /* stylelint-disable-next-line declaration-no-important */
 100                         height: 100% !important;
 101                         object-fit: cover;
 102                         object-position: top;
 103                         border: @border-subtle;
 104                 }
 105         }
 106
 107         .searchResultImage-text {
 108                 vertical-align: top;
 109         }
 110 }
 111
 112 /* Don't show thumbnails for interwiki results */
 113 .mw-search-interwiki-results .searchResultImage-thumbnail {
 114         display: none;
 115 }
 116
 117 .mw-search-visualclear {
 118         clear: both;
 119 }
 120
 121 .mw-search-result-data {
 122         color: @color-subtle;
 123         font-size: 93%;
 124 }
 125
 126 .mw-search-profile-tabs {
 127         background-color: @background-color-neutral-subtle;
 128         margin-top: 1em;
 129         border: @border-subtle;
 130         border-radius: @border-radius-base;
 131         // ooui's @max-width-base
 132         max-width: 50em;
 133 }
 134
 135 .search-types {
 136         float: left;
 137         padding-left: 0.25em;
 138
 139         ul {
 140                 margin: 0;
 141                 padding: 0;
 142                 list-style: none;
 143         }
 144
 145         li {
 146                 float: left;
 147                 margin: 0;
 148                 padding: 0;
 149         }
 150
 151         a {
 152                 display: block;
 153                 padding: 0.5em;
 154         }
 155
 156         .current a {
 157                 color: @color-base;
 158                 cursor: default;
 159
 160                 &:hover {
 161                         text-decoration: none;
 162                 }
 163         }
 164 }
 165
 166 .results-info {
 167         float: right;
 168         padding: 0.5em;
 169         padding-right: 0.75em;
 170         color: @color-subtle;
 171         font-size: 95%;
 172 }
 173
 174 #mw-search-top-table div.oo-ui-actionFieldLayout {
 175         float: left;
 176         width: 100%;
 177 }
 178
 179 /* Advanced options menu */
 180 /* ===================== */
 181
 182 #mw-searchoptions {
 183         background-color: @background-color-neutral-subtle;
 184         /* Support: Firefox, needs `clear: both` on `fieldset` when zoom level > 100%, see T176499 */
 185         clear: both;
 186         padding: 0.5em 0.75em 0.75em 0.75em;
 187         margin: -1px 0 0;
 188         border: @border-subtle;
 189         border-radius: 0 0 @border-radius-base @border-radius-base;
 190
 191         legend {
 192                 display: none;
 193         }
 194
 195         h4 {
 196                 padding: 0;
 197                 margin: 0;
 198                 float: left;
 199         }
 200
 201         .divider {
 202                 clear: both;
 203                 border-bottom: @border-subtle;
 204                 padding-top: 0.5em;
 205                 margin-bottom: 0.5em;
 206         }
 207
 208         .checkbox-wrapper {
 209                 columns: 13em;
 210
 211                 > * {
 212                         .column-break-inside-avoid;
 213                         /* padding because margin triggers a Safari bug on columns, see T377900 */
 214                         padding-bottom: 1.5em;
 215                 }
 216         }
 217 }
 218
 219 #mw-search-menu {
 220         padding-left: 6em;
 221         font-size: 85%;
 222 }
 223
 224 #mw-search-interwiki {
 225         float: right;
 226         width: 18em;
 227         border: @border-base;
 228         margin-top: 2ex;
 229 }
 230
 231 .searchalttitle,
 232 #mw-search-interwiki li {
 233         font-size: 95%;
 234 }
 235
 236 .mw-search-interwiki-more {
 237         float: right;
 238         font-size: 90%;
 239 }
 240
 241 #mw-search-interwiki-caption {
 242         text-align: center;
 243         font-weight: bold;
 244         font-size: 95%;
 245 }
 246
 247 .mw-search-interwiki-project {
 248         background-color: @background-color-neutral;
 249         font-size: 97%;
 250         text-align: left;
 251         padding: 0.15em 0.15em 0.2em 0.2em;
 252         border-top: @border-subtle;
 253 }
 254
 255 .mw-search-interwiki-header {
 256         font-size: 1.3125em;
 257         border-bottom: @border-base;
 258 }
 259
 260 .searchdidyoumean {
 261         font-size: 114%;
 262         margin-top: 0.8em;
 263         margin-bottom: 0.8em;
 264
 265         em {
 266                 font-style: normal;
 267         }
 268 }
 269
 270 #mw-search-togglebox {
 271         float: right;
 272
 273         label {
 274                 margin-right: 0.25em;
 275         }
 276
 277         input {
 278                 margin-left: 0.25em;
 279         }
 280 }
 281
 282 .client-nojs #mw-search-togglebox {
 283         display: none;
 284 }