MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary |
||
| Line 550: | Line 550: | ||
- Desktop: | - Desktop: | ||
* 1 group => centered | * 1 group => centered | ||
* 2 groups => | * 2 groups => flags (narrow) + mechanics (wide) | ||
- | - Mechanics spread out on the right + centered | ||
============================================================ */ | ============================================================ */ | ||
| Line 576: | Line 576: | ||
gap: 0.55em; | gap: 0.55em; | ||
align-items: start; | align-items: start; | ||
justify-items: | |||
/* Let columns consume available width (we'll center inside columns) */ | |||
justify-items: stretch; | |||
} | } | ||
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-1 { | table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-1 { | ||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
justify-items: center; /* truly centered when only one group exists */ | |||
} | } | ||
/* Default 2-col split (works everywhere; desktop override below) */ | |||
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2 { | table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2 { | ||
grid-template-columns: 1fr 1fr; | grid-template-columns: 1fr 1fr; | ||
} | } | ||
/* Columns */ | /* Columns (default = stacked/centered) */ | ||
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col { | table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col { | ||
width: 100%; | width: 100%; | ||
| Line 626: | Line 630: | ||
overflow-wrap: anywhere; | overflow-wrap: anywhere; | ||
word-break: break-word; | word-break: break-word; | ||
} | |||
/* ============================================================ | |||
Desktop behavior: mechanics spread out across the right column | |||
============================================================ */ | |||
@media (min-width: 720px) { | |||
/* Make flags column a bit narrower, mechanics column wider */ | |||
table.spiritvale-skill-infobox .module-special-mechanics | |||
.sv-sm-layout.sv-sm-count-2 { | |||
grid-template-columns: minmax(8.5em, 0.85fr) minmax(16em, 1.15fr); | |||
} | |||
/* | |||
Turn the mechanics column into a wrapping grid. | |||
Each mechanic becomes a grid item so "Chains" and "Knockback" | |||
can sit side-by-side when there's room. | |||
*/ | |||
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col-mech { | |||
display: grid; /* overrides the flex rule above */ | |||
grid-template-columns: repeat(auto-fit, minmax(9.5em, 1fr)); | |||
gap: 0.55em 0.75em; | |||
align-items: start; | |||
justify-items: center; /* center each mechanic card within its cell */ | |||
align-content: center; /* center the whole group vertically if short */ | |||
text-align: center; | |||
} | |||
/* Ensure each mechanic block fills its grid cell cleanly */ | |||
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col-mech .sv-sm-mech { | |||
width: 100%; | |||
} | |||
} | } | ||