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)); | |||
} | |||
} | } | ||