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

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