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

Revision as of 17:33, 18 August 2026

.loka-tournament-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* No overlap trick here anymore -- the header photo's own scrim (see
	   Template:Infobox/styles.css) now runs its full fade to nearly opaque
	   before this block even starts, so there's no sharp edge left for it
	   to sit against; it just continues straight into the plain
	   .loka-infobox background underneath, already a near-match. */
}

.loka-tournament-details {
	padding: .5em;
}

.loka-tournament-col-heading {
	font-size: .7em;
	font-weight: 700;
	color: #f0cf8e;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.loka-tournament-details .loka-tournament-col-heading {
	margin-bottom: .45em;
}

.loka-tournament-details-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .45em .5em;
}

.loka-tournament-detail-label {
	display: block;
	font-size: .68em;
	opacity: .65;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin-bottom: .1em;
}

.loka-tournament-detail-value {
	display: block;
	font-size: .85em;
	word-break: break-word;
}

.loka-tournament-runners-tile {
	grid-column: 1 / -1;
	margin-top: .45em;
}

.loka-podium-row {
	display: flex;
	align-items: center;
	gap: .5em;
	padding: .4em .5em;
}

.loka-podium-row img {
	image-rendering: pixelated;
}

.loka-podium-label {
	font-size: .7em;
	font-weight: 700;
	color: #f0cf8e;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.loka-podium-team,
.loka-podium-single {
	font-weight: 600;
}

.loka-podium-info .loka-hlist {
	font-size: .82em;
	font-weight: normal;
	opacity: .72;
}

.loka-podium-disclaimer {
	font-size: .7em;
	font-style: italic;
	opacity: .6;
	text-align: center;
	padding: .25em .6em .4em;
}

.loka-chrono-box {
	border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Plain row, not a solid coloured bar -- same "eyebrow" treatment as
   Tournament Details/Winning Team rather than its own loud element. The
   bottom border is the only divider needed here since loka-chrono-box
   already has its own top border separating this whole section from
   whatever's above. */
.loka-chrono-header {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	font-size: .75em;
	padding: .35em .5em;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.loka-chrono-header-title {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #f0cf8e;
	text-align: center;
}

.loka-chrono-header-side {
	font-size: .85em;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: .03em;
	opacity: .65;
	text-align: center;
}

.loka-chrono-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.loka-chrono-pane {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: .4em .35em;
	text-align: center;
	font-size: .78em;
}

.loka-chrono-title--current {
	font-weight: 700;
}

.loka-chrono-year {
	font-weight: normal;
	opacity: .75;
	font-size: .9em;
	margin-top: .2em;
}

.loka-chrono-tba {
	color: rgba(255, 255, 255, .4);
}

.loka-chrono-empty {
	color: rgba(255, 255, 255, .4);
	font-style: italic;
}

/* Below this width the box itself has already gone full-width and
   unfloated (see Template:Infobox/styles.css), but Details|Results side
   by side would still squeeze each into an unreadably narrow column, so
   they stack instead. */
@media (max-width: 600px) {
	.loka-tournament-columns {
		grid-template-columns: 1fr;
	}
}

/* The light gold accent (#f0cf8e) and the semi-transparent white "TBA"/
   "--" text both assume a dark box background to show up against -- now
   that .loka-infobox switches to a light card in light mode (see
   Template:Infobox/styles.css), these need darker equivalents of their
   own or they'd wash out to near-invisible pastel/white-on-cream. Reuses
   the same darker amber (#9c6b2e) Template:Biome already uses for its own
   light-card label variant, for a consistent look. Doesn't touch the
   header photo's own overlay text (name/type, "Winning Team" etc. sitting
   directly on the photo) -- that has its own permanent dark scrim/shadow
   independent of page theme, so it's already fine in both modes. */
@media (prefers-color-scheme: light) {
	.loka-tournament-col-heading,
	.loka-podium-label,
	.loka-chrono-header-title {
		color: #9c6b2e;
	}

	.loka-chrono-tba,
	.loka-chrono-empty {
		color: rgba(0, 0, 0, .35);
	}

	.loka-chrono-box,
	.loka-chrono-header {
		border-color: rgba(0, 0, 0, .1);
	}
}