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: minmax(170px, 230px) minmax(0, 1fr);
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: .48em .7em;
}
.loka-tournament-list-header-events {
display: grid;
grid-template-columns: minmax(68px, 84px) repeat(3, minmax(0, 1fr));
gap: .5em;
padding: .48em .7em .48em .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: minmax(170px, 230px) 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-titleline {
display: flex;
align-items: center;
gap: .3em;
min-width: 0;
}
.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,.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(.8) saturate(.94);
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: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-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;
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; }
}