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

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