Template:Infobox rank/styles.css: Difference between revisions
Template page
More actions
m Enlarge title icon and widen gap from title text |
m Wrap title+icon in its own span (no :has() support) so it can nowrap and shrink together |
||
| Line 1: | Line 1: | ||
.loka-rank-title-with-icon { | |||
display: inline-block; | |||
white-space: nowrap; | |||
font-size: .84em; | |||
} | |||
.loka-rank-titleicon { | .loka-rank-titleicon { | ||
display: inline | display: inline; | ||
margin-left: . | margin-left: .35em; | ||
} | } | ||
/* Sized in em, not a fixed px, so it scales together with the title text | |||
like a character rather than a separately-sized graphic next to it. */ | |||
.loka-rank-titleicon img { | .loka-rank-titleicon img { | ||
width: | width: 1.3em; | ||
height: | height: 1.3em; | ||
vertical-align: -.25em; | |||
} | } | ||
Revision as of 10:08, 22 August 2026
.loka-rank-title-with-icon {
display: inline-block;
white-space: nowrap;
font-size: .84em;
}
.loka-rank-titleicon {
display: inline;
margin-left: .35em;
}
/* Sized in em, not a fixed px, so it scales together with the title text
like a character rather than a separately-sized graphic next to it. */
.loka-rank-titleicon img {
width: 1.3em;
height: 1.3em;
vertical-align: -.25em;
}
.loka-rank-staff--yes {
color: #54FC54;
}
.loka-rank-staff--no {
color: #FC5454;
}
.loka-rank-active--active {
color: #54FC54;
}
.loka-rank-active--deprecated {
color: #FC5454;
}
/* Same green/red pairing (and the same reasoning) as Template:Infobox
website's status badge -- these neon shades read clearly against a dark
infobox but wash out on a light one, so light mode gets darker,
equally-distinct equivalents rather than picking new colours. */
@media (prefers-color-scheme: light) {
.loka-rank-staff--yes,
.loka-rank-active--active {
color: #2E7D32;
}
.loka-rank-staff--no,
.loka-rank-active--deprecated {
color: #C62828;
}
}