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 24: | Line 24: | ||
.sv-gi-card, | .sv-gi-card, | ||
.sv-skill-card{ | .sv-skill-card { | ||
max-width: 600px; | |||
margin: 18px auto; | |||
border-radius: 22px; | |||
border: 1px solid rgba(75,99,136,0.55); | |||
background-color: #0f172a; | |||
background-image: radial-gradient(900px 360px at 40% -10%, rgba(106,166,255,0.18), rgba(0,0,0,0) 60%), linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), linear-gradient(180deg, #0f172a, #0b1324); | |||
box-shadow: 0 16px 38px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05); | |||
overflow: visible; | |||
color: rgba(245,249,255,0.94); | |||
font-size: 15px; | |||
line-height: 1.35; | |||
} | } | ||
/* Fixed top / bottom content zones */ | /* Fixed top / bottom content zones */ | ||
.sv-gi-top, | .sv-gi-top, | ||
.sv-skill-top{ | .sv-skill-top { | ||
padding: 14px 18px 4px; | |||
} | } | ||
.sv-gi-bottom, | .sv-gi-bottom, | ||
.sv-skill-bottom{ | .sv-skill-bottom { | ||
padding: 10px 18px 12px; | |||
} | } | ||
| Line 60: | Line 53: | ||
.sv-gi-card *, | .sv-gi-card *, | ||
.sv-skill-card, | .sv-skill-card, | ||
.sv-skill-card *{ | .sv-skill-card * { | ||
box-sizing: border-box; | |||
} | } | ||
/* Inline error shell */ | /* Inline error shell */ | ||
.sv-gi-error{ | .sv-gi-error { | ||
max-width: 600px; | |||
margin: 18px auto; | |||
padding: 10px 12px; | |||
border-radius: 14px; | |||
border: 1px solid rgba(75,99,136,0.55); | |||
background: #1f2937; | |||
color: rgba(245,249,255,0.92); | |||
} | } | ||
/* Hide source popup payload nodes even if sitewide .sv-hidden is unavailable */ | /* Hide source popup payload nodes even if sitewide .sv-hidden is unavailable */ | ||
.sv-gi-card .sv-hidden, | .sv-gi-card .sv-hidden, | ||
.sv-skill-card .sv-hidden{ | .sv-skill-card .sv-hidden { | ||
display: none; | |||
} | } | ||
/* Remove default browser marker from summary elements */ | /* Remove default browser marker from summary elements */ | ||
.sv-gi-card summary, | .sv-gi-card summary, | ||
.sv-skill-card summary{ | .sv-skill-card summary { | ||
list-style: none; | |||
} | } | ||
| Line 93: | Line 86: | ||
.sv-skill-icon, | .sv-skill-icon, | ||
.sv-meta-icon, | .sv-meta-icon, | ||
.sv-ref-ico{ | .sv-ref-ico { | ||
font-size: 0; | |||
line-height: 0; | |||
} | } | ||
.sv-skill-icon a, | .sv-skill-icon a, | ||
.sv-meta-icon a, | .sv-meta-icon a, | ||
.sv-ref-ico a{ | .sv-ref-ico a { | ||
text-decoration: none; | |||
} | } | ||
/* Fallback “?” badge sizing inside icon boxes */ | /* Fallback “?” badge sizing inside icon boxes */ | ||
.sv-skill-icon .sv-miss{ | .sv-skill-icon .sv-miss { | ||
width: 22px; | |||
height: 22px; | |||
font-size: 13px; | |||
line-height: 1; | |||
} | } | ||
.sv-meta-icon .sv-miss, | .sv-meta-icon .sv-miss, | ||
.sv-ref-ico .sv-miss{ | .sv-ref-ico .sv-miss { | ||
width: 18px; | |||
height: 18px; | |||
font-size: 12px; | |||
line-height: 1; | |||
} | } | ||
/* Image enhancement; global .sv-img still owns rounding behavior */ | /* Image enhancement; global .sv-img still owns rounding behavior */ | ||
.sv-gi-card .sv-img img, | .sv-gi-card .sv-img img, | ||
.sv-skill-card .sv-img img{ | .sv-skill-card .sv-img img { | ||
box-shadow: 0 10px 18px rgba(0,0,0,0.30); | |||
} | } | ||
| Line 130: | Line 123: | ||
========================================================================== */ | ========================================================================== */ | ||
.sv-skill-head{ | .sv-skill-head { | ||
display: flex; | |||
align-items: flex-start; | |||
gap: 12px; | |||
padding: 2px 0 10px; | |||
} | } | ||
.sv-skill-icon{ | .sv-skill-icon { | ||
flex: 0 0 auto; | |||
width: 64px; | |||
height: 64px; | |||
border-radius: 16px; | |||
border: 1px solid rgba(75,99,136,0.55); | |||
background: #1f2937; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
overflow: hidden; | |||
} | } | ||
.sv-skill-headtext{ | .sv-skill-headtext { | ||
min-width: 0; | |||
flex: 0 1 auto; | |||
} | } | ||
.sv-skill-title-row{ | .sv-skill-title-row { | ||
display: flex; | |||
align-items: center; | |||
gap: 10px; | |||
} | } | ||
.sv-skill-title{ | .sv-skill-title { | ||
min-width: 0; | |||
word-wrap: break-word; | |||
font-weight: 900; | |||
font-size: 22px; | |||
line-height: 1.10; | |||
letter-spacing: 0.2px; | |||
color: rgba(245,249,255,0.98); | |||
} | } | ||
.sv-skill-desc{ | .sv-skill-desc { | ||
margin-top: 6px; | |||
word-wrap: break-word; | |||
font-size: 14px; | |||
line-height: 1.35; | |||
color: rgba(215,226,244,0.92); | |||
} | } | ||
| Line 185: | Line 176: | ||
========================================================================== */ | ========================================================================== */ | ||
.sv-skill-meta{ | .sv-skill-meta { | ||
display: grid; | |||
grid-template-columns: repeat(4, minmax(0, 1fr)); | |||
gap: 6px; | |||
margin: 8px 0 10px; | |||
} | } | ||
/* Meta row fallback if global .sv-pill is used */ | /* Meta row fallback if global .sv-pill is used */ | ||
.sv-skill-card .sv-skill-meta .sv-pill, | .sv-skill-card .sv-skill-meta .sv-pill, | ||
.sv-gi-card .sv-skill-meta .sv-pill{ | .sv-gi-card .sv-skill-meta .sv-pill { | ||
width: 100%; | |||
min-height: 34px; | |||
padding: 0; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 6px; | |||
text-align: center; | |||
border-radius: 999px; | |||
border: 1px solid rgba(59,75,99,0.85); | |||
background: #273449; | |||
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00)); | |||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); | |||
font-weight: 900; | |||
font-size: 12px; | |||
line-height: 1.02; | |||
letter-spacing: 0.08px; | |||
text-transform: none; | |||
color: rgba(245,249,255,0.96); | |||
} | } | ||
/* Preferred meta-card rendering */ | /* Preferred meta-card rendering */ | ||
.sv-gi-card .sv-meta-card, | .sv-gi-card .sv-meta-card, | ||
.sv-skill-card .sv-meta-card{ | .sv-skill-card .sv-meta-card { | ||
position: relative; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 6px; | |||
min-height: 34px; | |||
padding: 0; | |||
border-radius: 999px; | |||
border: 1px solid rgba(59,75,99,0.85); | |||
background: #273449; | |||
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00)); | |||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); | |||
} | } | ||
.sv-gi-card .sv-meta-card:hover, | .sv-gi-card .sv-meta-card:hover, | ||
.sv-skill-card .sv-meta-card:hover{ | .sv-skill-card .sv-meta-card:hover { | ||
background: #2e3f59; | |||
} | } | ||
.sv-gi-card .sv-meta-icon, | .sv-gi-card .sv-meta-icon, | ||
.sv-skill-card .sv-meta-icon{ | .sv-skill-card .sv-meta-icon { | ||
flex: 0 0 auto; | |||
width: 20px; | |||
height: 20px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
overflow: hidden; | |||
border-radius: 999px; | |||
border: 1px solid rgba(75,99,136,0.55); | |||
background: #0f172a; | |||
} | } | ||
.sv-gi-card .sv-meta-textwrap, | .sv-gi-card .sv-meta-textwrap, | ||
.sv-skill-card .sv-meta-textwrap{ | .sv-skill-card .sv-meta-textwrap { | ||
min-width: 0; | |||
flex: 0 1 auto; | |||
} | } | ||
.sv-gi-card .sv-meta-text, | .sv-gi-card .sv-meta-text, | ||
.sv-skill-card .sv-meta-text{ | .sv-skill-card .sv-meta-text { | ||
min-width: 0; | |||
word-wrap: break-word; | |||
text-align: center; | |||
font-weight: 900; | |||
font-size: 12px; | |||
line-height: 1.02; | |||
letter-spacing: 0.08px; | |||
color: rgba(245,249,255,0.96); | |||
} | } | ||
.sv-gi-card .sv-meta-lines span, | .sv-gi-card .sv-meta-lines span, | ||
.sv-skill-card .sv-meta-lines span{ | .sv-skill-card .sv-meta-lines span { | ||
display: block; | |||
} | } | ||
/* Visible text should appear static; interaction is handled by the pill overlay */ | /* Visible text should appear static; interaction is handled by the pill overlay */ | ||
.sv-gi-card .sv-meta-text .sv-def, | .sv-gi-card .sv-meta-text .sv-def, | ||
.sv-skill-card .sv-meta-text .sv-def{ | .sv-skill-card .sv-meta-text .sv-def { | ||
cursor: default; | |||
} | } | ||
.sv-gi-card .sv-meta-text .sv-def-text, | .sv-gi-card .sv-meta-text .sv-def-text, | ||
.sv-skill-card .sv-meta-text .sv-def-text{ | .sv-skill-card .sv-meta-text .sv-def-text { | ||
color: inherit; | |||
border-bottom: none; | |||
} | } | ||
/* Secondary line styling */ | /* Secondary line styling */ | ||
.sv-gi-card .sv-meta-text .sv-meta-lines span + span, | .sv-gi-card .sv-meta-text .sv-meta-lines span + span, | ||
.sv-skill-card .sv-meta-text .sv-meta-lines span + span{ | .sv-skill-card .sv-meta-text .sv-meta-lines span + span { | ||
margin-top: 1px; | |||
opacity: 0.90; | |||
font-size: 10px; | |||
font-weight: 800; | |||
letter-spacing: 0.12px; | |||
} | } | ||
/* Full-pill Definitions interaction overlay */ | /* Full-pill Definitions interaction overlay */ | ||
.sv-gi-card .sv-meta-hit, | .sv-gi-card .sv-meta-hit, | ||
.sv-skill-card .sv-meta-hit{ | .sv-skill-card .sv-meta-hit { | ||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
bottom: 0; | |||
left: 0; | |||
z-index: 5; | |||
opacity: 0; | |||
} | } | ||
.sv-gi-card .sv-meta-hit .sv-def, | .sv-gi-card .sv-meta-hit .sv-def, | ||
.sv-skill-card .sv-meta-hit .sv-def{ | .sv-skill-card .sv-meta-hit .sv-def { | ||
display: block; | |||
width: 100%; | |||
height: 100%; | |||
} | } | ||
/* ========================================================================== | /* ========================================================================== | ||
| Line 332: | Line 313: | ||
.sv-gi-card .sv-reqrow, | .sv-gi-card .sv-reqrow, | ||
.sv-skill-card .sv-reqrow{ | .sv-skill-card .sv-reqrow { | ||
display: flex; | |||
justify-content: center; | |||
flex-wrap: wrap; | |||
gap: 8px; | |||
margin: 6px 0 10px; | |||
} | } | ||
.sv-gi-card .sv-disclose, | .sv-gi-card .sv-disclose, | ||
.sv-skill-card .sv-disclose{ | .sv-skill-card .sv-disclose { | ||
flex: 0 1 190px; | |||
max-width: 205px; | |||
} | } | ||
| Line 349: | Line 330: | ||
the compact modifier class from Lua */ | the compact modifier class from Lua */ | ||
.sv-gi-card .sv-reqrow .sv-disclose-btn, | .sv-gi-card .sv-reqrow .sv-disclose-btn, | ||
.sv-skill-card .sv-reqrow .sv-disclose-btn{ | .sv-skill-card .sv-reqrow .sv-disclose-btn { | ||
min-height: 36px; | |||
padding: 0 12px; | |||
border-radius: 999px; | |||
} | } | ||
| Line 360: | Line 341: | ||
========================================================================== */ | ========================================================================== */ | ||
.sv-skill-level{ | .sv-skill-level { | ||
margin: 8px 0 10px; | |||
padding: 10px 12px; | |||
display: flex; | |||
flex-direction: column; | |||
gap: 8px; | |||
border-radius: 16px; | |||
border: 1px solid rgba(59,75,99,0.85); | |||
background: #1f2937; | |||
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00)); | |||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); | |||
} | } | ||
/* Skills default to hiding tick labels because the end-value replaces them */ | /* Skills default to hiding tick labels because the end-value replaces them */ | ||
.sv-skill-level:not([data-sv-level-hide-ticks="0"]) .sv-level-ticklabels{ | .sv-skill-level:not([data-sv-level-hide-ticks="0"]) .sv-level-ticklabels { | ||
display: none; | |||
} | } | ||
/* Transitional helper label: | /* Transitional helper label: | ||
| Line 385: | Line 364: | ||
*/ | */ | ||
.sv-gi-card .sv-level-label:not([data-sv-helper-text]), | .sv-gi-card .sv-level-label:not([data-sv-helper-text]), | ||
.sv-skill-card .sv-level-label:not([data-sv-helper-text]){ | .sv-skill-card .sv-level-label:not([data-sv-helper-text]) { | ||
position: static; | |||
top: auto; | |||
right: auto; | |||
bottom: auto; | |||
left: auto; | |||
transform: none; | |||
display: inline-block; | |||
margin: 0; | |||
padding: 0; | |||
font-size: 0; | |||
line-height: 0; | |||
} | } | ||
.sv-gi-card .sv-level-label:not([data-sv-helper-text])::after, | .sv-gi-card .sv-level-label:not([data-sv-helper-text])::after, | ||
.sv-skill-card .sv-level-label:not([data-sv-helper-text])::after{ | .sv-skill-card .sv-level-label:not([data-sv-helper-text])::after { | ||
content: "Slide to set level"; | |||
display: inline-block; | |||
font-weight: 900; | |||
font-size: 13px; | |||
line-height: 1.25; | |||
letter-spacing: 0.15px; | |||
color: rgba(245,249,255,0.94); | |||
} | |||
} | |||
/* ========================================================================== | /* ========================================================================== | ||
7) SCHEMA 2 SKILL SCALING DASHBOARD | 7) SCHEMA 2 SKILL SCALING DASHBOARD | ||
Layout goal: | |||
- | - Outer scaling card is one cohesive surface. | ||
- Row 1: LEFT | - Row 1 is a 2-column layout: | ||
col 1: LEFT CLUSTER (damage + 2×3 attribute chips) as ONE UNIT | |||
- Row 2: Core pills | col 2: RIGHT SIDE (reserved / future block; later core can move here) | ||
- Row 2: Core pills span full width (for now). | |||
NOTE (structure): | |||
- | - This expects the DOM to provide a wrapper that groups damage+stats: | ||
.sv_skill_scaling__cluster | |||
and (optionally) a right-side placeholder: | |||
.sv_skill_scaling__side | |||
========================================================================== */ | ========================================================================== */ | ||
.sv_skill_scaling{ | .sv_skill_scaling { | ||
margin: 8px 0 10px; | |||
padding: 10px 12px 12px; | |||
border-radius: 18px; | |||
border: 1px solid rgba(59,75,99,0.85); | |||
background: #1f2937; | |||
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00)); | |||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); | |||
} | } | ||
/* Absorb the level selector visually into the scaling card */ | /* Absorb the level selector visually into the scaling card */ | ||
.sv_skill_scaling .sv-skill-level, | .sv_skill_scaling .sv-skill-level, | ||
.sv_skill_scaling__level{ | .sv_skill_scaling__level { | ||
margin: 0 0 10px; | |||
padding: 0 0 10px; | |||
border: 0; | |||
border-radius: 0; | |||
background: transparent; | |||
box-shadow: none; | |||
border-bottom: 1px solid rgba(59,75,99,0.72); | |||
} | |||
/* Row 1: [cluster][side] | Row 2: core spans both */ | |||
.sv_skill_scaling__body { | |||
display: grid; | |||
grid-template-columns: max-content minmax(0, 1fr); | |||
grid-template-rows: auto auto; | |||
column-gap: 16px; | |||
row-gap: 12px; | |||
align-items: center; | |||
} | } | ||
/* | /* Cluster = ONE UNIT containing primary + stats */ | ||
.sv_skill_scaling__cluster { | |||
grid-column: 1; | |||
grid-row: 1; | |||
display: flex; | |||
align-items: center; | |||
justify-content: flex-start; | |||
gap: 14px; | |||
min-width: 0; | |||
} | |||
/* Right-side reserved area (optional, may be empty for now) */ | |||
.sv_skill_scaling__side { | |||
grid-column: 2; | |||
grid-row: 1; | |||
min-width: 0; | |||
} | |||
/* Core spans full width below (current placement) */ | |||
.sv_skill_scaling__column--core { | |||
grid-column: 1 / -1; | |||
grid-row: 2; | |||
padding: 0; | |||
} | } | ||
/* Section wrappers are intentionally visual no-ops */ | /* Section wrappers are intentionally visual no-ops */ | ||
.sv_skill_scaling__column{ | .sv_skill_scaling__column { | ||
min-width: 0; | |||
padding: 0; | |||
border: 0; | |||
border-radius: 0; | |||
background: transparent; | |||
background-image: none; | |||
box-shadow: none; | |||
} | } | ||
/* Primary output (Damage Mod) */ | /* Primary output (Damage Mod) */ | ||
.sv_skill_scaling__column--primary{ | .sv_skill_scaling__column--primary { | ||
min-height: 0; | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
align-items: flex-start; | |||
text-align: left; | |||
} | |||
/* Damage typography */ | |||
.sv_skill_scaling__primary-value { | |||
word-wrap: break-word; | |||
font-weight: 900; | |||
font-size: 58px; | |||
line-height: 0.90; | |||
letter-spacing: -0.85px; | |||
color: rgba(245,249,255,0.99); | |||
} | } | ||
.sv_skill_scaling__primary-label { | |||
margin-top: 6px; | |||
font-weight: 900; | |||
font-size: 12px; | |||
line-height: 1.05; | |||
letter-spacing: 0.22px; | |||
text-transform: uppercase; | |||
color: rgba(182,198,224,0.96); | |||
} | } | ||
/* | /* -------------------------------------------------------------------------- | ||
7A) ATTRIBUTE CHIPS (2 columns x 3 rows) | |||
-------------------------------------------------------------------------- */ | |||
.sv_skill_scaling__stats-grid { | |||
display: grid; | |||
/* Compact grid; does NOT stretch */ | |||
grid-template-columns: repeat(2, max-content); | |||
justify-content: start; | |||
justify-items: start; | |||
row-gap: 8px; | |||
column-gap: 12px; | |||
/* Hard ordering */ | |||
grid-template-areas: | |||
"str agi" | |||
"vit int" | |||
"dex luk"; | |||
} | } | ||
. | .sv_skill_scaling__stat-pill--str { | ||
grid-area: str; | |||
} | } | ||
.sv_skill_scaling__stat-pill--vit { | |||
. | grid-area: vit; | ||
} | } | ||
. | .sv_skill_scaling__stat-pill--dex { | ||
grid-area: dex; | |||
} | } | ||
.sv_skill_scaling__stat-pill--agi { | |||
. | grid-area: agi; | ||
} | |||
.sv_skill_scaling__stat-pill--int { | |||
grid-area: int; | |||
} | } | ||
. | .sv_skill_scaling__stat-pill--luk { | ||
grid-area: luk; | |||
} | |||
/* Shared pill shell (core uses this; stat chips override size below) */ | |||
.sv_skill_scaling__pill { | |||
position: relative; | |||
min-width: 0; | |||
border-radius: 14px; | |||
border: 1px solid rgba(59,75,99,0.92); | |||
background: #1a2434; | |||
background-image: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00)); | |||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); | |||
} | } | ||
/* | /* Stat chips: compact “micro pills” */ | ||
. | .sv_skill_scaling__stat-pill { | ||
border-radius: 999px; | |||
width: 96px; /* prevents stretched bars */ | |||
min-height: 24px; | |||
padding: 4px 10px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
text-align: left; | |||
white-space: nowrap; | |||
} | } | ||
/* ---- | /* Flatten inner structure into one row */ | ||
.sv_skill_scaling__stat-main { | |||
width: auto; | |||
min-width: 0; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
} | |||
.sv_skill_scaling__stat-visual { | |||
min-width: 0; | |||
display: flex; | |||
flex-direction: row; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 8px; | |||
} | |||
/* No stat label in chip mode */ | |||
.sv_skill_scaling__stat-label { | |||
display: none; | |||
} | } | ||
/* Icon sizing */ | |||
.sv_skill_scaling__stat- | .sv_skill_scaling__stat-icon { | ||
width: 14px; | |||
height: 14px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
font-size: 0; | |||
line-height: 0; | |||
} | } | ||
.sv_skill_scaling__stat-icon a { | |||
.sv_skill_scaling__stat- | text-decoration: none; | ||
} | |||
.sv_skill_scaling__stat-icon .sv-img img { | |||
width: 14px; | |||
height: 14px; | |||
box-shadow: none; | |||
} | |||
.sv_skill_scaling__stat-icon .sv-miss { | |||
width: 12px; | |||
height: 12px; | |||
font-size: 9px; | |||
line-height: 1; | |||
} | |||
/* Value sizing */ | |||
.sv_skill_scaling__stat-value { | |||
font-weight: 900; | |||
font-size: 15px; | |||
line-height: 1; | |||
letter-spacing: -0.12px; | |||
color: rgba(245,249,255,0.98); | |||
} | |||
/* Full-pill Definitions interaction overlay (active pills) */ | |||
.sv_skill_scaling__stat-hit { | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
bottom: 0; | |||
left: 0; | |||
z-index: 5; | |||
opacity: 0; | |||
} | } | ||
.sv_skill_scaling__stat-hit .sv-def { | |||
.sv_skill_scaling__stat- | display: block; | ||
width: 100%; | |||
height: 100%; | |||
} | |||
/* Inactive chips: dash only */ | |||
.sv_skill_scaling__stat-pill.is-inactive { | |||
border-color: rgba(59,75,99,0.72); | |||
background: #182130; | |||
background-image: none; | |||
box-shadow: none; | |||
} | } | ||
.sv_skill_scaling__stat- | .sv_skill_scaling__stat-pill.is-inactive .sv_skill_scaling__stat-icon, | ||
.sv_skill_scaling__stat-pill.is-inactive .sv_skill_scaling__stat-value { | |||
display: none; | |||
} | |||
.sv_skill_scaling__stat-pill.is-inactive::before { | |||
content: "—"; | |||
font-weight: 900; | |||
font-size: 15px; | |||
line-height: 1; | |||
color: rgba(140,156,184,0.78); | |||
} | |||
/* Active baseline */ | |||
.sv_skill_scaling__stat-pill.is-active { | |||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(255,255,255,0.01); | |||
} | } | ||
/* | /* Per-stat color treatments */ | ||
.sv_skill_scaling__stat- | .sv_skill_scaling__stat-pill--str.is-active { | ||
border-color: rgba(145,63,82,0.96); | |||
background: #32131d; | |||
background-image: linear-gradient(180deg, rgba(190,88,113,0.16), rgba(0,0,0,0.00)); | |||
} | } | ||
.sv_skill_scaling__stat-pill--str.is-active .sv_skill_scaling__stat-value { | |||
.sv_skill_scaling__stat- | color: #ffdce5; | ||
} | |||
.sv_skill_scaling__stat-pill--vit.is-active { | |||
border-color: rgba(158,112,22,0.96); | |||
background: #352609; | |||
background-image: linear-gradient(180deg, rgba(210,144,18,0.15), rgba(0,0,0,0.00)); | |||
} | |||
.sv_skill_scaling__stat-pill--vit.is-active .sv_skill_scaling__stat-value { | |||
color: #ffefc9; | |||
} | |||
.sv_skill_scaling__stat-pill--dex.is-active { | |||
border-color: rgba(118,146,24,0.96); | |||
background: #243208; | |||
background-image: linear-gradient(180deg, rgba(159,194,27,0.16), rgba(0,0,0,0.00)); | |||
} | } | ||
.sv_skill_scaling__stat- | .sv_skill_scaling__stat-pill--dex.is-active .sv_skill_scaling__stat-value { | ||
color: #edf8cc; | |||
} | |||
.sv_skill_scaling__stat-pill--agi.is-active { | |||
border-color: rgba(125,62,152,0.96); | |||
background: #2b1438; | |||
background-image: linear-gradient(180deg, rgba(165,82,198,0.17), rgba(0,0,0,0.00)); | |||
} | } | ||
.sv_skill_scaling__stat- | .sv_skill_scaling__stat-pill--agi.is-active .sv_skill_scaling__stat-value { | ||
color: #f0dcff; | |||
} | |||
} | |||
.sv_skill_scaling__stat-pill--int.is-active { | |||
.sv_skill_scaling__stat- | border-color: rgba(45,118,191,0.96); | ||
background: #11263d; | |||
background-image: linear-gradient(180deg, rgba(35,140,230,0.18), rgba(0,0,0,0.00)); | |||
} | } | ||
.sv_skill_scaling__stat-pill--int.is-active .sv_skill_scaling__stat-value { | |||
.sv_skill_scaling__stat- | color: #d8eeff; | ||
} | |||
} | |||
.sv_skill_scaling__stat- | .sv_skill_scaling__stat-pill--luk.is-active { | ||
border-color: rgba(183,150,22,0.96); | |||
background: #3a2f07; | |||
background-image: linear-gradient(180deg, rgba(234,194,9,0.16), rgba(0,0,0,0.00)); | |||
} | } | ||
.sv_skill_scaling__stat-pill--luk.is-active .sv_skill_scaling__stat-value { | |||
.sv_skill_scaling__stat-pill.is- | color: #fff2ba; | ||
} | |||
} | |||
/* -------------------------------------------------------------------------- | |||
7B) CORE PILLS (current placement: row 2) | |||
-------------------------------------------------------------------------- */ | |||
. | .sv_skill_scaling__core-grid { | ||
display: grid; | |||
grid-template-columns: repeat(6, minmax(0, 1fr)); | |||
gap: 8px; | |||
} | } | ||
.sv_skill_scaling__core-pill { | |||
. | min-height: 88px; | ||
padding: 10px 8px; | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
align-items: center; | |||
text-align: center; | |||
} | } | ||
.sv_skill_scaling__core-main { | |||
min-width: 0; | |||
display: flex; | |||
align-items: baseline; | |||
justify-content: center; | |||
flex-wrap: wrap; | |||
gap: 6px; | |||
} | } | ||
. | .sv_skill_scaling__core-value { | ||
min-width: 0; | |||
word-wrap: break-word; | |||
font-weight: 900; | |||
font-size: 17px; | |||
line-height: 1.02; | |||
color: rgba(245,249,255,0.98); | |||
} | } | ||
. | .sv_skill_scaling__core-unit { | ||
font-weight: 900; | |||
font-size: 11px; | |||
line-height: 1.05; | |||
color: rgba(182,198,224,0.95); | |||
} | } | ||
. | .sv_skill_scaling__core-label { | ||
margin-top: 6px; | |||
font-weight: 900; | |||
font-size: 11px; | |||
line-height: 1.12; | |||
letter-spacing: 0.16px; | |||
text-transform: uppercase; | |||
color: rgba(182,198,224,0.95); | |||
} | } | ||
. | .sv_skill_scaling__core-pill.is-inactive { | ||
border-color: rgba(59,75,99,0.72); | |||
background: #182130; | |||
} | } | ||
. | .sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-value, | ||
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-unit, | |||
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-label { | |||
color: rgba(140,156,184,0.78); | |||
} | |||
. | |||
/* -------------------------------------------------------------------------- | /* -------------------------------------------------------------------------- | ||
| Line 784: | Line 804: | ||
-------------------------------------------------------------------------- */ | -------------------------------------------------------------------------- */ | ||
.sv_skill_scaling__core-grid{ | .sv_skill_scaling__core-grid { | ||
display: grid; | |||
grid-template-columns: repeat(6, minmax(0, 1fr)); | |||
gap: 8px; | |||
} | } | ||
.sv_skill_scaling__core-pill{ | .sv_skill_scaling__core-pill { | ||
min-height: 88px; | |||
padding: 10px 8px; | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
align-items: center; | |||
text-align: center; | |||
} | } | ||
.sv_skill_scaling__core-main{ | .sv_skill_scaling__core-main { | ||
min-width: 0; | |||
display: flex; | |||
align-items: baseline; | |||
justify-content: center; | |||
flex-wrap: wrap; | |||
gap: 6px; | |||
} | } | ||
.sv_skill_scaling__core-value{ | .sv_skill_scaling__core-value { | ||
min-width: 0; | |||
word-wrap: break-word; | |||
font-weight: 900; | |||
font-size: 17px; | |||
line-height: 1.02; | |||
color: rgba(245,249,255,0.98); | |||
} | } | ||
.sv_skill_scaling__core-unit{ | .sv_skill_scaling__core-unit { | ||
font-weight: 900; | |||
font-size: 11px; | |||
line-height: 1.05; | |||
color: rgba(182,198,224,0.95); | |||
} | } | ||
.sv_skill_scaling__core-label{ | .sv_skill_scaling__core-label { | ||
margin-top: 6px; | |||
font-weight: 900; | |||
font-size: 11px; | |||
line-height: 1.12; | |||
letter-spacing: 0.16px; | |||
text-transform: uppercase; | |||
color: rgba(182,198,224,0.95); | |||
} | } | ||
.sv_skill_scaling__core-pill.is-inactive{ | .sv_skill_scaling__core-pill.is-inactive { | ||
border-color: rgba(59,75,99,0.72); | |||
background: #182130; | |||
} | } | ||
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-value, | .sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-value, | ||
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-unit, | .sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-unit, | ||
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-label{ | .sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-label { | ||
color: rgba(140,156,184,0.78); | |||
} | } | ||
/* ========================================================================== | /* ========================================================================== | ||
| Line 853: | Line 870: | ||
========================================================================== */ | ========================================================================== */ | ||
.sv-skill-scaling{ | .sv-skill-scaling { | ||
margin: 10px 0; | |||
} | } | ||
.sv-gi-card .sv-scaling-row, | .sv-gi-card .sv-scaling-row, | ||
.sv-skill-card .sv-scaling-row{ | .sv-skill-card .sv-scaling-row { | ||
padding: 10px 12px; | |||
border-radius: 16px; | |||
border: 1px solid rgba(59,75,99,0.85); | |||
background: #1f2937; | |||
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00)); | |||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); | |||
} | } | ||
.sv-gi-card .sv-scaling-grid, | .sv-gi-card .sv-scaling-grid, | ||
.sv-skill-card .sv-scaling-grid{ | .sv-skill-card .sv-scaling-grid { | ||
display: grid; | |||
grid-template-columns: 1fr 1fr; | |||
gap: 10px; | |||
align-items: start; | |||
} | } | ||
.sv-gi-card .sv-scaling-col--scaling, | .sv-gi-card .sv-scaling-col--scaling, | ||
.sv-skill-card .sv-scaling-col--scaling{ | .sv-skill-card .sv-scaling-col--scaling { | ||
grid-column: 1 / -1; | |||
} | } | ||
.sv-gi-card .sv-scaling-value, | .sv-gi-card .sv-scaling-value, | ||
.sv-skill-card .sv-scaling-value{ | .sv-skill-card .sv-scaling-value { | ||
word-wrap: break-word; | |||
font-weight: 900; | |||
font-size: 18px; | |||
line-height: 1.10; | |||
color: rgba(245,249,255,0.98); | |||
} | } | ||
.sv-gi-card .sv-scaling-label, | .sv-gi-card .sv-scaling-label, | ||
.sv-skill-card .sv-scaling-label{ | .sv-skill-card .sv-scaling-label { | ||
margin-top: 3px; | |||
font-weight: 900; | |||
font-size: 12px; | |||
letter-spacing: 0.25px; | |||
text-transform: uppercase; | |||
color: rgba(182,198,224,0.95); | |||
} | } | ||
.sv-gi-card .sv-scaling-list, | .sv-gi-card .sv-scaling-list, | ||
.sv-skill-card .sv-scaling-list{ | .sv-skill-card .sv-scaling-list { | ||
display: grid; | |||
gap: 6px; | |||
margin-top: 2px; | |||
} | } | ||
.sv-gi-card .sv-scaling-item, | .sv-gi-card .sv-scaling-item, | ||
.sv-skill-card .sv-scaling-item{ | .sv-skill-card .sv-scaling-item { | ||
padding: 8px 10px; | |||
border-radius: 14px; | |||
border: 1px solid rgba(59,75,99,0.85); | |||
background: #273449; | |||
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00)); | |||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); | |||
font-weight: 800; | |||
font-size: 13px; | |||
color: rgba(215,226,244,0.92); | |||
} | } | ||
| Line 928: | Line 940: | ||
========================================================================== */ | ========================================================================== */ | ||
.sv-skill-core{ | .sv-skill-core { | ||
margin: 10px 0; | |||
} | } | ||
.sv-gi-card .sv-core-row, | .sv-gi-card .sv-core-row, | ||
.sv-skill-card .sv-core-row{ | .sv-skill-card .sv-core-row { | ||
padding: 10px 12px; | |||
border-radius: 16px; | |||
border: 1px solid rgba(59,75,99,0.85); | |||
background: #1f2937; | |||
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00)); | |||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); | |||
} | } | ||
.sv-gi-card .sv-core-grid, | .sv-gi-card .sv-core-grid, | ||
.sv-skill-card .sv-core-grid{ | .sv-skill-card .sv-core-grid { | ||
display: grid; | |||
grid-template-columns: repeat(3, minmax(0, 1fr)); | |||
gap: 10px; | |||
} | } | ||
.sv-gi-card .sv-core-cell, | .sv-gi-card .sv-core-cell, | ||
.sv-skill-card .sv-core-cell{ | .sv-skill-card .sv-core-cell { | ||
min-width: 0; | |||
padding: 10px 10px 9px; | |||
border-radius: 14px; | |||
border: 1px solid rgba(59,75,99,0.85); | |||
background: #273449; | |||
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00)); | |||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); | |||
} | } | ||
.sv-gi-card .sv-core-top, | .sv-gi-card .sv-core-top, | ||
.sv-skill-card .sv-core-top{ | .sv-skill-card .sv-core-top { | ||
min-width: 0; | |||
display: flex; | |||
align-items: baseline; | |||
gap: 6px; | |||
} | } | ||
.sv-gi-card .sv-core-num, | .sv-gi-card .sv-core-num, | ||
.sv-skill-card .sv-core-num{ | .sv-skill-card .sv-core-num { | ||
min-width: 0; | |||
word-wrap: break-word; | |||
font-weight: 900; | |||
font-size: 17px; | |||
line-height: 1.10; | |||
color: rgba(245,249,255,0.98); | |||
} | } | ||
.sv-gi-card .sv-core-unit, | .sv-gi-card .sv-core-unit, | ||
.sv-skill-card .sv-core-unit{ | .sv-skill-card .sv-core-unit { | ||
font-weight: 900; | |||
font-size: 12px; | |||
color: rgba(182,198,224,0.95); | |||
} | } | ||
.sv-gi-card .sv-core-label, | .sv-gi-card .sv-core-label, | ||
.sv-skill-card .sv-core-label{ | .sv-skill-card .sv-core-label { | ||
margin-top: 6px; | |||
font-weight: 900; | |||
font-size: 12px; | |||
letter-spacing: 0.25px; | |||
text-transform: uppercase; | |||
color: rgba(182,198,224,0.95); | |||
} | } | ||
.sv-gi-card .sv-core-label--tight, | .sv-gi-card .sv-core-label--tight, | ||
.sv-skill-card .sv-core-label--tight{ | .sv-skill-card .sv-core-label--tight { | ||
letter-spacing: 0.12px; | |||
} | } | ||
| Line 1,009: | Line 1,017: | ||
========================================================================== */ | ========================================================================== */ | ||
.sv-skill-tabs{ | .sv-skill-tabs { | ||
margin: 10px 0 0; | |||
} | } | ||
/* Mechanics grid */ | /* Mechanics grid */ | ||
.sv-gi-card .sv-kw-grid, | .sv-gi-card .sv-kw-grid, | ||
.sv-skill-card .sv-kw-grid{ | .sv-skill-card .sv-kw-grid { | ||
display: grid; | |||
grid-template-columns: repeat(2, minmax(0, 1fr)); | |||
gap: 10px; | |||
} | } | ||
.sv-gi-card .sv-kw-cell, | .sv-gi-card .sv-kw-cell, | ||
.sv-skill-card .sv-kw-cell{ | .sv-skill-card .sv-kw-cell { | ||
padding: 10px 10px 9px; | |||
border-radius: 14px; | |||
border: 1px solid rgba(59,75,99,0.85); | |||
background: #273449; | |||
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00)); | |||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); | |||
} | } | ||
.sv-gi-card .sv-kw-label, | .sv-gi-card .sv-kw-label, | ||
.sv-skill-card .sv-kw-label{ | .sv-skill-card .sv-kw-label { | ||
font-weight: 900; | |||
font-size: 12px; | |||
letter-spacing: 0.25px; | |||
text-transform: uppercase; | |||
color: rgba(182,198,224,0.95); | |||
} | } | ||
.sv-gi-card .sv-kw-value, | .sv-gi-card .sv-kw-value, | ||
.sv-skill-card .sv-kw-value{ | .sv-skill-card .sv-kw-value { | ||
margin-top: 6px; | |||
word-wrap: break-word; | |||
font-weight: 900; | |||
font-size: 15px; | |||
color: rgba(245,249,255,0.96); | |||
} | } | ||
/* Keyword pills panel */ | /* Keyword pills panel */ | ||
.sv-gi-card .sv-tab-pills, | .sv-gi-card .sv-tab-pills, | ||
.sv-skill-card .sv-tab-pills{ | .sv-skill-card .sv-tab-pills { | ||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 8px; | |||
} | } | ||
| Line 1,064: | Line 1,070: | ||
.sv-gi-card .sv-ref-grid, | .sv-gi-card .sv-ref-grid, | ||
.sv-skill-card .sv-ref-grid{ | .sv-skill-card .sv-ref-grid { | ||
display: grid; | |||
grid-template-columns: repeat(2, minmax(0, 1fr)); | |||
gap: 10px; | |||
} | } | ||
.sv-gi-card .sv-ref-card, | .sv-gi-card .sv-ref-card, | ||
.sv-skill-card .sv-ref-card{ | .sv-skill-card .sv-ref-card { | ||
min-width: 0; | |||
display: flex; | |||
align-items: flex-start; | |||
gap: 10px; | |||
padding: 10px 10px; | |||
border-radius: 16px; | |||
border: 1px solid rgba(59,75,99,0.85); | |||
background: #1f2937; | |||
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00)); | |||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); | |||
color: rgba(245,249,255,0.94); | |||
} | } | ||
.sv-gi-card .sv-ref-ico, | .sv-gi-card .sv-ref-ico, | ||
.sv-skill-card .sv-ref-ico{ | .sv-skill-card .sv-ref-ico { | ||
flex: 0 0 auto; | |||
width: 52px; | |||
height: 52px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
overflow: hidden; | |||
border-radius: 16px; | |||
border: 1px solid rgba(75,99,136,0.55); | |||
background: #273449; | |||
} | } | ||
.sv-gi-card .sv-ref-text, | .sv-gi-card .sv-ref-text, | ||
.sv-skill-card .sv-ref-text{ | .sv-skill-card .sv-ref-text { | ||
min-width: 0; | |||
flex: 1 1 auto; | |||
} | } | ||
.sv-gi-card .sv-ref-title, | .sv-gi-card .sv-ref-title, | ||
.sv-skill-card .sv-ref-title{ | .sv-skill-card .sv-ref-title { | ||
word-wrap: break-word; | |||
font-weight: 900; | |||
font-size: 15px; | |||
line-height: 1.15; | |||
color: rgba(245,249,255,0.98); | |||
} | } | ||
.sv-gi-card .sv-ref-stats, | .sv-gi-card .sv-ref-stats, | ||
.sv-skill-card .sv-ref-stats{ | .sv-skill-card .sv-ref-stats { | ||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 8px; | |||
margin-top: 8px; | |||
} | } | ||
.sv-gi-card .sv-ref-stat, | .sv-gi-card .sv-ref-stat, | ||
.sv-skill-card .sv-ref-stat{ | .sv-skill-card .sv-ref-stat { | ||
display: inline-flex; | |||
align-items: center; | |||
padding: 3px 8px; | |||
border-radius: 999px; | |||
border: 1px solid rgba(59,75,99,0.85); | |||
background: #273449; | |||
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00)); | |||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); | |||
font-weight: 900; | |||
font-size: 12px; | |||
color: rgba(215,226,244,0.92); | |||
} | } | ||
.sv-gi-card .sv-ref-sub, | .sv-gi-card .sv-ref-sub, | ||
.sv-skill-card .sv-ref-sub{ | .sv-skill-card .sv-ref-sub { | ||
margin-top: 6px; | |||
font-weight: 900; | |||
font-size: 13px; | |||
color: rgba(182,198,224,0.95); | |||
} | } | ||
| Line 1,161: | Line 1,159: | ||
========================================================================== */ | ========================================================================== */ | ||
@media (max-width:850px){ | @media (max-width:850px) { | ||
.sv-gi-card, | |||
.sv-skill-card { | |||
margin: 14px 10px; | |||
border-radius: 20px; | |||
} | |||
.sv-gi-top, | |||
.sv-skill-top { | |||
padding: 12px 16px 4px; | |||
} | |||
.sv-gi-bottom, | |||
.sv-skill-bottom { | |||
padding: 10px 16px 12px; | |||
} | |||
.sv-skill-title { | |||
font-size: 20px; | |||
} | |||
.sv-skill-meta { | |||
grid-template-columns: repeat(2, minmax(0, 1fr)); | |||
} | |||
.sv-gi-card .sv-core-grid, | |||
.sv-skill-card .sv-core-grid { | |||
grid-template-columns: repeat(2, minmax(0, 1fr)); | |||
} | |||
.sv-gi-card .sv-ref-grid, | |||
.sv-skill-card .sv-ref-grid { | |||
grid-template-columns: 1fr; | |||
} | |||
/* Keep the damage+chips cluster intact; tighten sizes */ | |||
.sv_skill_scaling__primary-value { | |||
font-size: 48px; | |||
letter-spacing: -0.70px; | |||
} | |||
.sv_skill_scaling__stat-pill { | |||
width: 118px; | |||
min-height: 26px; | |||
padding: 6px 10px; | |||
} | |||
.sv_skill_scaling__stats-grid { | |||
row-gap: 9px; | |||
column-gap: 10px; | |||
} | |||
.sv_skill_scaling__core-grid { | |||
grid-template-columns: repeat(3, minmax(0, 1fr)); | |||
} | |||
} | } | ||
@media (max-width:500px){ | @media (max-width:500px) { | ||
.sv-skill-head { | |||
gap: 10px; | |||
} | |||
.sv-skill-icon { | |||
width: 56px; | |||
height: 56px; | |||
border-radius: 14px; | |||
} | |||
.sv-skill-title { | |||
font-size: 18px; | |||
} | |||
.sv-skill-desc { | |||
font-size: 13px; | |||
} | |||
.sv-gi-card .sv-scaling-grid, | |||
.sv-skill-card .sv-scaling-grid { | |||
grid-template-columns: 1fr; | |||
} | |||
.sv-gi-card .sv-kw-grid, | |||
.sv-skill-card .sv-kw-grid { | |||
grid-template-columns: 1fr; | |||
} | |||
/* Requirements / Users edge padding */ | |||
.sv-gi-card .sv-reqrow, | |||
.sv-skill-card .sv-reqrow { | |||
padding-left: 16px; | |||
padding-right: 16px; | |||
} | |||
.sv-gi-card .sv-disclose, | |||
.sv-skill-card .sv-disclose { | |||
flex: 1 1 170px; | |||
max-width: 190px; | |||
} | |||
/* Tight mobile meta row */ | |||
.sv-skill-card .sv-skill-meta, | |||
.sv-gi-card .sv-skill-meta { | |||
grid-template-columns: repeat(2, minmax(0, 1fr)); | |||
gap: 6px; | |||
max-width: 200px; | |||
margin-left: auto; | |||
margin-right: auto; | |||
justify-content: center; | |||
} | |||
.sv-skill-card .sv-meta-card, | |||
.sv-gi-card .sv-meta-card { | |||
min-height: 32px; | |||
gap: 7px; | |||
} | |||
.sv-skill-card .sv-meta-icon, | |||
.sv-gi-card .sv-meta-icon { | |||
width: 16px; | |||
height: 16px; | |||
} | |||
.sv-skill-card .sv-meta-text, | |||
.sv-gi-card .sv-meta-text { | |||
font-size: 10px; | |||
line-height: 1.05; | |||
letter-spacing: 0; | |||
} | |||
.sv-skill-card .sv-meta-text .sv-meta-lines span + span, | |||
.sv-gi-card .sv-meta-text .sv-meta-lines span + span { | |||
margin-top: 1px; | |||
font-size: 9px; | |||
} | |||
.sv-skill-level { | |||
padding: 9px 10px; | |||
} | |||
.sv-gi-card .sv-level-label:not([data-sv-helper-text])::after, | |||
.sv-skill-card .sv-level-label:not([data-sv-helper-text])::after { | |||
font-size: 12px; | |||
} | |||
.sv_skill_scaling { | |||
padding: 9px 10px 10px; | |||
} | |||
.sv_skill_scaling .sv-skill-level, | |||
.sv_skill_scaling__level { | |||
padding: 0 0 9px; | |||
} | |||
/* Keep the cluster intact; scale down */ | |||
.sv_skill_scaling__primary-value { | |||
font-size: 42px; | |||
letter-spacing: -0.60px; | |||
} | |||
.sv_skill_scaling__primary-label { | |||
font-size: 11px; | |||
} | |||
.sv_skill_scaling__stat-pill { | |||
width: 104px; | |||
min-height: 24px; | |||
padding: 5px 9px; | |||
} | |||
.sv_skill_scaling__stat-icon { | |||
width: 13px; | |||
height: 13px; | |||
} | |||
.sv_skill_scaling__stat-value { | |||
font-size: 14px; | |||
} | |||
.sv_skill_scaling__stat-pill.is-inactive::before { | |||
font-size: 14px; | |||
} | |||
.sv_skill_scaling__stats-grid { | |||
row-gap: 8px; | |||
column-gap: 10px; | |||
} | |||
.sv_skill_scaling__core-grid { | |||
grid-template-columns: repeat(3, minmax(0, 1fr)); | |||
} | |||
font-size:10px; | /* Fallback if meta row renders global .sv-pill */ | ||
.sv-skill-card .sv-skill-meta .sv-pill, | |||
.sv-gi-card .sv-skill-meta .sv-pill { | |||
min-height: 24px; | |||
gap: 5px; | |||
font-size: 10px; | |||
line-height: 1.05; | |||
letter-spacing: 0; | |||
} | |||
} | } | ||
@media (max-width:360px){ | @media (max-width:360px) { | ||
.sv-gi-card .sv-disclose, | |||
.sv-skill-card .sv-disclose { | |||
flex: 1 1 100%; | |||
max-width: 100%; | |||
} | |||
/* Ultra-tight: preserve side-by-side cluster without overflow */ | |||
.sv_skill_scaling__primary-value { | |||
font-size: 36px; | |||
letter-spacing: -0.50px; | |||
} | |||
.sv_skill_scaling__body { | |||
column-gap: 10px; | |||
} | |||
.sv_skill_scaling__stat-pill { | |||
width: 92px; | |||
min-height: 22px; | |||
padding: 4px 8px; | |||
} | |||
.sv_skill_scaling__stat-value { | |||
font-size: 13px; | |||
} | |||
.sv_skill_scaling__stat-pill.is-inactive::before { | |||
font-size: 13px; | |||
} | |||
.sv_skill_scaling__core-grid { | |||
grid-template-columns: repeat(2, minmax(0, 1fr)); | |||
} | |||
} | } | ||
Revision as of 19:14, 5 March 2026
/* Module:GameInfo/styles.css */
/* GameInfo Box v1 — TemplateStyles-safe (no CSS vars / no var()) */
/* Phase 4.1 — Unified + Reusable (Layout restored, scoped) */
/* NOTE (ownership)
--------------------------------------------------------------------------
Common.css owns shared components and tokens:
- slider anatomy
- tabs
- tips / discloses / popups
This file owns GameInfo-family presentation only:
- card shell
- section layout
- skill-specific display blocks
Transitional fallbacks remain in place so Common.css can take over as
Lua / JS progressively emit more neutral attributes and hooks.
*/
/* ==========================================================================
1) BASE CARD + SAFETY
========================================================================== */
.sv-gi-card,
.sv-skill-card {
max-width: 600px;
margin: 18px auto;
border-radius: 22px;
border: 1px solid rgba(75,99,136,0.55);
background-color: #0f172a;
background-image: radial-gradient(900px 360px at 40% -10%, rgba(106,166,255,0.18), rgba(0,0,0,0) 60%), linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), linear-gradient(180deg, #0f172a, #0b1324);
box-shadow: 0 16px 38px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
overflow: visible;
color: rgba(245,249,255,0.94);
font-size: 15px;
line-height: 1.35;
}
/* Fixed top / bottom content zones */
.sv-gi-top,
.sv-skill-top {
padding: 14px 18px 4px;
}
.sv-gi-bottom,
.sv-skill-bottom {
padding: 10px 18px 12px;
}
/* Predictable sizing inside the card */
.sv-gi-card,
.sv-gi-card *,
.sv-skill-card,
.sv-skill-card * {
box-sizing: border-box;
}
/* Inline error shell */
.sv-gi-error {
max-width: 600px;
margin: 18px auto;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(75,99,136,0.55);
background: #1f2937;
color: rgba(245,249,255,0.92);
}
/* Hide source popup payload nodes even if sitewide .sv-hidden is unavailable */
.sv-gi-card .sv-hidden,
.sv-skill-card .sv-hidden {
display: none;
}
/* Remove default browser marker from summary elements */
.sv-gi-card summary,
.sv-skill-card summary {
list-style: none;
}
/* ==========================================================================
2) ICONS, IMAGES, AND FALLBACK BADGES
========================================================================== */
.sv-skill-icon,
.sv-meta-icon,
.sv-ref-ico {
font-size: 0;
line-height: 0;
}
.sv-skill-icon a,
.sv-meta-icon a,
.sv-ref-ico a {
text-decoration: none;
}
/* Fallback “?” badge sizing inside icon boxes */
.sv-skill-icon .sv-miss {
width: 22px;
height: 22px;
font-size: 13px;
line-height: 1;
}
.sv-meta-icon .sv-miss,
.sv-ref-ico .sv-miss {
width: 18px;
height: 18px;
font-size: 12px;
line-height: 1;
}
/* Image enhancement; global .sv-img still owns rounding behavior */
.sv-gi-card .sv-img img,
.sv-skill-card .sv-img img {
box-shadow: 0 10px 18px rgba(0,0,0,0.30);
}
/* ==========================================================================
3) SKILL HEADER
========================================================================== */
.sv-skill-head {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 2px 0 10px;
}
.sv-skill-icon {
flex: 0 0 auto;
width: 64px;
height: 64px;
border-radius: 16px;
border: 1px solid rgba(75,99,136,0.55);
background: #1f2937;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.sv-skill-headtext {
min-width: 0;
flex: 0 1 auto;
}
.sv-skill-title-row {
display: flex;
align-items: center;
gap: 10px;
}
.sv-skill-title {
min-width: 0;
word-wrap: break-word;
font-weight: 900;
font-size: 22px;
line-height: 1.10;
letter-spacing: 0.2px;
color: rgba(245,249,255,0.98);
}
.sv-skill-desc {
margin-top: 6px;
word-wrap: break-word;
font-size: 14px;
line-height: 1.35;
color: rgba(215,226,244,0.92);
}
/* ==========================================================================
4) META ROW
========================================================================== */
.sv-skill-meta {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
margin: 8px 0 10px;
}
/* Meta row fallback if global .sv-pill is used */
.sv-skill-card .sv-skill-meta .sv-pill,
.sv-gi-card .sv-skill-meta .sv-pill {
width: 100%;
min-height: 34px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
text-align: center;
border-radius: 999px;
border: 1px solid rgba(59,75,99,0.85);
background: #273449;
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
font-weight: 900;
font-size: 12px;
line-height: 1.02;
letter-spacing: 0.08px;
text-transform: none;
color: rgba(245,249,255,0.96);
}
/* Preferred meta-card rendering */
.sv-gi-card .sv-meta-card,
.sv-skill-card .sv-meta-card {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 34px;
padding: 0;
border-radius: 999px;
border: 1px solid rgba(59,75,99,0.85);
background: #273449;
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.sv-gi-card .sv-meta-card:hover,
.sv-skill-card .sv-meta-card:hover {
background: #2e3f59;
}
.sv-gi-card .sv-meta-icon,
.sv-skill-card .sv-meta-icon {
flex: 0 0 auto;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 999px;
border: 1px solid rgba(75,99,136,0.55);
background: #0f172a;
}
.sv-gi-card .sv-meta-textwrap,
.sv-skill-card .sv-meta-textwrap {
min-width: 0;
flex: 0 1 auto;
}
.sv-gi-card .sv-meta-text,
.sv-skill-card .sv-meta-text {
min-width: 0;
word-wrap: break-word;
text-align: center;
font-weight: 900;
font-size: 12px;
line-height: 1.02;
letter-spacing: 0.08px;
color: rgba(245,249,255,0.96);
}
.sv-gi-card .sv-meta-lines span,
.sv-skill-card .sv-meta-lines span {
display: block;
}
/* Visible text should appear static; interaction is handled by the pill overlay */
.sv-gi-card .sv-meta-text .sv-def,
.sv-skill-card .sv-meta-text .sv-def {
cursor: default;
}
.sv-gi-card .sv-meta-text .sv-def-text,
.sv-skill-card .sv-meta-text .sv-def-text {
color: inherit;
border-bottom: none;
}
/* Secondary line styling */
.sv-gi-card .sv-meta-text .sv-meta-lines span + span,
.sv-skill-card .sv-meta-text .sv-meta-lines span + span {
margin-top: 1px;
opacity: 0.90;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.12px;
}
/* Full-pill Definitions interaction overlay */
.sv-gi-card .sv-meta-hit,
.sv-skill-card .sv-meta-hit {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 5;
opacity: 0;
}
.sv-gi-card .sv-meta-hit .sv-def,
.sv-skill-card .sv-meta-hit .sv-def {
display: block;
width: 100%;
height: 100%;
}
/* ==========================================================================
5) REQUIREMENTS / USERS ROW
Layout only; disclose component styling lives in Common.css
========================================================================== */
.sv-gi-card .sv-reqrow,
.sv-skill-card .sv-reqrow {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin: 6px 0 10px;
}
.sv-gi-card .sv-disclose,
.sv-skill-card .sv-disclose {
flex: 0 1 190px;
max-width: 205px;
}
/* Transitional compact pill styling until all disclose buttons emit
the compact modifier class from Lua */
.sv-gi-card .sv-reqrow .sv-disclose-btn,
.sv-skill-card .sv-reqrow .sv-disclose-btn {
min-height: 36px;
padding: 0 12px;
border-radius: 999px;
}
/* ==========================================================================
6) LEVEL SELECTOR WRAPPER
Slider anatomy is owned by Common.css
========================================================================== */
.sv-skill-level {
margin: 8px 0 10px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 8px;
border-radius: 16px;
border: 1px solid rgba(59,75,99,0.85);
background: #1f2937;
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
/* Skills default to hiding tick labels because the end-value replaces them */
.sv-skill-level:not([data-sv-level-hide-ticks="0"]) .sv-level-ticklabels {
display: none;
}
/* Transitional helper label:
- if Lua provides data-sv-helper-text, Common.css can own the copy
- otherwise, keep the legacy fallback helper text here
*/
.sv-gi-card .sv-level-label:not([data-sv-helper-text]),
.sv-skill-card .sv-level-label:not([data-sv-helper-text]) {
position: static;
top: auto;
right: auto;
bottom: auto;
left: auto;
transform: none;
display: inline-block;
margin: 0;
padding: 0;
font-size: 0;
line-height: 0;
}
.sv-gi-card .sv-level-label:not([data-sv-helper-text])::after,
.sv-skill-card .sv-level-label:not([data-sv-helper-text])::after {
content: "Slide to set level";
display: inline-block;
font-weight: 900;
font-size: 13px;
line-height: 1.25;
letter-spacing: 0.15px;
color: rgba(245,249,255,0.94);
}
/* ==========================================================================
7) SCHEMA 2 SKILL SCALING DASHBOARD
Layout goal:
- Outer scaling card is one cohesive surface.
- Row 1 is a 2-column layout:
col 1: LEFT CLUSTER (damage + 2×3 attribute chips) as ONE UNIT
col 2: RIGHT SIDE (reserved / future block; later core can move here)
- Row 2: Core pills span full width (for now).
NOTE (structure):
- This expects the DOM to provide a wrapper that groups damage+stats:
.sv_skill_scaling__cluster
and (optionally) a right-side placeholder:
.sv_skill_scaling__side
========================================================================== */
.sv_skill_scaling {
margin: 8px 0 10px;
padding: 10px 12px 12px;
border-radius: 18px;
border: 1px solid rgba(59,75,99,0.85);
background: #1f2937;
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
/* Absorb the level selector visually into the scaling card */
.sv_skill_scaling .sv-skill-level,
.sv_skill_scaling__level {
margin: 0 0 10px;
padding: 0 0 10px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
border-bottom: 1px solid rgba(59,75,99,0.72);
}
/* Row 1: [cluster][side] | Row 2: core spans both */
.sv_skill_scaling__body {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 16px;
row-gap: 12px;
align-items: center;
}
/* Cluster = ONE UNIT containing primary + stats */
.sv_skill_scaling__cluster {
grid-column: 1;
grid-row: 1;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 14px;
min-width: 0;
}
/* Right-side reserved area (optional, may be empty for now) */
.sv_skill_scaling__side {
grid-column: 2;
grid-row: 1;
min-width: 0;
}
/* Core spans full width below (current placement) */
.sv_skill_scaling__column--core {
grid-column: 1 / -1;
grid-row: 2;
padding: 0;
}
/* Section wrappers are intentionally visual no-ops */
.sv_skill_scaling__column {
min-width: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
background-image: none;
box-shadow: none;
}
/* Primary output (Damage Mod) */
.sv_skill_scaling__column--primary {
min-height: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-align: left;
}
/* Damage typography */
.sv_skill_scaling__primary-value {
word-wrap: break-word;
font-weight: 900;
font-size: 58px;
line-height: 0.90;
letter-spacing: -0.85px;
color: rgba(245,249,255,0.99);
}
.sv_skill_scaling__primary-label {
margin-top: 6px;
font-weight: 900;
font-size: 12px;
line-height: 1.05;
letter-spacing: 0.22px;
text-transform: uppercase;
color: rgba(182,198,224,0.96);
}
/* --------------------------------------------------------------------------
7A) ATTRIBUTE CHIPS (2 columns x 3 rows)
-------------------------------------------------------------------------- */
.sv_skill_scaling__stats-grid {
display: grid;
/* Compact grid; does NOT stretch */
grid-template-columns: repeat(2, max-content);
justify-content: start;
justify-items: start;
row-gap: 8px;
column-gap: 12px;
/* Hard ordering */
grid-template-areas:
"str agi"
"vit int"
"dex luk";
}
.sv_skill_scaling__stat-pill--str {
grid-area: str;
}
.sv_skill_scaling__stat-pill--vit {
grid-area: vit;
}
.sv_skill_scaling__stat-pill--dex {
grid-area: dex;
}
.sv_skill_scaling__stat-pill--agi {
grid-area: agi;
}
.sv_skill_scaling__stat-pill--int {
grid-area: int;
}
.sv_skill_scaling__stat-pill--luk {
grid-area: luk;
}
/* Shared pill shell (core uses this; stat chips override size below) */
.sv_skill_scaling__pill {
position: relative;
min-width: 0;
border-radius: 14px;
border: 1px solid rgba(59,75,99,0.92);
background: #1a2434;
background-image: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
/* Stat chips: compact “micro pills” */
.sv_skill_scaling__stat-pill {
border-radius: 999px;
width: 96px; /* prevents stretched bars */
min-height: 24px;
padding: 4px 10px;
display: flex;
align-items: center;
justify-content: center;
text-align: left;
white-space: nowrap;
}
/* Flatten inner structure into one row */
.sv_skill_scaling__stat-main {
width: auto;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
}
.sv_skill_scaling__stat-visual {
min-width: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8px;
}
/* No stat label in chip mode */
.sv_skill_scaling__stat-label {
display: none;
}
/* Icon sizing */
.sv_skill_scaling__stat-icon {
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
line-height: 0;
}
.sv_skill_scaling__stat-icon a {
text-decoration: none;
}
.sv_skill_scaling__stat-icon .sv-img img {
width: 14px;
height: 14px;
box-shadow: none;
}
.sv_skill_scaling__stat-icon .sv-miss {
width: 12px;
height: 12px;
font-size: 9px;
line-height: 1;
}
/* Value sizing */
.sv_skill_scaling__stat-value {
font-weight: 900;
font-size: 15px;
line-height: 1;
letter-spacing: -0.12px;
color: rgba(245,249,255,0.98);
}
/* Full-pill Definitions interaction overlay (active pills) */
.sv_skill_scaling__stat-hit {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 5;
opacity: 0;
}
.sv_skill_scaling__stat-hit .sv-def {
display: block;
width: 100%;
height: 100%;
}
/* Inactive chips: dash only */
.sv_skill_scaling__stat-pill.is-inactive {
border-color: rgba(59,75,99,0.72);
background: #182130;
background-image: none;
box-shadow: none;
}
.sv_skill_scaling__stat-pill.is-inactive .sv_skill_scaling__stat-icon,
.sv_skill_scaling__stat-pill.is-inactive .sv_skill_scaling__stat-value {
display: none;
}
.sv_skill_scaling__stat-pill.is-inactive::before {
content: "—";
font-weight: 900;
font-size: 15px;
line-height: 1;
color: rgba(140,156,184,0.78);
}
/* Active baseline */
.sv_skill_scaling__stat-pill.is-active {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(255,255,255,0.01);
}
/* Per-stat color treatments */
.sv_skill_scaling__stat-pill--str.is-active {
border-color: rgba(145,63,82,0.96);
background: #32131d;
background-image: linear-gradient(180deg, rgba(190,88,113,0.16), rgba(0,0,0,0.00));
}
.sv_skill_scaling__stat-pill--str.is-active .sv_skill_scaling__stat-value {
color: #ffdce5;
}
.sv_skill_scaling__stat-pill--vit.is-active {
border-color: rgba(158,112,22,0.96);
background: #352609;
background-image: linear-gradient(180deg, rgba(210,144,18,0.15), rgba(0,0,0,0.00));
}
.sv_skill_scaling__stat-pill--vit.is-active .sv_skill_scaling__stat-value {
color: #ffefc9;
}
.sv_skill_scaling__stat-pill--dex.is-active {
border-color: rgba(118,146,24,0.96);
background: #243208;
background-image: linear-gradient(180deg, rgba(159,194,27,0.16), rgba(0,0,0,0.00));
}
.sv_skill_scaling__stat-pill--dex.is-active .sv_skill_scaling__stat-value {
color: #edf8cc;
}
.sv_skill_scaling__stat-pill--agi.is-active {
border-color: rgba(125,62,152,0.96);
background: #2b1438;
background-image: linear-gradient(180deg, rgba(165,82,198,0.17), rgba(0,0,0,0.00));
}
.sv_skill_scaling__stat-pill--agi.is-active .sv_skill_scaling__stat-value {
color: #f0dcff;
}
.sv_skill_scaling__stat-pill--int.is-active {
border-color: rgba(45,118,191,0.96);
background: #11263d;
background-image: linear-gradient(180deg, rgba(35,140,230,0.18), rgba(0,0,0,0.00));
}
.sv_skill_scaling__stat-pill--int.is-active .sv_skill_scaling__stat-value {
color: #d8eeff;
}
.sv_skill_scaling__stat-pill--luk.is-active {
border-color: rgba(183,150,22,0.96);
background: #3a2f07;
background-image: linear-gradient(180deg, rgba(234,194,9,0.16), rgba(0,0,0,0.00));
}
.sv_skill_scaling__stat-pill--luk.is-active .sv_skill_scaling__stat-value {
color: #fff2ba;
}
/* --------------------------------------------------------------------------
7B) CORE PILLS (current placement: row 2)
-------------------------------------------------------------------------- */
.sv_skill_scaling__core-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 8px;
}
.sv_skill_scaling__core-pill {
min-height: 88px;
padding: 10px 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.sv_skill_scaling__core-main {
min-width: 0;
display: flex;
align-items: baseline;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
}
.sv_skill_scaling__core-value {
min-width: 0;
word-wrap: break-word;
font-weight: 900;
font-size: 17px;
line-height: 1.02;
color: rgba(245,249,255,0.98);
}
.sv_skill_scaling__core-unit {
font-weight: 900;
font-size: 11px;
line-height: 1.05;
color: rgba(182,198,224,0.95);
}
.sv_skill_scaling__core-label {
margin-top: 6px;
font-weight: 900;
font-size: 11px;
line-height: 1.12;
letter-spacing: 0.16px;
text-transform: uppercase;
color: rgba(182,198,224,0.95);
}
.sv_skill_scaling__core-pill.is-inactive {
border-color: rgba(59,75,99,0.72);
background: #182130;
}
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-value,
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-unit,
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-label {
color: rgba(140,156,184,0.78);
}
/* --------------------------------------------------------------------------
7B) CORE PILLS (current placement: row 2)
-------------------------------------------------------------------------- */
.sv_skill_scaling__core-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 8px;
}
.sv_skill_scaling__core-pill {
min-height: 88px;
padding: 10px 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.sv_skill_scaling__core-main {
min-width: 0;
display: flex;
align-items: baseline;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
}
.sv_skill_scaling__core-value {
min-width: 0;
word-wrap: break-word;
font-weight: 900;
font-size: 17px;
line-height: 1.02;
color: rgba(245,249,255,0.98);
}
.sv_skill_scaling__core-unit {
font-weight: 900;
font-size: 11px;
line-height: 1.05;
color: rgba(182,198,224,0.95);
}
.sv_skill_scaling__core-label {
margin-top: 6px;
font-weight: 900;
font-size: 11px;
line-height: 1.12;
letter-spacing: 0.16px;
text-transform: uppercase;
color: rgba(182,198,224,0.95);
}
.sv_skill_scaling__core-pill.is-inactive {
border-color: rgba(59,75,99,0.72);
background: #182130;
}
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-value,
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-unit,
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-label {
color: rgba(140,156,184,0.78);
}
/* ==========================================================================
8) LEGACY SCHEMA 1: SCALING TOP
========================================================================== */
.sv-skill-scaling {
margin: 10px 0;
}
.sv-gi-card .sv-scaling-row,
.sv-skill-card .sv-scaling-row {
padding: 10px 12px;
border-radius: 16px;
border: 1px solid rgba(59,75,99,0.85);
background: #1f2937;
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.sv-gi-card .sv-scaling-grid,
.sv-skill-card .sv-scaling-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
align-items: start;
}
.sv-gi-card .sv-scaling-col--scaling,
.sv-skill-card .sv-scaling-col--scaling {
grid-column: 1 / -1;
}
.sv-gi-card .sv-scaling-value,
.sv-skill-card .sv-scaling-value {
word-wrap: break-word;
font-weight: 900;
font-size: 18px;
line-height: 1.10;
color: rgba(245,249,255,0.98);
}
.sv-gi-card .sv-scaling-label,
.sv-skill-card .sv-scaling-label {
margin-top: 3px;
font-weight: 900;
font-size: 12px;
letter-spacing: 0.25px;
text-transform: uppercase;
color: rgba(182,198,224,0.95);
}
.sv-gi-card .sv-scaling-list,
.sv-skill-card .sv-scaling-list {
display: grid;
gap: 6px;
margin-top: 2px;
}
.sv-gi-card .sv-scaling-item,
.sv-skill-card .sv-scaling-item {
padding: 8px 10px;
border-radius: 14px;
border: 1px solid rgba(59,75,99,0.85);
background: #273449;
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
font-weight: 800;
font-size: 13px;
color: rgba(215,226,244,0.92);
}
/* ==========================================================================
9) LEGACY SCHEMA 1: CORE GRID
========================================================================== */
.sv-skill-core {
margin: 10px 0;
}
.sv-gi-card .sv-core-row,
.sv-skill-card .sv-core-row {
padding: 10px 12px;
border-radius: 16px;
border: 1px solid rgba(59,75,99,0.85);
background: #1f2937;
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.sv-gi-card .sv-core-grid,
.sv-skill-card .sv-core-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.sv-gi-card .sv-core-cell,
.sv-skill-card .sv-core-cell {
min-width: 0;
padding: 10px 10px 9px;
border-radius: 14px;
border: 1px solid rgba(59,75,99,0.85);
background: #273449;
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.sv-gi-card .sv-core-top,
.sv-skill-card .sv-core-top {
min-width: 0;
display: flex;
align-items: baseline;
gap: 6px;
}
.sv-gi-card .sv-core-num,
.sv-skill-card .sv-core-num {
min-width: 0;
word-wrap: break-word;
font-weight: 900;
font-size: 17px;
line-height: 1.10;
color: rgba(245,249,255,0.98);
}
.sv-gi-card .sv-core-unit,
.sv-skill-card .sv-core-unit {
font-weight: 900;
font-size: 12px;
color: rgba(182,198,224,0.95);
}
.sv-gi-card .sv-core-label,
.sv-skill-card .sv-core-label {
margin-top: 6px;
font-weight: 900;
font-size: 12px;
letter-spacing: 0.25px;
text-transform: uppercase;
color: rgba(182,198,224,0.95);
}
.sv-gi-card .sv-core-label--tight,
.sv-skill-card .sv-core-label--tight {
letter-spacing: 0.12px;
}
/* ==========================================================================
10) TAB PANELS AND CONTENT BLOCKS
Tabs themselves are global; these are module-owned content layouts
========================================================================== */
.sv-skill-tabs {
margin: 10px 0 0;
}
/* Mechanics grid */
.sv-gi-card .sv-kw-grid,
.sv-skill-card .sv-kw-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.sv-gi-card .sv-kw-cell,
.sv-skill-card .sv-kw-cell {
padding: 10px 10px 9px;
border-radius: 14px;
border: 1px solid rgba(59,75,99,0.85);
background: #273449;
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.sv-gi-card .sv-kw-label,
.sv-skill-card .sv-kw-label {
font-weight: 900;
font-size: 12px;
letter-spacing: 0.25px;
text-transform: uppercase;
color: rgba(182,198,224,0.95);
}
.sv-gi-card .sv-kw-value,
.sv-skill-card .sv-kw-value {
margin-top: 6px;
word-wrap: break-word;
font-weight: 900;
font-size: 15px;
color: rgba(245,249,255,0.96);
}
/* Keyword pills panel */
.sv-gi-card .sv-tab-pills,
.sv-skill-card .sv-tab-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* ==========================================================================
11) EFFECT / EVENT CARDS
========================================================================== */
.sv-gi-card .sv-ref-grid,
.sv-skill-card .sv-ref-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.sv-gi-card .sv-ref-card,
.sv-skill-card .sv-ref-card {
min-width: 0;
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 10px;
border-radius: 16px;
border: 1px solid rgba(59,75,99,0.85);
background: #1f2937;
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
color: rgba(245,249,255,0.94);
}
.sv-gi-card .sv-ref-ico,
.sv-skill-card .sv-ref-ico {
flex: 0 0 auto;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 16px;
border: 1px solid rgba(75,99,136,0.55);
background: #273449;
}
.sv-gi-card .sv-ref-text,
.sv-skill-card .sv-ref-text {
min-width: 0;
flex: 1 1 auto;
}
.sv-gi-card .sv-ref-title,
.sv-skill-card .sv-ref-title {
word-wrap: break-word;
font-weight: 900;
font-size: 15px;
line-height: 1.15;
color: rgba(245,249,255,0.98);
}
.sv-gi-card .sv-ref-stats,
.sv-skill-card .sv-ref-stats {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.sv-gi-card .sv-ref-stat,
.sv-skill-card .sv-ref-stat {
display: inline-flex;
align-items: center;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid rgba(59,75,99,0.85);
background: #273449;
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
font-weight: 900;
font-size: 12px;
color: rgba(215,226,244,0.92);
}
.sv-gi-card .sv-ref-sub,
.sv-skill-card .sv-ref-sub {
margin-top: 6px;
font-weight: 900;
font-size: 13px;
color: rgba(182,198,224,0.95);
}
/* ==========================================================================
12) RESPONSIVE
Breakpoints:
- 850px: tablet / compact desktop transition
- 500px: mobile
- 360px: very narrow screens
========================================================================== */
@media (max-width:850px) {
.sv-gi-card,
.sv-skill-card {
margin: 14px 10px;
border-radius: 20px;
}
.sv-gi-top,
.sv-skill-top {
padding: 12px 16px 4px;
}
.sv-gi-bottom,
.sv-skill-bottom {
padding: 10px 16px 12px;
}
.sv-skill-title {
font-size: 20px;
}
.sv-skill-meta {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sv-gi-card .sv-core-grid,
.sv-skill-card .sv-core-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sv-gi-card .sv-ref-grid,
.sv-skill-card .sv-ref-grid {
grid-template-columns: 1fr;
}
/* Keep the damage+chips cluster intact; tighten sizes */
.sv_skill_scaling__primary-value {
font-size: 48px;
letter-spacing: -0.70px;
}
.sv_skill_scaling__stat-pill {
width: 118px;
min-height: 26px;
padding: 6px 10px;
}
.sv_skill_scaling__stats-grid {
row-gap: 9px;
column-gap: 10px;
}
.sv_skill_scaling__core-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width:500px) {
.sv-skill-head {
gap: 10px;
}
.sv-skill-icon {
width: 56px;
height: 56px;
border-radius: 14px;
}
.sv-skill-title {
font-size: 18px;
}
.sv-skill-desc {
font-size: 13px;
}
.sv-gi-card .sv-scaling-grid,
.sv-skill-card .sv-scaling-grid {
grid-template-columns: 1fr;
}
.sv-gi-card .sv-kw-grid,
.sv-skill-card .sv-kw-grid {
grid-template-columns: 1fr;
}
/* Requirements / Users edge padding */
.sv-gi-card .sv-reqrow,
.sv-skill-card .sv-reqrow {
padding-left: 16px;
padding-right: 16px;
}
.sv-gi-card .sv-disclose,
.sv-skill-card .sv-disclose {
flex: 1 1 170px;
max-width: 190px;
}
/* Tight mobile meta row */
.sv-skill-card .sv-skill-meta,
.sv-gi-card .sv-skill-meta {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
max-width: 200px;
margin-left: auto;
margin-right: auto;
justify-content: center;
}
.sv-skill-card .sv-meta-card,
.sv-gi-card .sv-meta-card {
min-height: 32px;
gap: 7px;
}
.sv-skill-card .sv-meta-icon,
.sv-gi-card .sv-meta-icon {
width: 16px;
height: 16px;
}
.sv-skill-card .sv-meta-text,
.sv-gi-card .sv-meta-text {
font-size: 10px;
line-height: 1.05;
letter-spacing: 0;
}
.sv-skill-card .sv-meta-text .sv-meta-lines span + span,
.sv-gi-card .sv-meta-text .sv-meta-lines span + span {
margin-top: 1px;
font-size: 9px;
}
.sv-skill-level {
padding: 9px 10px;
}
.sv-gi-card .sv-level-label:not([data-sv-helper-text])::after,
.sv-skill-card .sv-level-label:not([data-sv-helper-text])::after {
font-size: 12px;
}
.sv_skill_scaling {
padding: 9px 10px 10px;
}
.sv_skill_scaling .sv-skill-level,
.sv_skill_scaling__level {
padding: 0 0 9px;
}
/* Keep the cluster intact; scale down */
.sv_skill_scaling__primary-value {
font-size: 42px;
letter-spacing: -0.60px;
}
.sv_skill_scaling__primary-label {
font-size: 11px;
}
.sv_skill_scaling__stat-pill {
width: 104px;
min-height: 24px;
padding: 5px 9px;
}
.sv_skill_scaling__stat-icon {
width: 13px;
height: 13px;
}
.sv_skill_scaling__stat-value {
font-size: 14px;
}
.sv_skill_scaling__stat-pill.is-inactive::before {
font-size: 14px;
}
.sv_skill_scaling__stats-grid {
row-gap: 8px;
column-gap: 10px;
}
.sv_skill_scaling__core-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Fallback if meta row renders global .sv-pill */
.sv-skill-card .sv-skill-meta .sv-pill,
.sv-gi-card .sv-skill-meta .sv-pill {
min-height: 24px;
gap: 5px;
font-size: 10px;
line-height: 1.05;
letter-spacing: 0;
}
}
@media (max-width:360px) {
.sv-gi-card .sv-disclose,
.sv-skill-card .sv-disclose {
flex: 1 1 100%;
max-width: 100%;
}
/* Ultra-tight: preserve side-by-side cluster without overflow */
.sv_skill_scaling__primary-value {
font-size: 36px;
letter-spacing: -0.50px;
}
.sv_skill_scaling__body {
column-gap: 10px;
}
.sv_skill_scaling__stat-pill {
width: 92px;
min-height: 22px;
padding: 4px 8px;
}
.sv_skill_scaling__stat-value {
font-size: 13px;
}
.sv_skill_scaling__stat-pill.is-inactive::before {
font-size: 13px;
}
.sv_skill_scaling__core-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}