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

Revision as of 18:45, 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;
}

/* Plain row, not a solid coloured bar, no dividers above or below --
   fully matches the same "eyebrow" label used for Tournament Details,
   Winning Team, and Winner/2nd Place/3rd Place (loka-tournament-col-heading
   / loka-podium-label): identical font-size, weight, case, letter-spacing
   and colour on all three (title and both side labels alike), so the
   whole set reads as one consistent family instead of some being bold
   and gold while others are smaller and muted. */
.loka-chrono-header {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	padding: .35em 0;
}

.loka-chrono-header-title,
.loka-chrono-header-side {
	font-size: .7em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #f0cf8e;
	text-align: center;
	white-space: nowrap;
}

.loka-chrono-header-side--prev,
.loka-chrono-header-side--next {
	position: relative;
}

.loka-chrono-header-side--prev {
	grid-column: 1;
}

.loka-chrono-header-side--next {
	grid-column: 3;
}

/* Arrow sits outside the text's own box (absolutely positioned off its
   left/right edge) rather than being part of the centred string, so it's
   purely decorative and never shifts where "Previous"/"Next" itself
   centres. */
.loka-chrono-header-side--prev::before {
	content: "\2190";
	position: absolute;
	right: 100%;
	margin-right: .35em;
}

.loka-chrono-header-side--next::after {
	content: "\2192";
	position: absolute;
	left: 100%;
	margin-left: .35em;
}

/* Pulled out of the grid entirely and centred against the whole header's
   width instead of being confined to column 2's share of it -- lets a
   wide, non-wrapping title extend past where column 2 alone would end
   without affecting the side labels' position (they're independently
   pinned to columns 1/3 above) or the grid's own track sizing. */
.loka-chrono-header-title {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.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,
	.loka-chrono-header-side {
		color: #9c6b2e;
	}

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