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
 
(34 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 {
.loka-infobox.loka-infobox--wide .loka-infobox-header-photo { height:140px; }
font-size: .82em;
.loka-infobox.loka-infobox--wide .loka-infobox-header-photo img {
font-weight: normal;
object-position:center 26%;
opacity: .72;
-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-championship {
.loka-tournament-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
display: flex;
.loka-tournament-details { padding:.52em; }
align-items: center;
gap: .5em;
margin: 0;
padding: .35em .5em;
text-align: left;
}


.loka-championship-spacer {
.loka-tournament-results { padding-top:2.56px; }
flex: 0 0 22px;
.loka-tournament-col-heading,.loka-podium-label,.loka-championship-heading,.loka-chrono-header-title,.loka-chrono-header-side {
width: 22px;
color:#f0cf8e;
font-size:.7em;
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
}
}


.loka-championship-info {
.loka-tournament-event-results-heading {
flex: 1;
color:#f0cf8e;
min-width: 0;
font-size:.7em;
font-weight:700;
letter-spacing:.04em;
}
}
.loka-tournament-details .loka-tournament-col-heading { margin-bottom:.42em; }


.loka-championship-heading {
.loka-tournament-inline-icon { display:inline-block; margin-right:.25em; vertical-align:middle; }
display: block;
.loka-tournament-inline-icon.loka-tournament-host-shield { margin-right:.4em; }
color: #f0cf8e;
font-size: .7em;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}


.loka-championship-summary {
.loka-tournament-host-shield img { vertical-align: -1.72px; }
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: .1em .4em;
}


.loka-championship-transition {
.loka-tournament-mode-icon { display:inline-block; margin-right:.25em; vertical-align:1.5px; }
display: inline-flex;
align-items: center;
gap: .25em;
min-width: 0;
}


.loka-championship-name {
.loka-tournament-event-summary { padding:.36em .42em; background:rgba(255,255,255,.035); border-radius:3px; }
font-size: .84em;
.loka-tournament-event-summary--secondary { margin-top:.35em; }
font-weight: normal;
.loka-tournament-event-summary-heading { font-size:.86em; }
overflow-wrap: anywhere;
.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-championship-arrow {
.loka-tournament-bracket-icon img { vertical-align:-3.5px; }
color: #f0cf8e;
.loka-tournament-shared-details { display:grid; gap:.38em; margin-top:.45em; }
opacity: .72;
.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-championship-status {
.loka-tournament-event-results--secondary { margin-top:.25em; padding-top:.25em; border-top:1px solid rgba(255,255,255,.07); }
min-width: 0;
.loka-tournament-event-results-heading { padding:.35em .55em .05em; }
font-size: .64em;
letter-spacing: .03em;
opacity: .72;
text-transform: uppercase;
white-space: nowrap;
}


.loka-championship-status::before {
.loka-podium-row { display:flex; align-items:center; gap:.45em; padding:.36em .5em; }
content: "\00b7";
.loka-podium-row + .loka-podium-row { margin-top:.35em; }
margin-right: .4em;
.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-status--no-show {
.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; }
color: #e5b0a8;
.loka-championship-info { flex:1; min-width:0; }
white-space: normal;
.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-podium-disclaimer {
.loka-championship-previous-link { white-space:nowrap; }
font-size: .7em;
font-style: italic;
opacity: .6;
text-align: center;
padding: .25em .6em .4em;
}


/* Small centred flourish under the disclaimer -- deliberately full colour
.loka-podium-disclaimer { padding:.65em .6em .4em; font-size:.7em; font-style:italic; font-weight:normal; opacity:.6; text-align:center; }
  (not muted like the disclaimer text itself) so it reads as a closing
  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-chrono-box { padding-top:.45em; }
  fully matches the same "eyebrow" label used for Tournament Details,
.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); }
  Winning Team, and Winner/2nd Place/3rd Place (loka-tournament-col-heading
.loka-chrono-header-side--prev { grid-column:1; }
  / loka-podium-label): identical font-size, weight, case, letter-spacing
.loka-chrono-header-side--next { grid-column:3; }
  and colour on all three (title and both side labels alike), so the
  whole set reads as one consistent family instead of some being bold
  and gold while others are smaller and muted. */
.loka-chrono-header {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
padding: .35em 0;
}


.loka-chrono-header-title,
.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 {
.loka-chrono-header-side { text-align:center; white-space:nowrap; }
font-size: .7em;
.loka-chrono-grid { display:grid; grid-template-columns:1fr 1fr 1fr; }
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: #f0cf8e;
text-align: center;
white-space: nowrap;
}


.loka-chrono-header-side--prev {
.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; }
grid-column: 1;
.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; }


.loka-chrono-header-side--next {
@media (max-width:600px) {
grid-column: 3;
.loka-infobox.loka-infobox--wide { width:100%; max-width:100%; }
.loka-tournament-event-summary { padding:.42em .48em; }
}
}


/* The side label's own column now runs edge-to-edge with the infobox (no
@media (prefers-color-scheme:light) {
  header padding, see .loka-chrono-header), so an arrow positioned off the
.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; }
  *column's* edge would land outside .loka-infobox's overflow:hidden and
.loka-tournament-event-summary,.loka-championship { background:rgba(0,0,0,.035); }
  get clipped invisible. Instead the arrow anchors to this inner,
.loka-chrono-header { background:rgba(0,0,0,.035); }
  shrink-wrapped text span -- it sits just outside the actual glyphs,
.loka-tournament-event-results--secondary { border-top-color:rgba(0,0,0,.08); }
  safely inside the box, and (being outside the centred string itself)
.loka-championship-status--no-show { color:#8f3028; }
  never shifts where "Previous"/"Next" centres. */
.loka-chrono-tba,.loka-chrono-pane--empty { color:rgba(0,0,0,.38); }
.loka-chrono-header-side-text {
position: relative;
display: inline-block;
}
 
.loka-chrono-header-side--prev .loka-chrono-header-side-text::before {
content: "\2190";
position: absolute;
right: 100%;
margin-right: .35em;
}
 
.loka-chrono-header-side--next .loka-chrono-header-side-text::after {
content: "\2192";
position: absolute;
left: 100%;
margin-left: .35em;
}
 
/* Pulled out of the grid entirely and centred against the whole header's
  width instead of being confined to column 2's share of it -- lets a
  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 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
 
.loka-chrono-pane {
display: flex;
flex-direction: column;
justify-content: center;
padding: .4em .35em;
text-align: center;
font-size: .78em;
}
 
.loka-chrono-title--current {
font-weight: 700;
}
 
.loka-chrono-year {
font-weight: normal;
opacity: .75;
font-size: .9em;
margin-top: .2em;
}
 
.loka-chrono-tba {
color: rgba(255, 255, 255, .4);
}
 
.loka-chrono-empty {
color: rgba(255, 255, 255, .4);
font-style: italic;
}
 
/* Below this width the box itself has already gone full-width and
  unfloated (see Template:Infobox/styles.css), but Details|Results side
  by side would still squeeze each into an unreadably narrow column, so
  they stack instead -- the extra top margin (on top of Details' own
  bottom padding and Results' own top padding) keeps the two from reading
  as one continuous block once stacked. */
@media (max-width: 600px) {
.loka-tournament-columns {
grid-template-columns: 1fr;
}
 
.loka-tournament-results {
margin-top: .3em;
}
}
 
/* The light gold accent (#f0cf8e) and the semi-transparent white "TBA"/
  "--" text both assume a dark box background to show up against -- now
  that .loka-infobox switches to a light card in light mode (see
  Template:Infobox/styles.css), these need darker equivalents of their
  own or they'd wash out to near-invisible pastel/white-on-cream. Reuses
  the same darker amber (#9c6b2e) Template:Biome already uses for its own
  light-card label variant, for a consistent look. Doesn't touch the
  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-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.