Template:Infobox rank/styles.css

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