Template:Tournament row/styles.css: Difference between revisions

Revision as of 22:06, 18 August 2026

.loka-tournament-list {
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 5px;
	overflow: hidden;
	background: rgba(18, 18, 18, .45);
}

.loka-tournament-list-header,
.loka-tournament-list-row {
	display: grid;
	grid-template-columns: minmax(150px, 1.5fr) minmax(112px, .9fr) minmax(92px, .7fr) minmax(130px, 1fr) minmax(120px, 1fr);
	column-gap: .75em;
	align-items: center;
}

.loka-tournament-list-header {
	padding: .48em .7em;
	color: #f0cf8e;
	font-size: .68em;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, .045);
}

.loka-tournament-list-row {
	position: relative;
	isolation: isolate;
	min-height: 54px;
	padding: .48em .7em;
	font-size: .84em;
	border-top: 1px solid rgba(255, 255, 255, .075);
	overflow: hidden;
}

.loka-tournament-list-row:hover {
	background: rgba(255, 255, 255, .035);
}

.loka-tournament-list-name,
.loka-tournament-list-date,
.loka-tournament-list-format,
.loka-tournament-list-host,
.loka-tournament-list-winner {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.loka-tournament-list-primary {
	display: block;
}

.loka-tournament-list-primary {
	font-family: UNIVERSAL-SERIF, serif;
	font-size: 1.08em;
	font-variant: small-caps;
	font-weight: 600;
}

.loka-tournament-list-backdrop {
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 0;
	width: 44%;
	overflow: hidden;
	opacity: .48;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to right, #000 0%, #000 32%, transparent 100%);
	mask-image: linear-gradient(to right, #000 0%, #000 32%, transparent 100%);
}

.loka-tournament-list-backdrop img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	filter: brightness(.58) saturate(.85);
}

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

.loka-tournament-list-backdrop img {
	image-rendering: auto;
}

.loka-tournament-list-winner {
	display: flex;
	align-items: center;
	gap: .35em;
}

.loka-tournament-list-winner-text,
.loka-tournament-list-winner-name,
.loka-tournament-list-winner-members {
	display: block;
}

.loka-tournament-list-winner-members {
	margin-top: .08em;
	font-size: .78em;
	opacity: .66;
}

@media (max-width: 760px) {
	.loka-tournament-list-header {
		display: none;
	}

	.loka-tournament-list-row {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"name date"
			"host format"
			"winner winner";
		row-gap: .22em;
		padding: .62em .7em;
	}

	.loka-tournament-list-name { grid-area: name; }
	.loka-tournament-list-date { grid-area: date; text-align: right; }
	.loka-tournament-list-format { grid-area: format; text-align: right; }
	.loka-tournament-list-host { grid-area: host; }
	.loka-tournament-list-winner { grid-area: winner; font-size: .9em; opacity: .78; }

	.loka-tournament-list-backdrop {
		width: 72%;
		opacity: .36;
	}
}

@media (prefers-color-scheme: light) {
	.loka-tournament-list {
		background: rgba(255, 255, 255, .58);
		border-color: rgba(0, 0, 0, .1);
	}

	.loka-tournament-list-header {
		color: #8b5d22;
		background: rgba(0, 0, 0, .035);
	}

	.loka-tournament-list-row {
		border-top-color: rgba(0, 0, 0, .08);
	}

	.loka-tournament-list-row:hover {
		background: rgba(0, 0, 0, .025);
	}

	.loka-tournament-list-backdrop {
		opacity: .24;
	}

	.loka-tournament-list-backdrop img {
		filter: brightness(.9) saturate(.72);
	}
}