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