Template:Policy/styles.css: Difference between revisions
Template page
More actions
Create Template:Policy -- a card for one capital policy's Benevolent/Neutral/Oppressive stances |
m Fix stance label column not lining up (was auto-width, hugging each row's own text) and widen cards for less cramped wrapping on desktop |
||
| Line 1: | Line 1: | ||
.loka-policy-grid { | .loka-policy-grid { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(auto-fill, minmax( | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | ||
gap: .8em; | gap: .8em; | ||
margin: 1em 0; | margin: 1em 0; | ||
| Line 46: | Line 46: | ||
} | } | ||
/* Fixed instead of auto so the description column lines up at the same | |||
x-position on every row -- both between a card's own stances (Neutral | |||
is shorter than Oppressive) and across every card in the grid, since | |||
auto-width let each row's label hug its own text instead. Sized to | |||
fit "OPPRESSIVE", the longest label, at its own .78em/.03em-tracked | |||
font size. */ | |||
.loka-policy-stance-label { | .loka-policy-stance-label { | ||
flex: 0 0 | flex: 0 0 4.8em; | ||
font-weight: 700; | font-weight: 700; | ||
font-size: .78em; | font-size: .78em; | ||
| Line 56: | Line 62: | ||
/* Same green/amber/red convention already used across the wiki for a | /* Same green/amber/red convention already used across the wiki for a | ||
tri-state | tri-state — green for the everyone-benefits option, amber matching | ||
the infobox type-ribbon's "default/standard" gold, red for the | the infobox type-ribbon's "default/standard" gold, red for the | ||
exclusionary one. Light-mode swaps to the same darker equivalents | exclusionary one. Light-mode swaps to the same darker equivalents | ||
| Line 76: | Line 82: | ||
/* A single always-on perk (e.g. World Capital's Eminent Domain) isn't a | /* A single always-on perk (e.g. World Capital's Eminent Domain) isn't a | ||
stance choice, so it doesn't fit the card grid above | stance choice, so it doesn't fit the card grid above — a small | ||
highlighted callout instead, in the same amber used for "neutral" | highlighted callout instead, in the same amber used for "neutral" | ||
above, since it reads as the same kind of "standard, no alliance | above, since it reads as the same kind of "standard, no alliance | ||
Latest revision as of 02:49, 24 August 2026
.loka-policy-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: .8em;
margin: 1em 0;
}
.loka-policy-card {
background: rgba(255, 255, 255, .035);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 6px;
padding: .7em .9em;
}
@media (prefers-color-scheme: light) {
.loka-policy-card {
background: rgba(0, 0, 0, .02);
border-color: rgba(0, 0, 0, .1);
}
}
.loka-policy-name {
font-weight: 700;
font-size: 1.02em;
margin-bottom: .5em;
padding-bottom: .35em;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
@media (prefers-color-scheme: light) {
.loka-policy-name {
border-bottom-color: rgba(0, 0, 0, .1);
}
}
.loka-policy-stance {
display: flex;
gap: .5em;
align-items: baseline;
font-size: .88em;
line-height: 1.4;
}
.loka-policy-stance + .loka-policy-stance {
margin-top: .5em;
}
/* Fixed instead of auto so the description column lines up at the same
x-position on every row -- both between a card's own stances (Neutral
is shorter than Oppressive) and across every card in the grid, since
auto-width let each row's label hug its own text instead. Sized to
fit "OPPRESSIVE", the longest label, at its own .78em/.03em-tracked
font size. */
.loka-policy-stance-label {
flex: 0 0 4.8em;
font-weight: 700;
font-size: .78em;
text-transform: uppercase;
letter-spacing: .03em;
white-space: nowrap;
}
/* Same green/amber/red convention already used across the wiki for a
tri-state — green for the everyone-benefits option, amber matching
the infobox type-ribbon's "default/standard" gold, red for the
exclusionary one. Light-mode swaps to the same darker equivalents
Infobox rank/website already use, for the same "washes out on a
light background" reason. */
.loka-policy-stance--benevolent .loka-policy-stance-label { color: #54FC54; }
.loka-policy-stance--neutral .loka-policy-stance-label { color: #f0cf8e; }
.loka-policy-stance--oppressive .loka-policy-stance-label { color: #FC5454; }
@media (prefers-color-scheme: light) {
.loka-policy-stance--benevolent .loka-policy-stance-label { color: #2E7D32; }
.loka-policy-stance--neutral .loka-policy-stance-label { color: #9c6b2e; }
.loka-policy-stance--oppressive .loka-policy-stance-label { color: #C62828; }
}
.loka-policy-stance-text {
opacity: .92;
}
/* A single always-on perk (e.g. World Capital's Eminent Domain) isn't a
stance choice, so it doesn't fit the card grid above — a small
highlighted callout instead, in the same amber used for "neutral"
above, since it reads as the same kind of "standard, no alliance
politics involved" info. */
.loka-policy-perk {
background: rgba(240, 207, 142, .08);
border: 1px solid rgba(240, 207, 142, .3);
border-radius: 6px;
padding: .8em 1em;
margin: 1em 0;
}
.loka-policy-perk-name {
font-weight: 700;
color: #f0cf8e;
margin-bottom: .3em;
}
@media (prefers-color-scheme: light) {
.loka-policy-perk {
background: rgba(156, 107, 46, .06);
border-color: rgba(156, 107, 46, .3);
}
.loka-policy-perk-name {
color: #9c6b2e;
}
}