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

   1 /* Interwiki search results */
   2 /* ======================== */
   3
   4 @import 'mediawiki.skin.variables.less';
   5
   6 /* stylelint-disable selector-class-pattern */
   7
   8 .mw-searchresults-has-iw {
   9         .iw-results {
  10                 list-style: none;
  11                 margin: 0;
  12         }
  13
  14         .iw-resultset {
  15                 box-sizing: border-box;
  16                 vertical-align: top;
  17                 width: 100%;
  18                 float: left;
  19                 margin-bottom: 2em;
  20                 word-break: break-word;
  21         }
  22
  23         .iw-result__title {
  24                 font-size: 108%;
  25                 /* Matching regular search title */
  26         }
  27
  28         .iw-result::after,
  29         .iw-result__content::after {
  30                 /* Clearfix */
  31                 visibility: hidden;
  32                 display: block;
  33                 font-size: 0;
  34                 content: ' ';
  35                 clear: both;
  36                 height: 0;
  37         }
  38
  39         .iw-result__header {
  40                 font-size: 1.2em;
  41                 margin-bottom: 0.1em;
  42         }
  43
  44         .iw-result__header a {
  45                 vertical-align: middle;
  46                 color: @color-emphasized;
  47         }
  48
  49         .iw-result__footer {
  50                 /* Matching main search result font-size */
  51                 margin-top: 0.1em;
  52         }
  53
  54         .iw-result__footer a {
  55                 vertical-align: middle;
  56         }
  57
  58         .iw-result__header .oo-ui-iconElement-icon {
  59                 margin-right: 0.5em;
  60         }
  61
  62         /* Image search result */
  63         .iw-result__mini-gallery {
  64                 position: relative;
  65                 float: left;
  66                 width: 100%;
  67                 height: 200px;
  68                 box-sizing: border-box;
  69                 padding: 0.25rem;
  70         }
  71
  72         .iw-resultset:nth-child( 1 ) {
  73                 .iw-result__header {
  74                         border-top: @border-subtle;
  75                         padding-top: 12px;
  76                 }
  77         }
  78
  79         /* Second and third images are small */
  80         .iw-result__mini-gallery:nth-child( 2 ),
  81         .iw-result__mini-gallery:nth-child( 3 ) {
  82                 width: 50%;
  83                 height: 100px;
  84         }
  85
  86         .iw-result__mini-gallery__image {
  87                 display: block;
  88                 position: relative;
  89                 width: 100%;
  90                 height: 100%;
  91                 background-size: 100% auto;
  92                 background-size: cover;
  93                 background-repeat: no-repeat;
  94                 background-position: center center;
  95         }
  96
  97         /* Image gallery text */
  98         .iw-result__mini-gallery__image > .iw-result__mini-gallery__caption {
  99                 visibility: hidden;
 100                 position: absolute;
 101                 bottom: 0;
 102                 left: 0;
 103                 text-align: center;
 104                 color: @color-inverted;
 105                 font-size: 0.8em;
 106                 padding: 0.5em;
 107                 background-color: @background-color-backdrop-dark;
 108         }
 109
 110         .iw-result__mini-gallery__image:hover > .iw-result__mini-gallery__caption {
 111                 visibility: visible;
 112         }
 113
 114         /* Tablet and up */
 115         @media only screen and ( min-width: @min-width-breakpoint-tablet ) {
 116                 #mw-interwiki-results {
 117                         display: inline-block;
 118                         width: ~'calc( 100% / 12 * 4 )';
 119                         margin-left: ~'calc( 100% / 12 )';
 120                 }
 121
 122                 .iw-resultset:nth-child( 1 ) {
 123                         .iw-result__header {
 124                                 // Fallback is graceful enough.
 125                                 border-top: unset;
 126                         }
 127                 }
 128         }
 129
 130         @media only screen and ( min-width: 1440px ) {
 131                 #mw-interwiki-results {
 132                         margin-right: ~'calc( 100% / 12 )';
 133                         width: ~'calc( 100% / 12 * 3 )';
 134                 }
 135         }
 136
 137         .mw-searchresults-has-iw {
 138                 .iw-resultset {
 139                         padding: 0.5em;
 140                 }
 141         }
 142 }
 143
 144 .mw-searchresults-has-iw.mw-searchresults-has-offset {
 145         /* Tablet and up */
 146         @media only screen and ( max-width: @max-width-breakpoint-mobile ) {
 147                 #mw-interwiki-results {
 148                         display: none;
 149                 }
 150         }
 151 }