Template:Infobox/styles.css: Difference between revisions

Revision as of 09:18, 18 August 2026

.loka-infobox {
	float: right;
	clear: right;
	width: 300px;
	margin: 0 0 1em 1em;
	background: rgba(20, 16, 12, .45);
	border: 1px solid rgba(255, 255, 255, .08);
}

.loka-infobox--wide {
	width: 520px;
}

/* Below this width a floated fixed-width box (300px, or 520px for --wide)
   either overflows the viewport or squeezes body text into an unreadably
   narrow column, so every infobox drops the float and goes full-width
   instead -- applies wiki-wide since this is the shared shell every
   specific infobox is built on. */
@media (max-width: 600px) {
	.loka-infobox,
	.loka-infobox--wide {
		float: none;
		clear: none;
		width: 100%;
		max-width: 100%;
		margin: 0 0 1em 0;
		box-sizing: border-box;
	}
}

.loka-infobox-name {
	text-align: center;
	font-size: 1.25em;
	font-weight: 700;
	padding: .6em;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.loka-infobox-type {
	background: #9c6b2e;
	color: #ffffff;
	font-weight: 700;
	font-size: .72em;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-align: center;
	padding: .35em .5em;
}

.loka-infobox-image {
	line-height: 0;
	text-align: center;
	padding: 10px;
}

.loka-infobox-image img {
	max-width: 100%;
	height: auto;
}

.loka-infobox-header-photo {
	position: relative;
	height: 200px;
	overflow: hidden;
}

.loka-infobox-header-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.loka-infobox-header-scrim {
	position: absolute;
	inset: 0;
	/* One continuous gradient does the whole job, deliberately: dark at the
	   top for the name/type text, fully clear through the middle (photo
	   shown at full clarity), then a long, gradual ease over the last half
	   back down to exactly rgba(20, 16, 12, .45) -- the SAME colour and
	   opacity as the plain .loka-infobox background (see Template:Infobox
	   player on e.g. Kaph), not a separate darker/browner tone. Content
	   below (loka-tournament-columns) overlaps up into this fading tail via
	   a negative margin but adds no background of its own, so there is only
	   ever one layer doing the fading -- nothing for a seam to appear at. */
	background: linear-gradient(to bottom,
		rgba(8, 6, 3, .78) 0,
		rgba(8, 6, 3, .35) 70px,
		rgba(8, 6, 3, 0) 100px,
		rgba(20, 16, 12, .45) 200px);
}

.loka-infobox-header-text {
	position: relative;
}

.loka-infobox-header-text .loka-infobox-name {
	border-bottom: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

.loka-infobox-header-text .loka-infobox-type {
	background: rgba(156, 107, 46, .55);
	text-transform: none;
	letter-spacing: normal;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

.loka-infobox-row {
	display: flex;
	padding: .4em .6em;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: .9em;
}

.loka-infobox-row-key {
	flex: 0 0 38%;
	font-weight: 700;
	text-align: left;
}

.loka-infobox-row-value {
	flex: 1;
	text-align: left;
}

.loka-infobox-row--wide {
	flex-direction: column;
	align-items: flex-start;
	gap: .3em;
}

.loka-hlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline;
}

.loka-hlist li {
	display: inline;
}

.loka-hlist li:not(:last-child)::after {
	content: ", ";
}

.loka-hlist--stacked {
	display: block;
}

.loka-hlist--stacked li {
	display: block;
}

.loka-hlist--stacked li:not(:last-child)::after {
	content: none;
}