Template:Infobox website/styles.css: Difference between revisions

Latest revision as of 21:25, 19 August 2026

.loka-website-developer-loka {
	font-weight: 700;
	color: #f0cf8e;
}

/* Same icon, same 14px size as Template:Forums' icon -- own class rather
   than sharing that template's, since two templates' TemplateStyles CSS
   loaded on one page would otherwise collide on the same class name.
   Empirically measured the same way; this is the same source image so
   the same value applies. */
.loka-website-developer-loka-icon img {
	vertical-align: -1.5px;
}

.loka-website-launched-ago {
	display: block;
	margin-top: .1em;
	font-size: .85em;
	opacity: .68;
}

.loka-website-status--active {
	color: #54FC54;
}

.loka-website-status--beta {
	color: #FCA800;
}

.loka-website-status--inactive,
.loka-website-status--discontinued {
	color: #FC5454;
}

.loka-website-screenshot {
	padding: .55em 0 .3em;
	text-align: center;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

/* max-width, not width:100% -- the file call already caps the display
   size (220px), so this only stops it overflowing on something
   narrower, it doesn't stretch a smaller image up to fill the box. */
.loka-website-screenshot img {
	display: inline-block;
	max-width: 100%;
	height: auto;
	border-radius: 3px;
}

.loka-website-screenshot-caption {
	padding: .4em .6em;
	font-size: .72em;
	font-style: italic;
	text-align: center;
	opacity: .68;
}

.loka-website-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .6em;
	padding: .5em .6em;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.loka-website-link {
	display: inline-flex;
	align-items: center;
}

/* Same reasoning as Template:Infobox player's generation colours: these
   neon shades read clearly against a dark infobox but wash out (green,
   amber) or vanish (nothing here is near-white, but keep the pattern
   consistent) on a light one -- darker, equally-distinct equivalents for
   light mode, same hues. */
@media (prefers-color-scheme: light) {
	/* Same gold/brown pairing as .loka-infobox-type (Template:Infobox) --
	   this is the same colour used for exactly the same purpose (a gold
	   accent that needs a darker equivalent to stay legible on a light
	   background), so it reuses the same value rather than picking a new
	   one. */
	.loka-website-developer-loka {
		color: #9c6b2e;
	}

	.loka-website-status--active {
		color: #2E7D32;
	}

	.loka-website-status--beta {
		color: #8A5A00;
	}

	.loka-website-status--inactive,
	.loka-website-status--discontinued {
		color: #C62828;
	}

	.loka-website-screenshot {
		border-top-color: rgba(0, 0, 0, .1);
	}

	.loka-website-links {
		border-top-color: rgba(0, 0, 0, .1);
	}
}