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

   1 /* interwiki search results */
   2 /*==========================*/
   3
   4 #mw-interwiki-results {
   5         float: right;
   6         width: 30%;
   7 }
   8
   9 .iw-headline {
  10         font-weight: bold;
  11         font-size: 1rem;
  12         font-size: 16px;
  13         opacity: 0.7;
  14 }
  15
  16 .iw-results {
  17         list-style: none;
  18         margin: 0;
  19 }
  20
  21 .iw-resultset {
  22         margin-bottom: 1.2em;
  23         background-color: #f2f4f7;
  24         vertical-align: top;
  25         width: 100%;
  26         float: left;
  27         list-style-type: none;
  28 }
  29
  30 /* clearfix */
  31 .iw-result:after {
  32         visibility: hidden;
  33         display: block;
  34         font-size: 0;
  35         content: " ";
  36         clear: both;
  37         height: 0;
  38 }
  39
  40 * html .interwiki-result { /* IE6 */
  41         zoom: 1;
  42 }
  43 *:first-child + html .iw-resultset { /* IE7 */
  44         zoom: 1;
  45 }
  46
  47 /* padding each .iw-resultset section seperately.
  48 This allows us greater flexibility in the design.
  49 For example changing the background color on the
  50 header and footer. */
  51 .iw-result__header,
  52 .iw-result__title,
  53 .iw-result__content,
  54 .iw-result__footer {
  55         padding: 0.25em 0.85em;
  56 }
  57
  58 /* definition titles appear inline,
  59 to resemble a traditional dictionary definition */
  60 .iw-resultset--definition .iw-result__title {
  61         display: inline;
  62         padding: 0;
  63 }
  64
  65 .iw-resultset > div:first-child {
  66         padding-top: 0.85em;
  67 }
  68
  69 .iw-resultset > div:last-child {
  70         padding-bottom: 0.85em;
  71 }
  72
  73 .iw-result__title {
  74         font-size: 16px; /* rem fallback */
  75         font-size: 1rem;
  76 }
  77
  78 .iw-result__title a.extiw {
  79         color: #252525;
  80         font-weight: bold;
  81 }
  82
  83 .iw-result__content:after { /* clearfix */
  84         visibility: hidden;
  85         display: block;
  86         font-size: 0;
  87         content: " ";
  88         clear: both;
  89         height: 0;
  90 }
  91
  92 .iw-result__footer {
  93         float: right;
  94 }
  95
  96 .iw-result__icon {
  97         display: inline-block;
  98         width: 24px;
  99         height: 24px;
 100         vertical-align: middle;
 101         margin-right: 0.25em;
 102         background: url( images/special.search/definition-icon.svg ) no-repeat 0 0;
 103         background-size: 100% 100%;
 104 }
 105
 106 @interwikiContentTypes: definition, travel, quotation, book, course, news, textbook, image;
 107
 108 .generate-iwIcons();
 109
 110 .generate-iwIcons( @i:1 ) when ( @i =< length( @interwikiContentTypes ) ) {
 111         @iwIcon: extract( @interwikiContentTypes, @i );
 112
 113         .iw-result__icon--@{iwIcon} {
 114                 /*  stylelint-disable-next-line function-url-quotes */
 115                 background-image: url( 'images/special.search/@{iwIcon}-icon.png' );
 116                 /*  stylelint-disable-next-line function-url-quotes */
 117                 background-image: url( 'images/special.search/@{iwIcon}-icon.svg' );
 118         }
 119
 120         .generate-iwIcons( @i + 1 );
 121 }
 122
 123 /* image search result */
 124 .iw-result__mini-gallery {
 125         position: relative;
 126         float: left;
 127         width: 60%;
 128         height: 200px;
 129         box-sizing: border-box;
 130         padding: 0.25rem;
 131 }
 132
 133 /* second and third images are small */
 134 .iw-result__mini-gallery:nth-child( 2 ),
 135 .iw-result__mini-gallery:nth-child( 3 ) { /* stylelint-disable-line indentation */
 136         width: 40%;
 137         height: 100px;
 138 }
 139
 140 .iw-result__mini-gallery__image {
 141         display: block;
 142         position: relative;
 143         width: 100%;
 144         height: 100%;
 145         background-size: cover;
 146         background-repeat: no-repeat;
 147         background-position: center center;
 148 }
 149
 150 .iw-result__mini-gallery__image > .iw-result__mini-gallery__caption { /* image gallery text */
 151         visibility: hidden;
 152         position: absolute;
 153         bottom: 0;
 154         left: 0;
 155         text-align: center;
 156         color: #fff;
 157         text-shadow: 0 0 10px rgba( 0, 0, 0, 0.4 ); /* improves legibility on white background*/
 158         font-size: 0.8em;
 159         padding: 5px;
 160         background-color: rgba( 0, 0, 0, 0.5 );
 161 }
 162
 163 .iw-result__mini-gallery__image:hover > .iw-result__mini-gallery__caption {
 164         visibility: visible;
 165 }
 166
 167 /* different types of interwiki result boxes */
 168 /* quotation box */
 169 .iw-resultset--quotation .iw-result__content {
 170         border-left: 4px solid #afb1b5;
 171         margin-left: 1em;
 172         padding-top: 0;
 173         margin-top: 0.25em;
 174 }
 175 .iw-resultset--quotation .iw-result__title {
 176         margin-left: 1em;
 177 }
 178 .iw-result--quotation .iw-result__title:before {
 179         content: ' — ';
 180         display: inline-block;
 181 }
 182 .iw-result--quotation .iw-result__footer {
 183         text-align: right;
 184 }
 185
 186 /* no results
 187 span the interwiki results across the bottom of the page.
 188 */
 189
 190 .mw-search-nonefound ~ #mw-search-interwiki {
 191         width: 100%;
 192 }
 193
 194 .mw-search-nonefound ~ #mw-search-interwiki .iw-resultset {
 195         width: 30%;
 196         max-width: 300px;
 197         margin-left: 0.5em;
 198         margin-right: 0.5em;
 199 }
 200
 201 /* mobile */
 202 @media only screen and ( max-width: 768px ) {
 203         #mw-interwiki-results {
 204                 width: 100%;
 205         }
 206         .mw-search-results {
 207                 max-width: none !important;
 208         }
 209         .iw-resultset {
 210                 width: 45% !important;
 211                 margin-left: 0.5em !important;
 212                 margin-right: 0.5em !important;
 213         }
 214
 215 }
 216
 217 @media only screen and ( max-width: 600px ) {
 218         .iw-resultset {
 219                 width: 100% !important;
 220                 margin-left: 0 !important;
 221                 margin-right: 0 !important;
 222                 max-width: none !important;
 223         }
 224 }