Template:Infobox/styles.css: Difference between revisions
Template page
More actions
m Fix a title icon collapsing to 0px when a headerimage is set -- the header photo's own img rule was leaking onto icons inside the title overlay |
m Host town: don't redlink when the town article doesn't exist yet, bold it either way |
||
| (One intermediate revision by the same user not shown) | |||
| Line 6: | Line 6: | ||
/* Opaque, not translucent, for the same reason as before (a translucent | /* Opaque, not translucent, for the same reason as before (a translucent | ||
overlay only ever looked right against this wiki's own dark page | overlay only ever looked right against this wiki's own dark page | ||
background, and washed out on light mode) | background, and washed out on light mode) — but now a genuinely | ||
neutral charcoal (equal R/G/B) rather than the previous warm | neutral charcoal (equal R/G/B) rather than the previous warm | ||
brown-tinted near-black, since that read as muddy/dirty rather than | brown-tinted near-black, since that read as muddy/dirty rather than | ||
| Line 22: | Line 22: | ||
/* Whatever ends the box (a chrono grid row, a location panel, a links | /* Whatever ends the box (a chrono grid row, a location panel, a links | ||
row) otherwise supplies only its own small internal padding, which | row) otherwise supplies only its own small internal padding, which | ||
reads as too tight against the box's own bottom edge | 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. */ | bit of dedicated breathing room after it, on every infobox type. */ | ||
padding-bottom: .6em; | padding-bottom: .6em; | ||
| Line 43: | Line 43: | ||
either overflows the viewport or squeezes body text into an unreadably | either overflows the viewport or squeezes body text into an unreadably | ||
narrow column, so every infobox drops the float and goes full-width | narrow column, so every infobox drops the float and goes full-width | ||
instead | instead — applies wiki-wide since this is the shared shell every | ||
specific infobox is built on. */ | specific infobox is built on. */ | ||
@media (max-width: 600px) { | @media (max-width: 600px) { | ||
| Line 115: | Line 115: | ||
/* Previous attempts used a second overlay div and tried to hand-tune its | /* 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 | 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 | numbers used. This instead fades the photo's OWN opacity to nothing | ||
via a mask, so what's revealed underneath as it disappears is | via a mask, so what's revealed underneath as it disappears is | ||
| Line 121: | Line 121: | ||
guaranteed to match exactly since nothing is being approximated. */ | guaranteed to match exactly since nothing is being approximated. */ | ||
/* A straight two-stop fade (opaque to transparent in one even ramp) | /* A straight two-stop fade (opaque to transparent in one even ramp) | ||
reads as an abrupt cutoff to the eye | 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 | happens in the upper, still-fairly-opaque half, then the faint tail | ||
lingers and still looks like it stops short. These extra stops | lingers and still looks like it stops short. These extra stops | ||
| Line 146: | Line 146: | ||
/* .loka-infobox-header-photo img (above) is a broad descendant selector | /* .loka-infobox-header-photo img (above) is a broad descendant selector | ||
meant only for the actual backdrop photo | meant only for the actual backdrop photo — but the header's own title | ||
text (loka-infobox-header-text, below) sits INSIDE .loka-infobox-header-photo | text (loka-infobox-header-text, below) sits INSIDE .loka-infobox-header-photo | ||
too, as an overlay, so any <img> a specific infobox puts in its own | too, as an overlay, so any <img> a specific infobox puts in its own | ||
title (e.g. Infobox world's titleicon) is ALSO a descendant and was | title (e.g. Infobox world's titleicon) is ALSO a descendant and was | ||
silently inheriting position:absolute; inset:0; width/height:100% from | silently inheriting position:absolute; inset:0; width/height:100% from | ||
it | it — collapsing that icon to nothing visible (confirmed live on [[The | ||
End]]: the shield rendered at 0px width, sized to the whole 150px-tall | End]]: the shield rendered at 0px width, sized to the whole 150px-tall | ||
photo band instead of its own small inline size). Same specificity as | photo band instead of its own small inline size). Same specificity as | ||
| Line 169: | Line 169: | ||
position: absolute; | position: absolute; | ||
inset: 0; | inset: 0; | ||
/* Only handles darkening the top for the name/type text now | /* Only handles darkening the top for the name/type text now — the | ||
bottom fade is the image's own mask (above), not this. */ | bottom fade is the image's own mask (above), not this. */ | ||
background: linear-gradient(to bottom, | background: linear-gradient(to bottom, | ||
| Line 185: | Line 185: | ||
/* Explicit, not inherited: this text always sits on the header photo's | /* Explicit, not inherited: this text always sits on the header photo's | ||
own permanent dark scrim (see loka-infobox-header-scrim), regardless | own permanent dark scrim (see loka-infobox-header-scrim), regardless | ||
of the page's own light/dark theme, so it must always be light | of the page's own light/dark theme, so it must always be light — | ||
otherwise it silently inherits .loka-infobox's theme-adaptive colour | otherwise it silently inherits .loka-infobox's theme-adaptive colour | ||
and goes dark-on-dark in light mode (a real, previously-unnoticed | and goes dark-on-dark in light mode (a real, previously-unnoticed | ||
| Line 197: | Line 197: | ||
/* Sitting on top of an arbitrary photo needs some kind of scrim behind | /* 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 | it to stay legible regardless of what's in the image, so this one | ||
keeps a background chip unlike the plain-text version above | keeps a background chip unlike the plain-text version above — but a | ||
neutral dark tint (matching the header photo's own scrim) rather | neutral dark tint (matching the header photo's own scrim) rather | ||
than a saturated brown patch. Always dark regardless of page theme, | than a saturated brown patch. Always dark regardless of page theme, | ||
| Line 205: | Line 205: | ||
as the same kind of text rather than a one-off exception. | as the same kind of text rather than a one-off exception. | ||
A full-width backdrop (the plain block-level default, same as the | A full-width backdrop (the plain block-level default, same as the | ||
base rule) rather than a tight pill | 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 | 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 | it enough contrast on one side or the other; spanning edge to edge | ||
| Line 219: | Line 219: | ||
.loka-infobox-row { | .loka-infobox-row { | ||
display: flex; | display: flex; | ||
/* center, not baseline | /* center, not baseline — baseline aligns the value to the last line | ||
of a wrapped key (e.g. "CURRENT HOLDERS" wrapping to two lines | of a wrapped key (e.g. "CURRENT HOLDERS" wrapping to two lines | ||
against a short one-line value like "16"), which reads as visibly | against a short one-line value like "16"), which reads as visibly | ||
| Line 254: | Line 254: | ||
align-items: flex-start; | align-items: flex-start; | ||
gap: .3em; | gap: .3em; | ||
} | } | ||
/* A faint white hairline (8% opacity) reads fine as a subtle divider on | /* 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 | this wiki's own dark page background, but is nearly invisible against | ||
a light one | a light one — flipped to an equally faint dark line instead so every | ||
infobox keeps its internal row/section dividers in both themes. */ | infobox keeps its internal row/section dividers in both themes. */ | ||
@media (prefers-color-scheme: light) { | @media (prefers-color-scheme: light) { | ||
Latest revision as of 10:49, 24 August 2026
.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-photo img (above) is a broad descendant selector
meant only for the actual backdrop photo — but the header's own title
text (loka-infobox-header-text, below) sits INSIDE .loka-infobox-header-photo
too, as an overlay, so any <img> a specific infobox puts in its own
title (e.g. Infobox world's titleicon) is ALSO a descendant and was
silently inheriting position:absolute; inset:0; width/height:100% from
it — collapsing that icon to nothing visible (confirmed live on [[The
End]]: the shield rendered at 0px width, sized to the whole 150px-tall
photo band instead of its own small inline size). Same specificity as
that rule, so appearing later here is what makes this the one that
wins for anything actually inside the text overlay. */
.loka-infobox-header-text img {
position: static;
inset: auto;
width: auto;
height: auto;
object-fit: initial;
-webkit-mask-image: none;
mask-image: none;
}
.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;
}
/* 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);
}
}