Jump to content
Toggle search
Toggle menu
141
331
3
2.5K
Loka Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:Infobox tournament/styles.css: Difference between revisions

Template page
More actions
← Older edit
m Build reusable tournament data and rendering system
m Let the championship box fill full width on mobile instead of a fixed 179px meant for the desktop two-column layout
 
(36 intermediate revisions by the same user not shown)
Line 1: Line 1:
.loka-tournament-columns {
.loka-infobox.loka-infobox--wide { width:400px; position:relative; }
display: grid;
grid-template-columns: 1fr 1fr;
}


.loka-tournament-details {
.loka-tournament-edit-hover-zone {
padding: .5em;
position:absolute;
top:0;
left:0;
right:0;
height:64px;
z-index:4;
}
}
 
.loka-infobox-header-photo ~ .loka-tournament-edit-hover-zone { height:140px; }
.loka-tournament-col-heading {
.loka-tournament-edit-pencil {
font-size: .7em;
display:none;
font-weight: 700;
position:absolute;
color: #f0cf8e;
top:.5em;
text-transform: uppercase;
right:.5em;
letter-spacing: .04em;
z-index:5;
border-radius:3px;
background:rgba(0,0,0,.3);
}
}


.loka-tournament-details .loka-tournament-col-heading {
.loka-tournament-edit-hover-zone:hover .loka-tournament-edit-pencil,
margin-bottom: .45em;
.loka-tournament-edit-hover-zone:hover .loka-tournament-view-image { display:flex; }
}


/* Single column, not 2 -- side by side each tile only got ~half the
.loka-tournament-edit-pencil a.external {
  Details column's own width (itself already half the box), so anything
display:flex;
  longer than a short word (a full town name, a full written-out date)
align-items:center;
  wrapped awkwardly. Stacked, each tile gets the Details column's full
padding:.22em .4em;
  width instead. */
background:none;
.loka-tournament-details-grid {
color:#f0ece2;
display: grid;
text-decoration:none;
grid-template-columns: 1fr;
line-height:1;
gap: .45em;
opacity:.7;
}
}
.loka-tournament-edit-pencil a.external:hover { opacity:1; }


.loka-tournament-detail-label {
.loka-tournament-edit-pencil a.external::after { display:none; }
display: block;
.loka-tournament-edit-pencil-icon { font-size:.78em; }
font-size: .68em;
opacity: .65;
text-transform: uppercase;
letter-spacing: .03em;
margin-bottom: .1em;
}


.loka-tournament-detail-value {
.loka-tournament-edit-pencil-label {
display: block;
max-width:0;
font-size: .85em;
margin-left:0;
word-break: break-word;
overflow:hidden;
white-space:nowrap;
font-size:.56em;
opacity:0;
transition:max-width .2s ease,margin-left .2s ease,opacity .2s ease;
}
}
.loka-tournament-edit-pencil:hover .loka-tournament-edit-pencil-label { max-width:160px; margin-left:.3em; opacity:1; }


.loka-tournament-runners-tile {
.loka-tournament-view-image {
grid-column: 1 / -1;
display:none;
margin-top: .45em;
position:absolute;
top:2.1em;
right:.5em;
z-index:5;
border-radius:3px;
background:rgba(0,0,0,.3);
}
}
 
.loka-tournament-view-image a {
.loka-podium-row {
display:block;
display: flex;
padding:.22em .4em;
align-items: center;
color:#f0ece2;
gap: .5em;
text-decoration:none;
padding: .4em .5em;
font-size:.56em;
line-height:1;
opacity:.7;
}
}
.loka-tournament-view-image a:hover { opacity:1; }


/* Without this the text block only ever shrink-wraps to its own content,
@media (prefers-color-scheme: light) {
  leaving the rest of the row's width as visible dead space on the right
.loka-tournament-edit-pencil { background:rgba(255,255,255,.4); }
  (worse the shorter the team/player name) -- stretching it to fill the
.loka-tournament-edit-pencil a.external { color:#241f1a; }
  row means that space goes to normal left-aligned text instead. */
.loka-tournament-view-image { background:rgba(255,255,255,.4); }
.loka-podium-info {
.loka-tournament-view-image a { color:#241f1a; }
flex: 1;
min-width: 0;
}
 
.loka-podium-row img {
image-rendering: pixelated;
}
 
.loka-podium-label {
font-size: .7em;
font-weight: 700;
color: #f0cf8e;
text-transform: uppercase;
letter-spacing: .04em;
}
 
.loka-podium-team {
font-weight: 600;
}
 
.loka-podium-single {
font-weight: normal;
}
 
.loka-podium-info .loka-hlist {
font-size: .82em;
font-weight: normal;
opacity: .72;
}
 
.loka-championship {
display: grid;
grid-template-columns: 1fr;
justify-items: center;
gap: .1em;
width: 130px;
max-width: 90%;
box-sizing: border-box;
margin: .15em auto .35em;
padding: .28em .4em;
border-radius: 3px;
background: rgba(255, 255, 255, .025);
text-align: center;
}
 
.loka-championship-heading {
grid-column: 1 / -1;
color: #f0cf8e;
font-size: .66em;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
 
.loka-championship-transition {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .25em;
min-width: 0;
}
 
.loka-championship-name {
font-size: .8em;
font-weight: normal;
overflow-wrap: anywhere;
}
 
.loka-championship-arrow {
color: #f0cf8e;
opacity: .72;
}
 
.loka-championship-status {
min-width: 0;
font-size: .62em;
letter-spacing: .03em;
opacity: .72;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
}
 
.loka-championship-status--no-show {
color: #e5b0a8;
white-space: normal;
}
}


.loka-podium-disclaimer {
.loka-infobox.loka-infobox--wide .loka-infobox-header-photo { height:140px; }
font-size: .7em;
.loka-infobox.loka-infobox--wide .loka-infobox-header-photo img {
font-style: italic;
object-position:center 26%;
opacity: .6;
-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%);
text-align: center;
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%);
padding: .25em .6em .4em;
}
}
.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); }


/* Small centred flourish under the disclaimer -- deliberately full colour
.loka-tournament-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  (not muted like the disclaimer text itself) so it reads as a closing
.loka-tournament-details { padding:.52em; }
  accent rather than more faded text. Inset from the sides rather than a
  full-width rule, since the box no longer uses full dividers anywhere
  else. Deliberately NOT repeated under the chronology header bar --
  there, it sat visually between the heading and the current tournament's
  own name in the pane below, reading as an odd divider between two
  things that belong together rather than a closing accent. */
.loka-podium-disclaimer::after {
content: "";
display: block;
width: 48px;
height: 1px;
margin: .35em auto 0;
background: #f0cf8e;
}


/* Plain row, not a solid coloured bar, no dividers above or below --
.loka-tournament-results { padding-top:2.56px; }
  fully matches the same "eyebrow" label used for Tournament Details,
.loka-tournament-col-heading,.loka-podium-label,.loka-championship-heading,.loka-chrono-header-title,.loka-chrono-header-side {
  Winning Team, and Winner/2nd Place/3rd Place (loka-tournament-col-heading
color:#f0cf8e;
  / loka-podium-label): identical font-size, weight, case, letter-spacing
font-size:.7em;
  and colour on all three (title and both side labels alike), so the
font-weight:700;
  whole set reads as one consistent family instead of some being bold
letter-spacing:.04em;
  and gold while others are smaller and muted. */
text-transform:uppercase;
.loka-chrono-header {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
padding: .35em 0;
}
}


.loka-chrono-header-title,
.loka-tournament-event-results-heading {
.loka-chrono-header-side {
color:#f0cf8e;
font-size: .7em;
font-size:.7em;
font-weight: 700;
font-weight:700;
text-transform: uppercase;
letter-spacing:.04em;
letter-spacing: .04em;
color: #f0cf8e;
text-align: center;
white-space: nowrap;
}
}
.loka-tournament-details .loka-tournament-col-heading { margin-bottom:.42em; }


.loka-chrono-header-side--prev {
.loka-tournament-inline-icon { display:inline-block; margin-right:.25em; vertical-align:middle; }
grid-column: 1;
.loka-tournament-inline-icon.loka-tournament-host-shield { margin-right:.4em; }
}


.loka-chrono-header-side--next {
.loka-tournament-host-shield img { vertical-align: -1.72px; }
grid-column: 3;
}


/* The side label's own column now runs edge-to-edge with the infobox (no
.loka-tournament-mode-icon { display:inline-block; margin-right:.25em; vertical-align:1.5px; }
  header padding, see .loka-chrono-header), so an arrow positioned off the
  *column's* edge would land outside .loka-infobox's overflow:hidden and
  get clipped invisible. Instead the arrow anchors to this inner,
  shrink-wrapped text span -- it sits just outside the actual glyphs,
  safely inside the box, and (being outside the centred string itself)
  never shifts where "Previous"/"Next" centres. */
.loka-chrono-header-side-text {
position: relative;
display: inline-block;
}


.loka-chrono-header-side--prev .loka-chrono-header-side-text::before {
.loka-tournament-event-summary { padding:.36em .42em; background:rgba(255,255,255,.035); border-radius:3px; }
content: "\2190";
.loka-tournament-event-summary--secondary { margin-top:.35em; }
position: absolute;
.loka-tournament-event-summary-heading { font-size:.86em; }
right: 100%;
.loka-tournament-event-summary-date,.loka-tournament-event-summary-bracket { display:block; margin-top:.12em; font-size:.73em; opacity:.74; }
margin-right: .35em;
.loka-tournament-bracket-icon { display:inline-block; }
}


.loka-chrono-header-side--next .loka-chrono-header-side-text::after {
.loka-tournament-bracket-icon img { vertical-align:-3.5px; }
content: "\2192";
.loka-tournament-shared-details { display:grid; gap:.38em; margin-top:.45em; }
position: absolute;
.loka-tournament-detail-label { display:block; margin-bottom:.08em; font-size:.66em; opacity:.64; text-transform:uppercase; letter-spacing:.03em; }
left: 100%;
.loka-tournament-detail-value { display:block; font-size:.83em; overflow-wrap:anywhere; }
margin-left: .35em;
}


/* Pulled out of the grid entirely and centred against the whole header's
.loka-tournament-event-results--secondary { margin-top:.25em; padding-top:.25em; border-top:1px solid rgba(255,255,255,.07); }
  width instead of being confined to column 2's share of it -- lets a
.loka-tournament-event-results-heading { padding:.35em .55em .05em; }
  wide, non-wrapping title extend past where column 2 alone would end
  without affecting the side labels' position (they're independently
  pinned to columns 1/3 above) or the grid's own track sizing. */
.loka-chrono-header-title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}


.loka-chrono-grid {
.loka-podium-row { display:flex; align-items:center; gap:.45em; padding:.36em .5em; }
display: grid;
.loka-podium-row + .loka-podium-row { margin-top:.35em; }
grid-template-columns: 1fr 1fr 1fr;
.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-chrono-pane {
.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; }
display: flex;
.loka-championship-info { flex:1; min-width:0; }
flex-direction: column;
.loka-championship-name { display:block; font-size:.82em; font-weight:normal; overflow-wrap:anywhere; }
justify-content: center;
.loka-championship-status { display:block; margin-top:.06em; font-size:.61em; opacity:.72; letter-spacing:.03em; text-transform:uppercase; }
padding: .4em .35em;
.loka-championship-status--no-show { color:#e5b0a8; text-transform:none; }
text-align: center;
.loka-championship-previous { display:block; margin-top:.14em; font-size:.61em; opacity:.68; }
font-size: .78em;
}


.loka-chrono-title--current {
.loka-championship-previous-link { white-space:nowrap; }
font-weight: 700;
}


.loka-chrono-year {
.loka-podium-disclaimer { padding:.65em .6em .4em; font-size:.7em; font-style:italic; font-weight:normal; opacity:.6; text-align:center; }
font-weight: normal;
opacity: .75;
font-size: .9em;
margin-top: .2em;
}


.loka-chrono-tba {
.loka-chrono-box { padding-top:.45em; }
color: rgba(255, 255, 255, .4);
.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-empty {
.loka-chrono-header-title { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:45%; text-align:center; line-height:1.25; }
color: rgba(255, 255, 255, .4);
.loka-chrono-header-side { text-align:center; white-space:nowrap; }
font-style: italic;
.loka-chrono-grid { display:grid; grid-template-columns:1fr 1fr 1fr; }
}


/* Below this width the box itself has already gone full-width and
.loka-chrono-pane { display:flex; flex-direction:column; justify-content:flex-start; min-height:2.9em; padding:.4em .3em; text-align:center; font-size:.76em; }
  unfloated (see Template:Infobox/styles.css), but Details|Results side
.loka-chrono-title--current { font-weight:700; }
  by side would still squeeze each into an unreadably narrow column, so
.loka-chrono-year { margin-top:.12em; font-size:.88em; font-weight:normal; opacity:.72; }
  they stack instead -- the extra top margin (on top of Details' own
.loka-chrono-tba,.loka-chrono-pane--empty { color:rgba(255,255,255,.42); }
  bottom padding and Results' own top padding) keeps the two from reading
.loka-chrono-box:last-child { padding-bottom:.5em; }
  as one continuous block once stacked. */
@media (max-width: 600px) {
.loka-tournament-columns {
grid-template-columns: 1fr;
}


.loka-tournament-results {
@media (max-width:600px) {
margin-top: .3em;
}
.loka-infobox.loka-infobox--wide { width:100%; max-width:100%; }
.loka-tournament-event-summary { padding:.42em .48em; }
}
}


/* The light gold accent (#f0cf8e) and the semi-transparent white "TBA"/
@media (prefers-color-scheme:light) {
  "--" text both assume a dark box background to show up against -- now
.loka-tournament-col-heading,.loka-tournament-event-results-heading,.loka-podium-label,.loka-championship-heading,.loka-chrono-header-title,.loka-chrono-header-side { color:#9c6b2e; }
  that .loka-infobox switches to a light card in light mode (see
.loka-tournament-event-summary,.loka-championship { background:rgba(0,0,0,.035); }
  Template:Infobox/styles.css), these need darker equivalents of their
.loka-chrono-header { background:rgba(0,0,0,.035); }
  own or they'd wash out to near-invisible pastel/white-on-cream. Reuses
.loka-tournament-event-results--secondary { border-top-color:rgba(0,0,0,.08); }
  the same darker amber (#9c6b2e) Template:Biome already uses for its own
.loka-championship-status--no-show { color:#8f3028; }
  light-card label variant, for a consistent look. Doesn't touch the
.loka-chrono-tba,.loka-chrono-pane--empty { color:rgba(0,0,0,.38); }
  header photo's own overlay text (name/type, "Winning Team" etc. sitting
  directly on the photo) -- that has its own permanent dark scrim/shadow
  independent of page theme, so it's already fine in both modes. */
@media (prefers-color-scheme: light) {
.loka-tournament-col-heading,
.loka-podium-label,
.loka-championship-heading,
.loka-championship-arrow,
.loka-chrono-header-title,
.loka-chrono-header-side {
color: #9c6b2e;
}
 
.loka-championship {
background: rgba(0, 0, 0, .025);
}
 
.loka-championship-status--no-show {
color: #8f3028;
}
 
.loka-chrono-tba,
.loka-chrono-empty {
color: rgba(0, 0, 0, .35);
}
 
.loka-podium-disclaimer::after {
background: #9c6b2e;
}
}
}

Latest revision as of 20:26, 22 August 2026

.loka-infobox.loka-infobox--wide { width:400px; position:relative; }

.loka-tournament-edit-hover-zone {
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:64px;
	z-index:4;
}
.loka-infobox-header-photo ~ .loka-tournament-edit-hover-zone { height:140px; }
.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-tournament-edit-hover-zone:hover .loka-tournament-edit-pencil,
.loka-tournament-edit-hover-zone:hover .loka-tournament-view-image { display:flex; }

.loka-tournament-edit-pencil a.external {
	display:flex;
	align-items:center;
	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 a.external::after { display:none; }
.loka-tournament-edit-pencil-icon { font-size:.78em; }

.loka-tournament-edit-pencil-label {
	max-width:0;
	margin-left:0;
	overflow:hidden;
	white-space:nowrap;
	font-size:.56em;
	opacity:0;
	transition:max-width .2s ease,margin-left .2s ease,opacity .2s ease;
}
.loka-tournament-edit-pencil:hover .loka-tournament-edit-pencil-label { max-width:160px; margin-left:.3em; opacity:1; }

.loka-tournament-view-image {
	display:none;
	position:absolute;
	top:2.1em;
	right:.5em;
	z-index:5;
	border-radius:3px;
	background:rgba(0,0,0,.3);
}
.loka-tournament-view-image a {
	display:block;
	padding:.22em .4em;
	color:#f0ece2;
	text-decoration:none;
	font-size:.56em;
	line-height:1;
	opacity:.7;
}
.loka-tournament-view-image a:hover { 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-tournament-view-image { background:rgba(255,255,255,.4); }
	.loka-tournament-view-image a { 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-results { padding-top:2.56px; }
.loka-tournament-col-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-event-results-heading {
	color:#f0cf8e;
	font-size:.7em;
	font-weight:700;
	letter-spacing:.04em;
}
.loka-tournament-details .loka-tournament-col-heading { margin-bottom:.42em; }

.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-host-shield img { vertical-align: -1.72px; }

.loka-tournament-mode-icon { display:inline-block; margin-right:.25em; vertical-align:1.5px; }

.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-row + .loka-podium-row { margin-top:.35em; }
.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:.65em .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:flex-start; 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-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:#9c6b2e; }
	.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); }
}
Retrieved from "https://wiki.lokamc.com/index.php?title=Template:Infobox_tournament/styles.css&oldid=1856"
Last modified
This page was last edited on 22 August 2026, at 20:26.