Template:Tournament row/styles.css
Template page
More actions
.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:.4em;
margin-bottom:.4em;
}
}
.loka-tournament-list-champion-label { color:#f0cf8e; font-size:.88em; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.loka-tournament-list-champion-state { margin-left:.28em; }
.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); }
}