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