MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary |
||
| Line 128: | Line 128: | ||
/* NEW: pill “navy” treatment */ | /* NEW: pill “navy” treatment */ | ||
--sv-pill-a: rgba(120, 175, 255, 0.92); | --sv-pill-a: rgba(120, 175, 255, 0.92); | ||
--sv-pill-b: rgba(70, 140, 255, 0.88); | --sv-pill-b: rgba(70, 140, 255, 0.88); | ||
} | } | ||
--sv-text-soft: rgba(255, 255, 255, 0.92); | |||
--sv-text-outline: | |||
0 1px 0 rgba(0,0,0,0.55), | |||
0 -1px 0 rgba(0,0,0,0.55), | |||
1px 0 0 rgba(0,0,0,0.55), | |||
-1px 0 0 rgba(0,0,0,0.55); | |||
table.spiritvale-skill-infobox, | table.spiritvale-skill-infobox, | ||
| Line 231: | Line 239: | ||
padding-top: 0.55em; | padding-top: 0.55em; | ||
padding-bottom: 0.55em; | padding-bottom: 0.55em; | ||
} | |||
/* ------------------------------------------------------------ | |||
SKILLS: Hero Bar (2-slot top bar) | |||
- Herobar 1: icon + title (left) | |||
- Herobar 2: reserved (right) | |||
--------------------------------------------------------- */ | |||
table.spiritvale-skill-infobox .hero-bar-grid { | |||
width: 100%; | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
gap: 0.9em; | |||
text-align: left; /* override table header centering */ | |||
} | |||
table.spiritvale-skill-infobox .hero-bar-module { | |||
display: flex; | |||
align-items: center; | |||
} | |||
table.spiritvale-skill-infobox .hero-bar-module-1 { | |||
flex: 1 1 auto; | |||
justify-content: flex-start; | |||
} | |||
table.spiritvale-skill-infobox .hero-bar-module-2 { | |||
flex: 0 0 auto; | |||
justify-content: flex-end; | |||
text-align: right; | |||
} | |||
table.spiritvale-skill-infobox .sv-herobar-1-wrap { | |||
display: flex; | |||
align-items: center; | |||
justify-content: flex-start; | |||
gap: 0.65em; | |||
} | |||
table.spiritvale-skill-infobox .sv-herobar-icon { | |||
line-height: 0; | |||
} | |||
table.spiritvale-skill-infobox .sv-herobar-icon img { | |||
vertical-align: middle; | |||
} | } | ||
| Line 331: | Line 384: | ||
} | } | ||
/* | /* Text tuning: soften white + subtle outline (hero tiles + herobar) */ | ||
table.spiritvale-skill-infobox .hero-module, | table.spiritvale-skill-infobox .hero-module, | ||
table.spiritvale-skill-infobox .hero-module * { | table.spiritvale-skill-infobox .hero-module *, | ||
table.spiritvale-skill-infobox .hero-bar-module, | |||
table.spiritvale-skill-infobox .hero-bar-module * { | |||
color: var(--sv-text-soft) !important; | color: var(--sv-text-soft) !important; | ||
text-shadow: var(--sv-text-outline); | text-shadow: var(--sv-text-outline); | ||
| Line 598: | Line 653: | ||
--------------------------------------------------------- */ | --------------------------------------------------------- */ | ||
@media (max-width: 560px) { | @media (max-width: 560px) { | ||
/* | /* Hero bar can wrap naturally if herobar2 gains content later */ | ||
table.spiritvale-skill-infobox .hero-bar-grid { | |||
flex-wrap: wrap; | |||
} | |||
/* KEEP hero modules as 2x2 grid */ | |||
table.spiritvale-skill-infobox .hero-modules-grid { | table.spiritvale-skill-infobox .hero-modules-grid { | ||
grid-template-columns: 1fr 1fr; | grid-template-columns: 1fr 1fr; | ||
} | } | ||
.mw-parser-output table.spiritvale-skill-infobox .hero-module { | .mw-parser-output table.spiritvale-skill-infobox .hero-module { | ||
padding: 0.55em 0.55em; | padding: 0.55em 0.55em; | ||
} | } | ||
/* Shrink pill WIDTH on mobile (keep | /* Shrink pill WIDTH on mobile (keep font-size unchanged) */ | ||
table.spiritvale-skill-infobox .module-skill-type .sv-type-label, | table.spiritvale-skill-infobox .module-skill-type .sv-type-label, | ||
table.spiritvale-skill-infobox .skill-source-module .sv-source-pill, | table.spiritvale-skill-infobox .skill-source-module .sv-source-pill, | ||
| Line 616: | Line 675: | ||
max-width: 100%; | max-width: 100%; | ||
white-space: nowrap; | white-space: nowrap; | ||
padding: 0.22em 0.45em; /* outline-friendly breathing room */ | |||
} | } | ||
table.spiritvale-skill-infobox .module-skill-type .sv-type-grid { | table.spiritvale-skill-infobox .module-skill-type .sv-type-grid { | ||
gap: 0.40em; | gap: 0.40em; | ||
| Line 634: | Line 686: | ||
} | } | ||
/* | /* Module 3 (has Mod + Source + Scaling): | ||
Stack Modifier above Source, centered beside Scaling */ | |||
table.spiritvale-skill-infobox | table.spiritvale-skill-infobox | ||
.hero-module.skill-source-module.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling) | .hero-module.skill-source-module.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling) | ||
| Line 649: | Line 700: | ||
table.spiritvale-skill-infobox | table.spiritvale-skill-infobox | ||
.hero-module.skill-source-module.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling) | .hero-module.skill-source-module.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling) | ||
.sv-source-modifier { | .sv-source-modifier { grid-area: mod; } | ||
table.spiritvale-skill-infobox | table.spiritvale-skill-infobox | ||
.hero-module.skill-source-module.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling) | .hero-module.skill-source-module.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling) | ||
.sv-source-main { | .sv-source-main { grid-area: source; } | ||
table.spiritvale-skill-infobox | table.spiritvale-skill-infobox | ||
| Line 665: | Line 712: | ||
align-self: center; | align-self: center; | ||
} | } | ||
/* Module 4 | /* Module 4 stays 2 columns */ | ||
table.spiritvale-skill-infobox .module-quick-stats .sv-m4-grid { | table.spiritvale-skill-infobox .module-quick-stats .sv-m4-grid { | ||
grid-template-columns: 1fr 1fr; | grid-template-columns: 1fr 1fr; | ||