Module:GameInfo/styles.css: Difference between revisions
From SpiritVale Wiki
More actions
No edit summary Tags: Mobile edit Mobile web edit |
No edit summary Tags: Mobile edit Mobile web edit |
||
| Line 390: | Line 390: | ||
/* ========================================================================== | /* ========================================================================== | ||
7) | 7) SKILL SCALING DASHBOARD | ||
-------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ||
Row 1: [cluster][side] | Layout: | ||
- One cohesive scaling surface (level selector visually absorbed). | |||
- Row 1: [cluster][side] | |||
Row 2: core | cluster = damage + 2×3 attribute chips as ONE unit | ||
side = reserved future block (empty for now) | |||
- Row 2: core pills across the full width (for now) | |||
Markup: | |||
.sv_skill_scaling__cluster | .sv_skill_scaling__body | ||
.sv_skill_scaling__cluster (contains primary + stats) | |||
.sv_skill_scaling__side (optional/empty) | |||
.sv_skill_scaling__column--core | |||
========================================================================== */ | ========================================================================== */ | ||
| Line 429: | Line 434: | ||
.sv_skill_scaling__body { | .sv_skill_scaling__body { | ||
display: grid; | display: grid; | ||
grid-template-columns: | grid-template-columns: max-content minmax(0, 1fr); | ||
grid-template-rows: auto auto; | grid-template-rows: auto auto; | ||
column-gap: 16px; | column-gap: 16px; | ||
| Line 436: | Line 441: | ||
} | } | ||
/* Cluster is ONE grid item ( | /* Cluster is ONE grid item (damage + chips) */ | ||
.sv_skill_scaling__cluster { | .sv_skill_scaling__cluster { | ||
grid-column: 1; | grid-column: 1; | ||
| Line 443: | Line 448: | ||
align-items: center; | align-items: center; | ||
justify-content: flex-start; | justify-content: flex-start; | ||
gap: | gap: 12px; | ||
min-width: 0; | min-width: 0; | ||
} | } | ||
| Line 458: | Line 463: | ||
grid-column: 1 / -1; | grid-column: 1 / -1; | ||
grid-row: 2; | grid-row: 2; | ||
padding: 0; | |||
} | } | ||
/* Section wrappers | /* Section wrappers are intentionally visual no-ops */ | ||
.sv_skill_scaling__column { | .sv_skill_scaling__column { | ||
min-width: 0; | min-width: 0; | ||
| Line 471: | Line 477: | ||
} | } | ||
/* | /* Primary output (Damage Mod) */ | ||
.sv_skill_scaling__column--primary { | .sv_skill_scaling__column--primary { | ||
display: flex; | display: flex; | ||
| Line 483: | Line 489: | ||
word-wrap: break-word; | word-wrap: break-word; | ||
font-weight: 900; | font-weight: 900; | ||
font-size: | font-size: 50px; | ||
line-height: 0.92; | line-height: 0.92; | ||
letter-spacing: -0. | letter-spacing: -0.65px; | ||
color: rgba(245,249,255,0.99); | color: rgba(245,249,255,0.99); | ||
} | } | ||
| Line 505: | Line 511: | ||
.sv_skill_scaling__stats-grid { | .sv_skill_scaling__stats-grid { | ||
display: grid; | display: grid; | ||
/* Keep compact; does NOT stretch */ | |||
grid-template-columns: repeat(2, max-content); | grid-template-columns: repeat(2, max-content); | ||
justify-content: start; | justify-content: start; | ||
justify-items: start; | justify-items: start; | ||
row-gap: 8px; | row-gap: 8px; | ||
column-gap: | column-gap: 10px; | ||
/* Hard ordering */ | |||
grid-template-areas: | grid-template-areas: | ||
"str agi" | "str agi" | ||
| Line 540: | Line 548: | ||
} | } | ||
/* Shared pill shell (core uses this | /* Shared pill shell (core uses this; stat chips override size below) */ | ||
.sv_skill_scaling__pill { | .sv_skill_scaling__pill { | ||
position: relative; | position: relative; | ||
| Line 551: | Line 559: | ||
} | } | ||
/* Stat | /* Stat chips: compact micro pills */ | ||
.sv_skill_scaling__stat-pill { | .sv_skill_scaling__stat-pill { | ||
border-radius: 999px; | border-radius: 999px; | ||
width: | width: 88px; | ||
min-height: | min-height: 22px; | ||
padding: 4px | padding: 4px 9px; | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
| Line 563: | Line 571: | ||
} | } | ||
/* Flatten inner structure */ | /* Flatten inner structure into one row */ | ||
.sv_skill_scaling__stat-main { | .sv_skill_scaling__stat-main { | ||
min-width: 0; | min-width: 0; | ||
| Line 576: | Line 584: | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
gap: | gap: 7px; | ||
} | } | ||
/* No stat label in chip mode */ | |||
.sv_skill_scaling__stat-label { | .sv_skill_scaling__stat-label { | ||
display: none; | display: none; | ||
} | } | ||
/* Icon sizing */ | /* Icon sizing (force FILE render down to true micro size) */ | ||
.sv_skill_scaling__stat-icon { | .sv_skill_scaling__stat-icon { | ||
width: | width: 13px; | ||
height: | height: 13px; | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
| Line 599: | Line 608: | ||
.sv_skill_scaling__stat-icon .sv-img img { | .sv_skill_scaling__stat-icon .sv-img img { | ||
width: | width: 13px; | ||
height: | height: 13px; | ||
box-shadow: none; | box-shadow: none; | ||
} | } | ||
| Line 614: | Line 623: | ||
.sv_skill_scaling__stat-value { | .sv_skill_scaling__stat-value { | ||
font-weight: 900; | font-weight: 900; | ||
font-size: | font-size: 14px; | ||
line-height: 1; | line-height: 1; | ||
letter-spacing: -0.12px; | letter-spacing: -0.12px; | ||
| Line 620: | Line 629: | ||
} | } | ||
/* Full-pill Definitions hit overlay */ | /* Full-pill Definitions hit overlay (active pills) */ | ||
.sv_skill_scaling__stat-hit { | .sv_skill_scaling__stat-hit { | ||
position: absolute; | position: absolute; | ||
| Line 653: | Line 662: | ||
content: "—"; | content: "—"; | ||
font-weight: 900; | font-weight: 900; | ||
font-size: | font-size: 14px; | ||
line-height: 1; | line-height: 1; | ||
color: rgba(140,156,184,0.78); | color: rgba(140,156,184,0.78); | ||
| Line 725: | Line 734: | ||
/* -------------------------------------------------------------------------- | /* -------------------------------------------------------------------------- | ||
7B) CORE PILLS | 7B) CORE PILLS | ||
-------------------------------------------------------------------------- */ | -------------------------------------------------------------------------- */ | ||
| Line 791: | Line 800: | ||
/* -------------------------------------------------------------------------- | /* -------------------------------------------------------------------------- | ||
RESPONSIVE | 7C) RESPONSIVE | ||
-------------------------------------------------------------------------- */ | -------------------------------------------------------------------------- */ | ||
@media (max-width:850px) { | @media (max-width:850px) { | ||
.sv_skill_scaling__primary-value { | .sv_skill_scaling__primary-value { | ||
font-size: | font-size: 44px; | ||
letter-spacing: -0.55px; | letter-spacing: -0.55px; | ||
} | } | ||
.sv_skill_scaling__stat-pill { | .sv_skill_scaling__stat-pill { | ||
width: | width: 84px; | ||
} | |||
.sv_skill_scaling__stat-value { | |||
font-size: 13px; | |||
} | } | ||
| Line 817: | Line 828: | ||
@media (max-width:500px) { | @media (max-width:500px) { | ||
.sv_skill_scaling { | |||
padding: 9px 10px 10px; | |||
} | |||
.sv_skill_scaling .sv-skill-level, | |||
.sv_skill_scaling__level { | |||
padding: 0 0 9px; | |||
} | |||
/* Collapse outer layout so nothing can overflow */ | /* Collapse outer layout so nothing can overflow */ | ||
.sv_skill_scaling__body { | .sv_skill_scaling__body { | ||
| Line 826: | Line 846: | ||
grid-column: 1; | grid-column: 1; | ||
grid-row: 1; | grid-row: 1; | ||
gap: | gap: 10px; | ||
} | } | ||
| Line 840: | Line 860: | ||
.sv_skill_scaling__primary-value { | .sv_skill_scaling__primary-value { | ||
font-size: | font-size: 36px; | ||
letter-spacing: -0.45px; | letter-spacing: -0.45px; | ||
} | } | ||
| Line 849: | Line 869: | ||
.sv_skill_scaling__stat-pill { | .sv_skill_scaling__stat-pill { | ||
width: | width: 78px; | ||
min-height: 22px; | min-height: 22px; | ||
padding: 4px 8px; | padding: 4px 8px; | ||
| Line 855: | Line 875: | ||
.sv_skill_scaling__stat-icon { | .sv_skill_scaling__stat-icon { | ||
width: | width: 12px; | ||
height: | height: 12px; | ||
} | } | ||
.sv_skill_scaling__stat-icon .sv-img img { | .sv_skill_scaling__stat-icon .sv-img img { | ||
width: | width: 12px; | ||
height: | height: 12px; | ||
} | } | ||
.sv_skill_scaling__stat-value { | .sv_skill_scaling__stat-value { | ||
font-size: | font-size: 13px; | ||
} | } | ||
.sv_skill_scaling__stat-pill.is-inactive::before { | .sv_skill_scaling__stat-pill.is-inactive::before { | ||
font-size: | font-size: 13px; | ||
} | } | ||
| Line 878: | Line 898: | ||
@media (max-width:360px) { | @media (max-width:360px) { | ||
.sv_skill_scaling__primary-value { | .sv_skill_scaling__primary-value { | ||
font-size: | font-size: 32px; | ||
} | } | ||
.sv_skill_scaling__stat-pill { | .sv_skill_scaling__stat-pill { | ||
width: | width: 72px; | ||
} | } | ||
| Line 894: | Line 910: | ||
} | } | ||
} | } | ||
/* ========================================================================== | /* ========================================================================== | ||