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

   1 /* stylelint-disable selector-class-pattern */
   2 @import 'mediawiki.mixins.less';
   3 @import 'mediawiki.skin.variables.less';
   4 @import 'content.variables.less';
   5
   6 @margin-horizontal-image: 3px;
   7 @border-width-image: 1px;
   8
   9 figure[ typeof~='mw:File/Thumb' ],
  10 figure[ typeof~='mw:File/Frame' ] {
  11         border: @border-subtle;
  12         border-bottom: 0;  // No border to figcaption
  13         background-color: @background-color-interactive-subtle;
  14
  15         > :not( figcaption ) .mw-file-element {
  16                 border: @border-subtle;
  17         }
  18
  19         > figcaption {
  20                 border: @border-subtle;
  21                 border-top: 0;
  22                 background-color: @background-color-interactive-subtle;
  23
  24                 /* In mw-core the font-size is duplicated, 94% in thumbinner
  25                  * and again 94% in thumbcaption. 88.4% for font size of the
  26                  * caption results in the same behavior. */
  27                 font-size: 88.4%;  // @font-size-thumbinner-screen * @font-size-thumbcaption-screen
  28         }
  29 }
  30
  31 .mw-image-border .mw-file-element {
  32         border: @border-width-base @border-style-base #eaecf0;
  33 }
  34
  35 figure[ typeof~='mw:File/Thumb' ] {
  36         > figcaption::before {
  37                 content: '';
  38                 width: 15px;
  39                 height: 11px;
  40                 margin: 0;
  41                 .margin-inline( @margin-horizontal-image, 0 );
  42
  43                 // Default where page content language is not set
  44                 // Allow to flip
  45                 float: right;
  46
  47                 // Defaults for page content language
  48
  49                 .mw-content-ltr & {
  50                         /* @noflip */
  51                         float: right;
  52                 }
  53
  54                 .mw-content-rtl & {
  55                         /* @noflip */
  56                         float: left;
  57                 }
  58
  59                 body.skin--responsive & {
  60                         /** Disable magnifying glass at lower resolutions */
  61                         @media all and ( max-width: @max-width-breakpoint-mobile ) {
  62                                 content: none;
  63                         }
  64                 }
  65         }
  66
  67         > .mw-file-description,
  68         > .mw-file-magnify {
  69                 display: block;
  70                 position: relative;
  71
  72                 &::after {
  73                         content: '';
  74                         width: 15px;
  75                         height: 11px;
  76                         position: absolute;
  77                         bottom: -11px;
  78
  79                         // Default where page content language is not set
  80                         // Allow to flip
  81                         right: 6px;
  82                         background-image: @background-image-magnify-ltr;
  83
  84                         // Defaults for page content language
  85
  86                         .mw-content-ltr & {
  87                                 /* @noflip */
  88                                 right: 6px;
  89                                 /* @noflip */
  90                                 left: auto;
  91                                 /* @noflip */
  92                                 background-image: @background-image-magnify-ltr;
  93                         }
  94
  95                         .mw-content-rtl & {
  96                                 /* @noflip */
  97                                 right: auto;
  98                                 /* @noflip */
  99                                 left: 6px;
 100                                 /* @noflip */
 101                                 background-image: @background-image-magnify-rtl;
 102                         }
 103
 104                         /** Disable magnifying glass at lower resolutions to maximize space for caption. */
 105                         @media all and ( max-width: @max-width-breakpoint-mobile ) {
 106                                 /* stylelint-disable-next-line declaration-no-important */
 107                                 background-image: none !important;
 108                         }
 109                 }
 110         }
 111 }
 112
 113 /**
 114  * RESPONSIVE IMAGES FOR RESPONSIVE SKINS (T113101 and T367463)
 115  * Note we restrict to img's to avoid conflicts with VisualEditor shields.
 116  * Note this currently doesn't apply to frameless images (tracked in T367831) and
 117  * does not currently apply to responsive images in MobileFrontend.
 118  */
 119 body.skin--responsive .mw-parser-output {
 120         // Only block images should be responsive to prevent 0 sizing in tables
 121         // Inline images do not use figure. We do not target audio and video or other content
 122         // We target .mw-file-element, as there can be img inside captions...
 123         figure img.mw-file-element {
 124                 // Note height auto is required and only applied to images.
 125                 height: auto;
 126                 // make sure that images in articles don't cause a horizontal scrollbar
 127                 // on small screens.
 128                 max-width: @size-full;
 129         }
 130
 131         // Note: If the image is a thumbnail, max-width also needs to take into account margin and border.
 132         figure[ typeof~='mw:File/Thumb' ] img.mw-file-element,
 133         figure[ typeof~='mw:File/Frame' ] img.mw-file-element {
 134                 max-width: calc( @size-full - ( 2 * @margin-horizontal-image ) - ( 2 * @border-width-image ) );
 135         }
 136
 137         /**
 138          * When the noresize class is used e.g. on a panorama or image map
 139          * with clickable regions (T22030), do not subject the image to a max-width rule.
 140          *
 141          * [[File:example.jpg|thumb|class=noresize]] and imagemap extension put the class on figure itself (T368034)
 142          */
 143         .noresize figure,
 144         figure.noresize {
 145                 img.mw-file-element {
 146                         max-width: none;
 147                 }
 148         }
 149 }