Template:Infobox/styles.css - Revision history

Kaph: Host town: don't redlink when the town article doesn't exist yet, bold it either way

2026-08-24T10:49:51Z

Host town: don't redlink when the town article doesn't exist yet, bold it either way

Kaph: Adopt Template:Hlist for player-name lists (tournament runners-up, podium members) instead of local hlist markup, and drop the now-unused (and separator-corrupted) loka-hlist CSS from Template:Infobox/styles.css

2026-08-22T22:59:13Z

Adopt Template:Hlist for player-name lists (tournament runners-up, podium members) instead of local hlist markup, and drop the now-unused (and separator-corrupted) loka-hlist CSS from Template:Infobox/styles.css

@@ Line 254: / Line 254: @@
 	align-items: flex-start;
 	gap: .3em;
+}

Kaph: Fix a title icon collapsing to 0px when a headerimage is set -- the header photo's own img rule was leaking onto icons inside the title overlay

2026-08-22T21:02:58Z

Fix a title icon collapsing to 0px when a headerimage is set -- the header photo's own img rule was leaking onto icons inside the title overlay

@@ Line 143: / Line 143: @@
 		rgba(0, 0, 0, .06) 92%,
 		transparent 100%);
+}

Kaph: Slightly more left padding on infobox rows

2026-08-22T20:24:30Z

Slightly more left padding on infobox rows

← Older revision		Revision as of 20:24, 22 August 2026
Line 204:		Line 204:
	the key's full wrapped height regardless of how many lines it takes. */		the key's full wrapped height regardless of how many lines it takes. */
	align-items: center;		align-items: center;
	padding: .35em .6em .35em .~~75em~~;		padding: .35em .6em .35em .9em;
	border-top: 1px solid rgba(255, 255, 255, .08);		border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: .9em;		font-size: .9em;

Kaph: Add a bit more left padding to infobox rows

2026-08-22T20:18:27Z

Add a bit more left padding to infobox rows

← Older revision		Revision as of 20:18, 22 August 2026
Line 204:		Line 204:
	the key's full wrapped height regardless of how many lines it takes. */		the key's full wrapped height regardless of how many lines it takes. */
	align-items: center;		align-items: center;
	padding: .35em .6em;		padding: .35em .6em .35em .75em;
	border-top: 1px solid rgba(255, 255, 255, .08);		border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: .9em;		font-size: .9em;

Kaph: Fix: use the literal middle dot character instead of a mis-escaped CSS unicode sequence

2026-08-22T12:45:54Z

Fix: use the literal middle dot character instead of a mis-escaped CSS unicode sequence

← Older revision		Revision as of 12:45, 22 August 2026
Line 252:		Line 252:
	using hlist on the wiki. */		using hlist on the wiki. */
	.loka-hlist li:not(:last-child)::after {		.loka-hlist li:not(:last-child)::after {
	content: " ~~�b7~~ ";		content: " · ";
	}		}

Kaph: Use a middle dot separator for hlist, matching Wikipedia's own convention

2026-08-22T12:45:18Z

Use a middle dot separator for hlist, matching Wikipedia's own convention

← Older revision		Revision as of 12:45, 22 August 2026
Line 246:		Line 246:
	}		}

			/* Middle dot, not a comma -- matches Wikipedia's own hlist convention.
			Only affects the non-stacked form: loka-hlist--stacked (one item per
			line, e.g. every current use in Infobox tournament) overrides this to
			content:none below, so this change doesn't touch anything already
			using hlist on the wiki. */
	.loka-hlist li:not(:last-child)::after {		.loka-hlist li:not(:last-child)::after {
	content: ", ";		content: " �b7 ";
	}		}

Kaph: Center row values against wrapped keys instead of baseline-aligning

2026-08-22T09:59:10Z

Center row values against wrapped keys instead of baseline-aligning

← Older revision		Revision as of 09:59, 22 August 2026
Line 198:		Line 198:
	.loka-infobox-row {		.loka-infobox-row {
	display: flex;		display: flex;
	align-items: ~~baseline~~;		/* center, not baseline -- baseline aligns the value to the last line
			of a wrapped key (e.g. "CURRENT HOLDERS" wrapping to two lines
			against a short one-line value like "16"), which reads as visibly
			misaligned. Centering keeps the value vertically centred against
			the key's full wrapped height regardless of how many lines it takes. */
			align-items: center;
	padding: .35em .6em;		padding: .35em .6em;
	border-top: 1px solid rgba(255, 255, 255, .08);		border-top: 1px solid rgba(255, 255, 255, .08);

Kaph: Slightly deepen the header photo title's drop shadow

2026-08-19T19:22:28Z

Slightly deepen the header photo title's drop shadow

← Older revision		Revision as of 19:22, 19 August 2026
Line 170:		Line 170:
	color: #ffffff;		color: #ffffff;
	border-bottom: none;		border-bottom: none;
	text-shadow: 0 ~~1px 3px~~ rgba(0, 0, 0, .9);		text-shadow: 0 2px 4px rgba(0, 0, 0, .95);
	}		}

Kaph: Align tournament results and restore full-width section ribbons

2026-08-19T11:12:47Z

Align tournament results and restore full-width section ribbons

← Older revision		Revision as of 11:12, 19 August 2026
Line 67:		Line 67:
	}		}

	/* ~~Plain text~~, ~~not a solid coloured chip~~ -~~- matches~~ the ~~same muted gold~~		/* A quiet, full-width section ribbon. The neutral tint keeps the type label
	~~"eyebrow" treatment used for every other section heading in an infobox~~		visually tied to chronology headings without bringing back the saturated
	~~(loka-tournament-col-heading etc.) instead of standing out as its own~~		brown blocks used by older revisions. */
	~~loud element. Flips to a darker amber in light mode, same as those~~. */
	.loka-infobox-type {		.loka-infobox-type {
	color: #f0cf8e;		color: #f0cf8e;
			background: rgba(255, 255, 255, .045);
	font-weight: 700;		font-weight: 700;
	font-size: .7em;		font-size: .7em;
Line 85:		Line 85:
	.loka-infobox-type {		.loka-infobox-type {
	color: #9c6b2e;		color: #9c6b2e;
			background: rgba(0, 0, 0, .035);
	border-bottom-color: rgba(0, 0, 0, .1);		border-bottom-color: rgba(0, 0, 0, .1);
	}		}
Line 190:		Line 191:
	rounded shape wouldn't make sense on a bar that already meets both		rounded shape wouldn't make sense on a bar that already meets both
	edges of the box. */		edges of the box. */
	background: rgba(8, 8, 8, .56);		background: rgba(8, 10, 12, .58);
	border-bottom: none;		border-bottom: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .9);		text-shadow: 0 1px 3px rgba(0, 0, 0, .9);

← Older revision		Revision as of 10:49, 24 August 2026
Line 6:		Line 6:
	/* Opaque, not translucent, for the same reason as before (a translucent		/* Opaque, not translucent, for the same reason as before (a translucent
	overlay only ever looked right against this wiki's own dark page		overlay only ever looked right against this wiki's own dark page
	background, and washed out on light mode) -- but now a genuinely		background, and washed out on light mode) — but now a genuinely
	neutral charcoal (equal R/G/B) rather than the previous warm		neutral charcoal (equal R/G/B) rather than the previous warm
	brown-tinted near-black, since that read as muddy/dirty rather than		brown-tinted near-black, since that read as muddy/dirty rather than
Line 22:		Line 22:
	/* Whatever ends the box (a chrono grid row, a location panel, a links		/* Whatever ends the box (a chrono grid row, a location panel, a links
	row) otherwise supplies only its own small internal padding, which		row) otherwise supplies only its own small internal padding, which
	reads as too tight against the box's own bottom edge -- this adds a		reads as too tight against the box's own bottom edge — this adds a
	bit of dedicated breathing room after it, on every infobox type. */		bit of dedicated breathing room after it, on every infobox type. */
	padding-bottom: .6em;		padding-bottom: .6em;
Line 43:		Line 43:
	either overflows the viewport or squeezes body text into an unreadably		either overflows the viewport or squeezes body text into an unreadably
	narrow column, so every infobox drops the float and goes full-width		narrow column, so every infobox drops the float and goes full-width
	instead -- applies wiki-wide since this is the shared shell every		instead — applies wiki-wide since this is the shared shell every
	specific infobox is built on. */		specific infobox is built on. */
	@media (max-width: 600px) {		@media (max-width: 600px) {
Line 115:		Line 115:
	/* Previous attempts used a second overlay div and tried to hand-tune its		/* Previous attempts used a second overlay div and tried to hand-tune its
	alpha to approximately match the box's own background colour by eye		alpha to approximately match the box's own background colour by eye
	-- fragile, and it kept reading as a hard cut regardless of the exact		— fragile, and it kept reading as a hard cut regardless of the exact
	numbers used. This instead fades the photo's OWN opacity to nothing		numbers used. This instead fades the photo's OWN opacity to nothing
	via a mask, so what's revealed underneath as it disappears is		via a mask, so what's revealed underneath as it disappears is
Line 121:		Line 121:
	guaranteed to match exactly since nothing is being approximated. */		guaranteed to match exactly since nothing is being approximated. */
	/* A straight two-stop fade (opaque to transparent in one even ramp)		/* A straight two-stop fade (opaque to transparent in one even ramp)
	reads as an abrupt cutoff to the eye -- most of its visible change		reads as an abrupt cutoff to the eye — most of its visible change
	happens in the upper, still-fairly-opaque half, then the faint tail		happens in the upper, still-fairly-opaque half, then the faint tail
	lingers and still looks like it stops short. These extra stops		lingers and still looks like it stops short. These extra stops
Line 146:		Line 146:

	/* .loka-infobox-header-photo img (above) is a broad descendant selector		/* .loka-infobox-header-photo img (above) is a broad descendant selector
	meant only for the actual backdrop photo -- but the header's own title		meant only for the actual backdrop photo — but the header's own title
	text (loka-infobox-header-text, below) sits INSIDE .loka-infobox-header-photo		text (loka-infobox-header-text, below) sits INSIDE .loka-infobox-header-photo
	too, as an overlay, so any <img> a specific infobox puts in its own		too, as an overlay, so any <img> a specific infobox puts in its own
	title (e.g. Infobox world's titleicon) is ALSO a descendant and was		title (e.g. Infobox world's titleicon) is ALSO a descendant and was
	silently inheriting position:absolute; inset:0; width/height:100% from		silently inheriting position:absolute; inset:0; width/height:100% from
	it -- collapsing that icon to nothing visible (confirmed live on [[The		it — collapsing that icon to nothing visible (confirmed live on [[The
	End]]: the shield rendered at 0px width, sized to the whole 150px-tall		End]]: the shield rendered at 0px width, sized to the whole 150px-tall
	photo band instead of its own small inline size). Same specificity as		photo band instead of its own small inline size). Same specificity as
Line 169:		Line 169:
	position: absolute;		position: absolute;
	inset: 0;		inset: 0;
	/* Only handles darkening the top for the name/type text now -- the		/* Only handles darkening the top for the name/type text now — the
	bottom fade is the image's own mask (above), not this. */		bottom fade is the image's own mask (above), not this. */
	background: linear-gradient(to bottom,		background: linear-gradient(to bottom,
Line 185:		Line 185:
	/* Explicit, not inherited: this text always sits on the header photo's		/* Explicit, not inherited: this text always sits on the header photo's
	own permanent dark scrim (see loka-infobox-header-scrim), regardless		own permanent dark scrim (see loka-infobox-header-scrim), regardless
	of the page's own light/dark theme, so it must always be light --		of the page's own light/dark theme, so it must always be light —
	otherwise it silently inherits .loka-infobox's theme-adaptive colour		otherwise it silently inherits .loka-infobox's theme-adaptive colour
	and goes dark-on-dark in light mode (a real, previously-unnoticed		and goes dark-on-dark in light mode (a real, previously-unnoticed
Line 197:		Line 197:
	/* Sitting on top of an arbitrary photo needs some kind of scrim behind		/* Sitting on top of an arbitrary photo needs some kind of scrim behind
	it to stay legible regardless of what's in the image, so this one		it to stay legible regardless of what's in the image, so this one
	keeps a background chip unlike the plain-text version above -- but a		keeps a background chip unlike the plain-text version above — but a
	neutral dark tint (matching the header photo's own scrim) rather		neutral dark tint (matching the header photo's own scrim) rather
	than a saturated brown patch. Always dark regardless of page theme,		than a saturated brown patch. Always dark regardless of page theme,
Line 205:		Line 205:
	as the same kind of text rather than a one-off exception.		as the same kind of text rather than a one-off exception.
	A full-width backdrop (the plain block-level default, same as the		A full-width backdrop (the plain block-level default, same as the
	base rule) rather than a tight pill -- a small badge floating over		base rule) rather than a tight pill — a small badge floating over
	an arbitrary photo can end up sitting on a patch that doesn't give		an arbitrary photo can end up sitting on a patch that doesn't give
	it enough contrast on one side or the other; spanning edge to edge		it enough contrast on one side or the other; spanning edge to edge
Line 219:		Line 219:
	.loka-infobox-row {		.loka-infobox-row {
	display: flex;		display: flex;
	/* center, not baseline -- baseline aligns the value to the last line		/* center, not baseline — baseline aligns the value to the last line
	of a wrapped key (e.g. "CURRENT HOLDERS" wrapping to two lines		of a wrapped key (e.g. "CURRENT HOLDERS" wrapping to two lines
	against a short one-line value like "16"), which reads as visibly		against a short one-line value like "16"), which reads as visibly
Line 258:		Line 258:
	/* A faint white hairline (8% opacity) reads fine as a subtle divider on		/* A faint white hairline (8% opacity) reads fine as a subtle divider on
	this wiki's own dark page background, but is nearly invisible against		this wiki's own dark page background, but is nearly invisible against
	a light one -- flipped to an equally faint dark line instead so every		a light one — flipped to an equally faint dark line instead so every
	infobox keeps its internal row/section dividers in both themes. */		infobox keeps its internal row/section dividers in both themes. */
	@media (prefers-color-scheme: light) {		@media (prefers-color-scheme: light) {