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

Revision as of 23:50, 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(82px, .5fr) minmax(215px, 1.55fr) repeat(3, minmax(130px, 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-format,
.loka-tournament-list-placement {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.loka-tournament-list-primary {
	display: inline;
	margin-left: .3em;
}

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

.loka-tournament-list-date {
	display: block;
	margin-top: .12em;
	font-size: .76em;
	opacity: .68;
}

.loka-tournament-list-backdrop + .loka-tournament-list-name .loka-tournament-list-primary a {
	text-shadow: 0 1px 1px rgba(0, 0, 0, .42);
}

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

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

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

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

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

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

.loka-tournament-list-placement-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

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

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

.loka-tournament-list-members li {
	display: inline;
}

.loka-tournament-list-members li:not(:last-child)::after {
	content: "\00b7";
	margin: 0 .42em;
}

.loka-tournament-list-winner {
	flex-wrap: wrap;
}

.loka-tournament-list-championship {
	display: block;
	flex: 0 0 100%;
	margin-top: .18em;
	font-size: .72em;
	line-height: 1.25;
	opacity: .68;
}

.loka-tournament-list-champion-label {
	color: #f0cf8e;
	font-size: .88em;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.loka-tournament-list-mobile-label {
	display: none;
}

.loka-tournament-list-rows {
	display: flex;
	flex-direction: column;
}

.loka-tournament-filter-target {
	display: none;
}

.loka-tournament-controls {
	display: flex;
	flex-wrap: wrap;
	gap: .55em 1em;
	margin: 0 0 .65em;
}

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

.loka-tournament-control-label {
	font-size: .68em;
	font-weight: 700;
	letter-spacing: .04em;
	opacity: .62;
	text-transform: uppercase;
}

.loka-tournament-control-links {
	display: flex;
	flex-wrap: wrap;
	gap: .35em;
}

.loka-tournament-control-links a {
	display: inline-block;
	padding: .3em .72em;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 4px;
	background: rgba(255, 255, 255, .04);
	color: inherit;
	font-size: .78em;
	text-decoration: none;
}

.loka-tournament-control-links a:hover,
.loka-tournament-control-links a:focus {
	background: rgba(240, 207, 142, .14);
	border-color: rgba(240, 207, 142, .42);
}

/* Each hidden target stores both selections. Switching the sort therefore
   preserves the format filter (and vice versa), while display:none prevents
   the browser from visibly jumping to the target. */
.loka-tournament-format-links--oldest,
.loka-tournament-sort-links--1v1,
.loka-tournament-sort-links--2v2,
.loka-tournament-sort-links--3v3 {
	display: none;
}

#tournaments-all-oldest:target ~ .loka-tournament-controls .loka-tournament-format-links--newest,
#tournaments-1v1-oldest:target ~ .loka-tournament-controls .loka-tournament-format-links--newest,
#tournaments-2v2-oldest:target ~ .loka-tournament-controls .loka-tournament-format-links--newest,
#tournaments-3v3-oldest:target ~ .loka-tournament-controls .loka-tournament-format-links--newest {
	display: none;
}

#tournaments-all-oldest:target ~ .loka-tournament-controls .loka-tournament-format-links--oldest,
#tournaments-1v1-oldest:target ~ .loka-tournament-controls .loka-tournament-format-links--oldest,
#tournaments-2v2-oldest:target ~ .loka-tournament-controls .loka-tournament-format-links--oldest,
#tournaments-3v3-oldest:target ~ .loka-tournament-controls .loka-tournament-format-links--oldest {
	display: flex;
}

#tournaments-1v1-newest:target ~ .loka-tournament-controls .loka-tournament-sort-links--all,
#tournaments-1v1-oldest:target ~ .loka-tournament-controls .loka-tournament-sort-links--all,
#tournaments-2v2-newest:target ~ .loka-tournament-controls .loka-tournament-sort-links--all,
#tournaments-2v2-oldest:target ~ .loka-tournament-controls .loka-tournament-sort-links--all,
#tournaments-3v3-newest:target ~ .loka-tournament-controls .loka-tournament-sort-links--all,
#tournaments-3v3-oldest:target ~ .loka-tournament-controls .loka-tournament-sort-links--all {
	display: none;
}

#tournaments-1v1-newest:target ~ .loka-tournament-controls .loka-tournament-sort-links--1v1,
#tournaments-1v1-oldest:target ~ .loka-tournament-controls .loka-tournament-sort-links--1v1,
#tournaments-2v2-newest:target ~ .loka-tournament-controls .loka-tournament-sort-links--2v2,
#tournaments-2v2-oldest:target ~ .loka-tournament-controls .loka-tournament-sort-links--2v2,
#tournaments-3v3-newest:target ~ .loka-tournament-controls .loka-tournament-sort-links--3v3,
#tournaments-3v3-oldest:target ~ .loka-tournament-controls .loka-tournament-sort-links--3v3 {
	display: flex;
}

#tournaments-all-oldest:target ~ .loka-tournament-list .loka-tournament-list-rows,
#tournaments-1v1-oldest:target ~ .loka-tournament-list .loka-tournament-list-rows,
#tournaments-2v2-oldest:target ~ .loka-tournament-list .loka-tournament-list-rows,
#tournaments-3v3-oldest:target ~ .loka-tournament-list .loka-tournament-list-rows {
	flex-direction: column-reverse;
}

#tournaments-1v1-newest:target ~ .loka-tournament-list .loka-tournament-list-row:not(.loka-tournament-list-row--1v1),
#tournaments-1v1-oldest:target ~ .loka-tournament-list .loka-tournament-list-row:not(.loka-tournament-list-row--1v1),
#tournaments-2v2-newest:target ~ .loka-tournament-list .loka-tournament-list-row:not(.loka-tournament-list-row--2v2),
#tournaments-2v2-oldest:target ~ .loka-tournament-list .loka-tournament-list-row:not(.loka-tournament-list-row--2v2),
#tournaments-3v3-newest:target ~ .loka-tournament-list .loka-tournament-list-row:not(.loka-tournament-list-row--3v3),
#tournaments-3v3-oldest:target ~ .loka-tournament-list .loka-tournament-list-row:not(.loka-tournament-list-row--3v3) {
	display: none;
}

@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 format"
			"winner winner"
			"second second"
			"third third";
		row-gap: .3em;
		padding: .62em .7em;
	}

	.loka-tournament-list-name { grid-area: name; }
	.loka-tournament-list-format { grid-area: format; text-align: right; }
	.loka-tournament-list-winner { grid-area: winner; }
	.loka-tournament-list-second { grid-area: second; }
	.loka-tournament-list-third { grid-area: third; }

	.loka-tournament-list-placement {
		font-size: .9em;
	}

	.loka-tournament-list-mobile-label {
		display: inline-block;
		flex: 0 0 4.8em;
		font-size: .72em;
		font-weight: 700;
		letter-spacing: .03em;
		text-transform: uppercase;
		opacity: .58;
	}

	.loka-tournament-list-backdrop {
		width: 68%;
		opacity: .58;
	}
}

@media (max-width: 420px) {
	.loka-tournament-controls {
		display: grid;
		grid-template-columns: 1fr;
	}

	.loka-tournament-control {
		align-items: flex-start;
	}

	.loka-tournament-list-row {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"name"
			"format"
			"winner"
			"second"
			"third";
	}

	.loka-tournament-list-format {
		text-align: left;
	}

	.loka-tournament-list-placement {
		align-items: flex-start;
	}
}

@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-control-links a {
		background: rgba(0, 0, 0, .025);
		border-color: rgba(0, 0, 0, .12);
	}

	.loka-tournament-list-champion-label {
		color: #8b5d22;
	}

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

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