Template:Infobox rank/styles.css: Difference between revisions

Revision as of 10:15, 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;
}

/* For a "Current Holders" section's own list -- lives here (not a
   standalone template) since it's only ever used on a rank article
   alongside this infobox, the same reason .loka-rank-titleicon does.
   auto-fill/minmax rather than a fixed column count so it still looks
   right whether a roster has 2 names (Old One) or 16 (Guardian). */
.loka-holders-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: .3em 1em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.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;
	}
}