Template:Infobox/styles.css
Template page
More actions
.loka-infobox {
float: right;
clear: right;
width: 300px;
margin: 0 0 1em 1em;
/* Opaque, not translucent, for the same reason as before (a translucent
overlay only ever looked right against this wiki's own dark page
background, and washed out on light mode) -- but now a genuinely
neutral charcoal (equal R/G/B) rather than the previous warm
brown-tinted near-black, since that read as muddy/dirty rather than
a clean dark surface. Kept as a subtle vertical gradient (still lines
up with the header photo's own fade), a light touch of shadow to
lift it off the page without being heavy, and gently rounded
corners (clipped via overflow:hidden, which is why the header
photo's own square corners still end up rounded to match). */
background: linear-gradient(180deg, #1c1c1c 0%, #131313 100%);
color: #f0ece2;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
/* Whatever ends the box (a chrono grid row, a location panel, a links
row) otherwise supplies only its own small internal padding, which
reads as too tight against the box's own bottom edge -- this adds a
bit of dedicated breathing room after it, on every infobox type. */
padding-bottom: .6em;
}
@media (prefers-color-scheme: light) {
.loka-infobox {
background: linear-gradient(180deg, #ffffff 0%, #f4efe3 100%);
color: #241f1a;
border-color: rgba(0, 0, 0, .1);
box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
}
}
.loka-infobox--wide {
width: 440px;
}
/* Below this width a floated fixed-width box (300px, or 520px for --wide)
either overflows the viewport or squeezes body text into an unreadably
narrow column, so every infobox drops the float and goes full-width
instead -- applies wiki-wide since this is the shared shell every
specific infobox is built on. */
@media (max-width: 600px) {
.loka-infobox,
.loka-infobox--wide {
float: none;
clear: none;
width: 100%;
max-width: 100%;
margin: 0 0 1em 0;
box-sizing: border-box;
}
}
.loka-infobox-name {
text-align: center;
font-family: UNIVERSAL-SERIF, serif;
font-variant: small-caps;
font-size: 1.25em;
font-weight: 600;
padding: .5em;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* A quiet, full-width section ribbon. The neutral tint keeps the type label
visually tied to chronology headings without bringing back the saturated
brown blocks used by older revisions. */
.loka-infobox-type {
color: #f0cf8e;
background: rgba(255, 255, 255, .045);
font-weight: 700;
font-size: .7em;
text-transform: uppercase;
letter-spacing: .04em;
text-align: center;
padding: .3em .5em;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
@media (prefers-color-scheme: light) {
.loka-infobox-type {
color: #9c6b2e;
background: rgba(0, 0, 0, .035);
border-bottom-color: rgba(0, 0, 0, .1);
}
}
.loka-infobox-image {
line-height: 0;
text-align: center;
padding: 10px;
}
.loka-infobox-image img {
max-width: 100%;
height: auto;
}
.loka-infobox-header-photo {
position: relative;
height: 150px;
overflow: hidden;
}
.loka-infobox-header-photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Previous attempts used a second overlay div and tried to hand-tune its
alpha to approximately match the box's own background colour by eye
-- fragile, and it kept reading as a hard cut regardless of the exact
numbers used. This instead fades the photo's OWN opacity to nothing
via a mask, so what's revealed underneath as it disappears is
whatever's actually behind it (.loka-infobox's real background),
guaranteed to match exactly since nothing is being approximated. */
/* A straight two-stop fade (opaque to transparent in one even ramp)
reads as an abrupt cutoff to the eye -- most of its *visible* change
happens in the upper, still-fairly-opaque half, then the faint tail
lingers and still looks like it stops short. These extra stops
approximate an eased ease-out curve instead (steep at first, then
gradually gentler), which is the standard way to fake CSS gradient
easing since gradients can't reference an actual easing function. */
-webkit-mask-image: linear-gradient(to bottom,
#000 0%, #000 35%,
rgba(0, 0, 0, .85) 48%,
rgba(0, 0, 0, .6) 60%,
rgba(0, 0, 0, .36) 71%,
rgba(0, 0, 0, .18) 82%,
rgba(0, 0, 0, .06) 92%,
transparent 100%);
mask-image: linear-gradient(to bottom,
#000 0%, #000 35%,
rgba(0, 0, 0, .85) 48%,
rgba(0, 0, 0, .6) 60%,
rgba(0, 0, 0, .36) 71%,
rgba(0, 0, 0, .18) 82%,
rgba(0, 0, 0, .06) 92%,
transparent 100%);
}
.loka-infobox-header-scrim {
position: absolute;
inset: 0;
/* Only handles darkening the top for the name/type text now -- the
bottom fade is the image's own mask (above), not this. */
background: linear-gradient(to bottom,
rgba(8, 6, 3, .8) 0,
rgba(8, 6, 3, .35) 50px,
rgba(8, 6, 3, 0) 85px);
}
.loka-infobox-header-text {
position: relative;
text-align: center;
}
.loka-infobox-header-text .loka-infobox-name {
/* Explicit, not inherited: this text always sits on the header photo's
own permanent dark scrim (see loka-infobox-header-scrim), regardless
of the page's own light/dark theme, so it must always be light --
otherwise it silently inherits .loka-infobox's theme-adaptive colour
and goes dark-on-dark in light mode (a real, previously-unnoticed
bug: the name was unreadable against its own header photo). */
color: #ffffff;
border-bottom: none;
text-shadow: 0 2px 4px rgba(0, 0, 0, .95);
}
.loka-infobox-header-text .loka-infobox-type {
/* Sitting on top of an arbitrary photo needs some kind of scrim behind
it to stay legible regardless of what's in the image, so this one
keeps a background chip unlike the plain-text version above -- but a
neutral dark tint (matching the header photo's own scrim) rather
than a saturated brown patch. Always dark regardless of page theme,
like the rest of the header photo overlay. Case/weight/letter-spacing
and colour are otherwise identical to the base .loka-infobox-type
(and every other section-heading label in the infobox), so it reads
as the same kind of text rather than a one-off exception.
A full-width backdrop (the plain block-level default, same as the
base rule) rather than a tight pill -- a small badge floating over
an arbitrary photo can end up sitting on a patch that doesn't give
it enough contrast on one side or the other; spanning edge to edge
guarantees a consistent dark strip behind the text regardless of
what's in the photo at that point. No border-radius here since a
rounded shape wouldn't make sense on a bar that already meets both
edges of the box. */
background: rgba(8, 10, 12, .58);
border-bottom: none;
text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}
.loka-infobox-row {
display: flex;
/* center, not baseline -- baseline aligns the value to the last line
of a wrapped key (e.g. "CURRENT HOLDERS" wrapping to two lines
against a short one-line value like "16"), which reads as visibly
misaligned. Centering keeps the value vertically centred against
the key's full wrapped height regardless of how many lines it takes. */
align-items: center;
padding: .35em .6em .35em .9em;
border-top: 1px solid rgba(255, 255, 255, .08);
font-size: .9em;
}
/* Matches the muted, uppercase "eyebrow" label treatment used by
Infobox tournament's detail tiles and Infobox town's Location panel
(loka-tournament-detail-label / loka-town-location-heading), so every
infobox on the wiki shares one label language even though tournament's
is a stacked tile and this one is a side-by-side row. */
.loka-infobox-row-key {
flex: 0 0 38%;
font-size: .78em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .03em;
opacity: .65;
text-align: left;
}
.loka-infobox-row-value {
flex: 1;
text-align: left;
}
.loka-infobox-row--wide {
flex-direction: column;
align-items: flex-start;
gap: .3em;
}
.loka-hlist {
list-style: none;
margin: 0;
padding: 0;
display: inline;
}
.loka-hlist li {
display: inline;
}
/* Middle dot, not a comma -- matches Wikipedia's own hlist convention.
Only affects the non-stacked form: loka-hlist--stacked (one item per
line, e.g. every current use in Infobox tournament) overrides this to
content:none below, so this change doesn't touch anything already
using hlist on the wiki. */
.loka-hlist li:not(:last-child)::after {
content: " · ";
}
.loka-hlist--stacked {
display: block;
}
.loka-hlist--stacked li {
display: block;
}
.loka-hlist--stacked li:not(:last-child)::after {
content: none;
}
/* A faint white hairline (8% opacity) reads fine as a subtle divider on
this wiki's own dark page background, but is nearly invisible against
a light one -- flipped to an equally faint dark line instead so every
infobox keeps its internal row/section dividers in both themes. */
@media (prefers-color-scheme: light) {
.loka-infobox-name {
border-bottom-color: rgba(0, 0, 0, .1);
}
.loka-infobox-row {
border-top-color: rgba(0, 0, 0, .1);
}
}