Template:Tournament row/styles.css: Difference between revisions
Template page
More actions
m Build reusable tournament data and rendering system |
m Build reusable tournament data and rendering system |
||
| Line 6: | Line 6: | ||
} | } | ||
.loka-tournament-list-header | .loka-tournament-list-header { | ||
display: grid; | display: grid; | ||
grid-template-columns: minmax( | grid-template-columns: minmax(190px, 250px) minmax(72px, 86px) repeat(3, minmax(118px, 1fr)); | ||
gap: .5em; | |||
padding: .48em .7em; | padding: .48em .7em; | ||
color: #f0cf8e; | color: #f0cf8e; | ||
| Line 24: | Line 19: | ||
} | } | ||
.loka-tournament-list- | .loka-tournament-list-groups { | ||
display: flex; | |||
flex-direction: column; | |||
} | |||
.loka-tournament-list-group { | |||
position: relative; | position: relative; | ||
isolation: isolate; | isolation: isolate; | ||
display: grid; | |||
grid-template-columns: minmax(190px, 250px) minmax(0, 1fr); | |||
min-height: 56px; | |||
border-top: 1px solid rgba(255, 255, 255, .075); | border-top: 1px solid rgba(255, 255, 255, .075); | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
.loka-tournament-list- | .loka-tournament-list-group:hover { background: rgba(255, 255, 255, .035); } | ||
} | |||
.loka-tournament-list-name | .loka-tournament-list-name { | ||
position: relative; | position: relative; | ||
z-index: 1; | z-index: 1; | ||
align-self: stretch; | |||
display: flex; | |||
align-items: flex-start; | |||
justify-content: center; | |||
flex-direction: column; | |||
min-width: 0; | min-width: 0; | ||
padding: .5em .7em; | |||
} | } | ||
.loka-tournament-list-primary { | .loka-tournament-list-primary { | ||
font-family: UNIVERSAL-SERIF, serif; | font-family: UNIVERSAL-SERIF, serif; | ||
font-size: | font-size: .94em; | ||
font-variant: small-caps; | font-variant: small-caps; | ||
font-weight: 600; | font-weight: 600; | ||
} | } | ||
.loka-tournament-list-date { | .loka-tournament-list-date { display:block; margin-top:.1em; font-size:.68em; opacity:.72; } | ||
.loka-tournament-list-backdrop ~ .loka-tournament-list-name a { text-shadow:0 1px 1px rgba(0,0,0,.34); } | |||
} | |||
.loka-tournament-list-backdrop ~ .loka-tournament-list-name | |||
} | |||
.loka-tournament-list-backdrop { | .loka-tournament-list-backdrop { | ||
| Line 73: | Line 62: | ||
inset: 0 auto 0 0; | inset: 0 auto 0 0; | ||
z-index: 0; | z-index: 0; | ||
width: | width: 40%; | ||
overflow: hidden; | overflow: hidden; | ||
opacity: . | opacity: .84; | ||
pointer-events: none; | pointer-events: none; | ||
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 | -webkit-mask-image: linear-gradient(to right, #000 0%, #000 34%, rgba(0,0,0,.76) 60%, rgba(0,0,0,.32) 83%, transparent 100%); | ||
mask-image: linear-gradient(to right, #000 0%, #000 | mask-image: linear-gradient(to right, #000 0%, #000 34%, rgba(0,0,0,.76) 60%, rgba(0,0,0,.32) 83%, transparent 100%); | ||
} | } | ||
.loka-tournament-list-backdrop img { | .loka-tournament-list-backdrop img { | ||
display:block; | |||
width:100%; | |||
height:100%; | |||
object-fit:cover; | |||
object-position:center 30%; | |||
filter:brightness(.9) saturate(.96); | |||
image-rendering:auto; | |||
. | |||
} | } | ||
.loka-tournament-list- | .loka-tournament-list-events { position:relative; z-index:1; min-width:0; } | ||
} | |||
.loka-tournament-list- | .loka-tournament-list-event { | ||
display: | display:grid; | ||
grid-template-columns:minmax(72px,86px) repeat(3,minmax(118px,1fr)); | |||
gap:.5em; | |||
align-items:center; | |||
min-height:56px; | |||
padding:.46em .7em .46em .4em; | |||
box-sizing:border-box; | |||
font-size:.82em; | |||
} | } | ||
.loka-tournament-list-members li:not(:last-child)::after { | .loka-tournament-list-event + .loka-tournament-list-event { border-top:1px solid rgba(255,255,255,.065); } | ||
.loka-tournament-list-format,.loka-tournament-list-placement { min-width:0; } | |||
.loka-tournament-list-placement { display:flex; align-items:center; gap:.35em; } | |||
} | .loka-tournament-list-placement-text { min-width:0; overflow-wrap:anywhere; } | ||
.loka-tournament-list-placement-name,.loka-tournament-list-placement-members { display:block; } | |||
.loka-tournament-list-winner { | .loka-tournament-list-placement-members { margin-top:.06em; font-size:.78em; opacity:.68; } | ||
.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 .4em; } | |||
.loka-tournament-list-third-stack { display:grid; gap:.22em; } | |||
.loka-tournament-list-winner { flex-wrap:wrap; } | |||
.loka-tournament-list-championship { | .loka-tournament-list-championship { | ||
display: block; | display:block; | ||
flex: 0 0 100%; | flex:0 0 100%; | ||
margin-top: . | margin-top:.12em; | ||
font-size: .72em; | font-size:.72em; | ||
line-height: 1.25; | line-height:1.25; | ||
opacity: . | opacity:.7; | ||
} | } | ||
.loka-tournament-list-champion-label { | .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-group img,.loka-tournament-list-event img { image-rendering:pixelated; } | |||
.loka-tournament-filter-target { display:none; } | |||
} | |||
.loka-tournament-list-mobile-label { | |||
} | |||
.loka-tournament-list- | |||
} | |||
.loka-tournament-filter-target { | |||
} | |||
.loka-tournament-controls { | .loka-tournament-controls { | ||
--loka-control-bg: rgba(255, 255, 255, .04); | --loka-control-bg:rgba(255,255,255,.04); | ||
--loka-control-border: rgba(255, 255, 255, .12); | --loka-control-border:rgba(255,255,255,.12); | ||
--loka-control-active-bg: rgba(240, 207, 142, .16); | --loka-control-active-bg:rgba(240,207,142,.16); | ||
--loka-control-active-border: rgba(240, 207, 142, .58); | --loka-control-active-border:rgba(240,207,142,.58); | ||
--loka-control-active-color: #f0cf8e; | --loka-control-active-color:#f0cf8e; | ||
display: flex; | display:flex; | ||
flex-wrap: wrap; | flex-wrap:wrap; | ||
gap: .55em 1em; | gap:.55em 1em; | ||
margin: 0 0 .65em | margin:0 0 .65em; | ||
} | } | ||
.loka-tournament-control-links a:hover, | .loka-tournament-control,.loka-tournament-control-links { display:flex; align-items:center; flex-wrap:wrap; gap:.35em; } | ||
.loka-tournament-control-links a:focus { | .loka-tournament-control-label { font-size:.68em; font-weight:700; letter-spacing:.04em; opacity:.62; text-transform:uppercase; } | ||
.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-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-newest:target ~ .loka-tournament-controls a[href$="#tournaments-all-newest"], | ||
| Line 236: | Line 145: | ||
#tournaments-3v3-newest:target ~ .loka-tournament-controls a[href$="#tournaments-3v3-newest"], | #tournaments-3v3-newest:target ~ .loka-tournament-controls a[href$="#tournaments-3v3-newest"], | ||
#tournaments-3v3-oldest:target ~ .loka-tournament-controls a[href$="#tournaments-3v3-oldest"] { | #tournaments-3v3-oldest:target ~ .loka-tournament-controls a[href$="#tournaments-3v3-oldest"] { | ||
background: var(--loka-control-active-bg) !important; | background:var(--loka-control-active-bg)!important; | ||
border-color: var(--loka-control-active-border) !important; | border-color:var(--loka-control-active-border)!important; | ||
color: var(--loka-control-active-color) !important; | color:var(--loka-control-active-color)!important; | ||
font-weight: 600 !important; | font-weight:600!important; | ||
} | } | ||
| Line 250: | Line 159: | ||
#tournaments-3v3-newest: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 { | #tournaments-3v3-oldest:target ~ .loka-tournament-controls .loka-tournament-control-default a { | ||
background: var(--loka-control-bg); | background:var(--loka-control-bg); | ||
border-color: var(--loka-control-border); | border-color:var(--loka-control-border); | ||
color: inherit; | color:inherit; | ||
font-weight: normal | font-weight:normal; | ||
} | } | ||
.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-all-oldest:target ~ .loka-tournament-controls .loka-tournament-format-links--newest, | ||
#tournaments-1v1-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-2v2-oldest:target ~ .loka-tournament-controls .loka-tournament-format-links--newest, | ||
#tournaments-3v3-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-all-oldest:target ~ .loka-tournament-controls .loka-tournament-format-links--oldest, | ||
#tournaments-1v1-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-2v2-oldest:target ~ .loka-tournament-controls .loka-tournament-format-links--oldest, | ||
#tournaments-3v3-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-newest:target ~ .loka-tournament-controls .loka-tournament-sort-links--all, | ||
#tournaments-1v1-oldest:target ~ .loka-tournament-controls .loka-tournament-sort-links--all, | #tournaments-1v1-oldest:target ~ .loka-tournament-controls .loka-tournament-sort-links--all, | ||
| Line 282: | Line 179: | ||
#tournaments-2v2-oldest: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-newest:target ~ .loka-tournament-controls .loka-tournament-sort-links--all, | ||
#tournaments-3v3-oldest: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-newest:target ~ .loka-tournament-controls .loka-tournament-sort-links--1v1, | ||
#tournaments-1v1-oldest:target ~ .loka-tournament-controls .loka-tournament-sort-links--1v1, | #tournaments-1v1-oldest:target ~ .loka-tournament-controls .loka-tournament-sort-links--1v1, | ||
| Line 291: | Line 185: | ||
#tournaments-2v2-oldest: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-newest:target ~ .loka-tournament-controls .loka-tournament-sort-links--3v3, | ||
#tournaments-3v3-oldest: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-groups, | |||
#tournaments-1v1-oldest:target ~ .loka-tournament-list .loka-tournament-list-groups, | |||
#tournaments-2v2-oldest:target ~ .loka-tournament-list .loka-tournament-list-groups, | |||
#tournaments-3v3-oldest:target ~ .loka-tournament-list .loka-tournament-list-groups { flex-direction:column-reverse; } | |||
#tournaments-1v1-newest:target ~ .loka-tournament-list .loka-tournament-list-group:not(.loka-tournament-list-group--has-1v1), | |||
#tournaments-1v1-oldest:target ~ .loka-tournament-list .loka-tournament-list-group:not(.loka-tournament-list-group--has-1v1), | |||
#tournaments-2v2-newest:target ~ .loka-tournament-list .loka-tournament-list-group:not(.loka-tournament-list-group--has-2v2), | |||
#tournaments-2v2-oldest:target ~ .loka-tournament-list .loka-tournament-list-group:not(.loka-tournament-list-group--has-2v2), | |||
#tournaments-3v3-newest:target ~ .loka-tournament-list .loka-tournament-list-group:not(.loka-tournament-list-group--has-3v3), | |||
#tournaments-3v3-oldest:target ~ .loka-tournament-list .loka-tournament-list-group:not(.loka-tournament-list-group--has-3v3) { display:none; } | |||
#tournaments-1v1-newest:target ~ .loka-tournament-list .loka-tournament-list-event:not(.loka-tournament-list-event--1v1), | |||
#tournaments-1v1-oldest:target ~ .loka-tournament-list .loka-tournament-list-event:not(.loka-tournament-list-event--1v1), | |||
#tournaments-2v2-newest:target ~ .loka-tournament-list .loka-tournament-list-event:not(.loka-tournament-list-event--2v2), | |||
#tournaments-2v2-oldest:target ~ .loka-tournament-list .loka-tournament-list-event:not(.loka-tournament-list-event--2v2), | |||
#tournaments-3v3-newest:target ~ .loka-tournament-list .loka-tournament-list-event:not(.loka-tournament-list-event--3v3), | |||
#tournaments-3v3-oldest:target ~ .loka-tournament-list .loka-tournament-list-event:not(.loka-tournament-list-event--3v3) { display:none; } | |||
.loka-tournament-list- | @media (max-width:760px) { | ||
.loka-tournament-list-header { display:none; } | |||
.loka-tournament-list-group { grid-template-columns:1fr; } | |||
.loka-tournament-list-name { min-height:44px; padding:.55em .7em .35em; } | |||
.loka-tournament-list-events { grid-column:1; } | |||
.loka-tournament-list-event { | |||
grid-template-columns:minmax(0,1fr); | |||
grid-template-areas:"format" "winner" "second" "third"; | |||
gap:.28em; | |||
padding:.35em .7em .6em; | |||
} | } | ||
.loka-tournament-list-format { grid-area:format; } | |||
.loka-tournament-list-winner { grid-area:winner; } | |||
.loka-tournament-list-second { grid-area:second; } | |||
.loka-tournament-list-third-stack { grid-area:third; } | |||
.loka-tournament-list-mobile-label { display:inline-block; flex:0 0 5.4em; font-size:.72em; font-weight:700; letter-spacing:.03em; text-transform:uppercase; opacity:.58; } | |||
.loka-tournament-list-backdrop { width:100%; opacity:.8; -webkit-mask-image:linear-gradient(to right,#000 0%,#000 30%,rgba(0,0,0,.65) 68%,rgba(0,0,0,.2) 100%); mask-image:linear-gradient(to right,#000 0%,#000 30%,rgba(0,0,0,.65) 68%,rgba(0,0,0,.2) 100%); } | |||
} | } | ||
@media (max-width: 420px) { | @media (max-width:420px) { | ||
.loka-tournament-controls { | .loka-tournament-controls { display:grid; grid-template-columns:1fr; } | ||
.loka-tournament-control { align-items:flex-start; } | |||
.loka-tournament-list-placement { align-items:flex-start; } | |||
.loka-tournament-control { | |||
.loka-tournament-list-placement { | |||
} | } | ||
@media (prefers-color-scheme: light) { | @media (prefers-color-scheme:light) { | ||
.loka-tournament-controls { | .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-group { border-top-color:rgba(0,0,0,.08); } | |||
.loka-tournament-list-event + .loka-tournament-list-event { border-top-color:rgba(0,0,0,.07); } | |||
.loka-tournament-list-champion-label { color:#8b5d22; } | |||
.loka-tournament-list-backdrop { opacity:.72; } | |||
.loka-tournament-list { | |||
.loka-tournament-list-header { | |||
.loka-tournament-list- | |||
.loka-tournament-list- | |||
.loka-tournament-list-champion-label { | |||
.loka-tournament-list-backdrop { | |||
} | } | ||
Revision as of 09:46, 19 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 {
display: grid;
grid-template-columns: minmax(190px, 250px) minmax(72px, 86px) repeat(3, minmax(118px, 1fr));
gap: .5em;
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-groups {
display: flex;
flex-direction: column;
}
.loka-tournament-list-group {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
min-height: 56px;
border-top: 1px solid rgba(255, 255, 255, .075);
overflow: hidden;
}
.loka-tournament-list-group:hover { background: rgba(255, 255, 255, .035); }
.loka-tournament-list-name {
position: relative;
z-index: 1;
align-self: stretch;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
min-width: 0;
padding: .5em .7em;
}
.loka-tournament-list-primary {
font-family: UNIVERSAL-SERIF, serif;
font-size: .94em;
font-variant: small-caps;
font-weight: 600;
}
.loka-tournament-list-date { display:block; margin-top:.1em; font-size:.68em; opacity:.72; }
.loka-tournament-list-backdrop ~ .loka-tournament-list-name a { text-shadow:0 1px 1px rgba(0,0,0,.34); }
.loka-tournament-list-backdrop {
position: absolute;
inset: 0 auto 0 0;
z-index: 0;
width: 40%;
overflow: hidden;
opacity: .84;
pointer-events: none;
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 34%, rgba(0,0,0,.76) 60%, rgba(0,0,0,.32) 83%, transparent 100%);
mask-image: linear-gradient(to right, #000 0%, #000 34%, rgba(0,0,0,.76) 60%, rgba(0,0,0,.32) 83%, transparent 100%);
}
.loka-tournament-list-backdrop img {
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center 30%;
filter:brightness(.9) saturate(.96);
image-rendering:auto;
}
.loka-tournament-list-events { position:relative; z-index:1; min-width:0; }
.loka-tournament-list-event {
display:grid;
grid-template-columns:minmax(72px,86px) repeat(3,minmax(118px,1fr));
gap:.5em;
align-items:center;
min-height:56px;
padding:.46em .7em .46em .4em;
box-sizing:border-box;
font-size:.82em;
}
.loka-tournament-list-event + .loka-tournament-list-event { border-top:1px solid rgba(255,255,255,.065); }
.loka-tournament-list-format,.loka-tournament-list-placement { min-width:0; }
.loka-tournament-list-placement { display:flex; align-items:center; gap:.35em; }
.loka-tournament-list-placement-text { min-width:0; overflow-wrap:anywhere; }
.loka-tournament-list-placement-name,.loka-tournament-list-placement-members { display:block; }
.loka-tournament-list-placement-members { margin-top:.06em; font-size:.78em; opacity:.68; }
.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 .4em; }
.loka-tournament-list-third-stack { display:grid; gap:.22em; }
.loka-tournament-list-winner { flex-wrap:wrap; }
.loka-tournament-list-championship {
display:block;
flex:0 0 100%;
margin-top:.12em;
font-size:.72em;
line-height:1.25;
opacity:.7;
}
.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-group img,.loka-tournament-list-event img { image-rendering:pixelated; }
.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,.loka-tournament-control-links { 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 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-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;
}
.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-groups,
#tournaments-1v1-oldest:target ~ .loka-tournament-list .loka-tournament-list-groups,
#tournaments-2v2-oldest:target ~ .loka-tournament-list .loka-tournament-list-groups,
#tournaments-3v3-oldest:target ~ .loka-tournament-list .loka-tournament-list-groups { flex-direction:column-reverse; }
#tournaments-1v1-newest:target ~ .loka-tournament-list .loka-tournament-list-group:not(.loka-tournament-list-group--has-1v1),
#tournaments-1v1-oldest:target ~ .loka-tournament-list .loka-tournament-list-group:not(.loka-tournament-list-group--has-1v1),
#tournaments-2v2-newest:target ~ .loka-tournament-list .loka-tournament-list-group:not(.loka-tournament-list-group--has-2v2),
#tournaments-2v2-oldest:target ~ .loka-tournament-list .loka-tournament-list-group:not(.loka-tournament-list-group--has-2v2),
#tournaments-3v3-newest:target ~ .loka-tournament-list .loka-tournament-list-group:not(.loka-tournament-list-group--has-3v3),
#tournaments-3v3-oldest:target ~ .loka-tournament-list .loka-tournament-list-group:not(.loka-tournament-list-group--has-3v3) { display:none; }
#tournaments-1v1-newest:target ~ .loka-tournament-list .loka-tournament-list-event:not(.loka-tournament-list-event--1v1),
#tournaments-1v1-oldest:target ~ .loka-tournament-list .loka-tournament-list-event:not(.loka-tournament-list-event--1v1),
#tournaments-2v2-newest:target ~ .loka-tournament-list .loka-tournament-list-event:not(.loka-tournament-list-event--2v2),
#tournaments-2v2-oldest:target ~ .loka-tournament-list .loka-tournament-list-event:not(.loka-tournament-list-event--2v2),
#tournaments-3v3-newest:target ~ .loka-tournament-list .loka-tournament-list-event:not(.loka-tournament-list-event--3v3),
#tournaments-3v3-oldest:target ~ .loka-tournament-list .loka-tournament-list-event:not(.loka-tournament-list-event--3v3) { display:none; }
@media (max-width:760px) {
.loka-tournament-list-header { display:none; }
.loka-tournament-list-group { grid-template-columns:1fr; }
.loka-tournament-list-name { min-height:44px; padding:.55em .7em .35em; }
.loka-tournament-list-events { grid-column:1; }
.loka-tournament-list-event {
grid-template-columns:minmax(0,1fr);
grid-template-areas:"format" "winner" "second" "third";
gap:.28em;
padding:.35em .7em .6em;
}
.loka-tournament-list-format { grid-area:format; }
.loka-tournament-list-winner { grid-area:winner; }
.loka-tournament-list-second { grid-area:second; }
.loka-tournament-list-third-stack { grid-area:third; }
.loka-tournament-list-mobile-label { display:inline-block; flex:0 0 5.4em; font-size:.72em; font-weight:700; letter-spacing:.03em; text-transform:uppercase; opacity:.58; }
.loka-tournament-list-backdrop { width:100%; opacity:.8; -webkit-mask-image:linear-gradient(to right,#000 0%,#000 30%,rgba(0,0,0,.65) 68%,rgba(0,0,0,.2) 100%); mask-image:linear-gradient(to right,#000 0%,#000 30%,rgba(0,0,0,.65) 68%,rgba(0,0,0,.2) 100%); }
}
@media (max-width:420px) {
.loka-tournament-controls { display:grid; grid-template-columns:1fr; }
.loka-tournament-control { align-items:flex-start; }
.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-group { border-top-color:rgba(0,0,0,.08); }
.loka-tournament-list-event + .loka-tournament-list-event { border-top-color:rgba(0,0,0,.07); }
.loka-tournament-list-champion-label { color:#8b5d22; }
.loka-tournament-list-backdrop { opacity:.72; }
}