mediawiki-skins-Citizen/resources/skins.citizen.styles/skinning/content.thumbnails-common.less
alistair3149 00b2495c1a
feat(core): use px for border-radius
- Move border radius calculation to CSS variable instead of LESS
- Rename CSS variable according to Codex, soft-deprecating the existing border radius
2024-07-05 13:24:31 -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-base );
// Sync with rounded corner
padding-left: var( --border-radius-base );
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;
}
}