Template:Infobox town/styles.css: Difference between revisions
Template page
More actions
m Split remaining inline CSS into /styles.css; delegate shared infobox chrome to Template:Infobox for wiki-wide visual parity |
m Infobox tournament: auto-generate a lead paragraph from the same infobox parameters |
||
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
.loka-town-location { | .loka-town-location { | ||
position: relative; | position: relative; | ||
border-top: 1px solid rgba(255, 255, 255, . | border-top: 1px solid rgba(255, 255, 255, .08); | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
| Line 17: | Line 16: | ||
position: absolute; | position: absolute; | ||
inset: 0; | inset: 0; | ||
background: rgba(8, 6, 3, . | background: rgba(8, 6, 3, .74); | ||
} | } | ||
| Line 66: | Line 65: | ||
.loka-town-location--flat .loka-town-location-row { | .loka-town-location--flat .loka-town-location-row { | ||
text-shadow: none; | text-shadow: none; | ||
} | |||
/* The photo-backed variant has its own permanent dark scrim (see | |||
loka-town-location-scrim above), so its white text/gold heading stay | |||
readable regardless of page theme -- but the flat fallback has no photo | |||
at all, just the plain (now theme-adaptive) .loka-infobox background | |||
underneath, so its white text and light-gold heading need dark | |||
equivalents for light mode or they wash out against a light card. */ | |||
@media (prefers-color-scheme: light) { | |||
.loka-town-location--flat .loka-town-location-row { | |||
color: #241f1a; | |||
} | |||
.loka-town-location--flat .loka-town-location-heading { | |||
color: #9c6b2e; | |||
} | |||
} | } | ||
Latest revision as of 17:17, 18 August 2026
.loka-town-location {
position: relative;
border-top: 1px solid rgba(255, 255, 255, .08);
overflow: hidden;
}
.loka-town-location > span img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.loka-town-location-scrim {
position: absolute;
inset: 0;
background: rgba(8, 6, 3, .74);
}
.loka-town-location-content {
position: relative;
padding: .5em .6em .6em;
}
.loka-town-location-heading {
font-size: .7em;
font-weight: 700;
color: #f0cf8e;
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: .4em;
}
.loka-town-location-row {
display: flex;
padding: .2em 0;
color: #ffffff;
font-size: .85em;
text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}
.loka-town-location-key {
flex: 0 0 38%;
opacity: .8;
text-align: left;
}
.loka-town-location-value {
flex: 1;
text-align: left;
font-weight: 700;
}
/* Flat fallback: no biome backdrop found, plain panel instead of a photo */
.loka-town-location--flat {
background: rgba(255, 255, 255, .03);
min-height: 0;
}
.loka-town-location--flat .loka-town-location-content {
position: static;
}
.loka-town-location--flat .loka-town-location-row {
text-shadow: none;
}
/* The photo-backed variant has its own permanent dark scrim (see
loka-town-location-scrim above), so its white text/gold heading stay
readable regardless of page theme -- but the flat fallback has no photo
at all, just the plain (now theme-adaptive) .loka-infobox background
underneath, so its white text and light-gold heading need dark
equivalents for light mode or they wash out against a light card. */
@media (prefers-color-scheme: light) {
.loka-town-location--flat .loka-town-location-row {
color: #241f1a;
}
.loka-town-location--flat .loka-town-location-heading {
color: #9c6b2e;
}
}