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 Infobox tournament: auto-generate a lead paragraph from the same infobox parameters
m Let the championship box fill full width on mobile instead of a fixed 179px meant for the desktop two-column layout
 
(53 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-edit-hover-zone {
/* No overlap trick here anymore -- the header photo's own scrim (see
position:absolute;
  Template:Infobox/styles.css) now runs its full fade to nearly opaque
top:0;
  before this block even starts, so there's no sharp edge left for it
left:0;
  to sit against; it just continues straight into the plain
right:0;
  .loka-infobox background underneath, already a near-match. */
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-details {
.loka-tournament-edit-pencil a.external {
padding: .5em;
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-col-heading {
.loka-tournament-edit-pencil-label {
font-size: .7em;
max-width:0;
font-weight: 700;
margin-left:0;
color: #f0cf8e;
overflow:hidden;
text-transform: uppercase;
white-space:nowrap;
letter-spacing: .04em;
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-details .loka-tournament-col-heading {
.loka-tournament-view-image {
margin-bottom: .45em;
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; }


.loka-tournament-details-grid {
@media (prefers-color-scheme: light) {
display: grid;
.loka-tournament-edit-pencil { background:rgba(255,255,255,.4); }
grid-template-columns: 1fr 1fr;
.loka-tournament-edit-pencil a.external { color:#241f1a; }
gap: .45em .5em;
.loka-tournament-view-image { background:rgba(255,255,255,.4); }
.loka-tournament-view-image a { color:#241f1a; }
}
}


.loka-tournament-detail-label {
.loka-infobox.loka-infobox--wide .loka-infobox-header-photo { height:140px; }
display: block;
.loka-infobox.loka-infobox--wide .loka-infobox-header-photo img {
font-size: .68em;
object-position:center 26%;
opacity: .65;
-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-transform: uppercase;
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%);
letter-spacing: .03em;
margin-bottom: .1em;
}
}
.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-detail-value {
.loka-tournament-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
display: block;
.loka-tournament-details { padding:.52em; }
font-size: .85em;
word-break: break-word;
}


.loka-tournament-runners-tile {
.loka-tournament-results { padding-top:2.56px; }
grid-column: 1 / -1;
.loka-tournament-col-heading,.loka-podium-label,.loka-championship-heading,.loka-chrono-header-title,.loka-chrono-header-side {
margin-top: .45em;
color:#f0cf8e;
font-size:.7em;
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
}
}


.loka-podium-row {
.loka-tournament-event-results-heading {
display: flex;
color:#f0cf8e;
align-items: center;
font-size:.7em;
gap: .5em;
font-weight:700;
padding: .4em .5em;
letter-spacing:.04em;
}
}
.loka-tournament-details .loka-tournament-col-heading { margin-bottom:.42em; }


.loka-podium-row img {
.loka-tournament-inline-icon { display:inline-block; margin-right:.25em; vertical-align:middle; }
image-rendering: pixelated;
.loka-tournament-inline-icon.loka-tournament-host-shield { margin-right:.4em; }
}


.loka-podium-label {
.loka-tournament-host-shield img { vertical-align: -1.72px; }
font-size: .7em;
font-weight: 700;
color: #f0cf8e;
text-transform: uppercase;
letter-spacing: .04em;
}


.loka-podium-team,
.loka-tournament-mode-icon { display:inline-block; margin-right:.25em; vertical-align:1.5px; }
.loka-podium-single {
font-weight: 600;
}


.loka-podium-info .loka-hlist {
.loka-tournament-event-summary { padding:.36em .42em; background:rgba(255,255,255,.035); border-radius:3px; }
font-size: .82em;
.loka-tournament-event-summary--secondary { margin-top:.35em; }
font-weight: normal;
.loka-tournament-event-summary-heading { font-size:.86em; }
opacity: .72;
.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-podium-disclaimer {
.loka-tournament-bracket-icon img { vertical-align:-3.5px; }
font-size: .7em;
.loka-tournament-shared-details { display:grid; gap:.38em; margin-top:.45em; }
font-style: italic;
.loka-tournament-detail-label { display:block; margin-bottom:.08em; font-size:.66em; opacity:.64; text-transform:uppercase; letter-spacing:.03em; }
opacity: .6;
.loka-tournament-detail-value { display:block; font-size:.83em; overflow-wrap:anywhere; }
text-align: center;
padding: .25em .6em .4em;
}


/* Plain row, not a solid coloured bar, no dividers above or below --
.loka-tournament-event-results--secondary { margin-top:.25em; padding-top:.25em; border-top:1px solid rgba(255,255,255,.07); }
  fully matches the same "eyebrow" label used for Tournament Details,
.loka-tournament-event-results-heading { padding:.35em .55em .05em; }
  Winning Team, and Winner/2nd Place/3rd Place (loka-tournament-col-heading
  / loka-podium-label): identical font-size, weight, case, letter-spacing
  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 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
padding: .35em .5em;
}


.loka-chrono-header-title,
.loka-podium-row { display:flex; align-items:center; gap:.45em; padding:.36em .5em; }
.loka-chrono-header-side {
.loka-podium-row + .loka-podium-row { margin-top:.35em; }
font-size: .7em;
.loka-podium-info { flex:1; min-width:0; }
font-weight: 700;
.loka-podium-row img,.loka-championship > img { image-rendering:pixelated; }
text-transform: uppercase;
.loka-podium-team { font-size:.9em; font-weight:600; }
letter-spacing: .04em;
.loka-podium-single { font-weight:normal; }
color: #f0cf8e;
.loka-podium-info .loka-hlist { font-size:.8em; font-weight:normal; opacity:.72; }
text-align: center;
}


.loka-chrono-grid {
.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: grid;
.loka-championship-info { flex:1; min-width:0; }
grid-template-columns: 1fr 1fr 1fr;
.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-chrono-pane {
.loka-championship-previous-link { white-space:nowrap; }
display: flex;
flex-direction: column;
justify-content: center;
padding: .4em .35em;
text-align: center;
font-size: .78em;
}


.loka-chrono-title--current {
.loka-podium-disclaimer { padding:.65em .6em .4em; font-size:.7em; font-style:italic; font-weight:normal; opacity:.6; text-align:center; }
font-weight: 700;
}


.loka-chrono-year {
.loka-chrono-box { padding-top:.45em; }
font-weight: normal;
.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); }
opacity: .75;
.loka-chrono-header-side--prev { grid-column:1; }
font-size: .9em;
.loka-chrono-header-side--next { grid-column:3; }
margin-top: .2em;
}


.loka-chrono-tba {
.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; }
}
.loka-chrono-grid { display:grid; grid-template-columns:1fr 1fr 1fr; }


.loka-chrono-empty {
.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; }
color: rgba(255, 255, 255, .4);
.loka-chrono-title--current { font-weight:700; }
font-style: italic;
.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; }


/* Below this width the box itself has already gone full-width and
@media (max-width:600px) {
  unfloated (see Template:Infobox/styles.css), but Details|Results side
  by side would still squeeze each into an unreadably narrow column, so
.loka-infobox.loka-infobox--wide { width:100%; max-width:100%; }
  they stack instead. */
.loka-tournament-event-summary { padding:.42em .48em; }
@media (max-width: 600px) {
.loka-tournament-columns {
grid-template-columns: 1fr;
}
}
}


/* 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-chrono-header-title,
.loka-chrono-header-side {
color: #9c6b2e;
}
 
.loka-chrono-tba,
.loka-chrono-empty {
color: rgba(0, 0, 0, .35);
}
}
}

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.