Template:Tournament row/styles.css: Difference between revisions
Template page
More actions
m Improve tournament list row layout and responsive backdrop |
m More mobile padding above/below the champion line, and more space between the Champion label, name, and established/retained status |
||
| (23 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.loka-tournament-list { | .loka-tournament-list { | ||
width: 100%; | |||
box-sizing: border-box; | |||
border: 1px solid rgba(255, 255, 255, .1); | border: 1px solid rgba(255, 255, 255, .1); | ||
border-radius: 5px; | border-radius: 5px; | ||
| Line 6: | Line 8: | ||
} | } | ||
.loka-tournament-list-header | .loka-tournament-list-header { | ||
display: grid; | display: grid; | ||
grid-template-columns: minmax( | grid-template-columns: 190px minmax(0, 1fr); | ||
align-items: center; | align-items: center; | ||
color: #f0cf8e; | color: #f0cf8e; | ||
font-size: .68em; | font-size: .68em; | ||
| Line 24: | Line 20: | ||
} | } | ||
.loka-tournament-list- | .loka-tournament-list-header-name { | ||
padding: .62em .7em; | |||
} | |||
.loka-tournament-list-header-events { | |||
display: grid; | |||
grid-template-columns: minmax(68px, 84px) repeat(3, minmax(0, 1fr)); | |||
align-items: center; | |||
gap: .5em; | |||
padding: .62em .7em .62em .4em; | |||
box-sizing: border-box; | |||
} | |||
.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: 190px minmax(0, 1fr); | |||
min-height: 64px; | |||
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-group--image { background:#141414; color:#f3f0e9; } | |||
} | .loka-tournament-list-group--image a { color:#fff; } | ||
.loka-tournament-list-group--image:hover .loka-tournament-list-backdrop::after { background: rgba(8, 10, 12, .4); } | |||
.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- | .loka-tournament-list-titleline { | ||
display: | display: flex; | ||
align-items: center; | |||
gap: .3em; | |||
min-width: 0; | |||
} | } | ||
.loka-tournament-list- | .loka-tournament-list-primary-format { display: none; } | ||
} | .loka-tournament-list-titleline .loka-tournament-list-inline-icon { margin-right: 0; } | ||
.loka-tournament-list-date { display:block; margin-top:.1em; font-size:.68em; opacity:.72; } | |||
.loka-tournament-list-inline-icon { display:inline-block; margin-right:.25em; } | |||
.loka-tournament-list-backdrop ~ .loka-tournament-list-name a { text-shadow:0 1px 1px rgba(0,0,0,.42); } | |||
.loka-tournament-list-backdrop { | .loka-tournament-list-backdrop { | ||
position: absolute; | position: absolute; | ||
inset: | inset: 0; | ||
z-index: 0; | z-index: 0; | ||
width: | width: 100%; | ||
overflow: hidden; | overflow: hidden; | ||
opacity: | opacity: 1; | ||
pointer-events: none; | pointer-events: none; | ||
} | } | ||
.loka-tournament-list-backdrop | .loka-tournament-list-backdrop::after { content:""; position:absolute; inset:0; background:rgba(8,10,12,.64); } | ||
} | |||
.loka-tournament-list-backdrop img { | .loka-tournament-list-backdrop img { | ||
display:block; | |||
width:100%; | |||
height:100%; | |||
object-fit:cover; | |||
object-position:center center; | |||
filter:brightness(.78) saturate(.92); | |||
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(68px,84px) repeat(3,minmax(0,1fr)); | |||
gap:.5em; | |||
align-items:center; | |||
min-height:64px; | |||
padding:.46em .7em .46em .4em; | |||
box-sizing:border-box; | |||
font-size:.82em; | |||
} | } | ||
.loka-tournament-list- | .loka-tournament-list-event + .loka-tournament-list-event { | ||
border-top:1px solid transparent; | |||
border-image:linear-gradient(to right,transparent,rgba(255,255,255,.065) 84px) 1; | |||
} | } | ||
.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-medal { display:flex; align-items:center; justify-content:center; flex:0 0 16px; width:16px; height:16px; line-height:0; } | |||
.loka-tournament-list-medal img { display:block; } | |||
.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:.72em; 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-third-stack--joint { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.38em; align-items:start; } | |||
.loka-tournament-list-third-stack--joint .loka-tournament-list-placement { align-items:flex-start; gap:.24em; } | |||
.loka-tournament-list-third-stack--joint .loka-tournament-list-placement-members { font-size:.66em; line-height:1.15; } | |||
.loka-tournament-list-winner { | .loka-tournament-list-winner { flex-wrap:wrap; row-gap:0; } | ||
} | |||
.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; | ||
} | } | ||
@media (max-width:760px) { | |||
.loka-tournament-list-championship { | |||
margin-top:.65em; | |||
margin-bottom:.65em; | |||
} | |||
.loka-tournament-list- | |||
} | } | ||
.loka-tournament-filter-target { | .loka-tournament-list-champion-label { color:#f0cf8e; font-size:.88em; font-weight:700; letter-spacing:.03em; text-transform:uppercase; } | ||
.loka-tournament-list-champion-name { margin-left:.4em; } | |||
} | .loka-tournament-list-champion-state { margin-left:.4em; } | ||
.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-tournament-controls { | ||
display: flex; | --loka-control-bg:rgba(255,255,255,.04); | ||
flex-wrap: wrap; | --loka-control-border:rgba(255,255,255,.12); | ||
gap: .55em 1em; | --loka-control-active-bg:rgba(240,207,142,.16); | ||
margin: 0 0 . | --loka-control-active-border:rgba(240,207,142,.58); | ||
--loka-control-active-color:#f0cf8e; | |||
display:flex; | |||
flex-wrap:wrap; | |||
justify-content:space-between; | |||
gap:.55em 1em; | |||
margin:0 0 1.4em; | |||
} | } | ||
.loka-tournament-control { | .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; } | |||
} | |||
.loka-tournament- | #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"] { | |||
.loka-tournament- | 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; | |||
} | } | ||
.loka-tournament-control- | #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; | |||
.loka-tournament-control- | font-weight:normal; | ||
.loka-tournament-control- | |||
.loka-tournament- | |||
.loka-tournament- | |||
.loka-tournament- | |||
} | } | ||
.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 245: | Line 229: | ||
#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 254: | Line 235: | ||
#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- | #tournaments-all-oldest:target ~ .loka-tournament-list .loka-tournament-list-groups, | ||
#tournaments-1v1-oldest:target ~ .loka-tournament-list .loka-tournament-list- | #tournaments-1v1-oldest:target ~ .loka-tournament-list .loka-tournament-list-groups, | ||
#tournaments-2v2-oldest:target ~ .loka-tournament-list .loka-tournament-list- | #tournaments-2v2-oldest:target ~ .loka-tournament-list .loka-tournament-list-groups, | ||
#tournaments-3v3-oldest:target ~ .loka-tournament-list .loka-tournament-list- | #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- | #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- | #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- | #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- | #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- | #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- | #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) { | ||
grid-template-columns: minmax(0, 1fr) | .loka-tournament-list-header { display:none; } | ||
grid-template-areas: | .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:"winner" "second" "third"; | |||
padding: . | gap:.28em; | ||
height:auto; | |||
min-height:0; | |||
padding:.6em .7em .6em; | |||
} | } | ||
.loka-tournament-list-events > .loka-tournament-list-event:first-child .loka-tournament-list-format { | |||
.loka-tournament-list- | display:none; | ||
display: | |||
} | } | ||
.loka-tournament-list-events > .loka-tournament-list-event:not(:first-child) { | |||
.loka-tournament-list- | position:relative; | ||
padding-top:1.9em; | |||
} | } | ||
.loka-tournament-list-format { | .loka-tournament-list-format { | ||
position:absolute; | |||
top:.4em; | |||
right:.7em; | |||
font-size:.78em; | |||
} | } | ||
.loka-tournament-list- | .loka-tournament-list-primary-format { | ||
display:block; | |||
position:absolute; | |||
top:.85em; | |||
right:1.1em; | |||
z-index:1; | |||
font-size:.78em; | |||
} | } | ||
.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-third-stack--joint { grid-template-columns:1fr; gap:.28em; } | |||
.loka-tournament-list-mobile-label { display:inline-block; flex:0 0 6.4em; white-space:nowrap; font-size:.72em; font-weight:700; letter-spacing:.03em; text-transform:uppercase; opacity:.58; } | |||
.loka-tournament-list-event + .loka-tournament-list-event { border-image:none; border-top-color:rgba(255,255,255,.065); } | |||
} | } | ||
@media ( | @media (max-width:420px) { | ||
.loka-tournament- | .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- | @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 | .loka-tournament-list-event + .loka-tournament-list-event { border-image:linear-gradient(to right,transparent,rgba(0,0,0,.07) 84px) 1; } | ||
.loka-tournament-list-champion-label { color:#8b5d22; } | |||
.loka-tournament-list-group--image { background:#171717; color:#f3f0e9; } | |||
.loka-tournament-list-group--image a { color:#fff; } | |||
.loka-tournament-list- | } | ||
.loka-tournament- | |||
.loka-tournament-list-champion-label { | |||
} | |||
.loka-tournament-list- | @media (max-width:760px) and (prefers-color-scheme:light) { | ||
.loka-tournament-list-event + .loka-tournament-list-event { border-image:none; border-top-color:rgba(0,0,0,.07); } | |||
} | } | ||
Latest revision as of 09:48, 23 August 2026
.loka-tournament-list {
width: 100%;
box-sizing: border-box;
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: 190px minmax(0, 1fr);
align-items: center;
color: #f0cf8e;
font-size: .68em;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
background: rgba(255, 255, 255, .045);
}
.loka-tournament-list-header-name {
padding: .62em .7em;
}
.loka-tournament-list-header-events {
display: grid;
grid-template-columns: minmax(68px, 84px) repeat(3, minmax(0, 1fr));
align-items: center;
gap: .5em;
padding: .62em .7em .62em .4em;
box-sizing: border-box;
}
.loka-tournament-list-groups {
display: flex;
flex-direction: column;
}
.loka-tournament-list-group {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
min-height: 64px;
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-group--image { background:#141414; color:#f3f0e9; }
.loka-tournament-list-group--image a { color:#fff; }
.loka-tournament-list-group--image:hover .loka-tournament-list-backdrop::after { background: rgba(8, 10, 12, .4); }
.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-titleline {
display: flex;
align-items: center;
gap: .3em;
min-width: 0;
}
.loka-tournament-list-primary-format { display: none; }
.loka-tournament-list-titleline .loka-tournament-list-inline-icon { margin-right: 0; }
.loka-tournament-list-date { display:block; margin-top:.1em; font-size:.68em; opacity:.72; }
.loka-tournament-list-inline-icon { display:inline-block; margin-right:.25em; }
.loka-tournament-list-backdrop ~ .loka-tournament-list-name a { text-shadow:0 1px 1px rgba(0,0,0,.42); }
.loka-tournament-list-backdrop {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
overflow: hidden;
opacity: 1;
pointer-events: none;
}
.loka-tournament-list-backdrop::after { content:""; position:absolute; inset:0; background:rgba(8,10,12,.64); }
.loka-tournament-list-backdrop img {
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
filter:brightness(.78) saturate(.92);
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(68px,84px) repeat(3,minmax(0,1fr));
gap:.5em;
align-items:center;
min-height:64px;
padding:.46em .7em .46em .4em;
box-sizing:border-box;
font-size:.82em;
}
.loka-tournament-list-event + .loka-tournament-list-event {
border-top:1px solid transparent;
border-image:linear-gradient(to right,transparent,rgba(255,255,255,.065) 84px) 1;
}
.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-medal { display:flex; align-items:center; justify-content:center; flex:0 0 16px; width:16px; height:16px; line-height:0; }
.loka-tournament-list-medal img { display:block; }
.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:.72em; 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-third-stack--joint { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.38em; align-items:start; }
.loka-tournament-list-third-stack--joint .loka-tournament-list-placement { align-items:flex-start; gap:.24em; }
.loka-tournament-list-third-stack--joint .loka-tournament-list-placement-members { font-size:.66em; line-height:1.15; }
.loka-tournament-list-winner { flex-wrap:wrap; row-gap:0; }
.loka-tournament-list-championship {
display:block;
flex:0 0 100%;
margin-top:.12em;
font-size:.72em;
line-height:1.25;
opacity:.7;
}
@media (max-width:760px) {
.loka-tournament-list-championship {
margin-top:.65em;
margin-bottom:.65em;
}
}
.loka-tournament-list-champion-label { color:#f0cf8e; font-size:.88em; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.loka-tournament-list-champion-name { margin-left:.4em; }
.loka-tournament-list-champion-state { margin-left:.4em; }
.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;
justify-content:space-between;
gap:.55em 1em;
margin:0 0 1.4em;
}
.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:"winner" "second" "third";
gap:.28em;
height:auto;
min-height:0;
padding:.6em .7em .6em;
}
.loka-tournament-list-events > .loka-tournament-list-event:first-child .loka-tournament-list-format {
display:none;
}
.loka-tournament-list-events > .loka-tournament-list-event:not(:first-child) {
position:relative;
padding-top:1.9em;
}
.loka-tournament-list-format {
position:absolute;
top:.4em;
right:.7em;
font-size:.78em;
}
.loka-tournament-list-primary-format {
display:block;
position:absolute;
top:.85em;
right:1.1em;
z-index:1;
font-size:.78em;
}
.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-third-stack--joint { grid-template-columns:1fr; gap:.28em; }
.loka-tournament-list-mobile-label { display:inline-block; flex:0 0 6.4em; white-space:nowrap; font-size:.72em; font-weight:700; letter-spacing:.03em; text-transform:uppercase; opacity:.58; }
.loka-tournament-list-event + .loka-tournament-list-event { border-image:none; border-top-color:rgba(255,255,255,.065); }
}
@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-image:linear-gradient(to right,transparent,rgba(0,0,0,.07) 84px) 1; }
.loka-tournament-list-champion-label { color:#8b5d22; }
.loka-tournament-list-group--image { background:#171717; color:#f3f0e9; }
.loka-tournament-list-group--image a { color:#fff; }
}
@media (max-width:760px) and (prefers-color-scheme:light) {
.loka-tournament-list-event + .loka-tournament-list-event { border-image:none; border-top-color:rgba(0,0,0,.07); }
}