mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-12-19 09:11:05 +00:00
6f98cc6460
Remove direct usage of CSS variables in Minerva, and replace them with codex design tokens again. Document this decision in the original ADR Note: there are still a small number of CSS variables in use, including most notably the --color-link-red fix, which broke when I removed it, but this change takes care of all the ones that could be easily replaced Bug: T363743 Change-Id: I7d3a9dceb908167078987de1733774c8bd4bea2f
64 lines
1.4 KiB
Plaintext
64 lines
1.4 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;
|
|
}
|
|
}
|
|
|
|
.thumbcaption {
|
|
width: auto !important;
|
|
}
|
|
|
|
.thumbcaption,
|
|
figure[ typeof~='mw:File/Thumb' ] > figcaption,
|
|
figure[ typeof~='mw:File/Frame' ] > figcaption {
|
|
margin: 0.5em 0 0;
|
|
font-size: @font-size-minerva-smallest;
|
|
line-height: 1.5;
|
|
padding: 0 !important;
|
|
color: @color-subtle;
|
|
}
|
|
|
|
figure[ typeof~='mw:File/Thumb' ],
|
|
figure[ typeof~='mw:File/Frame' ] {
|
|
margin: 0.6em auto;
|
|
display: table;
|
|
border-collapse: collapse;
|
|
|
|
> figcaption {
|
|
display: table-caption;
|
|
caption-side: bottom;
|
|
}
|
|
}
|
|
|
|
// 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 file element.
|
|
.mw-image-border .mw-file-element,
|
|
.thumbborder {
|
|
border: @border-subtle;
|
|
}
|
|
|
|
// Hide the image magnification icon normally displayed in image captions
|
|
.magnify {
|
|
display: none;
|
|
}
|
|
}
|