Template:Icon/styles.css - Revision history

Kaph: Update stale page-name reference in dev comment after Account Transfers -> Account Transfer move

2026-08-24T13:37:14Z

Update stale page-name reference in dev comment after Account Transfers -> Account Transfer move

← Older revision		Revision as of 13:37, 24 August 2026
Line 75:		Line 75:
	side, confirmed live as a visibly lopsided icon — tight against the		side, confirmed live as a visibly lopsided icon — tight against the
	word before it, loose against the word after — report matched a		word before it, loose against the word after — report matched a
	real heading on [[Account ~~Transfers~~]]. pill-only and link-only icons		real heading on [[Account Transfer]]. pill-only and link-only icons
	(see their own rules below) DO still need a margin here: their own		(see their own rules below) DO still need a margin here: their own
	bundled label sits directly adjacent with no space of its own (the		bundled label sits directly adjacent with no space of its own (the

Kaph: Reword comments to avoid a literal File:... placeholder -- MediaWiki was registering it as a real (nonexistent) file link, populating Special:WantedFiles with a bogus 'File:...' entry

2026-08-24T01:43:55Z

Reword comments to avoid a literal File:... placeholder -- MediaWiki was registering it as a real (nonexistent) file link, populating Special:WantedFiles with a bogus 'File:...' entry

Kaph: Fix lopsided spacing around a bare inline icon -- margin-right was stacking on top of the editor's own natural wikitext spacing on the right side only, confirmed on Account Transfers' Full Transfer heading

2026-08-23T12:14:44Z

Fix lopsided spacing around a bare inline icon -- margin-right was stacking on top of the editor's own natural wikitext spacing on the right side only, confirmed on Account Transfers' Full Transfer heading

← Older revision		Revision as of 12:14, 23 August 2026
Line 67:		Line 67:
	}		}

	/* ~~Breathing room between~~ the icon ~~graphic and whatever sits~~ right ~~after it~~		/* No margin-right here (unlike an earlier version of this rule) -- a
	-- the ~~editor's own following~~ word ~~for~~ a ~~bare icon~~ (a ~~linked icon's~~ own		BARE icon (the default rendering, meant to sit inline in an editor's
	~~rules below zero this back out;~~ its ~~gap is anchor padding instead~~, ~~not~~		own prose) is always surrounded by whatever spacing the editor
	~~img margin)~~. filter:drop-shadow (not box-shadow) follows the icon		already typed around the {icon\|...} call, e.g. "500 {icon\|orb\|web}
	artwork's own alpha shape rather than its square bounding box, so the		Orbs" already has a real space on both sides in the wikitext. Adding
	shadow reads as the icon's own and stays inside the pill's padding		margin-right on top of that stacked an extra gap onto just the right
	rather than spilling past its edge, unlike the pill's own box-shadow		side, confirmed live as a visibly lopsided icon -- tight against the
	above. */		word before it, loose against the word after -- report matched a
			real heading on [[Account Transfers]]. pill-only and link-only icons
			(see their own rules below) DO still need a margin here: their own
			bundled label sits directly adjacent with no space of its own (the
			template generates both together), unlike a bare icon's fully
			editor-typed surroundings. filter:drop-shadow (not box-shadow)
			follows the icon artwork's own alpha shape rather than its square
			bounding box, so the shadow reads as the icon's own and stays inside
			the pill's padding rather than spilling past its edge, unlike the
			pill's own box-shadow above. */
	.loka-icon img {		.loka-icon img {
	~~margin-right: .2em;~~
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55));		filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55));
	/* Default for nearly every icon on the wiki now (the pixel-art pack) --		/* Default for nearly every icon on the wiki now (the pixel-art pack) --
Line 85:		Line 93:
	crest) override this back to auto in their own per-class rule below. */		crest) override this back to auto in their own per-class rule below. */
	image-rendering: pixelated;		image-rendering: pixelated;
			}

			.loka-icon--pill-only img {
			margin-right: .2em;
	}		}

Line 125:		Line 137:
	display: inline;		display: inline;
	text-decoration: none;		text-decoration: none;
	}

	~~.loka-icon--linked img {~~
	~~margin-right: 0;~~
	}		}

Kaph: Default Icon to bare inline (emoji-style); pill=yes and link=yes independently opt back into pill background / clickable label; scale icon size and alignment with surrounding font-size (em-based) so icons adapt inside headings

2026-08-23T11:32:48Z

Default Icon to bare inline (emoji-style); pill=yes and link=yes independently opt back into pill background / clickable label; scale icon size and alignment with surrounding font-size (em-based) so icons adapt inside headings

Show changes

Kaph: Format/docs overhaul: dedupe image-rendering CSS (~25% smaller), rewrite Usage intro, truncate long file links, rename Kill Message Death/Kill to KM Death/KM Kill, unify World/Continent Capital into one Capital entry, auto no-space aliasing, lowercase examples, many new aliases, numeric rarity aliases shown as variant options

2026-08-21T23:54:39Z

Format/docs overhaul: dedupe image-rendering CSS (~25% smaller), rewrite Usage intro, truncate long file links, rename Kill Message Death/Kill to KM Death/KM Kill, unify World/Continent Capital into one Capital entry, auto no-space aliasing, lowercase examples, many new aliases, numeric rarity aliases shown as variant options

Show changes

Kaph: Add second pixel-art icon batch: Basic Crystal/Shard, Blood, Leaf Cutter, Opyc, Unknown, Recall Stone, Void Storage, Webbed Bola, XP Bottle, Kill Message Death/Kill; add a web variant to Orbs

2026-08-21T23:30:20Z

Add second pixel-art icon batch: Basic Crystal/Shard, Blood, Leaf Cutter, Opyc, Unknown, Recall Stone, Void Storage, Webbed Bola, XP Bottle, Kill Message Death/Kill; add a web variant to Orbs

← Older revision		Revision as of 23:30, 21 August 2026
Line 150:		Line 150:

	.loka-icon--ascalon img {		.loka-icon--ascalon img {
	vertical-align: -1.~~9px~~;		vertical-align: -1.5px;
	}		}

	.loka-icon--kalros img {		.loka-icon--kalros img {
	vertical-align: -1.~~9px~~;		vertical-align: -1.5px;
	}		}

	.loka-icon--garama img {		.loka-icon--garama img {
	vertical-align: -1.~~9px~~;		vertical-align: -1.5px;
	}		}

	.loka-icon--aladra img {		.loka-icon--aladra img {
	vertical-align: -1.~~9px~~;		vertical-align: -1.5px;
	}		}

	.loka-icon--balak img {		.loka-icon--balak img {
	vertical-align: -1.~~9px~~;		vertical-align: -1.5px;
	}		}

	.loka-icon--rivina img {		.loka-icon--rivina img {
	vertical-align: -1.~~9px~~;		vertical-align: -1.5px;
	}		}

	.loka-icon--zyre img {		.loka-icon--zyre img {
	vertical-align: -1.~~9px~~;		vertical-align: -1.5px;
	}		}

	.loka-icon--the-end img {		.loka-icon--the-end img {
	vertical-align: -1.~~9px~~;		vertical-align: -1.5px;
	}		}

	.loka-icon--nether img {		.loka-icon--nether img {
	vertical-align: -1.~~9px~~;		vertical-align: -1.5px;
	}		}

Kaph: Add second pixel-art icon batch: Basic Crystal/Shard, Blood, Leaf Cutter, Opyc, Unknown, Recall Stone, Void Storage, Webbed Bola, XP Bottle, Kill Message Death/Kill; add a web variant to Orbs

2026-08-21T23:29:09Z

Add second pixel-art icon batch: Basic Crystal/Shard, Blood, Leaf Cutter, Opyc, Unknown, Recall Stone, Void Storage, Webbed Bola, XP Bottle, Kill Message Death/Kill; add a web variant to Orbs

Show changes

Kaph: Add second pixel-art icon batch: Basic Crystal/Shard, Blood, Leaf Cutter, Opyc, Unknown, Recall Stone, Void Storage, Webbed Bola, XP Bottle, Kill Message Death/Kill; add a web variant to Orbs

2026-08-21T23:26:43Z

Add second pixel-art icon batch: Basic Crystal/Shard, Blood, Leaf Cutter, Opyc, Unknown, Recall Stone, Void Storage, Webbed Bola, XP Bottle, Kill Message Death/Kill; add a web variant to Orbs

@@ Line 140: / Line 140: @@
+}
-.loka-icon--orbs img {
+.loka-icon--orbs-emoji img {
 	vertical-align: -1.5px;
+}
@@ Line 445: / Line 450: @@
 .loka-icon--rank-bedrock img {
 	image-rendering: pixelated;
+}

Kaph: Fill in Donator Star 6-8 prices; widen the gap between a linked icon's graphic and its label text

2026-08-21T22:55:59Z

Fill in Donator Star 6-8 prices; widen the gap between a linked icon's graphic and its label text

← Older revision		Revision as of 22:55, 21 August 2026
Line 130:		Line 130:
	last child of the pill directly. */		last child of the pill directly. */
	.loka-icon--linked > :first-child a {		.loka-icon--linked > :first-child a {
	padding: .28em .~~25em~~ .28em .75em;		/* .25em -> .4em: a bit more breathing room between the icon and its
			label text -- the rest of this rule's padding (top/bottom/left) is
			the pill's own edge padding, untouched. */
			padding: .28em .4em .28em .75em;
	}		}

Kaph: Extend Donator Star to tiers 7-8 (sourced from the actual resource pack); tier 6 artwork also corrected to match the real texture

2026-08-21T22:49:05Z

Extend Donator Star to tiers 7-8 (sourced from the actual resource pack); tier 6 artwork also corrected to match the real texture

@@ Line 285: / Line 285: @@
 .loka-icon--donator-star-6 img {
 	vertical-align: -1.9px;
 	image-rendering: pixelated;

← Older revision		Revision as of 01:43, 24 August 2026
Line 16:		Line 16:

	/* A bare icon's own vertical-align (below, per icon) only ever aligned the		/* A bare icon's own vertical-align (below, per icon) only ever aligned the
	image against a following word's text baseline -- it says nothing		image against a following word's text baseline — it says nothing
	about where the image sits inside the pill's own padding box, and a		about where the image sits inside the pill's own padding box, and a
	bare icon can appear with no following text at all (e.g. a rarity badge		bare icon can appear with no following text at all (e.g. a rarity badge
Line 22:		Line 22:
	consistent 3px above the pill's true vertical centre regardless of		consistent 3px above the pill's true vertical centre regardless of
	source image. inline-flex + centring fixes that unconditionally, so no		source image. inline-flex + centring fixes that unconditionally, so no
	per-icon number is needed for it -- -0.15625em (measured live the		per-icon number is needed for it — -0.15625em (measured live the
	same way as everything else here) then aligns the whole pill against		same way as everything else here) then aligns the whole pill against
	a following word, replacing the per-icon img-level values that flex		a following word, replacing the per-icon img-level values that flex
Line 31:		Line 31:
	align-items: center;		align-items: center;
	vertical-align: -0.15625em;		vertical-align: -0.15625em;
	/* No bundled label means no pill/badge -- that chrome exists to make a		/* No bundled label means no pill/badge — that chrome exists to make a
	clickable icon+text unit read as one button-like thing; a lone icon		clickable icon+text unit read as one button-like thing; a lone icon
	sitting inline in prose doesn't need a background of its own. */		sitting inline in prose doesn't need a background of its own. */
Line 42:		Line 42:

	/* align-items:center on the pill actually centres its direct child, which		/* align-items:center on the pill actually centres its direct child, which
	is MediaWiki's own auto-generated file wrapper span -- NOT the <img>		is MediaWiki's own auto-generated file wrapper span — NOT the <img>
	directly (~~[[File:...]]~~ always renders as <span class="mw-default-size"		directly (a file link always renders as <span class="mw-default-size"
	typeof="mw:File"><span><img></span></span>). Confirmed live: that		typeof="mw:File"><span><img></span></span>). Confirmed live: that
	wrapper's own height comes from ordinary line-height (19px at this font		wrapper's own height comes from ordinary line-height (19px at this font
Line 49:		Line 49:
	left the image 1.4px off. display:block drops the img out of inline		left the image 1.4px off. display:block drops the img out of inline
	line-height layout so its wrapper shrinks to the image's own exact		line-height layout so its wrapper shrinks to the image's own exact
	height instead -- then centring the wrapper really does centre the		height instead — then centring the wrapper really does centre the
	image, with nothing left depending on line-height math. */		image, with nothing left depending on line-height math. */
	.loka-icon--bare img {		.loka-icon--bare img {
Line 55:		Line 55:
	}		}

	/* An infobox row is already its own compact, bordered container -- a pill		/* An infobox row is already its own compact, bordered container — a pill
	inside a pill reads as visual noise rather than a badge, so an icon used		inside a pill reads as visual noise rather than a badge, so an icon used
	there (e.g. a future infobox row value) falls back to plain inline		there (e.g. a future infobox row value) falls back to plain inline
Line 67:		Line 67:
	}		}

	/* No margin-right here (unlike an earlier version of this rule) -- a		/* No margin-right here (unlike an earlier version of this rule) — a
	BARE icon (the default rendering, meant to sit inline in an editor's		BARE icon (the default rendering, meant to sit inline in an editor's
	own prose) is always surrounded by whatever spacing the editor		own prose) is always surrounded by whatever spacing the editor
Line 73:		Line 73:
	Orbs" already has a real space on both sides in the wikitext. Adding		Orbs" already has a real space on both sides in the wikitext. Adding
	margin-right on top of that stacked an extra gap onto just the right		margin-right on top of that stacked an extra gap onto just the right
	side, confirmed live as a visibly lopsided icon -- tight against the		side, confirmed live as a visibly lopsided icon — tight against the
	word before it, loose against the word after -- report matched a		word before it, loose against the word after — report matched a
	real heading on [[Account Transfers]]. pill-only and link-only icons		real heading on [[Account Transfers]]. pill-only and link-only icons
	(see their own rules below) DO still need a margin here: their own		(see their own rules below) DO still need a margin here: their own
Line 86:		Line 86:
	.loka-icon img {		.loka-icon img {
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55));		filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55));
	/* Default for nearly every icon on the wiki now (the pixel-art pack) --		/* Default for nearly every icon on the wiki now (the pixel-art pack) —
	keeps native-resolution artwork crisp at both its own display size and		keeps native-resolution artwork crisp at both its own display size and
	the extra 1.5x/2x thumbnails MediaWiki generates for retina screens,		the extra 1.5x/2x thumbnails MediaWiki generates for retina screens,
Line 100:		Line 100:

	/* A linked icon is really two adjacent <a>s (image + label) to the same		/* A linked icon is really two adjacent <a>s (image + label) to the same
	target, not one -- MediaWiki here doesn't parse a ~~[[File:...]]~~ nested		target, not one — MediaWiki here doesn't parse a file link nested
	inside another link's label (confirmed live: the brackets come out as		inside another link's label (confirmed live: the brackets come out as
	literal text), and raw <a href> HTML is sanitized away (also confirmed		literal text), and raw <a href> HTML is sanitized away (also confirmed
Line 107:		Line 107:
	To make the whole pill clickable rather than just the icon and text		To make the whole pill clickable rather than just the icon and text
	glyphs, the pill's own padding moves off the outer span and onto the		glyphs, the pill's own padding moves off the outer span and onto the
	two anchors themselves -- every visible pixel of the pill, gap and		two anchors themselves — every visible pixel of the pill, gap and
	padding included, then belongs to one <a> or the other, both pointing		padding included, then belongs to one <a> or the other, both pointing
	at the same target, so there's no dead unclickable sliver anywhere in		at the same target, so there's no dead unclickable sliver anywhere in
Line 130:		Line 130:
	same ones already proven live elsewhere on this wiki, e.g. the 14px		same ones already proven live elsewhere on this wiki, e.g. the 14px
	continent shield in Template:Infobox tournament's host row) actually		continent shield in Template:Infobox tournament's host row) actually
	take effect -- vertical-align has no effect on a flex child, so an		take effect — vertical-align has no effect on a flex child, so an
	earlier inline-flex version of this rule silently broke every one of		earlier inline-flex version of this rule silently broke every one of
	those already-tuned values and left the icon visibly off against the		those already-tuned values and left the icon visibly off against the
Line 146:		Line 146:
	.loka-icon--linked > :first-child a {		.loka-icon--linked > :first-child a {
	/* .25em -> .4em: a bit more breathing room between the icon and its		/* .25em -> .4em: a bit more breathing room between the icon and its
	label text -- the rest of this rule's padding (top/bottom/left) is		label text — the rest of this rule's padding (top/bottom/left) is
	the pill's own edge padding, untouched. */		the pill's own edge padding, untouched. */
	padding: .28em .4em .28em .75em;		padding: .28em .4em .28em .75em;
Line 155:		Line 155:
	}		}

	/* link=yes without pill=yes -- still the same two-anchor clickable		/* link=yes without pill=yes — still the same two-anchor clickable
	structure as the full pill above (so it's genuinely one clickable		structure as the full pill above (so it's genuinely one clickable
	unit, same reasoning), but with the pill chrome stripped back to		unit, same reasoning), but with the pill chrome stripped back to
Line 161:		Line 161:
	does for a different context. Needs its own anchor padding/img margin		does for a different context. Needs its own anchor padding/img margin
	since the pill's own padding (which normally supplies the icon-to-		since the pill's own padding (which normally supplies the icon-to-
	label gap) is gone -- .loka-icon--linked-plain alone (without also		label gap) is gone — .loka-icon--linked-plain alone (without also
	matching .loka-icon--linked) would be equally valid CSS but wouldn't		matching .loka-icon--linked) would be equally valid CSS but wouldn't
	win the specificity tie against .loka-icon--linked's own padding/		win the specificity tie against .loka-icon--linked's own padding/