mediawiki-skins-Citizen/resources/skins.citizen.styles/skinning/content.media-common.less

170 lines
3 KiB
Plaintext

/*
* Citizen
*
* Module: mediawiki.skinning.content.media-common
* Version: REL1_39
*
* Date: 2023-07-23
*/
/**
* Block media items
*/
figure[ typeof~='mw:File' ],
figure[ typeof~='mw:File/Frameless' ],
figure[ typeof~='mw:File/Thumb' ],
figure[ typeof~='mw:File/Frame' ] {
&.mw-halign-none {
float: none;
clear: none;
}
&.mw-halign-center {
margin-inline: auto;
text-align: center;
}
}
figure[ typeof~='mw:File' ],
figure[ typeof~='mw:File/Frameless' ] {
/* Hide the caption for frameless and plain floated images */
> figcaption {
display: none;
}
}
figure[ typeof~='mw:File/Thumb' ],
figure[ typeof~='mw:File/Frame' ] {
display: table;
margin: var( --space-xs ) auto var( --space-md ) auto;
font-size: var( --font-size-x-small );
text-align: center;
> a:first-child,
> span:first-child {
/**
* Broken media get a span instead.
*/
span.mw-broken-media {
display: inline-block;
/* This is hardcoded in Linker::makeThumbLink2 for broken media */
width: 180px;
overflow-wrap: break-word;
}
}
> figcaption {
display: table-caption;
// Sync with rounded corner
padding-right: var( --border-radius-base );
// Sync with rounded corner
padding-left: var( --border-radius-base );
color: var( --color-subtle );
letter-spacing: 0.025em;
caption-side: bottom;
&:not( :empty ) {
margin-top: var( --space-xs );
}
}
}
/**
* Inline media items
* img is needed for 1.39 compat, change to .mw-file-element later
*/
.mw-valign-middle img {
vertical-align: middle;
}
.mw-valign-baseline img {
vertical-align: baseline;
}
.mw-valign-sub img {
vertical-align: sub;
}
.mw-valign-super img {
vertical-align: super;
}
.mw-valign-top img {
vertical-align: top;
}
.mw-valign-text-top img {
vertical-align: text-top;
}
.mw-valign-bottom img {
vertical-align: bottom;
}
.mw-valign-text-bottom img {
vertical-align: text-bottom;
}
// Do not float content in mobile view
@media ( min-width: @min-width-breakpoint-tablet ) {
figure[ typeof~='mw:File/Thumb' ],
figure[ typeof~='mw:File/Frame' ] {
> figcaption {
text-align: start;
}
// When float is not explicitly set
.mw-content-ltr & {
/* @noflip */
float: right;
/* @noflip */
margin-left: var( --space-lg );
/* @noflip */
clear: right;
}
.mw-content-rtl & {
/* @noflip */
float: left;
/* @noflip */
margin-right: var( --space-lg );
/* @noflip */
clear: left;
}
}
figure[ typeof~='mw:File' ],
figure[ typeof~='mw:File/Frameless' ],
figure[ typeof~='mw:File/Thumb' ],
figure[ typeof~='mw:File/Frame' ] {
&.mw-halign-right {
/* @noflip */
float: right;
/* @noflip */
margin-right: 0;
/* @noflip */
margin-left: var( --space-lg );
/* @noflip */
clear: right;
}
&.mw-halign-left {
/* @noflip */
float: left;
/* @noflip */
margin-right: var( --space-lg );
/* @noflip */
margin-left: 0;
/* @noflip */
clear: left;
}
&.mw-halign-center {
float: none;
margin-inline: auto;
clear: both;
text-align: center;
}
}
}