Template:Icon/styles.css: Difference between revisions

Revision as of 21:46, 21 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 -- 0px (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: 0px;
}

/* 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
   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;
}

/* Breathing room between the icon graphic and whatever sits right after it
   -- the editor's own following word for a bare icon (a linked icon's own
   rules below zero this back out; its gap is anchor padding instead, not
   img margin). 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 {
	margin-right: .2em;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55));
}

/* 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
   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 -- 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 -- 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;
}

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

/* 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 {
	padding: .28em .25em .28em .75em;
}

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

.loka-icon--orbs img {
	vertical-align: -1.5px;
}

.loka-icon--ascalon img {
	vertical-align: -1.9px;
}

.loka-icon--kalros img {
	vertical-align: -1.9px;
}

.loka-icon--garama img {
	vertical-align: -1.9px;
}

.loka-icon--aladra img {
	vertical-align: -1.9px;
}

.loka-icon--balak img {
	vertical-align: -1.9px;
}

.loka-icon--rivina img {
	vertical-align: -1.9px;
}

.loka-icon--zyre img {
	vertical-align: -1.9px;
}

.loka-icon--the-end img {
	vertical-align: -1.9px;
}

.loka-icon--nether img {
	vertical-align: -1.9px;
}

.loka-icon--loka-crest img {
	vertical-align: -1.5px;
}

.loka-icon--loka-pixel img {
	vertical-align: -1.9px;
	image-rendering: pixelated;
}

.loka-icon--continent-capital img {
	vertical-align: -1.9px;
	image-rendering: pixelated;
}

.loka-icon--dev img {
	vertical-align: -1.9px;
	image-rendering: pixelated;
}

.loka-icon--shard-pouch img {
	vertical-align: -1.9px;
	image-rendering: pixelated;
}

.loka-icon--soulbound-bag img {
	vertical-align: -1.9px;
	image-rendering: pixelated;
}

.loka-icon--waterstone img {
	vertical-align: -1.9px;
	image-rendering: pixelated;
}

.loka-icon--world-capital img {
	vertical-align: -1.9px;
	image-rendering: pixelated;
}

.loka-icon--twitch img {
	image-rendering: pixelated;
}

.loka-icon--youtube img {
	image-rendering: pixelated;
}

.loka-icon--guide-gold img {
	vertical-align: -1.9px;
	image-rendering: pixelated;
}

.loka-icon--guide-purple img {
	vertical-align: -1.9px;
	image-rendering: pixelated;
}

.loka-icon--lcr-megaphone img {
	vertical-align: -1.9px;
	image-rendering: pixelated;
}

.loka-icon--lcr-ballot img {
	vertical-align: -1.9px;
	image-rendering: pixelated;
}

.loka-icon--power-shard-single img {
	vertical-align: -1.9px;
	image-rendering: pixelated;
}

.loka-icon--power-shard-core img {
	vertical-align: -1.9px;
	image-rendering: pixelated;
}

.loka-icon--power-shard-cluster img {
	vertical-align: -1.9px;
	image-rendering: pixelated;
}

.loka-icon--donator-star-1 img {
	image-rendering: pixelated;
}

.loka-icon--donator-star-2 img {
	image-rendering: pixelated;
}

.loka-icon--donator-star-3 img {
	image-rendering: pixelated;
}

.loka-icon--donator-star-4 img {
	image-rendering: pixelated;
}

.loka-icon--donator-star-5 img {
	image-rendering: pixelated;
}

.loka-icon--donator-star-6 img {
	image-rendering: pixelated;
}

.loka-icon--lock-common img {
	image-rendering: pixelated;
}

.loka-icon--lock-uncommon img {
	image-rendering: pixelated;
}

.loka-icon--lock-rare img {
	image-rendering: pixelated;
}

.loka-icon--lock-epic img {
	image-rendering: pixelated;
}

.loka-icon--lock-legendary img {
	image-rendering: pixelated;
}

.loka-icon--lock-mythic img {
	image-rendering: pixelated;
}

.loka-icon--title-common img {
	image-rendering: pixelated;
}

.loka-icon--title-uncommon img {
	image-rendering: pixelated;
}

.loka-icon--title-rare img {
	image-rendering: pixelated;
}

.loka-icon--title-epic img {
	image-rendering: pixelated;
}

.loka-icon--title-legendary img {
	image-rendering: pixelated;
}

.loka-icon--title-mythic img {
	image-rendering: pixelated;
}

.loka-icon--rank-wood img {
	image-rendering: pixelated;
}

.loka-icon--rank-stone1 img {
	image-rendering: pixelated;
}

.loka-icon--rank-stone2 img {
	image-rendering: pixelated;
}

.loka-icon--rank-stone3 img {
	image-rendering: pixelated;
}

.loka-icon--rank-iron1 img {
	image-rendering: pixelated;
}

.loka-icon--rank-iron2 img {
	image-rendering: pixelated;
}

.loka-icon--rank-iron3 img {
	image-rendering: pixelated;
}

.loka-icon--rank-copper1 img {
	image-rendering: pixelated;
}

.loka-icon--rank-copper2 img {
	image-rendering: pixelated;
}

.loka-icon--rank-copper3 img {
	image-rendering: pixelated;
}

.loka-icon--rank-gold1 img {
	image-rendering: pixelated;
}

.loka-icon--rank-gold2 img {
	image-rendering: pixelated;
}

.loka-icon--rank-gold3 img {
	image-rendering: pixelated;
}

.loka-icon--rank-emerald1 img {
	image-rendering: pixelated;
}

.loka-icon--rank-emerald2 img {
	image-rendering: pixelated;
}

.loka-icon--rank-emerald3 img {
	image-rendering: pixelated;
}

.loka-icon--rank-diamond1 img {
	image-rendering: pixelated;
}

.loka-icon--rank-diamond2 img {
	image-rendering: pixelated;
}

.loka-icon--rank-diamond3 img {
	image-rendering: pixelated;
}

.loka-icon--rank-netherite1 img {
	image-rendering: pixelated;
}

.loka-icon--rank-netherite2 img {
	image-rendering: pixelated;
}

.loka-icon--rank-netherite3 img {
	image-rendering: pixelated;
}

.loka-icon--rank-bedrock img {
	image-rendering: pixelated;
}