resources/src/mediawiki.skinning/content.thumbnails-screen.less

   1 /**
   2  * MediaWiki style sheet for styles relating to thumbnails.
   3  *
   4  * CSS that does not relate to styling thumbnails generated by the parser in a vanilla
   5  * MediaWiki install do not belong here.
   6  */
   7
   8 /* stylelint-disable selector-class-pattern */
   9 @import 'mediawiki.skin.variables.less';
  10 @import 'content.variables.less';
  11 @import 'mediawiki.mixins.less';
  12
  13 /* Thumbnails */
  14
  15 div.thumbinner {
  16         border: @border-subtle;
  17         background-color: @background-color-interactive-subtle;
  18         font-size: @font-size-thumbinner-screen;
  19 }
  20
  21 .thumbimage {
  22         background-color: @background-color-interactive-subtle;
  23         border: 1px solid @border-color-subtle;
  24 }
  25
  26 .thumbcaption {
  27         /* Default styles when there's no .mw-content-ltr or .mw-content-rtl, overridden below */
  28         border: 0;
  29         font-size: @font-size-thumbcaption-screen;
  30 }
  31
  32 .thumbborder {
  33         border: @border-width-base @border-style-base #eaecf0;
  34 }
  35
  36 .magnify {
  37         /* Default styles when there's no .mw-content-ltr or .mw-content-rtl, overridden below */
  38         float: right;
  39         .margin-inline( 3px, 0 );
  40
  41         a {
  42                 display: block;
  43                 /* Hide the text… */
  44                 text-indent: 15px;
  45                 white-space: nowrap;
  46                 overflow: hidden;
  47                 /* …and replace it with the image */
  48                 width: 15px;
  49                 height: 11px;
  50                 /* Default styles when there's no .mw-content-ltr or .mw-content-rtl, overridden below */
  51                 background-image: @background-image-magnify-ltr;
  52                 /* Don't annoy people who copy-paste everything too much */
  53                 .user-select( none );
  54         }
  55
  56         /* Directionality-specific styles for thumbnails - their positioning depends on content language */
  57         .mw-content-ltr & {
  58                 /* @noflip */
  59                 float: right;
  60
  61                 a {
  62                         /* @noflip */
  63                         background-image: @background-image-magnify-ltr;
  64                 }
  65         }
  66
  67         .mw-content-rtl & {
  68                 /* @noflip */
  69                 float: left;
  70
  71                 a {
  72                         /* @noflip */
  73                         background-image: @background-image-magnify-rtl;
  74                 }
  75         }
  76 }