mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/content/thumbnails.less
Arlo Breault b1d39a5425 Media border option applies to the media element, not the wrapper
Reported in,
https://it.wikipedia.org/w/index.php?title=Wikipedia%3ABar%2FDiscussioni%2FAggiornamento_del_parser_per_le_immagini%3A_vogliamo_testarlo%3F&type=revision&diff=130240855&oldid=130214646

The default styling in core looks like,

.mw-image-border {
	> a:first-child,
	> span:first-child {
		> *:first-child:not( .mw-broken-media ) {
			border: @border-thumbborder-screen;
		}
	}
}

The simplification here recognizes that the border option doesn't apply
to thumbs, so descendent selectors can be dispensed with, there's no
nesting in figcaptions to worry about.  That's important because
lazy-loading adds a noscript before the img tag, which would make the
selectors with first-child not apply anyways.

An img tag is used instead of the universal selector.  That seems like a
safe assumption for now and can be revisited with T314097 / T318433

Bug: T318300
Change-Id: I25f45ee794300d2ba2a38a0ab6e3741a6b1a18f2
2022-11-02 12:34:00 -04:00

77 lines
1.7 KiB
Plaintext

@import 'mediawiki.mixins.less';
@import '../../../minerva.less/minerva.variables.less';
@import '../../../minerva.less/minerva.mixins.less';
// Thumbnails
//
// Thumbnail images should be rendered within a thumb class
//
// Markup:
// <div class="content">
// <div class="thumb"><img src="images/arrow-left.png"></div>
// </div>
.content {
.thumb {
margin: 0.6em 0;
// Linker.php
.thumbinner {
margin: 0 auto;
// !important is needed because of Bug T87198 for example
max-width: 100% !important;
}
}
figcaption,
.thumbcaption {
margin: 0.5em 0 0;
font-size: @font-size-minerva-smallest;
line-height: 1.5;
padding: 0 !important;
color: @grayMediumDark;
}
.thumbcaption {
width: auto !important;
}
figure {
display: table;
margin: 0.6em auto;
}
figcaption {
display: table-caption;
caption-side: bottom;
}
figure[ typeof~='mw:File' ],
figure[ typeof~='mw:File/Frameless' ],
/* TODO(T203211): Remove "Image|Video|Audio" when version 2.4.0 of the
* content is no longer supported
*/
figure[ typeof~='mw:Image' ],
figure[ typeof~='mw:Video' ],
figure[ typeof~='mw:Audio' ],
figure[ typeof~='mw:Image/Frameless' ],
figure[ typeof~='mw:Video/Frameless' ],
figure[ typeof~='mw:Audio/Frameless' ] {
/* Hide the caption for frameless and plain floated images */
> figcaption {
display: none;
}
}
// Parsoid class name is mw-image-border (T198534) and parser (PHP) class name is thumbborder
// However, Parsoid places the class on the wrapper, whereas the legacy parser placed it on the img
.mw-image-border img,
.thumbborder {
border: 1px solid @colorGray12;
}
// Hide the image magnification icon normally displayed in image captions
.magnify {
display: none;
}
}