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

   1 /* stylelint-disable selector-class-pattern */
   2 @import 'mediawiki.skin.variables.less';
   3 @import 'content.variables.less';
   4
   5 /**
   6  * Block media items
   7  */
   8
   9 figure[ typeof~='mw:File' ],
  10 figure[ typeof~='mw:File/Frameless' ] {
  11         > a {
  12                 // The addition of the class is needed for higher specificity
  13                 // than Vector's print styles
  14                 .mw-body-content & {
  15                         border: 0;
  16                 }
  17         }
  18
  19         &.mw-halign-right {
  20                 /* @noflip */
  21                 margin: @margin-floatright;
  22                 /* @noflip */
  23                 clear: right;
  24                 /* @noflip */
  25                 float: right;
  26         }
  27
  28         &.mw-halign-left {
  29                 /* @noflip */
  30                 margin: @margin-floatleft;
  31                 /* @noflip */
  32                 clear: left;
  33                 /* @noflip */
  34                 float: left;
  35         }
  36
  37         &.mw-halign-none {
  38                 clear: none;
  39                 float: none;
  40         }
  41
  42         &.mw-halign-center {
  43                 /* Matches *.center * in element.css */
  44                 margin: 0 auto;
  45                 display: table;
  46                 border-collapse: collapse;
  47                 clear: none;
  48                 float: none;
  49         }
  50
  51         /* Hide the caption for frameless and plain floated images */
  52         > figcaption {
  53                 display: none;
  54         }
  55 }
  56
  57 figure[ typeof~='mw:File/Thumb' ],
  58 figure[ typeof~='mw:File/Frame' ] {
  59         display: table;
  60         text-align: center;
  61         border-collapse: collapse;
  62         line-height: 0;
  63
  64         > a {
  65                 // The addition of the class is needed for higher specificity
  66                 // than Vector's print styles
  67                 .mw-body-content & {
  68                         border: 0;
  69                 }
  70         }
  71
  72         // Default where page content language is not set
  73         // Allow to flip
  74         margin: @margin-tright;
  75         clear: right;
  76         float: right;
  77
  78         // Defaults for page content language
  79
  80         .mw-content-ltr & {
  81                 /* @noflip */
  82                 margin: @margin-tright;
  83                 /* @noflip */
  84                 clear: right;
  85                 /* @noflip */
  86                 float: right;
  87         }
  88
  89         .mw-content-rtl & {
  90                 /* @noflip */
  91                 margin: @margin-tleft;
  92                 /* @noflip */
  93                 clear: left;
  94                 /* @noflip */
  95                 float: left;
  96         }
  97
  98         // Override defaults when explicitly set
  99         // Order of application is important, so don't combine with the defaults
 100
 101         &.mw-halign-right {
 102                 /* @noflip */
 103                 margin: @margin-tright;
 104                 /* @noflip */
 105                 clear: right;
 106                 /* @noflip */
 107                 float: right;
 108         }
 109
 110         &.mw-halign-left {
 111                 /* @noflip */
 112                 margin: @margin-tleft;
 113                 /* @noflip */
 114                 clear: left;
 115                 /* @noflip */
 116                 float: left;
 117         }
 118
 119         &.mw-halign-none {
 120                 /* Override the default margin from mw-content-xxx above */
 121                 margin: 0;
 122                 margin-bottom: @margin-bottom-thumb;
 123                 clear: none;
 124                 float: none;
 125         }
 126
 127         &.mw-halign-center {
 128                 /* Override the default margin from mw-content-xxx above
 129                  * And, matches *.center * in element.css
 130                  */
 131                 margin: 0 auto @margin-bottom-thumb auto;
 132                 clear: none;
 133                 float: none;
 134         }
 135
 136         > :not( figcaption ) {
 137                 .mw-file-element {
 138                         margin: 3px;
 139                 }
 140
 141                 /**
 142                  * Broken media get a span instead.
 143                  */
 144                 .mw-broken-media {
 145                         display: inline-block;
 146                         line-height: 1.6em;
 147                         word-break: break-word;  // Same as in the figcaption
 148                         /* This is hardcoded in Linker::makeThumbLink2 for broken media */
 149                         width: 180px;
 150                         /* Styles the text of broken media */
 151                         font-size: @font-size-thumbinner-screen;
 152                 }
 153         }
 154
 155         > figcaption {
 156                 display: table-caption;
 157                 caption-side: bottom;
 158                 line-height: @line-height-thumbcaption;
 159
 160                 /**
 161                  * The "break-word" value is deprecated, however, it's well supported
 162                  * at 94.73%
 163                  * https://caniuse.com/mdn-css_properties_word-break_break-word
 164                  *
 165                  * The spec suggests it has the same effect as,
 166                  *
 167                  *   word-break: normal;
 168                  *   overflow-wrap: anywhere;
 169                  *
 170                  * https://drafts.csswg.org/css-text-3/#word-break-property
 171                  *
 172                  * So, we should use that.  However, support for "anywhere" is lagging
 173                  * at just 72.39%, with Safari being a notable miss.
 174                  * https://caniuse.com/mdn-css_properties_overflow-wrap_anywhere
 175                  *
 176                  * "Soft wrap opportunities introduced by the word break are considered
 177                  * when calculating min-content intrinsic sizes."
 178                  * From https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
 179                  */
 180                 word-break: break-word;
 181                 text-align: start;
 182
 183                 /* taken from .thumbcaption, plus .thumbinner */
 184                 padding: 0 6px 6px 6px;
 185         }
 186 }
 187
 188 /**
 189  * Disable floating on mobile devices and automatically center on the page.
 190  * This overrides any inline styles in the process.
 191  */
 192 figure {
 193         body.skin--responsive & {
 194                 @media all and ( max-width: @max-width-breakpoint-mobile ) {
 195                         /* stylelint-disable-next-line declaration-no-important */
 196                         margin: 0 auto !important;
 197                         /* stylelint-disable-next-line declaration-no-important */
 198                         float: none !important;
 199                 }
 200         }
 201 }
 202
 203 figcaption:empty {
 204         // Remove bogus padding from framed images without captions
 205         figure[ typeof~='mw:File/Frame' ] > & {
 206                 padding-bottom: 0;
 207         }
 208
 209         // However, it's still necessary for thumbs because the magnifying icon is present
 210         figure[ typeof~='mw:File/Thumb' ] > & {
 211                 padding-bottom: 3px;
 212         }
 213 }
 214
 215 /**
 216  * Inline media items
 217  */
 218 .mw-file-element {
 219         .mw-valign-middle & {
 220                 vertical-align: middle;
 221         }
 222
 223         .mw-valign-baseline & {
 224                 vertical-align: baseline;
 225         }
 226
 227         .mw-valign-sub & {
 228                 vertical-align: sub;
 229         }
 230
 231         .mw-valign-super & {
 232                 vertical-align: super;
 233         }
 234
 235         .mw-valign-top & {
 236                 vertical-align: top;
 237         }
 238
 239         .mw-valign-text-top & {
 240                 vertical-align: text-top;
 241         }
 242
 243         .mw-valign-bottom & {
 244                 vertical-align: bottom;
 245         }
 246
 247         .mw-valign-text-bottom & {
 248                 vertical-align: text-bottom;
 249         }
 250 }