Template:Icon/styles.css: Difference between revisions

Latest revision as of 13:37, 24 August 2026

.loka-icon {
	display: inline;
	border-radius: 999px;
	padding: .28em .75em;
	background: rgba(0, 0, 0, .35);
	border: 1px solid rgba(255, 255, 255, .15);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

@media (prefers-color-scheme: light) {
	.loka-icon {
		background: rgba(0, 0, 0, .06);
		border-color: #e0d8c3;
	}
}

/* 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
   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
   alone in a table cell). Confirmed live: every bare icon sat a
   consistent 3px above the pill's true vertical centre regardless of
   source image. inline-flex + centring fixes that unconditionally, so no
   per-icon number is needed for it — -0.15625em (measured live the
   same way as everything else here) then aligns the whole *pill* against
   a following word, replacing the per-icon img-level values that flex
   would otherwise ignore (vertical-align has no effect on a flex child,
   same reason the linked kind below stays plain inline instead). */
.loka-icon--bare {
	display: inline-flex;
	align-items: center;
	vertical-align: -0.15625em;
	/* 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
	   sitting inline in prose doesn't need a background of its own. */
	background: none;
	border: none;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
}

/* align-items:center on the pill actually centres its direct child, which
   is MediaWiki's own auto-generated file wrapper span &mdash; NOT the <img>
   directly (a file link always renders as <span class="mw-default-size"
   typeof="mw:File"><span><img></span></span>). Confirmed live: that
   wrapper's own height comes from ordinary line-height (19px at this font
   size), taller than the 16px image itself, so centring the wrapper still
   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
   height instead &mdash; then centring the wrapper really does centre the
   image, with nothing left depending on line-height math. */
.loka-icon--bare img {
	display: block;
}

/* An infobox row is already its own compact, bordered container &mdash; a pill
   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
   icon+text with no chip of its own. */
.loka-infobox .loka-icon {
	background: none;
	border: none;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
}

/* No margin-right here (unlike an earlier version of this rule) &mdash; a
   BARE icon (the default rendering, meant to sit inline in an editor's
   own prose) is always surrounded by whatever spacing the editor
   already typed around the {icon|...} call, e.g. "500 {icon|orb|web}
   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
   side, confirmed live as a visibly lopsided icon &mdash; tight against the
   word before it, loose against the word after &mdash; report matched a
   real heading on [[Account Transfer]]. 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 {
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55));
	/* Default for nearly every icon on the wiki now (the pixel-art pack) &mdash;
	   keeps native-resolution artwork crisp at both its own display size and
	   the extra 1.5x/2x thumbnails MediaWiki generates for retina screens,
	   instead of blurring the upscale. The handful of older, higher-
	   resolution icons (Orbs' emoji variant, the continent shields, Loka's
	   crest) override this back to auto in their own per-class rule below. */
	image-rendering: pixelated;
}

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

/* A linked icon is really two adjacent <a>s (image + label) to the same
   target, not one &mdash; MediaWiki here doesn't parse a file link nested
   inside another link's label (confirmed live: the brackets come out as
   literal text), and raw <a href> HTML is sanitized away (also confirmed
   live), so a true single anchor isn't reachable from wikitext.

   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
   two anchors themselves &mdash; every visible pixel of the pill, gap and
   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
   the shape. overflow:hidden keeps each anchor's own box from poking a
   square corner out past the pill's rounded ends. cursor:pointer covers
   the anchors' own padding and the pill's border/corners too, so the
   pointer cursor shows over the *entire* pill, not just the two glyphs. */
.loka-icon--linked {
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.loka-icon--linked:hover {
	background: rgba(240, 207, 142, .16);
	border-color: rgba(240, 207, 142, .5);
}

/* Both anchors stay plain inline (not flex) so the icon and label sit on
   one shared line box and the per-icon vertical-align rules below (the
   same ones already proven live elsewhere on this wiki, e.g. the 14px
   continent shield in Template:Infobox tournament's host row) actually
   take effect &mdash; vertical-align has no effect on a flex child, so an
   earlier inline-flex version of this rule silently broke every one of
   those already-tuned values and left the icon visibly off against the
   text. */
.loka-icon--linked a {
	display: inline;
	text-decoration: none;
}

/* TemplateStyles' selector sanitizer rejects attribute selectors (no
   [typeof="mw:File"] to single out the image's auto-generated wrapper
   span), so the two anchors are told apart structurally instead: the
   image sits inside the first child of the pill, the label link is the
   last child of the pill directly. */
.loka-icon--linked > :first-child a {
	/* .25em -> .4em: a bit more breathing room between the icon and its
	   label text &mdash; the rest of this rule's padding (top/bottom/left) is
	   the pill's own edge padding, untouched. */
	padding: .28em .4em .28em .75em;
}

.loka-icon--linked > a:last-child {
	padding: .28em .75em .28em 0;
}

/* link=yes without pill=yes &mdash; still the same two-anchor clickable
   structure as the full pill above (so it's genuinely one clickable
   unit, same reasoning), but with the pill chrome stripped back to
   plain inline, the same reset .loka-infobox .loka-icon above already
   does for a different context. Needs its own anchor padding/img margin
   since the pill's own padding (which normally supplies the icon-to-
   label gap) is gone &mdash; .loka-icon--linked-plain alone (without also
   matching .loka-icon--linked) would be equally valid CSS but wouldn't
   win the specificity tie against .loka-icon--linked's own padding/
   overflow/cursor rules above it in source order, so the selector
   repeats both classes to be unambiguously more specific instead. */
.loka-icon--linked.loka-icon--linked-plain {
	background: none;
	border: none;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

.loka-icon--linked.loka-icon--linked-plain:hover {
	background: none;
	border-color: transparent;
}

.loka-icon--linked.loka-icon--linked-plain > :first-child a,
.loka-icon--linked.loka-icon--linked-plain > a:last-child {
	padding: 0;
}

.loka-icon--linked-plain img {
	margin-right: .2em;
}

.loka-icon--orbs-emoji img {
	vertical-align: -0.09375em;
	height: 0.875em;
	width: auto;
	image-rendering: auto;
}

.loka-icon--orbs-web img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--ascalon img {
	vertical-align: -0.09375em;
	width: 0.875em;
	height: auto;
	image-rendering: auto;
}

.loka-icon--kalros img {
	vertical-align: -0.09375em;
	width: 0.875em;
	height: auto;
	image-rendering: auto;
}

.loka-icon--garama img {
	vertical-align: -0.09375em;
	width: 0.875em;
	height: auto;
	image-rendering: auto;
}

.loka-icon--aladra img {
	vertical-align: -0.09375em;
	width: 0.875em;
	height: auto;
	image-rendering: auto;
}

.loka-icon--balak img {
	vertical-align: -0.09375em;
	width: 0.875em;
	height: auto;
	image-rendering: auto;
}

.loka-icon--rivina img {
	vertical-align: -0.09375em;
	width: 0.875em;
	height: auto;
	image-rendering: auto;
}

.loka-icon--zyre img {
	vertical-align: -0.09375em;
	width: 0.875em;
	height: auto;
	image-rendering: auto;
}

.loka-icon--the-end img {
	vertical-align: -0.09375em;
	width: 0.875em;
	height: auto;
	image-rendering: auto;
}

.loka-icon--nether img {
	vertical-align: -0.09375em;
	width: 0.875em;
	height: auto;
	image-rendering: auto;
}

.loka-icon--loka-crest img {
	vertical-align: -0.09375em;
	width: 0.875em;
	height: auto;
	image-rendering: auto;
}

.loka-icon--loka-pixel img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--capital-world img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--capital-continent img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--dev img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--shard-pouch img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--soulbound-bag img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--waterstone img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--twitch img {
	height: 1em;
	width: auto;
}

.loka-icon--youtube img {
	height: 1em;
	width: auto;
}

.loka-icon--guide-gold img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--guide-purple img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--lcr-megaphone img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--lcr-ballot img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--power-shard-single img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--power-shard-core img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--power-shard-cluster img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--donator-star-1 img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--donator-star-2 img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--donator-star-3 img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--donator-star-4 img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--donator-star-5 img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--donator-star-6 img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--donator-star-7 img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--donator-star-8 img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--lock-common img {
	height: 1em;
	width: auto;
}

.loka-icon--lock-uncommon img {
	height: 1em;
	width: auto;
}

.loka-icon--lock-rare img {
	height: 1em;
	width: auto;
}

.loka-icon--lock-epic img {
	height: 1em;
	width: auto;
}

.loka-icon--lock-legendary img {
	height: 1em;
	width: auto;
}

.loka-icon--lock-mythic img {
	height: 1em;
	width: auto;
}

.loka-icon--title-common img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--title-uncommon img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--title-rare img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--title-epic img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--title-legendary img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--title-mythic img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--rank-wood img {
	height: 1em;
	width: auto;
}

.loka-icon--rank-stone1 img {
	height: 1em;
	width: auto;
}

.loka-icon--rank-stone2 img {
	height: 1em;
	width: auto;
}

.loka-icon--rank-stone3 img {
	height: 1em;
	width: auto;
}

.loka-icon--rank-iron1 img {
	height: 1em;
	width: auto;
}

.loka-icon--rank-iron2 img {
	height: 1em;
	width: auto;
}

.loka-icon--rank-iron3 img {
	height: 1em;
	width: auto;
}

.loka-icon--rank-copper1 img {
	height: 1em;
	width: auto;
}

.loka-icon--rank-copper2 img {
	height: 1em;
	width: auto;
}

.loka-icon--rank-copper3 img {
	height: 1em;
	width: auto;
}

.loka-icon--rank-gold1 img {
	height: 1em;
	width: auto;
}

.loka-icon--rank-gold2 img {
	height: 1em;
	width: auto;
}

.loka-icon--rank-gold3 img {
	height: 1em;
	width: auto;
}

.loka-icon--rank-emerald1 img {
	height: 1em;
	width: auto;
}

.loka-icon--rank-emerald2 img {
	height: 1em;
	width: auto;
}

.loka-icon--rank-emerald3 img {
	height: 1em;
	width: auto;
}

.loka-icon--rank-diamond1 img {
	height: 1em;
	width: auto;
}

.loka-icon--rank-diamond2 img {
	height: 1em;
	width: auto;
}

.loka-icon--rank-diamond3 img {
	height: 1em;
	width: auto;
}

.loka-icon--rank-netherite1 img {
	height: 1em;
	width: auto;
}

.loka-icon--rank-netherite2 img {
	height: 1em;
	width: auto;
}

.loka-icon--rank-netherite3 img {
	height: 1em;
	width: auto;
}

.loka-icon--rank-bedrock img {
	height: 1em;
	width: auto;
}

.loka-icon--basic-crystal img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--basic-shard img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--blood-normal img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--blood-stained img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--blood-coagulated img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--leaf-cutter img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--opyc img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--unknown img {
	height: 1em;
	width: auto;
}

.loka-icon--recall-stone img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--void-storage-input img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--void-storage-output img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--webbed-bola img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--xp-bottle-small img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--xp-bottle-medium img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--xp-bottle-large img {
	vertical-align: -0.15625em;
	height: 1em;
	width: auto;
}

.loka-icon--km-death-common img {
	height: 1em;
	width: auto;
}

.loka-icon--km-death-uncommon img {
	height: 1em;
	width: auto;
}

.loka-icon--km-death-rare img {
	height: 1em;
	width: auto;
}

.loka-icon--km-death-epic img {
	height: 1em;
	width: auto;
}

.loka-icon--km-death-legendary img {
	height: 1em;
	width: auto;
}

.loka-icon--km-death-mythic img {
	height: 1em;
	width: auto;
}

.loka-icon--km-kill-common img {
	height: 1em;
	width: auto;
}

.loka-icon--km-kill-uncommon img {
	height: 1em;
	width: auto;
}

.loka-icon--km-kill-rare img {
	height: 1em;
	width: auto;
}

.loka-icon--km-kill-epic img {
	height: 1em;
	width: auto;
}

.loka-icon--km-kill-legendary img {
	height: 1em;
	width: auto;
}

.loka-icon--km-kill-mythic img {
	height: 1em;
	width: auto;
}