Template:Infobox tournament/styles.css: Difference between revisions
Template page
More actions
m Empirically align Challonge bracket icon with link text |
m Make the edit pencil smaller and lower-key |
||
| Line 4: | Line 4: | ||
display:none; | display:none; | ||
position:absolute; | position:absolute; | ||
top:. | top:.5em; | ||
right:. | right:.5em; | ||
z-index:5; | z-index:5; | ||
border-radius: | border-radius:3px; | ||
background:rgba(0,0,0,. | background:rgba(0,0,0,.3); | ||
} | } | ||
| Line 16: | Line 16: | ||
display:flex; | display:flex; | ||
align-items:center; | align-items:center; | ||
gap:. | gap:.3em; | ||
padding:. | padding:.22em .4em; | ||
background:none; | background:none; | ||
color:#f0ece2; | color:#f0ece2; | ||
text-decoration:none; | text-decoration:none; | ||
line-height:1; | line-height:1; | ||
opacity:.7; | |||
} | } | ||
.loka-tournament-edit-pencil-icon { font-size:. | .loka-tournament-edit-pencil a.external:hover { opacity:1; } | ||
.loka-tournament-edit-pencil-icon { font-size:.78em; } | |||
.loka-tournament-edit-pencil-label { | .loka-tournament-edit-pencil-label { | ||
| Line 29: | Line 31: | ||
overflow:hidden; | overflow:hidden; | ||
white-space:nowrap; | white-space:nowrap; | ||
font-size:. | font-size:.56em; | ||
opacity:0; | opacity:0; | ||
transition:max-width .2s ease,opacity .2s ease; | transition:max-width .2s ease,opacity .2s ease; | ||
| Line 39: | Line 38: | ||
@media (prefers-color-scheme: light) { | @media (prefers-color-scheme: light) { | ||
.loka-tournament-edit-pencil { background:rgba(255,255,255,. | .loka-tournament-edit-pencil { background:rgba(255,255,255,.4); } | ||
.loka-tournament-edit-pencil a.external { color:#241f1a; } | .loka-tournament-edit-pencil a.external { color:#241f1a; } | ||
} | } | ||
Revision as of 19:04, 19 August 2026
.loka-infobox.loka-infobox--wide { width:400px; position:relative; }
.loka-tournament-edit-pencil {
display:none;
position:absolute;
top:.5em;
right:.5em;
z-index:5;
border-radius:3px;
background:rgba(0,0,0,.3);
}
.loka-infobox.loka-infobox--wide:hover .loka-tournament-edit-pencil { display:flex; }
.loka-tournament-edit-pencil a.external {
display:flex;
align-items:center;
gap:.3em;
padding:.22em .4em;
background:none;
color:#f0ece2;
text-decoration:none;
line-height:1;
opacity:.7;
}
.loka-tournament-edit-pencil a.external:hover { opacity:1; }
.loka-tournament-edit-pencil-icon { font-size:.78em; }
.loka-tournament-edit-pencil-label {
max-width:0;
overflow:hidden;
white-space:nowrap;
font-size:.56em;
opacity:0;
transition:max-width .2s ease,opacity .2s ease;
}
.loka-tournament-edit-pencil:hover .loka-tournament-edit-pencil-label { max-width:160px; opacity:1; }
@media (prefers-color-scheme: light) {
.loka-tournament-edit-pencil { background:rgba(255,255,255,.4); }
.loka-tournament-edit-pencil a.external { color:#241f1a; }
}
.loka-infobox.loka-infobox--wide .loka-infobox-header-photo { height:140px; }
.loka-infobox.loka-infobox--wide .loka-infobox-header-photo img {
object-position:center 26%;
-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 42%,rgba(0,0,0,.96) 52%,rgba(0,0,0,.84) 64%,rgba(0,0,0,.62) 76%,rgba(0,0,0,.35) 88%,transparent 100%);
mask-image:linear-gradient(to bottom,#000 0%,#000 42%,rgba(0,0,0,.96) 52%,rgba(0,0,0,.84) 64%,rgba(0,0,0,.62) 76%,rgba(0,0,0,.35) 88%,transparent 100%);
}
.loka-infobox.loka-infobox--wide .loka-infobox-header-scrim { background:linear-gradient(to bottom,rgba(5,5,5,.75) 0,rgba(5,5,5,.32) 50px,transparent 92px); }
.loka-tournament-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.loka-tournament-details { padding:.52em; }
.loka-tournament-col-heading,.loka-tournament-event-results-heading,.loka-podium-label,.loka-championship-heading,.loka-chrono-header-title,.loka-chrono-header-side {
color:#f0cf8e;
font-size:.7em;
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
}
.loka-tournament-details .loka-tournament-col-heading { margin-bottom:.42em; }
.loka-tournament-mode-icon,.loka-tournament-inline-icon { display:inline-block; margin-right:.25em; vertical-align:middle; }
.loka-tournament-inline-icon.loka-tournament-host-shield { margin-right:.4em; }
.loka-tournament-event-summary { padding:.36em .42em; background:rgba(255,255,255,.035); border-radius:3px; }
.loka-tournament-event-summary--secondary { margin-top:.35em; }
.loka-tournament-event-summary-heading { font-size:.86em; }
.loka-tournament-event-summary-date,.loka-tournament-event-summary-bracket { display:block; margin-top:.12em; font-size:.73em; opacity:.74; }
.loka-tournament-bracket-icon { display:inline-block; }
.loka-tournament-bracket-icon img { vertical-align:-3.5px; }
.loka-tournament-shared-details { display:grid; gap:.38em; margin-top:.45em; }
.loka-tournament-detail-label { display:block; margin-bottom:.08em; font-size:.66em; opacity:.64; text-transform:uppercase; letter-spacing:.03em; }
.loka-tournament-detail-value { display:block; font-size:.83em; overflow-wrap:anywhere; }
.loka-tournament-event-results--secondary { margin-top:.25em; padding-top:.25em; border-top:1px solid rgba(255,255,255,.07); }
.loka-tournament-event-results-heading { padding:.35em .55em .05em; }
.loka-podium-row { display:flex; align-items:center; gap:.45em; padding:.36em .5em; }
.loka-podium-info { flex:1; min-width:0; }
.loka-podium-row img,.loka-championship > img { image-rendering:pixelated; }
.loka-podium-team { font-size:.9em; font-weight:600; }
.loka-podium-single { font-weight:normal; }
.loka-podium-info .loka-hlist { font-size:.8em; font-weight:normal; opacity:.72; }
.loka-championship { display:flex; align-items:center; gap:.45em; box-sizing:border-box; margin:.1em 0 0; max-width:179px; padding:.36em 2.3em .55em .5em; background:rgba(255,255,255,.035); border-radius:3px; }
.loka-championship-info { flex:1; min-width:0; }
.loka-championship-name { display:block; font-size:.82em; font-weight:normal; overflow-wrap:anywhere; }
.loka-championship-status { display:block; margin-top:.06em; font-size:.61em; opacity:.72; letter-spacing:.03em; text-transform:uppercase; }
.loka-championship-status--no-show { color:#e5b0a8; text-transform:none; }
.loka-championship-previous { display:block; margin-top:.14em; font-size:.61em; opacity:.68; }
.loka-championship-previous-link { white-space:nowrap; }
.loka-podium-disclaimer { padding:.3em .6em .4em; font-size:.7em; font-style:italic; font-weight:normal; opacity:.6; text-align:center; }
.loka-chrono-box { padding-top:.45em; }
.loka-chrono-header { position:relative; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; padding:.48em .3em; background:rgba(255,255,255,.045); }
.loka-chrono-header-side--prev { grid-column:1; }
.loka-chrono-header-side--next { grid-column:3; }
.loka-chrono-header-title { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:45%; text-align:center; line-height:1.25; }
.loka-chrono-header-side { text-align:center; white-space:nowrap; }
.loka-chrono-grid { display:grid; grid-template-columns:1fr 1fr 1fr; }
.loka-chrono-pane { display:flex; flex-direction:column; justify-content:center; min-height:2.9em; padding:.4em .3em; text-align:center; font-size:.76em; }
.loka-chrono-title--current { font-weight:700; }
.loka-chrono-year { margin-top:.12em; font-size:.88em; font-weight:normal; opacity:.72; }
.loka-chrono-tba,.loka-chrono-pane--empty { color:rgba(255,255,255,.42); }
.loka-chrono-box:last-child { padding-bottom:.5em; }
@media (max-width:600px) {
.loka-infobox.loka-infobox--wide { width:100%; max-width:100%; }
.loka-tournament-columns { grid-template-columns:1fr; }
.loka-tournament-results { margin-top:.15em; }
.loka-tournament-event-summary { padding:.42em .48em; }
}
@media (prefers-color-scheme:light) {
.loka-tournament-col-heading,.loka-tournament-event-results-heading,.loka-podium-label,.loka-championship-heading,.loka-chrono-header-title,.loka-chrono-header-side { color:#8b5d22; }
.loka-tournament-event-summary,.loka-championship { background:rgba(0,0,0,.035); }
.loka-chrono-header { background:rgba(0,0,0,.035); }
.loka-tournament-event-results--secondary { border-top-color:rgba(0,0,0,.08); }
.loka-championship-status--no-show { color:#8f3028; }
.loka-chrono-tba,.loka-chrono-pane--empty { color:rgba(0,0,0,.38); }
}