mediawiki-skins-Citizen/resources/skins.citizen.styles/skinning/content.thumbnails-common.less
alistair3149 5d3ecd9edd
feat(core): convert some CSS variables into Codex equivalent
This is an on-going work to adapt Codex into Citizen.
Some of the CSS variables are soft depreciated, see tokens.less for updated info.
2024-06-30 01:04:30 -04:00

77 lines
1.3 KiB
Plaintext

/*
* Citizen
*
* Module: mediawiki.skinning.content.thumbnails-common
* Version: REL1_39
*
* Date: 2023-07-23
*/
/* @noflip */
div.floatleft,
table.floatleft,
div.floatright,
table.floatright {
margin: 0;
}
/* @noflip */
div.tleft,
div.tright {
margin: var( --space-xs ) 0 var( --space-md ) 0;
}
.thumbcaption {
// Sync with rounded corner
padding-right: var( --border-radius--small );
// Sync with rounded corner
padding-left: var( --border-radius--small );
margin-top: var( --space-xs );
color: var( --color-subtle );
text-align: center;
letter-spacing: 0.025em;
}
div.thumbinner {
// Avoid overflow
max-width: 100%;
margin-right: auto;
// Center thumbnail without float
margin-left: auto;
/* new block formatting context,
* to clear background from floating content */
overflow: hidden;
// We use the same font size for both caption and inner
font-size: var( --font-size-x-small );
text-align: center;
> a {
overflow-wrap: break-word;
}
}
// Do not float content in mobile view
@media ( min-width: @min-width-breakpoint-tablet ) {
/* @noflip */
div.tright,
div.floatright,
table.floatright {
float: right;
margin-left: var( --space-lg );
clear: right;
}
/* @noflip */
div.tleft,
div.floatleft,
table.floatleft {
float: left;
margin-right: var( --space-lg );
clear: left;
}
.thumbcaption {
text-align: start;
}
}