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

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