Jump to content
Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:Infobox world/styles.css

Template page
Revision as of 21:22, 22 August 2026 by Kaph (talk | contribs) (Re-tune title icon vertical alignment for the enlarged size)
.loka-world-title-with-icon {
	/* Genuinely inline, not inline-flex -- the icon is meant to read as
	   part of the title's own text flow (like a leading emoji), not a
	   separately laid-out box beside it. */
	display: inline;
	white-space: nowrap;
}

.loka-world-titleicon {
	margin-right: .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 --
   same reasoning as Infobox rank's own titleicon. Selector includes the
   wrapper (not just ".loka-world-titleicon img") so this outranks the
   shared Template:Infobox/styles.css reset for images inside the header
   photo's text overlay (".loka-infobox-header-text img", width/height:
   auto -- needed there to un-break the icon going invisible when a
   headerimage is set, see that rule's own comment) -- confirmed live: at
   equal specificity the two tied and the later-loaded shared rule was
   winning, silently keeping the icon at its native 14px regardless of
   this value. */
.loka-world-title-with-icon .loka-world-titleicon img {
	width: 1.6em;
	height: 1.6em;
}

/* The img itself is display:block (Template:Icon's own .loka-icon--bare
   img rule), so vertical-align on IT is inert -- .loka-icon--bare (the
   span actually wrapping it) is the inline element vertical-align needs
   to target instead. Its own base rule ships -2.5px, tuned for ordinary
   ~16px body text at the icon's native ~16px size; neither the title's
   larger font-size nor (since the icon was scaled up to 1.6em to match
   it) the icon's own larger size match that original context, so the
   right offset had to be re-measured for real rather than guessed. Live
   against "Aladra"'s own title text at the enlarged 1.6em icon size:
   -9px is what actually centres it, not -2.5px (and not the 0px this
   measured to before the icon was enlarged -- re-measure again if the
   icon's own size ever changes, this isn't a fixed constant). */
.loka-world-titleicon .loka-icon--bare {
	vertical-align: -9px;
}