Merge "Make figure styling more specific to thumbs"

This commit is contained in:
jenkins-bot 2023-02-07 15:32:39 +00:00 committed by Gerrit Code Review
commit b35c9fb81a
4 changed files with 79 additions and 52 deletions

View file

@ -17,6 +17,9 @@
@import '../../../minerva.less/minerva.variables.less';
@import '../../../minerva.less/minerva.mixins.less';
@margin-floatright: 0 0 0.6em 0.6em;
@margin-floatleft: 0 0.6em 0.6em 0;
.content {
img {
// Matches commonElements.css
@ -30,7 +33,7 @@
/* @noflip */
float: right;
/* @noflip */
margin: 0 0 0.6em 0.6em;
margin: @margin-floatright;
}
// Applied to divs containing aligned, full-size images
@ -40,7 +43,7 @@
/* @noflip */
float: left;
/* @noflip */
margin: 0 0.6em 0.6em 0;
margin: @margin-floatleft;
}
// Prevent inline styles on images in wikitext
@ -67,4 +70,44 @@
max-width: none !important;
}
}
figure[ typeof~='mw:File' ],
figure[ typeof~='mw:File/Frameless' ] {
display: table;
border-collapse: collapse;
&.mw-halign-right {
/* @noflip */
margin: @margin-floatright;
/* @noflip */
clear: right;
/* @noflip */
float: right;
}
&.mw-halign-left {
/* @noflip */
margin: @margin-floatleft;
/* @noflip */
clear: left;
/* @noflip */
float: left;
}
&.mw-halign-none {
clear: none;
float: none;
}
&.mw-halign-center {
margin: 0 auto;
clear: none;
float: none;
}
> figcaption {
// Hide the caption for frameless and plain floated images
display: none;
}
}
}

View file

@ -26,26 +26,29 @@ A file for css that optimises the Minerva skin on larger devices.
// Defaults for page content language
// These will be overriden below when explicit classes are set
.mw-content-ltr figure {
/* @noflip */
float: right;
/* @noflip */
clear: right;
/* @noflip */
margin-left: 1.4em;
/* @noflip */
margin-right: 0;
}
figure[ typeof~='mw:File/Thumb' ],
figure[ typeof~='mw:File/Frame' ] {
.mw-content-ltr & {
/* @noflip */
float: right;
/* @noflip */
clear: right;
/* @noflip */
margin-left: 1.4em;
/* @noflip */
margin-right: 0;
}
.mw-content-rtl figure {
/* @noflip */
float: left;
/* @noflip */
clear: left;
/* @noflip */
margin-left: 0;
/* @noflip */
margin-right: 1.4em;
.mw-content-rtl & {
/* @noflip */
float: left;
/* @noflip */
clear: left;
/* @noflip */
margin-left: 0;
/* @noflip */
margin-right: 1.4em;
}
}
.content {
@ -57,10 +60,7 @@ A file for css that optimises the Minerva skin on larger devices.
figure[ typeof~='mw:File/Frame' ],
.thumb {
max-width: @width-breakpoint-tablet - @contentMargin;
}
figure,
.thumb {
&.mw-halign-left,
&.tleft {
/* @noflip */

View file

@ -22,8 +22,13 @@
}
}
figcaption,
.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;
@ -31,25 +36,15 @@
color: @grayMediumDark;
}
.thumbcaption {
width: auto !important;
}
figure {
display: table;
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;
}
figure[ typeof~='mw:File' ],
figure[ typeof~='mw:File/Frameless' ] {
/* Hide the caption for frameless and plain floated images */
> figcaption {
display: none;
display: table-caption;
caption-side: bottom;
}
}

View file

@ -16,14 +16,3 @@
counter-increment: mw-numbered-ext-link;
}
}
/**
* Block media items
* (mostly derived from MediaWiki's content.media-common.less)
*/
figure[ typeof~='mw:File/Thumb' ],
figure[ typeof~='mw:File/Frame' ] {
max-width: 100%;
// Centered on non-tablet
margin: 0 auto;
}