Template:Tournament row/styles.css
Template page
More actions
.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(215px, 280px) minmax(78px, 90px) repeat(3, minmax(130px, 1fr));
column-gap: .55em;
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: "·";
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 {
--loka-control-bg: rgba(255, 255, 255, .04);
--loka-control-border: rgba(255, 255, 255, .12);
--loka-control-active-bg: rgba(240, 207, 142, .16);
--loka-control-active-border: rgba(240, 207, 142, .58);
--loka-control-active-color: #f0cf8e;
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 var(--loka-control-border);
border-radius: 4px;
background: var(--loka-control-bg);
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);
}
.loka-tournament-control-links .loka-tournament-control-default a {
background: var(--loka-control-active-bg);
border-color: var(--loka-control-active-border);
color: var(--loka-control-active-color);
font-weight: 600;
}
#tournaments-all-newest:target ~ .loka-tournament-controls a[href$="#tournaments-all-newest"],
#tournaments-all-oldest:target ~ .loka-tournament-controls a[href$="#tournaments-all-oldest"],
#tournaments-1v1-newest:target ~ .loka-tournament-controls a[href$="#tournaments-1v1-newest"],
#tournaments-1v1-oldest:target ~ .loka-tournament-controls a[href$="#tournaments-1v1-oldest"],
#tournaments-2v2-newest:target ~ .loka-tournament-controls a[href$="#tournaments-2v2-newest"],
#tournaments-2v2-oldest:target ~ .loka-tournament-controls a[href$="#tournaments-2v2-oldest"],
#tournaments-3v3-newest:target ~ .loka-tournament-controls a[href$="#tournaments-3v3-newest"],
#tournaments-3v3-oldest:target ~ .loka-tournament-controls a[href$="#tournaments-3v3-oldest"] {
background: var(--loka-control-active-bg) !important;
border-color: var(--loka-control-active-border) !important;
color: var(--loka-control-active-color) !important;
font-weight: 600 !important;
}
#tournaments-all-newest:target ~ .loka-tournament-controls .loka-tournament-control-default a,
#tournaments-all-oldest:target ~ .loka-tournament-controls .loka-tournament-control-default a,
#tournaments-1v1-newest:target ~ .loka-tournament-controls .loka-tournament-control-default a,
#tournaments-1v1-oldest:target ~ .loka-tournament-controls .loka-tournament-control-default a,
#tournaments-2v2-newest:target ~ .loka-tournament-controls .loka-tournament-control-default a,
#tournaments-2v2-oldest:target ~ .loka-tournament-controls .loka-tournament-control-default a,
#tournaments-3v3-newest:target ~ .loka-tournament-controls .loka-tournament-control-default a,
#tournaments-3v3-oldest:target ~ .loka-tournament-controls .loka-tournament-control-default a {
background: var(--loka-control-bg);
border-color: var(--loka-control-border);
color: inherit;
font-weight: normal;
}
/* 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-controls {
--loka-control-bg: rgba(0, 0, 0, .025);
--loka-control-border: rgba(0, 0, 0, .12);
--loka-control-active-bg: rgba(156, 107, 46, .12);
--loka-control-active-border: rgba(156, 107, 46, .45);
--loka-control-active-color: #754b18;
}
.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: var(--loka-control-bg);
border-color: var(--loka-control-border);
}
.loka-tournament-list-champion-label {
color: #8b5d22;
}
.loka-tournament-list-backdrop {
opacity: .5;
}
.loka-tournament-list-backdrop img {
filter: brightness(1) saturate(.92);
}
}