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

Revision as of 09:32, 18 August 2026

.loka-tournament-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: relative;
	/* Pulled up to overlap the tail of the header photo, landing where the
	   scrim (see loka-infobox-header-scrim) has already eased most of the
	   way back to its settled .45 -- enough overlap that a sliver of photo
	   still shows through at the very top of this block, without landing in
	   the lighter midpoint where text would have no darkened backdrop to
	   sit against. Deliberately has NO background of its own here -- the
	   scrim is the only thing doing the fading, so there's nothing for a
	   second layer to visibly seam against. */
	margin-top: -25px;
}

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

.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: .6em;
}

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

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

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

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

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

.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-info .loka-hlist {
	font-size: .85em;
	opacity: .8;
}

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

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

.loka-chrono-header {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	background: #9c6b2e;
	color: #ffffff;
	font-size: .75em;
	padding: .4em .5em;
}

.loka-chrono-header-title {
	font-weight: 700;
	text-align: center;
}

.loka-chrono-header-side {
	font-size: .85em;
	font-weight: normal;
	opacity: .8;
	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: .5em .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;
	}
}