Template:Icon/styles.css: Difference between revisions

Revision as of 20:58, 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;
	}
}

/* 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 img {
	vertical-align: -1.5px;
}