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 386: | Line 386: | ||
/* ---------------------------------------------------------------------------- | /* ---------------------------------------------------------------------------- | ||
7) SCHEMA 2 SKILL SCALING DASHBOARD ( | 7) SCHEMA 2 SKILL SCALING DASHBOARD (REWORKED TWO-ROW SYSTEM) | ||
---------------------------------------------------------------------------- */ | ---------------------------------------------------------------------------- */ | ||
| Line 411: | Line 411: | ||
} | } | ||
/* Two-row desktop system: | |||
Row 1 = primary damage mod + six stat pills | |||
Row 2 = core across full width | |||
*/ | |||
.sv_skill_scaling__body{ | .sv_skill_scaling__body{ | ||
display:grid; | display:grid; | ||
grid-template-columns:minmax(0 | grid-template-columns:minmax(110px, 0.85fr) repeat(6, minmax(0, 1fr)); | ||
gap:10px; | gap:10px; | ||
align-items: | align-items:stretch; | ||
} | } | ||
| Line 427: | Line 431: | ||
} | } | ||
/* Primary | /* Primary block: compact damage mod on top-left */ | ||
.sv_skill_scaling__column--primary{ | .sv_skill_scaling__column--primary{ | ||
padding: | grid-column:1; | ||
min-height: | grid-row:1; | ||
padding:12px 10px; | |||
min-height:0; | |||
display:flex; | display:flex; | ||
flex-direction:column; | flex-direction:column; | ||
| Line 436: | Line 442: | ||
align-items:center; | align-items:center; | ||
text-align:center; | text-align:center; | ||
} | |||
/* Fallback if Lua does not emit modifier classes yet */ | |||
.sv_skill_scaling__body > .sv_skill_scaling__column:nth-child(1){ | |||
grid-column:1; | |||
grid-row:1; | |||
} | |||
/* Stats wrapper occupies the rest of row 1 */ | |||
.sv_skill_scaling__column--stats{ | |||
grid-column:2 / -1; | |||
grid-row:1; | |||
} | |||
.sv_skill_scaling__body > .sv_skill_scaling__column:nth-child(2){ | |||
grid-column:2 / -1; | |||
grid-row:1; | |||
} | |||
/* Core spans full second row */ | |||
.sv_skill_scaling__column--core{ | |||
grid-column:1 / -1; | |||
grid-row:2; | |||
} | |||
.sv_skill_scaling__body > .sv_skill_scaling__column:nth-child(3){ | |||
grid-column:1 / -1; | |||
grid-row:2; | |||
} | } | ||
.sv_skill_scaling__primary-value{ | .sv_skill_scaling__primary-value{ | ||
font-weight:900; | font-weight:900; | ||
font-size: | font-size:30px; | ||
line-height:0.95; | line-height:0.95; | ||
letter-spacing:-0. | letter-spacing:-0.35px; | ||
color:rgba(245,249,255,0.99); | color:rgba(245,249,255,0.99); | ||
word-wrap:break-word; | word-wrap:break-word; | ||
| Line 448: | Line 482: | ||
.sv_skill_scaling__primary-label{ | .sv_skill_scaling__primary-label{ | ||
margin-top: | margin-top:7px; | ||
font-size: | font-size:11px; | ||
font-weight:900; | font-weight:900; | ||
letter-spacing:0. | line-height:1.15; | ||
letter-spacing:0.24px; | |||
text-transform:uppercase; | text-transform:uppercase; | ||
color:rgba(182,198,224,0.96); | color:rgba(182,198,224,0.96); | ||
} | } | ||
/* Shared | /* Shared container rules */ | ||
.sv_skill_scaling__stats, | .sv_skill_scaling__stats, | ||
.sv_skill_scaling__core{ | .sv_skill_scaling__core{ | ||
| Line 462: | Line 497: | ||
} | } | ||
/* Desktop: all six attributes across */ | |||
.sv_skill_scaling__stats-grid{ | .sv_skill_scaling__stats-grid{ | ||
display:grid; | display:grid; | ||
grid-template-columns:repeat( | grid-template-columns:repeat(6, minmax(0, 1fr)); | ||
gap:8px; | gap:8px; | ||
} | } | ||
/* Desktop core uses full row width */ | |||
.sv_skill_scaling__core-grid{ | .sv_skill_scaling__core-grid{ | ||
display:grid; | display:grid; | ||
grid-template-columns:repeat( | grid-template-columns:repeat(6, minmax(0, 1fr)); | ||
gap:8px; | gap:8px; | ||
} | } | ||
| Line 477: | Line 514: | ||
position:relative; | position:relative; | ||
min-width:0; | min-width:0; | ||
padding:10px | padding:10px 8px; | ||
border-radius:14px; | border-radius:14px; | ||
border:1px solid rgba(59,75,99,0.92); | border:1px solid rgba(59,75,99,0.92); | ||
| Line 490: | Line 527: | ||
.sv_skill_scaling__stat-pill{ | .sv_skill_scaling__stat-pill{ | ||
min-height: | min-height:106px; | ||
display:flex; | display:flex; | ||
flex-direction:column; | |||
align-items:center; | align-items:center; | ||
justify-content: | justify-content:center; | ||
gap: | gap:8px; | ||
text-align:center; | |||
} | } | ||
.sv_skill_scaling__stat-main{ | .sv_skill_scaling__stat-main{ | ||
min-width:0; | min-width:0; | ||
flex: | flex:0 0 auto; | ||
width:100%; | |||
display:flex; | display:flex; | ||
align-items:center; | align-items:center; | ||
justify-content:center; | |||
} | } | ||
.sv_skill_scaling__stat-visual{ | .sv_skill_scaling__stat-visual{ | ||
min-width:0; | min-width:0; | ||
display: | display:flex; | ||
flex-direction:column; | |||
align-items:center; | align-items:center; | ||
gap: | justify-content:center; | ||
gap:6px; | |||
} | } | ||
.sv_skill_scaling__stat-icon{ | .sv_skill_scaling__stat-icon{ | ||
flex:0 0 auto; | flex:0 0 auto; | ||
width: | width:22px; | ||
height: | height:22px; | ||
display: | display:flex; | ||
align-items:center; | align-items:center; | ||
justify-content:center; | justify-content:center; | ||
| Line 531: | Line 574: | ||
.sv_skill_scaling__stat-icon .sv-miss{ | .sv_skill_scaling__stat-icon .sv-miss{ | ||
width: | width:16px; | ||
height: | height:16px; | ||
font-size: | font-size:11px; | ||
line-height:1; | line-height:1; | ||
} | |||
.sv_skill_scaling__stat-label{ | |||
font-weight:900; | |||
font-size:13px; | |||
line-height:1.05; | |||
letter-spacing:0.22px; | |||
text-transform:uppercase; | |||
color:rgba(182,198,224,0.92); | |||
} | } | ||
| Line 543: | Line 595: | ||
line-height:1.05; | line-height:1.05; | ||
color:rgba(245,249,255,0.98); | color:rgba(245,249,255,0.98); | ||
text-align:center; | |||
word-wrap:break-word; | |||
} | } | ||
| Line 669: | Line 714: | ||
.sv_skill_scaling__core-pill{ | .sv_skill_scaling__core-pill{ | ||
min-height: | min-height:88px; | ||
display:flex; | display:flex; | ||
flex-direction:column; | flex-direction:column; | ||
justify-content:center; | justify-content:center; | ||
align-items:center; | |||
text-align:center; | |||
} | } | ||
| Line 678: | Line 725: | ||
display:flex; | display:flex; | ||
align-items:baseline; | align-items:baseline; | ||
justify-content:center; | |||
gap:6px; | gap:6px; | ||
min-width:0; | min-width:0; | ||
flex-wrap:wrap; | |||
} | } | ||
.sv_skill_scaling__core-value{ | .sv_skill_scaling__core-value{ | ||
font-weight:900; | font-weight:900; | ||
font-size: | font-size:17px; | ||
line-height:1.02; | line-height:1.02; | ||
color:rgba(245,249,255,0.98); | color:rgba(245,249,255,0.98); | ||
| Line 693: | Line 742: | ||
.sv_skill_scaling__core-unit{ | .sv_skill_scaling__core-unit{ | ||
font-weight:900; | font-weight:900; | ||
font-size: | font-size:11px; | ||
line-height:1.05; | line-height:1.05; | ||
color:rgba(182,198,224,0.95); | color:rgba(182,198,224,0.95); | ||
| Line 700: | Line 749: | ||
.sv_skill_scaling__core-label{ | .sv_skill_scaling__core-label{ | ||
margin-top:6px; | margin-top:6px; | ||
font-size: | font-size:11px; | ||
font-weight:900; | font-weight:900; | ||
letter-spacing:0. | line-height:1.12; | ||
letter-spacing:0.16px; | |||
text-transform:uppercase; | text-transform:uppercase; | ||
color:rgba(182,198,224,0.95); | color:rgba(182,198,224,0.95); | ||