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

   1 /* interwiki search results */
   2 /*==========================*/
   3
   4 @import 'mediawiki.ui/variables.less';
   5 @import 'mediawiki.mixins';
   6
   7 .mw-searchresults-has-iw {
   8
   9         .iw-headline {
  10                 font-weight: bold;
  11         }
  12
  13         .iw-results {
  14                 list-style: none;
  15                 margin: 0;
  16         }
  17
  18         .iw-resultset {
  19                 .box-sizing(border-box);
  20                 padding: 0.5em;
  21                 vertical-align: top;
  22                 width: 100%;
  23                 float: left;
  24                 background-color: @colorGray15;
  25                 margin-bottom: 1em;
  26                 word-break: break-word;
  27         }
  28
  29         .iw-result__title {
  30                 font-size: 108%; /* matching regular search title */
  31         }
  32
  33         .iw-result:after,
  34         .iw-result__content:after { /* clearfix */
  35                 visibility: hidden;
  36                 display: block;
  37                 font-size: 0;
  38                 content: ' ';
  39                 clear: both;
  40                 height: 0;
  41         }
  42
  43         .iw-result__footer {
  44                 float: right;
  45                 font-size: 97%; /* matching main search result font-size */
  46                 margin-top: 0.5em;
  47         }
  48         .iw-result__footer a {
  49                 vertical-align: middle;
  50                 font-style: italic;
  51         }
  52
  53         .oo-ui-icon-favicon {
  54                 padding-right: 1em;
  55         }
  56
  57         /* image search result */
  58         .iw-result__mini-gallery {
  59                 position: relative;
  60                 float: left;
  61                 width: 100%;
  62                 height: 200px;
  63                 .box-sizing(border-box);
  64                 padding: 0.25rem;
  65         }
  66
  67         /* second and third images are small */
  68         .iw-result__mini-gallery:nth-child( 2 ),
  69         .iw-result__mini-gallery:nth-child( 3 ) { /* stylelint-disable-line indentation */
  70                 width: 50%;
  71                 height: 100px;
  72         }
  73
  74         .iw-result__mini-gallery__image {
  75                 display: block;
  76                 position: relative;
  77                 width: 100%;
  78                 height: 100%;
  79                 background-size: 100% auto;
  80                 background-size: cover;
  81                 background-repeat: no-repeat;
  82                 background-position: center center;
  83         }
  84
  85         /* image gallery text */
  86         .iw-result__mini-gallery__image > .iw-result__mini-gallery__caption {
  87                 visibility: hidden;
  88                 position: absolute;
  89                 bottom: 0;
  90                 left: 0;
  91                 text-align: center;
  92                 color: #fff;
  93                 font-size: 0.8em;
  94                 padding: 0.5em;
  95                 background-color: rgba( 0, 0, 0, 0.5 );
  96         }
  97
  98         .iw-result__mini-gallery__image:hover > .iw-result__mini-gallery__caption {
  99                 visibility: visible;
 100         }
 101
 102         /* tablet and up */
 103
 104         @media only screen and ( min-width: @deviceWidthTablet ) {
 105
 106                 #mw-interwiki-results {
 107                         width: 30%;
 108                         display: inline-block; /* used to align interwiki sidebar with the top of the main search results */
 109                         margin-left: 8%; /* since inline-block causes whitespace issues, this is 8 instead of 10% */
 110                 }
 111                 .mw-search-createlink,
 112                 .mw-search-nonefound,
 113                 .mw-search-results,
 114                 .mw-search-interwiki-header {
 115                         float: left;
 116                         width: 60%;
 117                         clear: left;
 118                         max-width: 60%;
 119                 }
 120         }
 121 }