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 |
||
| (42 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* Module:GameInfo/styles.css */ | /* SpiritVale Wiki — Module:GameInfo/styles.css */ | ||
/* GameInfo | /* GameInfo-family layout and skill-specific presentation. | ||
/* | Surface hierarchy: | ||
- bg1 = outer card / inactive neutral base | |||
- bg2 = grouped section surface | |||
- bg3 = inner framed block / pill surface | |||
*/ | |||
/* -------------------------------------------------------------------------- */ | |||
/* Canonical ownership map */ | |||
/* -------------------------------------------------------------------------- */ | |||
/* This sheet owns GameInfo-family presentation only. That includes: */ | |||
/* - GameInfo card shells and internal layout */ | |||
/* - skill card presentation and module-local responsive changes */ | |||
/* - module-local pills, panels, tabs, metadata blocks, and reference blocks */ | |||
/* */ | |||
/* It does NOT own: */ | |||
/* - shared site tokens / utilities / slider anatomy (Common.css) */ | |||
/* - skin and chrome theme logic (Citizen.css) */ | |||
/* - definitions-only token styling (Definitions stylesheet) */ | |||
/* */ | |||
/* Responsive cleanup note: GameInfo now maps its legacy mobile cutoffs into */ | |||
/* the canonical six-viewpoint ladder. The module still uses descending range */ | |||
/* queries for parity, but the breakpoints themselves are now canonical. */ | |||
/* -------------------------------------------------------------------------- */ | |||
/* Canonical ladder */ | |||
/* -------------------------------------------------------------------------- */ | |||
/* - default: <640px */ | |||
/* - sm: >=640px */ | |||
/* - md: >=768px */ | |||
/* - lg: >=1024px */ | |||
/* - xl: >=1280px */ | |||
/* - 2xl: >=1536px */ | |||
/* -------------------------------------------------------------------------- */ | |||
/* -------------------------------------------------------------------------- */ | |||
/* 1) Base card and safety */ | |||
/* -------------------------------------------------------------------------- */ | |||
.sv-gi-card, | |||
.sv-skill-card{ | |||
max-width:600px; | |||
margin:18px auto; | |||
border-radius:22px; | |||
overflow:visible; | |||
background:var(--sv-ui-bg1); | |||
background-image:none; | |||
color:var(--sv-ui-text2); | |||
font-size:15px; | |||
line-height:1.35; | |||
} | } | ||
.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; } | ||
} | |||
.sv-gi-card, | .sv-gi-card, | ||
.sv-gi-card *, | .sv-gi-card *, | ||
.sv-skill-card, | .sv-skill-card, | ||
.sv-skill-card * { | .sv-skill-card *{ box-sizing:border-box; } | ||
} | |||
.sv-gi-error{ | |||
.sv-gi-error { | max-width:600px; | ||
margin:18px auto; | |||
padding:10px 12px; | |||
overflow-wrap:anywhere; | |||
word-break:break-word; | |||
} | } | ||
.sv-gi-card summary, | .sv-gi-card summary, | ||
.sv-skill-card summary { | .sv-skill-card summary{ list-style:none; } | ||
} | |||
/* | /* -------------------------------------------------------------------------- */ | ||
/* 2) Icons and fallback badges */ | |||
/* -------------------------------------------------------------------------- */ | |||
.sv-skill-icon, | .sv-skill-icon, | ||
.sv-meta-icon, | .sv-meta-icon, | ||
.sv-ref-ico { | .sv-ref-ico, | ||
.sv_skill_scaling__stat-icon{ | |||
font-size:0; | |||
line-height:0; | |||
} | |||
.sv-skill-icon a, | |||
.sv-meta-icon a, | |||
.sv-ref-ico a, | |||
.sv_skill_scaling__stat-icon a{ text-decoration:none; } | |||
.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; | |||
} | } | ||
/* -------------------------------------------------------------------------- */ | |||
/* 2b) Interactive link treatment */ | |||
/* -------------------------------------------------------------------------- */ | |||
.sv-disclose-pop a, | |||
.sv-disclose-pop-title a, | |||
.sv-tip-pop a, | |||
.sv-tip-pop-title a, | |||
.sv-def-pop a, | |||
.sv-def-pop-title a, | |||
.sv-pop a, | |||
.sv-pop-title a, | |||
.sv-gi-card .sv-ref-title a, | |||
.sv-skill-card .sv-ref-title a{ | |||
color:var(--sv-ui-link, #8fc7ff); | |||
text-decoration-line:underline; | |||
text-decoration-color:currentColor; | |||
} | |||
.sv-disclose-pop a:hover, | |||
.sv-disclose-pop-title a:hover, | |||
.sv-tip-pop a:hover, | |||
.sv-tip-pop-title a:hover, | |||
.sv-def-pop a:hover, | |||
.sv-def-pop-title a:hover, | |||
.sv-pop a:hover, | |||
.sv-pop-title a:hover, | |||
.sv-gi-card .sv-ref-title a:hover, | |||
.sv-skill-card .sv-ref-title a:hover, | |||
.sv-disclose-pop a:focus, | |||
.sv-disclose-pop-title a:focus, | |||
.sv-tip-pop a:focus, | |||
.sv-tip-pop-title a:focus, | |||
.sv-def-pop a:focus, | |||
.sv-def-pop-title a:focus, | |||
.sv-pop a:focus, | |||
.sv-pop-title a:focus, | |||
.sv-gi-card .sv-ref-title a:focus, | |||
.sv-skill-card .sv-ref-title a:focus{ | |||
color:var(--sv-ui-link-hover, #b8ddff); | |||
} | |||
.sv-disclose-pop-title a, | |||
.sv- | .sv-tip-pop-title a, | ||
.sv- | .sv-def-pop-title a, | ||
.sv-pop-title a{ | |||
font:inherit; | |||
} | } | ||
/* | /* -------------------------------------------------------------------------- */ | ||
/* 3) Skill header */ | |||
/* -------------------------------------------------------------------------- */ | |||
.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; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
overflow:hidden; | |||
border-radius:16px; | |||
} | } | ||
.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:var(--sv-ui-text1); | |||
} | } | ||
.sv-skill-desc { | .sv-skill-desc{ | ||
margin-top:6px; | |||
word-wrap:break-word; | |||
font-size:14px; | |||
line-height:1.35; | |||
color:var(--sv-ui-text2); | |||
} | } | ||
/* | /* -------------------------------------------------------------------------- */ | ||
/* 4) Meta and requirements block */ | |||
/* -------------------------------------------------------------------------- */ | |||
.sv-skill-meta { | .sv-skill-meta-block{ | ||
margin:8px 0 10px; | |||
display:grid; | |||
grid-template-columns:repeat(2, minmax(0, 1fr)); | |||
align-items:stretch; | |||
gap:10px; | |||
} | |||
.sv-skill-meta-block--single{ | |||
grid-template-columns:minmax(0, 1fr); | |||
} | } | ||
.sv-skill-meta-block__bubble{ | |||
min-width:0; | |||
min-height:108px; | |||
max-height:108px; | |||
padding:10px 12px; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
overflow:hidden; | |||
border-radius:16px; | |||
background:var(--sv-ui-bg2); | |||
background-image:none; | |||
box-shadow:none; | |||
} | |||
.sv-skill-meta-block__bubble--meta .sv-skill-meta, | |||
.sv-skill-meta-block__bubble--req .sv-reqrow{ | |||
width:100%; | |||
margin:0; | |||
} | |||
/* -------------------------------------------------------------------------- */ | |||
/* 5) Meta row */ | |||
/* -------------------------------------------------------------------------- */ | |||
.sv-skill-meta{ | |||
display:grid; | |||
grid-template-columns:repeat(2, minmax(0, 1fr)); | |||
justify-items:center; | |||
align-items:center; | |||
gap:8px; | |||
} | } | ||
.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; | |||
width:100%; | |||
min-height:36px; | |||
padding:0 8px; | |||
border-radius:14px; | |||
border:1px solid var(--sv-ui-line2); | |||
background:var(--sv-ui-bg3); | |||
background-image:none; | |||
color:var(--sv-ui-text1); | |||
} | } | ||
.sv-gi-card .sv-meta-card:hover, | |||
.sv-skill-card .sv-meta-card:hover{ background:var(--sv-ui-bg3); } | |||
.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:14px; | |||
background:var(--sv-ui-bg3); | |||
background-image:none; | |||
} | } | ||
.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:var(--sv-ui-text1); | |||
} | } | ||
.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; } | ||
} | |||
.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; | |||
} | } | ||
.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; | |||
font-size:10px; | |||
font-weight:800; | |||
letter-spacing:0.12px; | |||
color:var(--sv-ui-text3); | |||
} | } | ||
.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-skill-card .sv-meta-hit .sv-def{ | |||
display:block; | |||
width:100%; | |||
height:100%; | |||
} | |||
/* | /* -------------------------------------------------------------------------- */ | ||
/* 6) Requirements and users row */ | |||
/* -------------------------------------------------------------------------- */ | |||
.sv-gi-card .sv-reqrow, | .sv-gi-card .sv-reqrow, | ||
.sv-skill-card .sv-reqrow { | .sv-skill-card .sv-reqrow{ | ||
display:flex; | |||
flex-direction:column; | |||
justify-content:center; | |||
gap:8px; | |||
} | } | ||
.sv-gi-card .sv-disclose, | .sv-gi-card .sv-disclose, | ||
.sv-skill-card .sv-disclose { | .sv-skill-card .sv-disclose{ | ||
min-width:0; | |||
max-width:none; | |||
width:100%; | |||
} | } | ||
.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{ | ||
width:100%; | |||
min-height:36px; | |||
padding:0 12px; | |||
border-radius:14px; | |||
background:var(--sv-ui-bg3); | |||
background-image:none; | |||
box-shadow:none; | |||
} | } | ||
/* | /* -------------------------------------------------------------------------- */ | ||
/* 7) Level selector wrapper */ | |||
/* -------------------------------------------------------------------------- */ | |||
.sv-skill-level { | .sv-skill-level{ | ||
margin:8px 0 10px; | |||
padding:10px 12px; | |||
display:flex; | |||
flex-direction:column; | |||
gap:8px; | |||
border-radius:16px; | |||
background:var(--sv-ui-bg2); | |||
background-image:none; | |||
box-shadow:none; | |||
} | } | ||
.sv-skill-level:not([data-sv-level-hide-ticks="0"]) .sv-level-ticklabels{ display:none; } | |||
/* -------------------------------------------------------------------------- */ | |||
/* 8) Skill scaling */ | |||
/* -------------------------------------------------------------------------- */ | |||
.sv_skill_scaling{ | |||
margin:8px 0 10px; | |||
padding:10px 12px 12px; | |||
border-radius:18px; | |||
background:var(--sv-ui-bg2); | |||
background-image:none; | |||
box-shadow:none; | |||
} | } | ||
.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 var(--sv-ui-line1); | |||
} | } | ||
.sv_skill_scaling__body{ | |||
display:grid; | |||
grid-template-columns:minmax(0, 1fr) minmax(0, 252px); | |||
column-gap:16px; | |||
row-gap:12px; | |||
align-items:stretch; | |||
justify-items:stretch; | |||
} | } | ||
. | .sv_skill_scaling__group{ | ||
width:100%; | |||
min-width:0; | |||
min-height:116px; | |||
max-height:116px; | |||
padding:10px 12px; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
overflow:hidden; | |||
border-radius:16px; | |||
background:var(--sv-ui-bg3); | |||
background-image:none; | |||
box-shadow:none; | |||
} | } | ||
. | .sv_skill_scaling__group--primary-stats{ | ||
grid-column:1; | |||
grid-row:1; | |||
} | } | ||
.sv_skill_scaling__group--core{ | |||
. | grid-column:2; | ||
grid-row:1; | |||
} | } | ||
.sv_skill_scaling__cluster{ | |||
. | display:flex; | ||
align-items:center; | |||
justify-content:center; | |||
gap:14px; | |||
flex-wrap:wrap; | |||
width:100%; | |||
height:100%; | |||
max-width:100%; | |||
margin:0 auto; | |||
min-width:0; | |||
} | } | ||
. | .sv_skill_scaling__column{ | ||
min-width:0; | |||
padding:0; | |||
border:0; | |||
border-radius:0; | |||
background:transparent; | |||
background-image:none; | |||
box-shadow:none; | |||
} | } | ||
. | .sv_skill_scaling__column--stats, | ||
.sv_skill_scaling__column--core{ | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
} | } | ||
.sv_skill_scaling__column--core{ | |||
. | width:100%; | ||
min-width:0; | |||
min-height:100%; | |||
} | } | ||
. | .sv_skill_scaling__column--primary{ | ||
display:flex; | |||
flex-direction:column; | |||
justify-content:center; | |||
align-items:center; | |||
text-align:center; | |||
} | } | ||
. | .sv_skill_scaling__primary-value{ | ||
word-wrap:break-word; | |||
overflow-wrap:anywhere; | |||
font-weight:900; | |||
font-size:34px; | |||
line-height:0.95; | |||
letter-spacing:-0.50px; | |||
color:var(--sv-ui-text1); | |||
} | } | ||
. | .sv_skill_scaling__primary-label{ | ||
margin-top:6px; | |||
font-weight:900; | |||
font-size:10px; | |||
line-height:1.05; | |||
letter-spacing:0.22px; | |||
text-transform:uppercase; | |||
color:var(--sv-ui-text3); | |||
} | } | ||
. | .sv_skill_scaling__stats-grid{ | ||
display:grid; | |||
grid-template-columns:repeat(2, max-content); | |||
justify-content:center; | |||
justify-items:center; | |||
align-content:center; | |||
row-gap:8px; | |||
column-gap:10px; | |||
margin:0 auto; | |||
grid-template-areas: | |||
"str agi" | |||
"vit int" | |||
"dex luk"; | |||
} | } | ||
.sv_skill_scaling__stat-pill--int { | .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; } | |||
. | .sv_skill_scaling__pill{ | ||
position:relative; | |||
min-width:0; | |||
border-radius:14px; | |||
border:1px solid var(--sv-ui-line2); | |||
background:var(--sv-ui-bg3); | |||
background-image:none; | |||
box-shadow:none; | |||
} | } | ||
.sv_skill_scaling__stat-pill{ | |||
.sv_skill_scaling__stat-pill { | border-radius:999px; | ||
width:50px; | |||
min-width:50px; | |||
min-height:22px; | |||
padding:4px 6px; | |||
display:inline-flex; | |||
align-items:center; | |||
justify-content:center; | |||
white-space:nowrap; | |||
} | } | ||
.sv_skill_scaling__stat- | .sv_skill_scaling__stat-main{ | ||
min-width:0; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
} | } | ||
.sv_skill_scaling__stat- | .sv_skill_scaling__stat-visual{ | ||
min-width:0; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
gap:6px; | |||
} | } | ||
.sv_skill_scaling__stat- | .sv_skill_scaling__stat-label{ display:none; } | ||
} | |||
.sv_skill_scaling__stat-icon{ | |||
width:12px; | |||
height:12px; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
} | |||
.sv_skill_scaling__stat-icon .sv-img img{ | |||
width:12px; | |||
height:12px; | |||
box-shadow:none; | |||
} | |||
.sv_skill_scaling__stat- | .sv_skill_scaling__stat-icon .sv-miss{ | ||
width:12px; | |||
height:12px; | |||
font-size:9px; | |||
line-height:1; | |||
} | } | ||
.sv_skill_scaling__stat- | .sv_skill_scaling__stat-value{ | ||
font-weight:900; | |||
font-size:12px; | |||
line-height:1; | |||
letter-spacing:-0.10px; | |||
color:var(--sv-ui-text1); | |||
} | } | ||
.sv_skill_scaling__stat-hit, | |||
.sv_skill_scaling__core-hit{ | |||
position:absolute; | |||
top:0; | |||
right:0; | |||
bottom:0; | |||
left:0; | |||
z-index:5; | |||
opacity:0; | |||
} | |||
.sv_skill_scaling__stat- | .sv_skill_scaling__stat-hit .sv-def, | ||
.sv_skill_scaling__core-hit .sv-def{ | |||
display:block; | |||
width:100%; | |||
height:100%; | |||
} | } | ||
.sv_skill_scaling__stat-pill.is-inactive{ | |||
background:var(--sv-ui-bg1); | |||
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- | .sv_skill_scaling__stat-pill.is-inactive::before{ | ||
content:"—"; | |||
font-weight:900; | |||
font-size:12px; | |||
line-height:1; | |||
color:var(--sv-ui-text3); | |||
} | } | ||
.sv_skill_scaling__stat-pill--str.is-active{ | |||
.sv_skill_scaling__stat-pill--str.is-active { | border-color:rgba(145,63,82,0.96); | ||
background:#32131d; | |||
background-image:none; | |||
} | } | ||
.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:none; | |||
} | |||
.sv_skill_scaling__stat-pill--vit.is-active .sv_skill_scaling__stat-value{ color:#ffefc9; } | |||
.sv_skill_scaling__stat-pill-- | .sv_skill_scaling__stat-pill--dex.is-active{ | ||
border-color:rgba(118,146,24,0.96); | |||
background:#243208; | |||
background-image:none; | |||
} | } | ||
.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:none; | |||
} | |||
.sv_skill_scaling__stat-pill--agi.is-active .sv_skill_scaling__stat-value{ color:#f0dcff; } | |||
.sv_skill_scaling__stat-pill-- | .sv_skill_scaling__stat-pill--int.is-active{ | ||
border-color:rgba(45,118,191,0.96); | |||
background:#11263d; | |||
background-image:none; | |||
} | } | ||
.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:none; | |||
} | |||
.sv_skill_scaling__stat-pill--luk.is-active .sv_skill_scaling__stat-value{ color:#fff2ba; } | |||
. | .sv_skill_scaling__core-grid{ | ||
display:grid; | |||
grid-template-columns:repeat(3, minmax(0, 1fr)); | |||
gap:8px; | |||
justify-items:center; | |||
justify-content:center; | |||
align-content:center; | |||
width:100%; | |||
max-width:228px; | |||
margin:0 auto; | |||
} | } | ||
.sv_skill_scaling__core-pill{ | |||
border-radius:14px; | |||
min-height:25px; | |||
min-width:70px; | |||
padding:8px 6px; | |||
display:flex; | |||
flex-direction:column; | |||
justify-content:center; | |||
align-items:center; | |||
text-align:center; | |||
} | } | ||
.sv_skill_scaling__core-pill.is-active{ | |||
background:var(--sv-ui-bg3); | |||
background-image:none; | |||
} | |||
. | .sv_skill_scaling__core-main{ | ||
min-width:0; | |||
display:flex; | |||
align-items:baseline; | |||
justify-content:center; | |||
flex-wrap:wrap; | |||
gap:4px; | |||
} | } | ||
.sv_skill_scaling__core-value{ | |||
min-width:0; | |||
word-wrap:break-word; | |||
font-weight:900; | |||
font-size:14px; | |||
line-height:1.02; | |||
color:var(--sv-ui-text1); | |||
} | } | ||
.sv_skill_scaling__core- | .sv_skill_scaling__core-unit{ | ||
font-weight:900; | |||
font-size:10px; | |||
line-height:1.05; | |||
color:var(--sv-ui-text3); | |||
} | } | ||
.sv_skill_scaling__core-label{ | |||
margin-top:5px; | |||
font-weight:900; | |||
font-size:10px; | |||
line-height:1.10; | |||
letter-spacing:0.14px; | |||
text-transform:uppercase; | |||
color:var(--sv-ui-text3); | |||
} | } | ||
.sv_skill_scaling__core- | .sv_skill_scaling__core-pill.is-inactive{ | ||
background:var(--sv-ui-bg1); | |||
} | } | ||
.sv_skill_scaling__core- | .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:var(--sv-ui-text3); | |||
} | } | ||
/* -------------------------------------------------------------------------- */ | |||
/* 9) Tab panels and content */ | |||
/* -------------------------------------------------------------------------- */ | |||
.sv-skill-tabs{ | |||
margin:10px 0 0; | |||
} | } | ||
. | .sv-skill-tabs .sv-tabs-panels{ | ||
margin-top:10px; | |||
} | } | ||
.sv-skill-tabs .sv-tabpanel{ | |||
min-width:0; | |||
background-image:none; | |||
box-shadow:none; | |||
} | |||
.sv-skill-tabs .sv-tab-empty{ | |||
padding:14px 12px; | |||
text-align:center; | |||
border-radius:14px; | |||
background:var(--sv-ui-bg2); | |||
font-weight:900; | |||
font-size:13px; | |||
color:var(--sv-ui-text3); | |||
} | |||
.sv-skill-tabs .sv-tab-section + .sv-tab-section{ | |||
margin-top:12px; | |||
} | |||
.sv-skill-tabs .sv-tab-section-title{ | |||
width:100%; | |||
margin:0 0 8px; | |||
text-align:center; | |||
font-weight:900; | |||
font-size:11px; | |||
line-height:1.05; | |||
letter-spacing:0.22px; | |||
text-transform:uppercase; | |||
color:var(--sv-ui-text3); | |||
} | |||
/* -------------------------------------------------------------------------- */ | |||
/* 10) Mechanics tab */ | |||
/* -------------------------------------------------------------------------- */ | |||
/* Mechanics stays two-column through sm / md / lg. It only collapses into a */ | |||
/* single-column stack in the default viewpoint (<640px). */ | |||
.sv-skill-tabs .sv-mech-panel{ | |||
display:grid; | |||
grid-template-columns:repeat(2, minmax(0, 1fr)); | |||
column-gap:14px; | |||
row-gap:12px; | |||
align-items:start; | |||
} | } | ||
.sv-skill-tabs .sv-mech-panel__group{ | |||
min-width:0; | |||
max-width:100%; | |||
min-height:0; | |||
padding:10px 12px 12px; | |||
display:flex; | |||
flex-direction:column; | |||
justify-content:flex-start; | |||
align-items:stretch; | |||
align-self:start; | |||
border:0; | |||
border-radius:16px; | |||
background:var(--sv-ui-bg2); | |||
background-image:none; | |||
box-shadow:none; | |||
} | |||
.sv-skill-tabs .sv-mech-panel__mods, | |||
.sv-skill-tabs .sv-mech-panel__keywords{ | |||
grid-column:auto; | |||
margin-top:0; | |||
min-height:0; | |||
} | |||
.sv-skill-tabs .sv-mech-panel__mods{ | |||
overflow:visible; | |||
} | |||
.sv-skill-tabs .sv-mech-panel__keywords{ | |||
justify-content:flex-start; | |||
} | |||
.sv-skill-tabs .sv-mech-panel .sv-tab-section-title{ | |||
margin:0 0 8px; | |||
text-align:center; | |||
} | |||
/* Modifiers --------------------------------------------------------------- */ | |||
.sv-skill-tabs .sv-mech-mod-grid{ | |||
display:grid; | |||
grid-template-columns:repeat(3, minmax(0, 1fr)); | |||
gap:8px; | |||
align-content:start; | |||
justify-items:stretch; | |||
} | |||
.sv-skill-tabs .sv-mech-mod-pill{ | |||
position:relative; | |||
min-width:0; | |||
width:100%; | |||
min-height:56px; | |||
padding:6px 8px; | |||
display:flex; | |||
flex-direction:column; | |||
justify-content:center; | |||
align-items:center; | |||
text-align:center; | |||
border-radius:14px; | |||
border:1px solid var(--sv-ui-line2); | |||
background:var(--sv-ui-bg3); | |||
background-image:none; | |||
box-shadow:none; | |||
} | |||
.sv-skill-tabs .sv-mech-mod-pill__label{ | |||
min-width:0; | |||
word-wrap:break-word; | |||
overflow-wrap:anywhere; | |||
font-weight:900; | |||
font-size:10px; | |||
line-height:1.02; | |||
letter-spacing:0.10px; | |||
text-transform:uppercase; | |||
color:var(--sv-ui-text3); | |||
} | } | ||
.sv-skill-tabs .sv-mech-mod-pill__value{ | |||
margin-top:3px; | |||
min-width:0; | |||
word-wrap:break-word; | |||
overflow-wrap:anywhere; | |||
font-weight:900; | |||
font-size:12px; | |||
line-height:1.02; | |||
color:var(--sv-ui-text1); | |||
} | |||
.sv-skill-tabs .sv-mech-mod-pill__hit{ | |||
position:absolute; | |||
top:0; | |||
right:0; | |||
bottom:0; | |||
left:0; | |||
z-index:5; | |||
opacity:0; | |||
} | |||
.sv-skill-tabs .sv-mech-mod-pill__hit .sv-def{ | |||
display:block; | |||
width:100%; | |||
height:100%; | |||
} | |||
/* Keywords ---------------------------------------------------------------- */ | |||
.sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills{ | |||
display:grid; | |||
grid-template-columns:repeat(2, minmax(0, 1fr)); | |||
gap:8px; | |||
align-content:start; | |||
justify-items:stretch; | |||
margin:0; | |||
} | } | ||
.sv-skill-tabs .sv-mech-keyword-pill{ | |||
position:relative; | |||
min-width:0; | |||
width:100%; | |||
min-height:56px; | |||
padding:6px 10px; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
text-align:center; | |||
border-radius:16px; | |||
border:1px solid var(--sv-ui-line2); | |||
background:var(--sv-ui-bg3); | |||
background-image:none; | |||
box-shadow:none; | |||
} | } | ||
.sv-skill-tabs .sv-mech-keyword-pill__label{ | |||
.sv- | display:block; | ||
min-width:0; | |||
width:100%; | |||
word-wrap:break-word; | |||
overflow-wrap:anywhere; | |||
font-weight:900; | |||
font-size:12px; | |||
line-height:1.08; | |||
color:var(--sv-ui-text1); | |||
text-align:center; | |||
} | } | ||
.sv- | .sv-skill-tabs .sv-mech-keyword-pill__hit{ | ||
position:absolute; | |||
top:0; | |||
right:0; | |||
bottom:0; | |||
left:0; | |||
z-index:5; | |||
opacity:0; | |||
} | } | ||
.sv- | .sv-skill-tabs .sv-mech-keyword-pill__hit .sv-def{ | ||
display:block; | |||
width:100%; | |||
height:100%; | |||
} | } | ||
.sv- | /* Larger keyword mode. */ | ||
.sv-skill- | .sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills.sv-tab-pills--xl .sv-mech-keyword-pill, | ||
.sv-skill-tabs .sv-mech-keyword-pill.sv-pill--xl{ | |||
min-height:60px; | |||
padding:8px 12px; | |||
border-radius:999px; | |||
} | } | ||
.sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills.sv-tab-pills--xl .sv-mech-keyword-pill__label, | |||
.sv- | .sv-skill-tabs .sv-mech-keyword-pill.sv-pill--xl .sv-mech-keyword-pill__label{ | ||
.sv-skill- | font-size:13px; | ||
line-height:1.12; | |||
} | } | ||
/* | /* -------------------------------------------------------------------------- */ | ||
/* 11) Effect cards */ | |||
/* -------------------------------------------------------------------------- */ | |||
.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; | |||
background:var(--sv-ui-bg2); | |||
background-image:none; | |||
box-shadow:none; | |||
color:var(--sv-ui-text2); | |||
} | } | ||
.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; | |||
} | } | ||
.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:var(--sv-ui-text1); | |||
} | } | ||
.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{ | ||
font-weight:900; | |||
font-size:12px; | |||
color:var(--sv-ui-text1); | |||
} | } | ||
.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:var(--sv-ui-text3); | |||
} | } | ||
/* | /* -------------------------------------------------------------------------- */ | ||
/* 12) Responsive */ | |||
/* -------------------------------------------------------------------------- */ | |||
@media (max-width:1023px){ | |||
.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_scaling__body{ | |||
grid-template-columns:minmax(0, 1fr) minmax(0, 236px); | |||
} | |||
.sv_skill_scaling__primary-value{ font-size:32px; } | |||
.sv_skill_scaling__core-pill{ | |||
min-height:25px; | |||
min-width:70px; | |||
} | |||
.sv_skill_scaling__core-value{ font-size:13px; } | |||
.sv_skill_scaling__core-label{ font-size:9px; } | |||
.sv-gi-card .sv-ref-grid, | |||
.sv-skill-card .sv-ref-grid{ grid-template-columns:1fr; } | |||
.sv-skill-tabs .sv-mech-panel{ | |||
grid-template-columns:repeat(2, minmax(0, 1fr)); | |||
column-gap:12px; | |||
row-gap:12px; | |||
align-items:start; | |||
} | |||
.sv-skill-tabs .sv-mech-panel__group{ | |||
min-height:0; | |||
max-height:none; | |||
padding:9px 10px 10px; | |||
} | align-self:start; | ||
} | |||
.sv-skill-tabs .sv-mech-mod-grid{ | |||
grid-template-columns:repeat(3, minmax(0, 1fr)); | |||
gap:8px; | |||
} | |||
. | .sv-skill-tabs .sv-mech-mod-pill{ | ||
min-height:48px; | |||
} | padding:6px 8px; | ||
} | |||
.sv-skill-tabs .sv-mech-mod-pill__label{ | |||
font-size:10px; | |||
line-height:1.03; | |||
} | |||
.sv-skill-tabs .sv-mech-mod-pill__value{ font-size:12px; } | |||
.sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills{ | |||
gap:8px; | |||
} | |||
.sv-skill-tabs .sv-mech-keyword-pill{ | |||
min-height:44px; | |||
padding:7px 9px; | |||
} | |||
.sv-skill-tabs .sv-mech-keyword-pill__label{ | |||
font-size:12px; | |||
line-height:1.10; | |||
} | |||
.sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills.sv-tab-pills--xl .sv-mech-keyword-pill, | |||
.sv-skill-tabs .sv-mech-keyword-pill.sv-pill--xl{ | |||
min-height:48px; | |||
padding:9px 10px; | |||
} | |||
.sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills.sv-tab-pills--xl .sv-mech-keyword-pill__label, | |||
.sv-skill-tabs .sv-mech-keyword-pill.sv-pill--xl .sv-mech-keyword-pill__label{ | |||
font-size:13px; | |||
} | |||
} | |||
@media (max-width:767px){ | |||
.sv-skill-meta-block{ | |||
grid-template-columns:minmax(0, 1fr); | |||
} | |||
.sv-skill-meta-block__bubble{ | |||
min-height:auto; | |||
max-height:none; | |||
} | |||
} | } | ||
@media (max-width: | @media (max-width:639px){ | ||
.sv-skill-head{ gap:10px; } | |||
} | .sv-skill-icon{ | ||
width:56px; | |||
height:56px; | |||
border-radius:14px; | |||
} | |||
.sv-skill-title{ font-size:19px; } | |||
.sv-skill-desc{ | |||
font-size:14px; | |||
line-height:1.40; | |||
} | |||
.sv_skill_scaling{ padding:9px 10px 10px; } | |||
.sv_skill_scaling .sv-skill-level, | |||
.sv_skill_scaling__level{ padding:0 0 9px; } | |||
.sv_skill_scaling__body{ | |||
grid-template-columns:1fr; | |||
row-gap:12px; | |||
} | } | ||
.sv_skill_scaling__group{ | |||
min-height:auto; | |||
max-height:none; | |||
} | padding:10px 11px; | ||
} | |||
.sv_skill_scaling__group--core{ | |||
grid-column:1; | |||
grid-row:2; | |||
} | |||
.sv_skill_scaling__cluster{ height:auto; } | |||
.sv_skill_scaling__primary-value{ font-size:32px; } | |||
.sv_skill_scaling__primary-label{ | |||
font-size:11px; | |||
line-height:1.08; | |||
} | |||
.sv_skill_scaling__core-grid{ | |||
grid-template-columns:repeat(2, minmax(0, 1fr)); | |||
width:100%; | |||
align-items:stretch; | |||
} | |||
.sv_skill_scaling__core-pill{ | |||
width:100%; | |||
min-width:0; | |||
min-height:30px; | |||
padding:8px 7px; | |||
justify-self:stretch; | |||
justify-content:center; | |||
align-items:center; | |||
text-align:center; | |||
} | |||
.sv_skill_scaling__core-value{ font-size:14px; } | |||
.sv_skill_scaling__core-unit{ font-size:11px; } | |||
.sv_skill_scaling__core-label{ font-size:10px; } | |||
.sv_skill_scaling__core-value, | |||
.sv_skill_scaling__core-unit, | |||
} | .sv_skill_scaling__core-label{ | ||
width:100%; | |||
text-align:center; | |||
} | |||
.sv-skill-tabs .sv-tab-section-title{ | |||
margin:0 0 9px; | |||
font-size:12px; | |||
} | line-height:1.08; | ||
} | |||
.sv-skill-tabs .sv-mech-panel{ | |||
grid-template-columns:1fr; | |||
} | row-gap:12px; | ||
} | |||
.sv-skill-tabs .sv-mech-panel__mods, | |||
.sv-skill-tabs .sv-mech-panel__keywords{ grid-column:1; } | |||
.sv-skill-tabs .sv-mech-panel__group{ | |||
min-height:auto; | |||
max-height:none; | |||
padding:10px 11px 11px; | |||
} | } | ||
.sv-skill-tabs .sv-mech-mod-grid{ | |||
grid-template-columns:repeat(2, minmax(0, 1fr)); | |||
} | gap:9px; | ||
} | |||
.sv-skill-tabs .sv-mech-mod-pill{ | |||
min-height:50px; | |||
padding:8px 8px 7px; | |||
border-radius:14px; | |||
} | } | ||
.sv-skill-tabs .sv-mech-mod-pill__label{ | |||
font-size:10px; | |||
line-height:1.06; | |||
} | |||
.sv-skill-tabs .sv-mech-mod-pill__value{ | |||
margin-top:4px; | |||
} | font-size:14px; | ||
line-height:1.05; | |||
} | |||
.sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills{ gap:8px; } | |||
.sv-skill-tabs .sv-mech-keyword-pill{ | |||
min-height:40px; | |||
padding:8px 10px; | |||
border-radius:14px; | |||
} | |||
.sv-skill-tabs .sv-mech-keyword-pill__label{ | |||
font-size:13px; | |||
line-height:1.12; | |||
} | |||
.sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills.sv-tab-pills--xl .sv-mech-keyword-pill, | |||
.sv-skill-tabs .sv-mech-keyword-pill.sv-pill--xl{ | |||
min-height:46px; | |||
padding:10px 12px; | |||
border-radius:14px; | |||
} | |||
.sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills.sv-tab-pills--xl .sv-mech-keyword-pill__label, | |||
.sv-skill-tabs .sv-mech-keyword-pill.sv-pill--xl .sv-mech-keyword-pill__label{ | |||
} | font-size:14px; | ||
} | |||
.sv-skill-card .sv-skill-meta, | |||
.sv-gi-card .sv-skill-meta{ | |||
gap:8px; | |||
width:100%; | |||
max-width:none; | |||
} | margin-left:auto; | ||
margin-right:auto; | |||
justify-content:center; | |||
align-items:stretch; | |||
} | |||
.sv-skill-card .sv-meta-card, | |||
.sv-gi-card .sv-meta-card{ | |||
flex:1 1 calc(50% - 4px); | |||
min-width:0; | |||
} | min-height:36px; | ||
gap:8px; | |||
padding:7px 9px; | |||
justify-content:center; | |||
align-items:center; | |||
text-align:center; | |||
} | |||
.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{ | |||
flex:1 1 auto; | |||
min-width:0; | |||
} | font-size:11px; | ||
line-height:1.08; | |||
letter-spacing:0; | |||
text-align:center; | |||
} | |||
.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:10px; | |||
} | |||
.sv-skill-level{ padding:10px 11px; } | |||
/* Absorbed former micro-phone layout compaction into the default viewpoint. */ | |||
} | } | ||