MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary Tags: Mobile edit Mobile web edit |
No edit summary Tags: Mobile edit Mobile web edit |
||
| Line 4: | Line 4: | ||
- No Citizen skin selectors | - No Citizen skin selectors | ||
- Mobile rules are merged into Common.css/Citizen.css (no separate Mobile.css) | - Mobile rules are merged into Common.css/Citizen.css (no separate Mobile.css) | ||
- Common.css owns shared UI primitives + reusable interactive components | |||
- Module:GameInfo/styles.css should own only GameInfo-family layout/presentation | |||
============================================================================ */ | ============================================================================ */ | ||
| Line 12: | Line 14: | ||
:root{ | :root{ | ||
/* SV UI tokens (fallback) */ | /* SV UI tokens (fallback) */ | ||
--sv-ui-bg0:#0f172a; | --sv-ui-bg0:#0f172a; | ||
--sv-ui-bg1:#1f2937; | --sv-ui-bg1:#1f2937; | ||
--sv-ui-bg2:#273449; | --sv-ui-bg2:#273449; | ||
--sv-ui-bg3:#2e3f59; | --sv-ui-bg3:#2e3f59; | ||
--sv-ui-line1:#3b4b63; | --sv-ui-line1:#3b4b63; | ||
--sv-ui-line2:#4b6388; | --sv-ui-line2:#4b6388; | ||
--sv-ui-text1:#f5f9ff; | --sv-ui-text1:#f5f9ff; | ||
--sv-ui-text2:#d7e2f4; | --sv-ui-text2:#d7e2f4; | ||
--sv-ui-text3:#b6c6e0; | --sv-ui-text3:#b6c6e0; | ||
--sv-ui-accent:#6aa6ff; | --sv-ui-accent:#6aa6ff; | ||
--sv-ui-accent2:#8cbcff; | --sv-ui-accent2:#8cbcff; | ||
/* Popover tuning tokens */ | /* Popover tuning tokens */ | ||
--sv-ui-pop-bg:var(--sv-ui-bg0); | --sv-ui-pop-bg:var(--sv-ui-bg0); | ||
--sv-ui-pop-line:var(--sv-ui-line2); | --sv-ui-pop-line:var(--sv-ui-line2); | ||
--sv-ui-pop-shadow:0 10px 30px rgba(0,0,0,0.35); | --sv-ui-pop-shadow:0 10px 30px rgba(0,0,0,0.35); | ||
--sv-ui-rad-sm:10px; | --sv-ui-rad-sm:10px; | ||
--sv-ui-rad-md:14px; | --sv-ui-rad-md:14px; | ||
--sv-ui-rad-lg:18px; | --sv-ui-rad-lg:18px; | ||
--sv-ui-rad-pill:999px; | --sv-ui-rad-pill:999px; | ||
--sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40); | --sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40); | ||
/* | /* Shared badge / pill surfaces */ | ||
--sv- | --sv-ui-pill-bg:var(--sv-ui-bg3); | ||
--sv- | --sv-ui-pill-line:var(--sv-ui-line2); | ||
--sv-ui-pill-shadow:inset 0 1px 0 rgba(255,255,255,0.06); | |||
--sv-ui-pill-text:var(--sv-ui-text1); | |||
/* Legacy hero infobox variables (mapped to SV UI tokens) */ | |||
--sv- | --sv-skill-width:660px; | ||
--sv-passive-width:540px; | |||
--sv- | --sv-base:var(--sv-ui-bg0); | ||
--sv-surface:var(--sv-ui-bg2); | |||
--sv- | |||
--sv- | --sv-card-border:var(--sv-ui-line1); | ||
--sv- | --sv-row-border:var(--sv-ui-line1); | ||
--sv- | --sv-gridline:var(--sv-ui-line2); | ||
--sv-text-soft:var(--sv-ui-text1); | --sv-pill:var(--sv-ui-bg3); | ||
--sv-text-outline:0 1px 0 rgba(0,0,0,0.55), | --sv-pill-a:var(--sv-ui-bg3); | ||
0 -1px 0 rgba(0,0,0,0.55), | --sv-pill-b:var(--sv-ui-bg3); | ||
1px 0 0 rgba(0,0,0,0.55), | |||
-1px 0 0 rgba(0,0,0,0.55); | --sv-text-soft:var(--sv-ui-text1); | ||
--sv-text-outline: | |||
0 1px 0 rgba(0,0,0,0.55), | |||
0 -1px 0 rgba(0,0,0,0.55), | |||
1px 0 0 rgba(0,0,0,0.55), | |||
-1px 0 0 rgba(0,0,0,0.55); | |||
} | } | ||
/* If other skins use mw-theme-light, keep SV modules consistent */ | /* If other skins use mw-theme-light, keep SV modules consistent */ | ||
.mw-theme-light{ | .mw-theme-light{ | ||
--sv-ui-bg0:#1f2937; | --sv-ui-bg0:#1f2937; | ||
--sv-ui-bg1:#273449; | --sv-ui-bg1:#273449; | ||
--sv-ui-bg2:#2e3f59; | --sv-ui-bg2:#2e3f59; | ||
--sv-ui-bg3:#364a69; | --sv-ui-bg3:#364a69; | ||
--sv-ui-line1:#4b6388; | --sv-ui-line1:#4b6388; | ||
--sv-ui-line2:#5f7fb4; | --sv-ui-line2:#5f7fb4; | ||
--sv-ui-text1:#f5f9ff; | --sv-ui-text1:#f5f9ff; | ||
--sv-ui-text2:#d7e2f4; | --sv-ui-text2:#d7e2f4; | ||
--sv-ui-text3:#b6c6e0; | --sv-ui-text3:#b6c6e0; | ||
--sv-ui-accent:#8cbcff; | --sv-ui-accent:#8cbcff; | ||
--sv-ui-accent2:#b0d0ff; | --sv-ui-accent2:#b0d0ff; | ||
--sv-base:var(--sv-ui-bg0); | --sv-base:var(--sv-ui-bg0); | ||
--sv-surface:var(--sv-ui-bg2); | --sv-surface:var(--sv-ui-bg2); | ||
--sv-card-border:var(--sv-ui-line1); | --sv-card-border:var(--sv-ui-line1); | ||
--sv-row-border:var(--sv-ui-line1); | --sv-row-border:var(--sv-ui-line1); | ||
--sv-gridline:var(--sv-ui-line2); | --sv-gridline:var(--sv-ui-line2); | ||
--sv-pill:var(--sv-ui-bg3); | --sv-pill:var(--sv-ui-bg3); | ||
--sv-pill-a:var(--sv-ui-bg3); | --sv-pill-a:var(--sv-ui-bg3); | ||
--sv-pill-b:var(--sv-ui-bg3); | --sv-pill-b:var(--sv-ui-bg3); | ||
--sv-text-soft:var(--sv-ui-text1); | --sv-text-soft:var(--sv-ui-text1); | ||
} | } | ||
| Line 98: | Line 107: | ||
.mw-parser-output a{ | .mw-parser-output a{ | ||
color:var(--color-link, var(--sv-ui-accent)); | color:var(--color-link, var(--sv-ui-accent)); | ||
text-decoration:underline; | text-decoration:underline; | ||
text-decoration-thickness:2px; | text-decoration-thickness:2px; | ||
text-underline-offset:2px; | text-underline-offset:2px; | ||
} | } | ||
.mw-parser-output a:visited{ | .mw-parser-output a:visited{ | ||
color:var(--color-visited, var(--sv-ui-accent2)); | color:var(--color-visited, var(--sv-ui-accent2)); | ||
} | } | ||
.mw-parser-output a:hover{ | .mw-parser-output a:hover{ | ||
text-decoration-thickness:3px; | text-decoration-thickness:3px; | ||
} | } | ||
.mw-parser-output a:focus-visible{ | .mw-parser-output a:focus-visible{ | ||
outline:2px solid var(--sv-ui-accent2); | outline:2px solid var(--sv-ui-accent2); | ||
outline-offset:2px; | outline-offset:2px; | ||
border-radius:6px; | border-radius:6px; | ||
} | } | ||
| Line 125: | Line 134: | ||
.sv-card, | .sv-card, | ||
.mw-parser-output .sv-card{ | .mw-parser-output .sv-card{ | ||
background:var(--sv-ui-bg1); | background:var(--sv-ui-bg1); | ||
border:1px solid var(--sv-ui-line1); | border:1px solid var(--sv-ui-line1); | ||
border-radius:var(--sv-ui-rad-md); | border-radius:var(--sv-ui-rad-md); | ||
box-shadow:var(--sv-ui-shadow1); | box-shadow:var(--sv-ui-shadow1); | ||
color:var(--color-base, var(--sv-ui-text2)); | color:var(--color-base, var(--sv-ui-text2)); | ||
} | } | ||
.sv-card :where(h1,h2,h3,h4,h5,h6,th,summary,.mw-headline), | .sv-card :where(h1,h2,h3,h4,h5,h6,th,summary,.mw-headline), | ||
.mw-parser-output .sv-card :where(h1,h2,h3,h4,h5,h6,th,summary,.mw-headline){ | .mw-parser-output .sv-card :where(h1,h2,h3,h4,h5,h6,th,summary,.mw-headline){ | ||
color:var(--color-emphasized, var(--sv-ui-text1)); | color:var(--color-emphasized, var(--sv-ui-text1)); | ||
} | } | ||
.sv-tile, | .sv-tile, | ||
.mw-parser-output .sv-tile{ | .mw-parser-output .sv-tile{ | ||
background:var(--sv-ui-bg2); | background:var(--sv-ui-bg2); | ||
border:1px solid var(--sv-ui-line2); | border:1px solid var(--sv-ui-line2); | ||
border-radius:var(--sv-ui-rad-sm); | border-radius:var(--sv-ui-rad-sm); | ||
color:var(--color-emphasized, var(--sv-ui-text1)); | color:var(--color-emphasized, var(--sv-ui-text1)); | ||
} | } | ||
.sv-pill, | .sv-pill, | ||
.mw-parser-output .sv-pill{ | .mw-parser-output .sv-pill{ | ||
display:inline-flex; | display:inline-flex; | ||
align-items:center; | align-items:center; | ||
justify-content:center; | justify-content:center; | ||
padding:0.18em 0.40em; | padding:0.18em 0.40em; | ||
border-radius:var(--sv-ui-rad-sm); | border-radius:var(--sv-ui-rad-sm); | ||
background:var(--sv-ui-bg3); | background:var(--sv-ui-bg3); | ||
border:1px solid var(--sv-ui-line2); | border:1px solid var(--sv-ui-line2); | ||
box-shadow:inset 0 1px 0 rgba(255,255,255,0.06); | box-shadow:inset 0 1px 0 rgba(255,255,255,0.06); | ||
background-image:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00)); | background-image:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00)); | ||
color:var(--color-emphasized, var(--sv-ui-text1)); | color:var(--color-emphasized, var(--sv-ui-text1)); | ||
font-weight:800; | font-weight:800; | ||
text-transform:uppercase; | text-transform:uppercase; | ||
letter-spacing:0.03em; | letter-spacing:0.03em; | ||
font-size:0.72em; | font-size:0.72em; | ||
line-height:1.15; | line-height:1.15; | ||
white-space:nowrap; | white-space:nowrap; | ||
} | |||
.sv-pill--compact, | |||
.mw-parser-output .sv-pill--compact{ | |||
padding:0.15em 0.38em; | |||
border-radius:var(--sv-ui-rad-pill); | |||
} | |||
.sv-pill--value, | |||
.mw-parser-output .sv-pill--value{ | |||
border-radius:var(--sv-ui-rad-pill); | |||
font-weight:900; | |||
text-transform:none; | |||
letter-spacing:0.01em; | |||
} | } | ||
.sv-focus-ring:focus-visible, | .sv-focus-ring:focus-visible, | ||
.mw-parser-output .sv-focus-ring:focus-visible{ | .mw-parser-output .sv-focus-ring:focus-visible{ | ||
outline:2px solid var(--sv-ui-accent2); | outline:2px solid var(--sv-ui-accent2); | ||
outline-offset:2px; | outline-offset:2px; | ||
border-radius:8px; | border-radius:8px; | ||
} | } | ||
| Line 177: | Line 200: | ||
.sv-hover-lift{ | .sv-hover-lift{ | ||
transition:transform 0.15s ease-in-out; | transition:transform 0.15s ease-in-out; | ||
will-change:transform; | will-change:transform; | ||
} | } | ||
.sv-hover-lift:hover{ | .sv-hover-lift:hover{ | ||
transform:translateY(-2px); | transform:translateY(-2px); | ||
} | } | ||
@media (prefers-reduced-motion: reduce){ | @media (prefers-reduced-motion: reduce){ | ||
.sv-hover-lift{transition:none;} | .sv-hover-lift{transition:none;} | ||
.sv-hover-lift:hover{transform:none;} | .sv-hover-lift:hover{transform:none;} | ||
} | } | ||
| Line 196: | Line 219: | ||
.sv-card.sv-infobox-right{ | .sv-card.sv-infobox-right{ | ||
float:right !important; | float:right !important; | ||
width:100%; | width:100%; | ||
max-width:200px; | max-width:200px; | ||
margin:0 0 2em 2em; | margin:0 0 2em 2em; | ||
box-sizing:border-box; | box-sizing:border-box; | ||
border-radius:var(--sv-ui-rad-lg); | border-radius:var(--sv-ui-rad-lg); | ||
overflow:hidden; | overflow:hidden; | ||
clear:right; | clear:right; | ||
} | } | ||
| Line 215: | Line 238: | ||
.sv-class-overview__table{ | .sv-class-overview__table{ | ||
width:100%; | width:100%; | ||
border-collapse:separate; | border-collapse:separate; | ||
border-spacing:0; | border-spacing:0; | ||
} | } | ||
.sv-class-overview__heading, | .sv-class-overview__heading, | ||
.sv-class-overview__subhead{ | .sv-class-overview__subhead{ | ||
padding:10px 10px; | padding:10px 10px; | ||
text-align:center; | text-align:center; | ||
font-weight:800; | font-weight:800; | ||
} | } | ||
.sv-class-overview__table td{ | .sv-class-overview__table td{ | ||
padding:7px 10px; | padding:7px 10px; | ||
border-bottom:1px solid var(--sv-ui-line1); | border-bottom:1px solid var(--sv-ui-line1); | ||
vertical-align:middle; | vertical-align:middle; | ||
} | } | ||
.sv-class-overview__table tr:last-child td{ | .sv-class-overview__table tr:last-child td{ | ||
border-bottom:none; | border-bottom:none; | ||
} | } | ||
.sv-class-overview__label{ | .sv-class-overview__label{ | ||
text-align:left; | text-align:left; | ||
font-weight:700; | font-weight:700; | ||
color:var(--sv-ui-text1); | color:var(--sv-ui-text1); | ||
white-space:nowrap; | white-space:nowrap; | ||
} | } | ||
.sv-class-overview__value{ | .sv-class-overview__value{ | ||
text-align:right; | text-align:right; | ||
font-weight:650; | font-weight:650; | ||
color:var(--sv-ui-text2); | color:var(--sv-ui-text2); | ||
} | } | ||
.sv-class-overview__label img{ | .sv-class-overview__label img{ | ||
vertical-align:middle; | vertical-align:middle; | ||
margin-right:6px; | margin-right:6px; | ||
} | } | ||
/* ---------------------------------------------------------------------------- | /* ---------------------------------------------------------------------------- | ||
4) | 4) Shared utilities / helper contracts | ||
---------------------------------------------------------------------------- */ | ---------------------------------------------------------------------------- */ | ||
/* Visibility contract (JS toggles these) */ | |||
.sv-hidden, | |||
.mw-parser-output .sv-hidden{ | |||
display:none !important; | |||
} | } | ||
[hidden]{display:none !important;} | |||
} | |||
.mw-parser-output . | /* Missing icon fallback badge (“?”) */ | ||
.sv-miss, | |||
.mw-parser-output .sv-miss{ | |||
display:inline-flex; | |||
border-radius: | align-items:center; | ||
justify-content:center; | |||
width:18px; | |||
height:18px; | |||
border-radius:var(--sv-ui-rad-pill); | |||
border:1px solid var(--sv-ui-line2); | |||
background:var(--sv-ui-bg3); | |||
color:var(--sv-ui-text1); | |||
font-weight:900; | |||
font-size:12px; | |||
line-height:1; | |||
} | } | ||
.mw-parser-output . | /* Generic image wrapper */ | ||
.sv-img, | |||
.mw-parser-output .sv-img{ | |||
display:inline-flex; | |||
align-items:center; | |||
justify-content:center; | |||
} | } | ||
.mw-parser-output | .sv-img img, | ||
.mw-parser-output .sv-img img{ | |||
display:block; | |||
max-width:100%; | |||
height:auto; | |||
border-radius:var(--sv-ui-rad-sm); | |||
border- | |||
} | } | ||
/* Optional: shadow variant */ | |||
. | .sv-img--shadow img, | ||
.mw-parser-output .sv-img--shadow img{ | |||
box-shadow:0 10px 18px rgba(0,0,0,0.35); | |||
.mw-parser-output | |||
. | |||
} | } | ||
/* ---------------------------------------------------------------------------- | /* ---------------------------------------------------------------------------- | ||
5) | 5) Shared level selector component | ||
- Common owns the component anatomy and reusable helper layouts | |||
- Module CSS should only control the surrounding section/card layout | |||
---------------------------------------------------------------------------- */ | ---------------------------------------------------------------------------- */ | ||
.sv-level-ui, | |||
.mw-parser-output .sv-level-ui{ | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
gap:8px; | |||
flex-wrap:wrap; | |||
text-align:center; | |||
margin:0; | |||
} | } | ||
.sv-level-label, | |||
.mw-parser-output .sv-level-label{ | |||
margin:0; | |||
} | } | ||
.sv-level-label[data-sv-helper-text], | |||
.mw-parser-output .sv-level-label[data-sv-helper-text]{ | |||
font-size:0; | |||
line-height:0; | |||
display:inline-block; | |||
} | } | ||
.sv-level-label[data-sv-helper-text]::after, | |||
.mw-parser-output .sv-level-label[data-sv-helper-text]::after{ | |||
content:attr(data-sv-helper-text); | |||
display:inline-block; | |||
font-weight:900; | |||
font-size:13px; | |||
line-height:1.25; | |||
letter-spacing:0.15px; | |||
color:var(--sv-ui-text1); | |||
} | } | ||
.sv-level-slider, | |||
.mw-parser-output .sv-level-slider{ | |||
position:relative; | |||
.mw-parser-output | |||
display:flex; | display:flex; | ||
flex-direction:row; | flex-direction:row; | ||
| Line 715: | Line 377: | ||
gap:10px; | gap:10px; | ||
width:100%; | width:100%; | ||
flex-wrap:nowrap; | |||
direction:ltr; | |||
} | } | ||
.sv-level-slider input.sv-level-range[type="range"], | |||
.sv-level-slider .sv-level-range--custom, | |||
. | .sv-level-slider .sv-level-range[data-sv-slider="1"], | ||
.mw-parser-output .sv-level-slider input.sv-level-range[type="range"], | |||
. | .mw-parser-output .sv-level-slider .sv-level-range--custom, | ||
.mw-parser-output .sv-level-slider .sv-level-range[data-sv-slider="1"]{ | |||
flex:1 1 auto; | flex:1 1 auto; | ||
min-width:0; | min-width:0; | ||
| Line 732: | Line 395: | ||
} | } | ||
.sv-level-endvalue, | |||
.mw-parser-output .sv-level-endvalue{ | |||
. | |||
flex:0 0 auto; | flex:0 0 auto; | ||
order:2; | order:2; | ||
min-width:30px; | |||
padding:2px 8px; | |||
border-radius:var(--sv-ui-rad-pill); | |||
border:1px solid var(--sv-ui-pill-line); | |||
background:var(--sv-ui-pill-bg); | |||
background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00)); | |||
box-shadow:var(--sv-ui-pill-shadow); | |||
color:var(--sv-ui-text2); | |||
font-weight:900; | |||
font-size:13px; | |||
line-height:1.25; | |||
letter-spacing:0.15px; | |||
text-align:center; | |||
white-space:nowrap; | |||
} | } | ||
.sv-level--hide-ticks .sv-level-ticklabels, | |||
[data-sv-level-hide-ticks="1"] .sv-level-ticklabels, | |||
.mw-parser-output .sv-level--hide-ticks .sv-level-ticklabels, | |||
.mw-parser-output [data-sv-level-hide-ticks="1"] .sv-level-ticklabels{ | |||
display:none; | |||
.mw-parser-output .sv- | |||
.mw-parser-output | |||
.sv-level- | |||
} | } | ||
/* Custom slider shell */ | |||
.sv-level-range--custom, | .sv-level-range--custom, | ||
.sv-level-range[data-sv-slider="1"]{ | .sv-level-range[data-sv-slider="1"]{ | ||
| Line 984: | Line 471: | ||
} | } | ||
/* | /* Optional tick labels row */ | ||
.sv-level-ticklabels{ | .sv-level-ticklabels{ | ||
display:flex; | display:flex; | ||
| Line 1,004: | Line 491: | ||
} | } | ||
/* Value bubble (JS injects .sv-level-bubble | /* Value bubble (JS injects .sv-level-bubble) */ | ||
.sv-level-range--custom .sv-level-bubble, | .sv-level-range--custom .sv-level-bubble, | ||
.sv-level-range[data-sv-slider="1"] .sv-level-bubble{ | .sv-level-range[data-sv-slider="1"] .sv-level-bubble{ | ||
position:absolute; | position:absolute; | ||
top:-45px | top:-45px; | ||
left:0% | left:0%; | ||
transform:translateX(-50%) | transform:translateX(-50%); | ||
padding:9px 15px; | |||
padding:9px 15px | border-radius:36px; | ||
border-radius:36px | |||
border:1px solid var(--sv-ui-line2); | border:1px solid var(--sv-ui-line2); | ||
background:var(--sv-ui-bg1); | background:var(--sv-ui-bg1); | ||
background-image:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00)); | background-image:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00)); | ||
box-shadow:0 10px 18px rgba(0,0,0,0.35); | box-shadow:0 10px 18px rgba(0,0,0,0.35); | ||
font-weight:900; | |||
font-weight:900 | font-size:36px; | ||
font-size:36px | line-height:1; | ||
line-height:1 | |||
color:var(--sv-ui-text1); | color:var(--sv-ui-text1); | ||
pointer-events:none; | pointer-events:none; | ||
white-space:nowrap | white-space:nowrap; | ||
} | } | ||
| Line 1,034: | Line 517: | ||
position:absolute; | position:absolute; | ||
left:50%; | left:50%; | ||
bottom:-9px; | bottom:-9px; | ||
width:14px; | |||
width:14px; | height:14px; | ||
height:14px; | margin-left:-7px; | ||
margin-left:-7px; | |||
background:var(--sv-ui-bg1); | background:var(--sv-ui-bg1); | ||
border-left:1px solid var(--sv-ui-line2); | border-left:1px solid var(--sv-ui-line2); | ||
| Line 1,046: | Line 527: | ||
} | } | ||
/* Focus ring | /* Focus ring */ | ||
.sv-level-range--custom:focus-visible, | .sv-level-range--custom:focus-visible, | ||
.sv-level-range[data-sv-slider="1"]:focus-visible{ | .sv-level-range[data-sv-slider="1"]:focus-visible{ | ||
| Line 1,054: | Line 535: | ||
} | } | ||
/* --------------------------------------------------------------------------- | /* Mobile */ | ||
SV Tabs (shared component) | @media (max-width:500px){ | ||
--------------------------------------------------------------------------- */ | .sv-level-endvalue, | ||
.mw-parser-output .sv-level-endvalue{ | |||
padding:1px 7px; | |||
min-width:28px; | |||
font-size:12px; | |||
line-height:1.25; | |||
} | |||
.sv-level-label[data-sv-helper-text]::after, | |||
.mw-parser-output .sv-level-label[data-sv-helper-text]::after{ | |||
font-size:12px; | |||
} | |||
} | |||
/* ---------------------------------------------------------------------------- | |||
6) SV Tabs (shared component) | |||
---------------------------------------------------------------------------- */ | |||
.sv-tabs, | .sv-tabs, | ||
.mw-parser-output .sv-tabs{ | .mw-parser-output .sv-tabs{ | ||
margin:10px 0 0; | margin:10px 0 0; | ||
} | } | ||
.sv-tabs-list, | .sv-tabs-list, | ||
.mw-parser-output .sv-tabs-list{ | .mw-parser-output .sv-tabs-list{ | ||
display:flex; | display:flex; | ||
gap:8px; | gap:8px; | ||
flex-wrap:wrap; | flex-wrap:wrap; | ||
margin:0 0 10px 0; | margin:0 0 10px 0; | ||
padding:0; | padding:0; | ||
} | } | ||
.sv-tab, | .sv-tab, | ||
.mw-parser-output .sv-tab{ | .mw-parser-output .sv-tab{ | ||
display:inline-flex; | display:inline-flex; | ||
align-items:center; | align-items:center; | ||
justify-content:center; | justify-content:center; | ||
border-radius:var(--sv-ui-rad-pill); | border-radius:var(--sv-ui-rad-pill); | ||
padding:7px 10px; | padding:7px 10px; | ||
border:1px solid var(--sv-ui-line2); | border:1px solid var(--sv-ui-line2); | ||
background:var(--sv-ui-bg2); | background:var(--sv-ui-bg2); | ||
color:var(--sv-ui-text1); | color:var(--sv-ui-text1); | ||
font-weight:900; | font-weight:900; | ||
font-size:13px; | font-size:13px; | ||
cursor:pointer; | cursor:pointer; | ||
user-select:none; | user-select:none; | ||
} | } | ||
.sv-tab:hover, | .sv-tab:hover, | ||
.mw-parser-output .sv-tab:hover{ | .mw-parser-output .sv-tab:hover{ | ||
background:var(--sv-ui-bg3); | background:var(--sv-ui-bg3); | ||
} | } | ||
.sv-tab[aria-selected="true"], | .sv-tab[aria-selected="true"], | ||
.mw-parser-output .sv-tab[aria-selected="true"]{ | .mw-parser-output .sv-tab[aria-selected="true"]{ | ||
background:var(--sv-ui-bg3); | background:var(--sv-ui-bg3); | ||
border-color:var(--sv-ui-accent); | border-color:var(--sv-ui-accent); | ||
} | } | ||
.sv-tabpanel, | .sv-tabpanel, | ||
.mw-parser-output .sv-tabpanel{ | .mw-parser-output .sv-tabpanel{ | ||
padding:10px 12px; | padding:10px 12px; | ||
border-radius:var(--sv-ui-rad-md); | border-radius:var(--sv-ui-rad-md); | ||
border:1px solid var(--sv-ui-line1); | border:1px solid var(--sv-ui-line1); | ||
background:var(--sv-ui-bg1); | background:var(--sv-ui-bg1); | ||
} | } | ||
| Line 1,112: | Line 609: | ||
.sv-disclose-btn:focus-visible, | .sv-disclose-btn:focus-visible, | ||
.mw-parser-output .sv-disclose-btn:focus-visible{ | .mw-parser-output .sv-disclose-btn:focus-visible{ | ||
outline:2px solid var(--sv-ui-accent2); | outline:2px solid var(--sv-ui-accent2); | ||
outline-offset:2px; | outline-offset:2px; | ||
border-radius:10px; | border-radius:10px; | ||
} | } | ||
/* ---------------------------------------------------------------------------- | |||
/* --------------------------------------------------------------------------- | 7) SV Tip Trigger (shared component) | ||
SV Tip Trigger (shared component) | |||
- Used for Notes / inline tips that open via Universal Popups (Common.js) | - Used for Notes / inline tips that open via Universal Popups (Common.js) | ||
- The hidden source node (.sv-tip-pop) is emitted by Lua; JS clones its body | - The hidden source node (.sv-tip-pop) is emitted by Lua; JS clones its body | ||
--------------------------------------------------------------------------- */ | ---------------------------------------------------------------------------- */ | ||
.sv-tip, | .sv-tip, | ||
.mw-parser-output .sv-tip{ | .mw-parser-output .sv-tip{ | ||
position:relative; | position:relative; | ||
display:inline-flex; | display:inline-flex; | ||
align-items:center; | align-items:center; | ||
flex:0 0 auto; | flex:0 0 auto; | ||
} | } | ||
.sv-tip-btn, | .sv-tip-btn, | ||
.mw-parser-output .sv-tip-btn{ | .mw-parser-output .sv-tip-btn{ | ||
display:inline-flex; | display:inline-flex; | ||
align-items:center; | align-items:center; | ||
justify-content:center; | justify-content:center; | ||
border:1px solid var(--sv-ui-line2); | |||
background:var(--sv-ui-bg2); | |||
color:var(--sv-ui-text1); | |||
cursor:pointer; | |||
border | user-select:none; | ||
cursor:pointer; | |||
user-select:none; | |||
} | } | ||
.sv-tip-btn:hover, | .sv-tip-btn:hover, | ||
.mw-parser-output .sv-tip-btn:hover{ | .mw-parser-output .sv-tip-btn:hover{ | ||
background:var(--sv-ui-bg3); | background:var(--sv-ui-bg3); | ||
} | } | ||
.sv-tip-btn:focus-visible, | .sv-tip-btn:focus-visible, | ||
.mw-parser-output .sv-tip-btn:focus-visible{ | .mw-parser-output .sv-tip-btn:focus-visible{ | ||
outline:2px solid var(--sv-ui-accent2); | outline:2px solid var(--sv-ui-accent2); | ||
outline-offset:2px; | outline-offset:2px; | ||
} | |||
.sv-tip-btn--icon, | |||
.sv-tip-btn:not(.sv-tip-btn--pill), | |||
.mw-parser-output .sv-tip-btn--icon, | |||
.mw-parser-output .sv-tip-btn:not(.sv-tip-btn--pill){ | |||
width:28px; | |||
height:28px; | |||
border-radius:var(--sv-ui-rad-pill); | |||
} | |||
.sv-tip-btn--pill, | |||
.mw-parser-output .sv-tip-btn--pill{ | |||
width:auto; | |||
height:auto; | |||
min-width:0; | |||
min-height:0; | |||
padding:1px 8px; | |||
border-radius:var(--sv-ui-rad-pill); | |||
font-weight:900; | |||
font-size:13px; | |||
line-height:1.25; | |||
letter-spacing:0.15px; | |||
white-space:nowrap; | |||
background:var(--sv-ui-pill-bg); | |||
background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00)); | |||
box-shadow:var(--sv-ui-pill-shadow); | |||
border-color:var(--sv-ui-pill-line); | |||
color:var(--sv-ui-text2); | |||
} | |||
/* Compatibility: existing overcap pill should behave like shared pill trigger */ | |||
.sv-overcap-btn, | |||
.mw-parser-output .sv-overcap-btn{ | |||
width:auto; | |||
height:auto; | |||
min-width:0; | |||
min-height:0; | |||
padding:1px 8px; | |||
border-radius:var(--sv-ui-rad-pill); | |||
font-weight:900; | |||
font-size:13px; | |||
line-height:1.25; | |||
letter-spacing:0.15px; | |||
white-space:nowrap; | |||
background:var(--sv-ui-pill-bg); | |||
background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00)); | |||
box-shadow:var(--sv-ui-pill-shadow); | |||
border-color:var(--sv-ui-pill-line); | |||
color:var(--sv-ui-text2); | |||
} | } | ||
| Line 1,163: | Line 704: | ||
.sv-ico--info, | .sv-ico--info, | ||
.mw-parser-output .sv-ico--info{ | .mw-parser-output .sv-ico--info{ | ||
width:18px; | width:18px; | ||
height:18px; | height:18px; | ||
border-radius:999px; | border-radius:999px; | ||
display:flex; | display:flex; | ||
align-items:center; | align-items:center; | ||
justify-content:center; | justify-content:center; | ||
font-style:normal; | |||
font-style:normal; | font-weight:900; | ||
font-weight:900; | font-size:12px; | ||
font-size:12px; | line-height:1; | ||
line-height:1; | |||
} | } | ||
/* ---------------------------------------------------------------------------- | |||
/* --------------------------------------------------------------------------- | 8) SV Disclosure (shared source markup) | ||
SV Disclosure (shared source markup) | ---------------------------------------------------------------------------- */ | ||
- | |||
--------------------------------------------------------------------------- */ | |||
.sv-disclose, | .sv-disclose, | ||
.mw-parser-output .sv-disclose{position:relative;} | .mw-parser-output .sv-disclose{ | ||
position:relative; | |||
} | |||
.sv-disclose-btn, | .sv-disclose-btn, | ||
.mw-parser-output .sv-disclose-btn{ | .mw-parser-output .sv-disclose-btn{ | ||
display:flex; | display:flex; | ||
align-items:center; | align-items:center; | ||
justify-content:space-between; | justify-content:space-between; | ||
gap:12px; | gap:12px; | ||
width:100%; | width:100%; | ||
padding:10px 12px; | padding:10px 12px; | ||
border-radius:var(--sv-ui-rad-md); | border-radius:var(--sv-ui-rad-md); | ||
border:1px solid var(--sv-ui-line1); | border:1px solid var(--sv-ui-line1); | ||
background:var(--sv-ui-bg1); | background:var(--sv-ui-bg1); | ||
box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); | box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); | ||
background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00)); | background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00)); | ||
color:var(--sv-ui-text1); | color:var(--sv-ui-text1); | ||
font-weight:900; | font-weight:900; | ||
cursor:pointer; | cursor:pointer; | ||
user-select:none; | user-select:none; | ||
} | } | ||
.sv-disclose-btn:hover, | .sv-disclose-btn:hover, | ||
.mw-parser-output .sv-disclose-btn:hover{ | .mw-parser-output .sv-disclose-btn:hover{ | ||
background:var(--sv-ui-bg2); | background:var(--sv-ui-bg2); | ||
} | |||
.sv-disclose-btn--compact, | |||
.mw-parser-output .sv-disclose-btn--compact{ | |||
border-radius:var(--sv-ui-rad-pill); | |||
min-height:36px; | |||
padding:0 12px; | |||
} | } | ||
.sv-disclose-count, | .sv-disclose-count, | ||
.mw-parser-output .sv-disclose-count{ | .mw-parser-output .sv-disclose-count{ | ||
font-weight:800; | font-weight:800; | ||
font-size:13px; | font-size:13px; | ||
color:var(--sv-ui-text3); | color:var(--sv-ui-text3); | ||
white-space:nowrap; | white-space:nowrap; | ||
} | } | ||
/* | /* ---------------------------------------------------------------------------- | ||
9) Universal Popups v3.2 | |||
---------------------------------------------------------------------------- */ | |||
- | |||
- | |||
- | |||
- | |||
- | |||
.sv-uipop-v3 .sv-def-tip, | .sv-uipop-v3 .sv-def-tip, | ||
.sv-uipop-v3 .sv-pop-tip{ | .sv-uipop-v3 .sv-pop-tip{ | ||
display:none !important; | display:none !important; | ||
} | } | ||
/* Prevent long-press select/callout on popup triggers + controls | /* Prevent long-press select/callout on popup triggers + controls */ | ||
.sv-tip-btn, | .sv-tip-btn, | ||
.sv-disclose-btn, | .sv-disclose-btn, | ||
| Line 1,248: | Line 780: | ||
.sv-uipop-title, | .sv-uipop-title, | ||
.sv-uipop-title-link{ | .sv-uipop-title-link{ | ||
-webkit-touch-callout:none; | -webkit-touch-callout:none; | ||
-webkit-user-select:none; | -webkit-user-select:none; | ||
user-select:none; | user-select:none; | ||
touch-action:manipulation; | touch-action:manipulation; | ||
} | } | ||
| Line 1,257: | Line 789: | ||
.sv-disclose-btn *, | .sv-disclose-btn *, | ||
.sv-uipop-head *{ | .sv-uipop-head *{ | ||
-webkit-user-select:none; | -webkit-user-select:none; | ||
user-select:none; | user-select:none; | ||
} | } | ||
.sv-uipop{ | .sv-uipop{ | ||
position:fixed; | position:fixed; | ||
z-index:9000; | z-index:9000; | ||
top:0; | top:0; | ||
left:0; | left:0; | ||
box-sizing:border-box; | box-sizing:border-box; | ||
border-radius:var(--sv-ui-rad-lg); | |||
border-radius:var(--sv-ui-rad-lg); | border:1px solid var(--sv-ui-pop-line, var(--sv-ui-line2)); | ||
border:1px solid var(--sv-ui-pop-line, var(--sv-ui-line2)); | background:var(--sv-ui-pop-bg, var(--sv-ui-bg0)); | ||
background:var(--sv-ui-pop-bg, var(--sv-ui-bg0)); | background-image: | ||
background-image: | radial-gradient(900px 260px at 35% 0, rgba(106,166,255,0.14), rgba(0,0,0,0) 60%), | ||
radial-gradient(900px 260px at 35% 0, rgba(106,166,255,0.14), rgba(0,0,0,0) 60%), | linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00)); | ||
linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00)); | color:var(--sv-ui-text1); | ||
box-shadow: | |||
color:var(--sv-ui-text1); | var(--sv-ui-pop-shadow, 0 10px 30px rgba(0,0,0,0.35)), | ||
box-shadow:var(--sv-ui-pop-shadow, 0 10px 30px rgba(0,0,0,0.35)), | inset 0 1px 0 rgba(255,255,255,0.04); | ||
inset 0 1px 0 rgba(255,255,255,0.04); | overflow:hidden; | ||
overflow:hidden; | |||
} | } | ||
.sv-uipop[aria-hidden="true"]{display:none;} | .sv-uipop[aria-hidden="true"]{display:none;} | ||
.sv-uipop--sm, | .sv-uipop--sm, | ||
.sv-uipop--lg{ | .sv-uipop--lg{ | ||
width:240px; | width:240px; | ||
max-width:calc(100vw - 20px); | max-width:calc(100vw - 20px); | ||
} | } | ||
| Line 1,296: | Line 823: | ||
.sv-uipop--lg{max-height:min(70vh, 560px);} | .sv-uipop--lg{max-height:min(70vh, 560px);} | ||
.sv-uipop-head{ | .sv-uipop-head{ | ||
display:flex; | display:flex; | ||
align-items:center; | align-items:center; | ||
justify-content:center; | justify-content:center; | ||
padding:12px 12px; | padding:12px 12px; | ||
border-bottom:1px solid var(--sv-ui-line1); | border-bottom:1px solid var(--sv-ui-line1); | ||
background:var(--sv-ui-bg1); | background:var(--sv-ui-bg1); | ||
} | } | ||
| Line 1,309: | Line 835: | ||
.sv-uipop-title{ | .sv-uipop-title{ | ||
width:100%; | width:100%; | ||
text-align:center; | text-align:center; | ||
font-weight:900; | font-weight:900; | ||
font-size:16px; | font-size:16px; | ||
letter-spacing:0.02em; | letter-spacing:0.02em; | ||
color:var(--color-emphasized, var(--sv-ui-text1)); | color:var(--color-emphasized, var(--sv-ui-text1)); | ||
} | } | ||
.sv-uipop-title a.sv-uipop-title-link{ | .sv-uipop-title a.sv-uipop-title-link{ | ||
color:inherit; | color:inherit; | ||
text-decoration:none; | text-decoration:none; | ||
} | } | ||
.sv-uipop-title a.sv-uipop-title-link:hover{ | .sv-uipop-title a.sv-uipop-title-link:hover{ | ||
text-decoration:underline; | text-decoration:underline; | ||
text-decoration-thickness:2px; | text-decoration-thickness:2px; | ||
text-underline-offset:2px; | text-underline-offset:2px; | ||
} | } | ||
.sv-uipop-body{ | .sv-uipop-body{ | ||
padding:10px 12px 12px; | padding:10px 12px 12px; | ||
font-size:13px; | font-size:13px; | ||
line-height:1.4; | line-height:1.4; | ||
color:var(--sv-ui-text2); | color:var(--sv-ui-text2); | ||
overflow:auto; | overflow:auto; | ||
overflow-wrap:anywhere; | overflow-wrap:anywhere; | ||
word-break:break-word; | word-break:break-word; | ||
-webkit-user-select:text; | -webkit-user-select:text; | ||
user-select:text; | user-select:text; | ||
} | } | ||
.sv-uipop-body--pre{white-space:pre-line;} | .sv-uipop-body--pre{white-space:pre-line;} | ||
.sv-uipop-body p, | .sv-uipop-body p, | ||
.sv-uipop-body ul, | .sv-uipop-body ul, | ||
| Line 1,353: | Line 877: | ||
.sv-uipop-body li{margin:0;} | .sv-uipop-body li{margin:0;} | ||
.sv-uipop a{ | .sv-uipop a{ | ||
color:var(--color-link, var(--sv-ui-accent)); | color:var(--color-link, var(--sv-ui-accent)); | ||
text-decoration:underline; | text-decoration:underline; | ||
text-decoration-thickness:2px; | text-decoration-thickness:2px; | ||
text-underline-offset:2px; | text-underline-offset:2px; | ||
} | } | ||
.sv-uipop a:hover{text-decoration-thickness:3px;} | .sv-uipop a:hover{text-decoration-thickness:3px;} | ||
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list){ | .sv-uipop :where(.sv-disclose-list, .sv-uipop-list){ | ||
margin:0; | margin:0; | ||
padding:0; | padding:0; | ||
list-style:none; | list-style:none; | ||
} | } | ||
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li{ | .sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li{ | ||
padding:6px 0; | padding:6px 0; | ||
border-top:1px solid var(--sv-ui-line1); | border-top:1px solid var(--sv-ui-line1); | ||
font-size:13px; | font-size:13px; | ||
color:var(--sv-ui-text2); | color:var(--sv-ui-text2); | ||
} | } | ||
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li:first-child{ | .sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li:first-child{ | ||
border-top:none; | border-top:none; | ||
padding-top:0; | padding-top:0; | ||
} | } | ||
.sv-uipop :where(.sv-disclose-group-title, .sv-uipop-group-title){ | .sv-uipop :where(.sv-disclose-group-title, .sv-uipop-group-title){ | ||
padding-top:10px; | padding-top:10px; | ||
font-weight:900; | font-weight:900; | ||
font-size:12px; | font-size:12px; | ||
letter-spacing:0.02em; | letter-spacing:0.02em; | ||
color:var(--sv-ui-text1); | color:var(--sv-ui-text1); | ||
} | } | ||
.sv-uipop .sv-disclose-sections{ | .sv-uipop .sv-disclose-sections{ | ||
display:flex; | display:flex; | ||
flex-direction:column; | flex-direction:column; | ||
gap:10px; | gap:10px; | ||
} | } | ||
.sv-uipop .sv-disclose-sec + .sv-disclose-sec{ | .sv-uipop .sv-disclose-sec + .sv-disclose-sec{ | ||
padding-top:10px; | padding-top:10px; | ||
border-top:1px solid var(--sv-ui-line1); | border-top:1px solid var(--sv-ui-line1); | ||
} | } | ||
.sv-uipop .sv-disclose-sec-title{ | .sv-uipop .sv-disclose-sec-title{ | ||
font-weight:900; | font-weight:900; | ||
font-size:13px; | font-size:13px; | ||
letter-spacing:0.02em; | letter-spacing:0.02em; | ||
color:var(--sv-ui-text1); | color:var(--sv-ui-text1); | ||
margin:0 0 4px 0; | margin:0 0 4px 0; | ||
} | } | ||
.sv-uipop .sv-disclose-sec-items{ | .sv-uipop .sv-disclose-sec-items{ | ||
font-size:13px; | font-size:13px; | ||
line-height:1.45; | line-height:1.45; | ||
color:var(--sv-ui-text2); | color:var(--sv-ui-text2); | ||
} | } | ||
.sv-uipop .sv-disclose-item{display:inline;} | .sv-uipop .sv-disclose-item{display:inline;} | ||
.sv-uipop .sv-disclose-sfx{opacity:0.78;} | |||
.sv-uipop .sv-tip-pop-body{white-space:pre-line;} | |||
/* ---------------------------------------------------------------------------- | |||
10) Legacy safety blocks (kept, unified to tokens) | |||
---------------------------------------------------------------------------- */ | |||
.mw-parser-output .playtest-info-box{ | |||
max-width:100%; | |||
margin:0 0 10px 0; | |||
border:1px solid var(--sv-ui-line1); | |||
border-radius:var(--sv-ui-rad-md); | |||
box-shadow:0 1px 3px rgba(0,0,0,0.10); | |||
background:var(--sv-ui-bg1); | |||
padding:10px; | |||
text-align:center; | |||
color:var(--color-base, var(--sv-ui-text2)); | |||
overflow-wrap:anywhere; | |||
word-break:break-word; | |||
} | |||
.mw-parser-output .header-container-outer{ | |||
max-width:100%; | |||
margin:1px; | |||
border:2px solid var(--sv-ui-line2); | |||
border-radius:var(--sv-ui-rad-lg); | |||
box-shadow:0 2px 6px rgba(0,0,0,0.25); | |||
background:var(--sv-ui-bg1); | |||
} | |||
.sv- | .mw-parser-output .header-container-middle{ | ||
background:var(--sv-ui-bg1); | |||
text-align:center; | |||
padding:1px; | |||
border-radius:calc(var(--sv-ui-rad-lg) - 2px); | |||
overflow-wrap:anywhere; | |||
word-break:break-word; | |||
} | |||
.mw-parser-output .header-container-inner{ | |||
background:linear-gradient(180deg, var(--sv-ui-bg3), var(--sv-ui-bg2)); | |||
color:var(--sv-ui-text1); | |||
text-align:center; | |||
padding:1px; | |||
border-radius:calc(var(--sv-ui-rad-lg) - 2px); | |||
overflow-wrap:anywhere; | |||
word-break:break-word; | |||
font-size:300%; | |||
} | |||
.mw-parser-output table.custom-table{ | |||
float:none; | |||
border:2px solid var(--sv-ui-line2); | |||
border-radius:var(--sv-ui-rad-lg); | |||
padding:2px; | |||
box-shadow:0 2px 6px rgba(0,0,0,0.25); | |||
margin:1em auto; | |||
text-align:center; | |||
border-collapse:separate; | |||
border-spacing:0; | |||
overflow:hidden; | |||
-webkit-user-select:text; | |||
user-select:text; | |||
background:var(--sv-ui-bg1); | |||
color:var(--color-base, var(--sv-ui-text2)); | |||
} | |||
.mw-parser-output table.custom-table > tbody > tr:nth-child(1) > th, | |||
.mw-parser-output table.custom-table > tbody > tr.middle-header > th{ | |||
background:linear-gradient(180deg, var(--sv-ui-bg3), var(--sv-ui-bg2)); | |||
color:var(--sv-ui-text1); | |||
text-align:center; | |||
padding:6px; | |||
border-top-left-radius:8px; | |||
border-top-right-radius:8px; | |||
overflow-wrap:anywhere; | |||
word-break:break-word; | |||
} | |||
.mw-parser-output table.custom-table > tbody > tr:nth-child(1) > th{font-size:120%;} | |||
.mw-parser-output table.custom-table > tbody > tr.middle-header > th{font-size:110%;} | |||
.mw-parser-output table.custom-table > tbody > tr:nth-child(2) > th, | |||
.mw-parser-output table.custom-table > tbody > tr > td{ | |||
text-align:center; | |||
padding:4px; | |||
border-bottom:1px solid var(--sv-ui-line1); | |||
} | |||
/* ---------------------------------------------------------------------------- | |||
11) Hero Infobox System (Skills + Passives) — legacy table infobox | |||
- Kept for compatibility; this is legacy, not the new component ownership model. | |||
---------------------------------------------------------------------------- */ | |||
/* Base infobox */ | |||
table.spiritvale-skill-infobox, | |||
table.spiritvale-passive-infobox{ | |||
border-collapse:separate; | |||
border-spacing:0; | |||
width:100%; | |||
margin:1.25em auto; | |||
border-radius:var(--sv-ui-rad-lg); | |||
overflow:hidden; | |||
border:1px solid var(--sv-card-border); | |||
box-shadow:0 4px 12px rgba(0,0,0,0.45); | |||
font-size:0.95em; | |||
background:var(--sv-base); | |||
color:var(--sv-ui-text1); | |||
} | |||
table.spiritvale-skill-infobox > tbody > tr, | |||
table.spiritvale-passive-infobox > tbody > tr{ | |||
border-bottom:1px solid var(--sv-row-border); | |||
} | |||
table.spiritvale-skill-infobox > tbody > tr:last-child, | |||
table.spiritvale-passive-infobox > tbody > tr:last-child{ | |||
border-bottom:none; | |||
} | |||
table.spiritvale-skill-infobox > tbody > tr:not(.spiritvale-infobox-main) > th:not(.spiritvale-infobox-section-header), | |||
table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > th:not(.spiritvale-infobox-section-header){ | |||
width:26%; | |||
padding:0.45em 0.85em; | |||
text-align:left; | |||
font-weight:600; | |||
white-space:nowrap; | |||
} | |||
table.spiritvale-skill-infobox > tbody > tr > td, | |||
table.spiritvale-passive-infobox > tbody > tr > td{ | |||
padding:0.45em 0.85em; | |||
text-align:left; | |||
} | |||
table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > td, | |||
table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header), | |||
table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > td, | |||
table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header){ | |||
background-color:var(--sv-ui-bg1); | |||
} | |||
/* Hero band */ | |||
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > th, | |||
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > td, | |||
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th, | |||
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td, | |||
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th, | |||
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td, | |||
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th, | |||
table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td{ | |||
background:var(--sv-base); | |||
color:var(--sv-ui-text1); | |||
padding:0.9em 1.1em; | |||
text-align:center; | |||
vertical-align:middle; | |||
} | |||
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row, | |||
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row{ | |||
border-bottom:none !important; | |||
} | |||
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th, | |||
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th{ | |||
padding-bottom:0.55em; | |||
} | |||
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td, | |||
table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td{ | |||
padding:0.55em 1.1em; | |||
} | |||
.spiritvale-infobox-title{ | |||
font-size:1.25em; | |||
font-weight:600; | |||
} | |||
.spiritvale-infobox-description{ | |||
font-size:1.05em; | |||
font-style:italic; | |||
text-align:center; | |||
max-width:42em; | |||
margin:0 auto; | |||
opacity:0.95; | |||
} | |||
/* Skills sizing + list layout */ | |||
table.spiritvale-skill-infobox{ | |||
max-width:var(--sv-skill-width); | |||
table-layout:fixed; | |||
} | |||
table.spiritvale-skill-infobox.sv-skill-card{width:100%;} | |||
table.spiritvale-skill-infobox.sv-skill-inlist{margin:0.35em auto 1.15em;} | |||
@media (min-width:850px){ | |||
:root{--sv-skill-width:75%;} | |||
.mw-parser-output table.spiritvale-skill-infobox.sv-skill-card, | |||
.mw-parser-output table.spiritvale-skill-infobox.sv-skill-inlist{ | |||
width:var(--sv-skill-width); | |||
max-width:var(--sv-skill-width); | |||
} | |||
} | |||
/* Standardized slot grid */ | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) tr.sv-slot-row > td.sv-slot-cell{ | |||
padding:0 !important; | |||
background:var(--sv-base) !important; | |||
color:var(--sv-ui-text1); | |||
} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot-grid{ | |||
display:grid; | |||
grid-template-columns:1fr 1fr; | |||
grid-auto-flow:row dense; | |||
gap:0.55em; | |||
width:100%; | |||
box-sizing:border-box; | |||
background:var(--sv-base); | |||
padding:0.80em; | |||
} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot{ | |||
min-width:0; | |||
display:flex; | |||
box-sizing:border-box; | |||
background:var(--sv-surface) !important; | |||
color:var(--sv-ui-text1) !important; | |||
border:1px solid var(--sv-gridline); | |||
border-radius:var(--sv-ui-rad-md); | |||
} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot-grid > .sv-slot.sv-slot--full{ | |||
grid-column:1 / -1; | |||
} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot--empty .sv-slot__body{ | |||
min-height:3.2em; | |||
} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot__body{ | |||
width:100%; | |||
height:100%; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
text-align:center; | |||
padding:0.85em; | |||
box-sizing:border-box; | |||
} | |||
/* Hero bar layout */ | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-herobar-1-wrap{ | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
gap:0.65em; | |||
} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-herobar-icon{line-height:0;} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-herobar-icon img{vertical-align:middle;} | |||
/* Tooltip scopes + triggers (legacy infobox only) */ | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-content{display:none;} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop{ | |||
position:fixed; | |||
z-index:99999; | |||
max-width:min(380px, calc(100vw - 16px)); | |||
max-height:60vh; | |||
overflow:auto; | |||
padding:10px 12px; | |||
border-radius:var(--sv-ui-rad-md); | |||
border:1px solid var(--sv-ui-line2); | |||
background:var(--sv-ui-bg0); | |||
color:var(--sv-ui-text1); | |||
box-shadow:0 10px 30px rgba(0,0,0,0.35); | |||
font-size:13px; | |||
line-height:1.35; | |||
} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop .sv-tip-title{font-weight:700;margin-bottom:6px;} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop .sv-tip-section{margin-top:8px;} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop .sv-tip-label{font-weight:700;display:block;margin-bottom:2px;opacity:0.95;} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-scope{position:relative;} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-btn{ | |||
cursor:pointer; | |||
user-select:none; | |||
-webkit-appearance:none; | |||
appearance:none; | |||
font:inherit; | |||
color:inherit; | |||
} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-btn:focus-visible{ | |||
outline:2px solid rgba(255,255,255,0.25); | |||
outline-offset:2px; | |||
} | |||
/* Module: icon + name layout */ | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-1-wrap{ | |||
display:grid; | |||
grid-template-columns:auto auto; | |||
grid-template-rows:auto auto; | |||
column-gap:0.65em; | |||
row-gap:0.35em; | |||
align-items:center; | |||
justify-content:center; | |||
} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-icon{ | |||
grid-column:1; | |||
grid-row:1; | |||
width:80px; | |||
height:80px; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
line-height:0; | |||
} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-icon img{ | |||
max-width:80px; | |||
max-height:80px; | |||
width:100%; | |||
height:100%; | |||
object-fit:contain; | |||
} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-text{ | |||
grid-column:2; | |||
grid-row:1; | |||
display:flex; | |||
flex-direction:column; | |||
align-items:center; | |||
} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-title-row{ | |||
display:inline-flex; | |||
align-items:center; | |||
justify-content:center; | |||
gap:0.45em; | |||
} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-pill-row--req{ | |||
grid-column:1 / -1; | |||
grid-row:2; | |||
justify-self:center; | |||
margin-top:2px; | |||
} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-tip-btn--notes{ | |||
display:inline-flex; | |||
align-items:center; | |||
justify-content:center; | |||
min-width:30px; | |||
height:30px; | |||
border-radius:var(--sv-ui-rad-pill); | |||
border:1px solid var(--sv-ui-line2); | |||
background:var(--sv-ui-bg2); | |||
cursor:pointer; | |||
} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-tip-btn--notes:hover{ | |||
background:var(--sv-ui-bg3); | |||
} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-tip-btn--notes:focus-visible{ | |||
outline:2px solid rgba(255,255,255,0.28); | |||
outline-offset:2px; | |||
} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-ico--info{ | |||
width:22px; | |||
height:22px; | |||
border-radius:var(--sv-ui-rad-pill); | |||
display:inline-flex; | |||
align-items:center; | |||
justify-content:center; | |||
font-weight:900; | |||
font-size:15px; | |||
line-height:1; | |||
background:var(--sv-ui-accent2); | |||
color:#081018; | |||
} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-pill--req{ | |||
display:inline-flex; | |||
align-items:center; | |||
} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-pill--req::after{ | |||
content:" ▼"; | |||
font-weight:normal; | |||
font-size:0.8em; | |||
} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-description{ | |||
font-size:1.05em; | |||
font-style:italic; | |||
max-width:42em; | |||
margin:0 auto; | |||
line-height:1.35; | |||
opacity:0.95; | |||
} | |||
/* Soft white + outline */ | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot, | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot *, | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) > tbody > tr.sv-slot-row, | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) > tbody > tr.sv-hero-title-row, | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) > tbody > tr.sv-hero-desc-row{ | |||
color:var(--sv-text-soft) !important; | |||
text-shadow:var(--sv-text-outline); | |||
} | |||
/* Shared pill look (legacy infobox system only) */ | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) | |||
:where(.sv-type-label, .sv-source-pill, .sv-m4-label, .sv-sm-label, .sv-sm-flag, .sv-pill, .sv-pill--req){ | |||
width:auto; | |||
display:inline-block; | |||
max-width:100%; | |||
white-space:nowrap; | |||
padding:0.18em 0.35em; | |||
border-radius:var(--sv-ui-rad-sm); | |||
font-weight:800; | |||
text-transform:uppercase; | |||
letter-spacing:0.03em; | |||
font-size:0.72em; | |||
line-height:1.15; | |||
background:var(--sv-pill); | |||
border:1px solid var(--sv-ui-line2); | |||
color:var(--sv-ui-text1); | |||
} | |||
/* Legacy level selector */ | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) | |||
.module-level-selector .sv-level-ui{ | |||
width:100%; | |||
margin:0 !important; | |||
display:flex; | |||
flex-direction:column; | |||
gap:0.3em; | |||
} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) | |||
.module-level-selector .sv-level-label{ | |||
font-weight:600; | |||
} | |||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) | |||
.module-level-selector .sv-level-ui-single .sv-level-slider-single{ | |||
min-height:0.45em; | |||
} | |||
/* Skill Type (Hero Bar Slot 2) */ | |||
table.spiritvale-skill-infobox .hero-bar-module-2 .hero-bar-module-body, | |||
table.spiritvale-skill-infobox .module-skill-type{ | |||
width:100%; | |||
} | |||
table.spiritvale-skill-infobox .module-skill-type .sv-type-grid{ | |||
width:100%; | |||
margin:0 !important; | |||
box-sizing:border-box; | |||
display:grid; | |||
grid-template-columns:repeat(3, minmax(0, 1fr)); | |||
gap:0.50em; | |||
padding:0.40em; | |||
justify-items:center; | |||
align-items:center; | |||
} | |||
table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk{ | |||
display:flex; | |||
flex-direction:column; | |||
align-items:center; | |||
justify-content:center; | |||
text-align:center; | |||
padding:0.20em 0.35em; | |||
gap:0.50em; | |||
min-width:0; | |||
} | |||
table.spiritvale-skill-infobox .module-skill-type .sv-type-value{ | |||
font-weight:400; | |||
font-size:1.02em; | |||
line-height:1.25; | |||
white-space:normal; | |||
overflow-wrap:anywhere; | |||
word-break:break-word; | |||
} | |||
table.spiritvale-skill-infobox .module-skill-type .sv-type-damage{order:1;} | |||
table.spiritvale-skill-infobox .module-skill-type .sv-type-element{order:2;} | |||
table.spiritvale-skill-infobox .module-skill-type .sv-type-hits{order:3;} | |||
table.spiritvale-skill-infobox .module-skill-type .sv-type-target{order:4;} | |||
table.spiritvale-skill-infobox .module-skill-type .sv-type-cast{order:5;} | |||
table.spiritvale-skill-infobox .module-skill-type .sv-type-combo{order:6;} | |||
/* Special Mechanics */ | |||
table.spiritvale-skill-infobox .sv-slot.module-special-mechanics .sv-slot__body{ | |||
width:100%; | |||
height:100%; | |||
} | |||
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-root{width:100%;} | |||
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-empty{ | |||
width:100%; | |||
font-weight:650; | |||
opacity:0.95; | |||
text-align:center; | |||
} | |||
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout{ | |||
width:100%; | |||
display:grid; | |||
gap:0.55em; | |||
align-items:start; | |||
justify-items:stretch; | |||
} | |||
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-1{ | |||
grid-template-columns:1fr; | |||
justify-items:center; | |||
} | |||
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2{ | |||
grid-template-columns:1fr 1fr; | |||
} | |||
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col{ | |||
width:100%; | |||
min-width:0; | |||
display:flex; | |||
flex-direction:column; | |||
align-items:center; | |||
justify-content:flex-start; | |||
text-align:center; | |||
gap:0.40em; | |||
} | |||
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-mech{ | |||
width:100%; | |||
min-width:0; | |||
display:flex; | |||
flex-direction:column; | |||
align-items:center; | |||
justify-content:flex-start; | |||
text-align:center; | |||
gap:0.50em; | |||
} | |||
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-value{ | |||
width:100%; | |||
text-align:center; | |||
font-weight:500; | |||
font-size:0.98em; | |||
line-height:1.2; | |||
opacity:0.98; | |||
white-space:normal; | |||
overflow-wrap:anywhere; | |||
word-break:break-word; | |||
} | |||
.sv- | @media (min-width:850px){ | ||
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2{ | |||
grid-template-columns:minmax(8.5em, 0.85fr) minmax(16em, 1.15fr); | |||
} | |||
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col-mech{ | |||
display:grid; | |||
grid-template-columns:repeat(auto-fit, minmax(9.5em, 1fr)); | |||
gap:0.55em 0.75em; | |||
align-items:start; | |||
justify-items:center; | |||
align-content:center; | |||
text-align:center; | |||
} | |||
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col-mech .sv-sm-mech{width:100%;} | |||
} | } | ||