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 |
||
| (9 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* | /* SpiritVale Wiki — Common.css */ | ||
SpiritVale Wiki — Common.css | /* Role: shared tokens, primitives, utilities, and interactive anatomy */ | ||
/* Scope: sitewide SpiritVale UI foundations only */ | |||
- | /* -------------------------------------------------------------------------- */ | ||
- | /* Canonical ownership map */ | ||
/* -------------------------------------------------------------------------- */ | |||
/* Common.css is the sitewide foundation layer. It owns: */ | |||
/* - canonical breakpoint definitions and responsive policy comments */ | |||
/* - shared design tokens and utility primitives */ | |||
/* - reusable interactive anatomy used by multiple modules/templates */ | |||
/* - global parser-output treatments that should behave the same everywhere */ | |||
/* */ | |||
/* Common.css does NOT own: */ | |||
/* - Citizen skin theme/chrome styling (Citizen.css) */ | |||
/* - module-specific card/layout rules (GameInfo, PatchHighlights, etc.) */ | |||
/* - template-specific presentation rules (Definitions, ClassInfobox, etc.) */ | |||
/* */ | |||
/* Responsive cleanup note: this file is the source of truth for breakpoint */ | |||
/* meaning. Its own responsive selectors should model the canonical ladder */ | |||
/* and shared UI should follow that ladder everywhere else. */ | |||
/* -------------------------------------------------------------------------- */ | |||
/* Responsive policy (canonical) */ | |||
/* -------------------------------------------------------------------------- */ | |||
/* SpiritVale uses a mobile-first six-viewpoint ladder aligned to Tailwind's */ | |||
/* defaults. */ | |||
/* */ | |||
/* Viewpoints */ | |||
/* - default: 0px-639px (phones / smallest layout) */ | |||
/* - sm: 640px-767px (large phones / small tablets) */ | |||
/* - md: 768px-1023px(tablets / narrow landscape) */ | |||
/* - lg: 1024px-1279px(laptop / desktop start) */ | |||
/* - xl: 1280px-1535px(wide desktop) */ | |||
/* - 2xl: 1536px+ (very wide desktop) */ | |||
/* */ | |||
/* Implementation rule: write defaults for the smallest layout whenever */ | |||
/* practical, then layer upward with canonical breakpoints. */ | |||
/* -------------------------------------------------------------------------- */ | |||
/* -------------------------------------------------------------------------- | |||
1) SpiritVale tokens | /* -------------------------------------------------------------------------- */ | ||
/* 1) SpiritVale tokens */ | |||
/* -------------------------------------------------------------------------- */ | |||
:root{ | :root{ | ||
/* | /* Surface ladder. | ||
--sv-ui-bg0:#0f172a; | bg0 = site background only | ||
--sv-ui-bg1:#1f2937; | bg1 = main component surface | ||
--sv-ui-bg2:#273449; | bg2 = nested/grouped panel surface | ||
--sv-ui-bg3:#2e3f59; | bg3 = deep inset / pill surface | ||
bg4 = highest emphasis / selected / strong highlight surface | |||
*/ | |||
--sv-ui-bg0:#0f172a; | |||
--sv-ui-bg1:#1f2937; | |||
--sv-ui-bg2:#273449; | |||
--sv-ui-bg3:#2e3f59; | |||
--sv-ui-bg4:#4e6d97; | |||
--sv-ui- | |||
/* | /* Border / frame ladder. */ | ||
--sv-ui- | --sv-ui-line1:#3b4b63; | ||
--sv-ui- | --sv-ui-line2:#4b6388; | ||
--sv-ui- | --sv-ui-line3:#7d93b5; | ||
--sv-ui- | /* Text ladder. */ | ||
--sv-ui- | --sv-ui-text1:#f5f9ff; | ||
--sv-ui- | --sv-ui-text2:#d7e2f4; | ||
--sv-ui- | --sv-ui-text3:#b6c6e0; | ||
--sv-ui-text4:#7f9fcc; | |||
--sv-ui- | /* Accent ladder. */ | ||
--sv-ui-accent:#6aa6ff; | |||
--sv-ui-accent2:#8cbcff; | |||
--sv-ui-accent3:#e6f0ff; | |||
/* | /* Popover tokens. */ | ||
--sv- | --sv-ui-pop-bg:var(--sv-ui-bg2); | ||
--sv- | --sv-ui-pop-line:var(--sv-ui-line2); | ||
--sv-ui-pop-shadow:0 10px 30px rgba(0,0,0,0.35); | |||
--sv- | /* Radius tokens. */ | ||
--sv- | --sv-ui-rad-sm:10px; | ||
--sv-ui-rad-md:14px; | |||
--sv-ui-rad-lg:18px; | |||
--sv-ui-rad-pill:999px; | |||
/* Shared shadow tokens. */ | |||
--sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40); | |||
/* Shared pill tokens. */ | |||
--sv-ui-pill-bg:var(--sv-ui-bg3); | |||
--sv-pill- | --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); | |||
- | |||
} | } | ||
/* | /* Fallback light skin mapping. */ | ||
.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-bg4:#6888b4; | |||
--sv-ui-line1:#4b6388; | --sv-ui-line1:#4b6388; | ||
--sv-ui-line2:#5f7fb4; | --sv-ui-line2:#5f7fb4; | ||
--sv-ui-line3:#8ea7ca; | |||
--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-text4:#8ba8d1; | |||
--sv-ui-accent:#8cbcff; | --sv-ui-accent:#8cbcff; | ||
--sv-ui-accent2:#b0d0ff; | --sv-ui-accent2:#b0d0ff; | ||
--sv-ui-accent3:#f2f7ff; | |||
} | } | ||
/* -------------------------------------------------------------------------- | /* -------------------------------------------------------------------------- */ | ||
2) Sitewide link | /* 2) Sitewide link treatment */ | ||
/* -------------------------------------------------------------------------- */ | |||
.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; | ||
text-decoration-skip-ink:auto; | |||
transition: | |||
color 120ms ease, | |||
text-decoration-thickness 120ms ease, | |||
text-underline-offset 120ms ease; | |||
} | } | ||
.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; | ||
text-underline-offset:3px; | |||
} | } | ||
.mw-parser-output a:focus-visible{ | .mw-parser-output a:focus-visible{ | ||
outline:2px solid var(--sv-ui- | outline:2px solid var(--sv-ui-accent3); | ||
outline-offset:2px; | outline-offset:2px; | ||
border-radius:6px; | border-radius:6px; | ||
box-shadow:0 0 0 3px rgba(230,240,255,0.12); | |||
} | } | ||
/* -------------------------------------------------------------------------- | /* -------------------------------------------------------------------------- */ | ||
3) Shared primitives | /* 3) Shared primitives */ | ||
/* -------------------------------------------------------------------------- */ | |||
.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- | background:var(--sv-ui-pill-bg); | ||
border:1px solid var(--sv-ui- | border:1px solid var(--sv-ui-pill-line); | ||
box-shadow: | box-shadow:var(--sv-ui-pill-shadow); | ||
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: | color:var(--sv-ui-pill-text); | ||
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- | outline:2px solid var(--sv-ui-accent3); | ||
outline-offset:2px; | outline-offset:2px; | ||
border-radius: | border-radius:var(--sv-ui-rad-sm); | ||
} | } | ||
/* -------------------------------------------------------------------------- | /* -------------------------------------------------------------------------- */ | ||
/* 3a) Hover lift utility */ | |||
/* -------------------------------------------------------------------------- */ | |||
.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); | ||
} | } | ||
/* -------------------------------------------------------------------------- */ | |||
/* 3b) Right infobox wrapper */ | |||
/* -------------------------------------------------------------------------- */ | |||
/* -------------------------------------------------------------------------- | |||
.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; | ||
} | } | ||
.sv-card.sv-infobox-right.sv-infobox-right--md{max-width:260px;} | .sv-card.sv-infobox-right.sv-infobox-right--md{max-width:260px;} | ||
.sv-card.sv-infobox-right.sv-infobox-right--lg{max-width:320px;} | .sv-card.sv-infobox-right.sv-infobox-right--lg{max-width:320px;} | ||
/* -------------------------------------------------------------------------- | /* -------------------------------------------------------------------------- */ | ||
/* 4) Shared utilities */ | |||
/* -------------------------------------------------------------------------- */ | |||
.sv- | .sv-hidden, | ||
.mw-parser-output .sv-hidden{ | |||
display:none !important; | |||
} | } | ||
[hidden]{display:none !important;} | |||
} | |||
.sv- | .sv-miss, | ||
.mw-parser-output .sv-miss{ | |||
border- | display:inline-flex; | ||
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; | |||
} | } | ||
.sv- | .sv-img, | ||
.mw-parser-output .sv-img{ | |||
display:inline-flex; | |||
align-items:center; | |||
justify-content:center; | |||
} | } | ||
.sv- | .sv-img img, | ||
.mw-parser-output .sv-img img{ | |||
display:block; | |||
max-width:100%; | |||
height:auto; | |||
border-radius:var(--sv-ui-rad-sm); | |||
} | } | ||
.sv- | .sv-img--shadow img, | ||
.mw-parser-output .sv-img--shadow img{ | |||
box-shadow:0 10px 18px rgba(0,0,0,0.35); | |||
} | } | ||
/* -------------------------------------------------------------------------- */ | |||
/* 5) Shared level selector */ | |||
/* -------------------------------------------------------------------------- */ | |||
.sv-level-ui, | |||
.mw-parser-output .sv-level-ui{ | |||
display:flex; | |||
align-items:center; | |||
.mw-parser-output . | justify-content:center; | ||
gap:8px; | |||
flex-wrap:wrap; | |||
text-align:center; | |||
margin:0; | |||
text-align:center; | |||
} | } | ||
.mw-parser-output . | .sv-level-label, | ||
.mw-parser-output .sv-level-label{ | |||
margin: | margin:0; | ||
} | } | ||
.mw-parser-output . | .sv-level-label[data-sv-helper-text], | ||
.sv-level-ui .sv-level-label:not([data-sv-helper-text]), | |||
.mw-parser-output .sv-level-label[data-sv-helper-text], | |||
.mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text]){ | |||
display:inline-block; | |||
margin:0; | |||
padding:0; | |||
font-size:0; | |||
line-height:0; | |||
} | } | ||
. | .sv-level-ui .sv-level-label:not([data-sv-helper-text]), | ||
.mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text]){ | |||
position:static; | |||
top:auto; | |||
right:auto; | |||
bottom:auto; | |||
left:auto; | |||
transform:none; | |||
} | } | ||
.mw-parser-output | .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:12px; | |||
line-height:1.25; | |||
letter-spacing:0.15px; | |||
color:var(--sv-ui-text1); | |||
color: | |||
} | } | ||
. | .sv-level-ui .sv-level-label:not([data-sv-helper-text])::after, | ||
.mw-parser-output | .mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text])::after{ | ||
content:"Slide to set level"; | |||
display:inline-block; | |||
font-weight:900; | |||
font-size:12px; | |||
line-height:1.25; | |||
letter-spacing:0.15px; | |||
color:var(--sv-ui-text1); | |||
} | } | ||
. | .sv-level-slider, | ||
.mw-parser-output | .mw-parser-output .sv-level-slider{ | ||
position:relative; | |||
display:flex; | |||
flex-direction:row; | |||
align-items:center; | |||
gap:10px; | |||
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; | |||
min-width:0; | |||
width:auto; | |||
width: | box-sizing:border-box; | ||
margin:0; | |||
order:1; | |||
border | |||
box | |||
} | } | ||
.sv-level-endvalue, | |||
.mw-parser-output .sv-level-endvalue{ | |||
border- | flex:0 0 auto; | ||
order:2; | |||
min-width:28px; | |||
padding:1px 7px; | |||
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:12px; | |||
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- | |||
} | } | ||
| Line 914: | Line 415: | ||
border-radius:var(--sv-ui-rad-pill); | border-radius:var(--sv-ui-rad-pill); | ||
border:1px solid var(--sv-ui-line2); | border:1px solid var(--sv-ui-line2); | ||
background:var(--sv-ui- | background:var(--sv-ui-bg1); | ||
cursor:pointer; | cursor:pointer; | ||
box-sizing:border-box; | box-sizing:border-box; | ||
} | } | ||
.sv-level-track{ | .sv-level-track{ | ||
position:absolute; | position:absolute; | ||
| Line 940: | Line 440: | ||
} | } | ||
.sv-level-thumb{ | .sv-level-thumb{ | ||
position:absolute; | position:absolute; | ||
| Line 950: | Line 449: | ||
height:18px; | height:18px; | ||
border-radius:var(--sv-ui-rad-pill); | border-radius:var(--sv-ui-rad-pill); | ||
border:2px solid var(--sv-ui- | border:2px solid var(--sv-ui-line3); | ||
background:rgba(245,249,255,0.92); | background:rgba(245,249,255,0.92); | ||
box-shadow:0 10px 18px rgba(0,0,0,0.35); | box-shadow:0 10px 18px rgba(0,0,0,0.35); | ||
} | } | ||
.sv-level-ticklabels{ | .sv-level-ticklabels{ | ||
display:flex; | display:flex; | ||
| Line 975: | Line 473: | ||
} | } | ||
.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:- | top:-45px; | ||
left:0%; | left:0%; | ||
transform:translateX(-50%); | transform:translateX(-50%); | ||
padding: | padding:9px 15px; | ||
border-radius: | border-radius:36px; | ||
border:1px solid var(--sv-ui- | border:1px solid var(--sv-ui-line3); | ||
background:var(--sv-ui- | background:var(--sv-ui-bg3); | ||
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: | 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,003: | Line 498: | ||
position:absolute; | position:absolute; | ||
left:50%; | left:50%; | ||
bottom:- | bottom:-9px; | ||
width: | width:14px; | ||
height: | height:14px; | ||
margin-left:- | margin-left:-7px; | ||
background:var(--sv-ui- | background:var(--sv-ui-bg3); | ||
border-left:1px solid var(--sv-ui- | border-left:1px solid var(--sv-ui-line3); | ||
border-bottom:1px solid var(--sv-ui- | border-bottom:1px solid var(--sv-ui-line3); | ||
transform:rotate(45deg); | transform:rotate(45deg); | ||
} | } | ||
.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{ | ||
outline:2px solid var(--sv-ui- | outline:2px solid var(--sv-ui-accent3); | ||
outline-offset:2px; | outline-offset:2px; | ||
border-radius: | border-radius:var(--sv-ui-rad-sm); | ||
} | } | ||
/* -------------------------------------------------------------------------- | /* -------------------------------------------------------------------------- */ | ||
/* 6) Shared tabs */ | |||
/* -------------------------------------------------------------------------- */ | |||
.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); | ||
} | |||
.sv-tab:focus-visible, | |||
.mw-parser-output .sv-tab:focus-visible, | |||
.sv-disclose-btn:focus-visible, | |||
.mw-parser-output .sv-disclose-btn:focus-visible{ | |||
outline:2px solid var(--sv-ui-accent3); | |||
outline-offset:2px; | |||
border-radius:var(--sv-ui-rad-sm); | |||
} | |||
/* -------------------------------------------------------------------------- */ | |||
/* 7) Shared tip trigger */ | |||
/* -------------------------------------------------------------------------- */ | |||
.sv-tip, | |||
.mw-parser-output .sv-tip{ | |||
position:relative; | |||
display:inline-flex; | |||
align-items:center; | |||
flex:0 0 auto; | |||
} | |||
.sv-tip-btn, | |||
.mw-parser-output .sv-tip-btn{ | |||
display:inline-flex; | |||
align-items:center; | |||
justify-content:center; | |||
border:1px solid var(--sv-ui-line2); | |||
background:var(--sv-ui-bg2); | |||
color:var(--sv-ui-text1); | |||
cursor:pointer; | |||
user-select:none; | |||
} | |||
.sv-tip-btn:hover, | |||
.mw-parser-output .sv-tip-btn:hover{ | |||
background:var(--sv-ui-bg3); | |||
} | |||
.sv-tip-btn:focus-visible, | |||
.mw-parser-output .sv-tip-btn:focus-visible{ | |||
outline:2px solid var(--sv-ui-accent3); | |||
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, | |||
.sv-overcap-btn, | |||
.mw-parser-output .sv-tip-btn--pill, | |||
.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); | |||
} | } | ||
/* -------------------------------------------------------------------------- | .sv-ico--info, | ||
.mw-parser-output .sv-ico--info{ | |||
width:18px; | |||
height:18px; | |||
border-radius:999px; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
font-style:normal; | |||
font-weight:900; | |||
font-size:12px; | |||
line-height:1; | |||
} | |||
/* -------------------------------------------------------------------------- */ | |||
/* 8) Shared disclosure */ | |||
/* -------------------------------------------------------------------------- */ | |||
.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 */ | ||
/* | /* -------------------------------------------------------------------------- */ | ||
.sv-tip-btn, | .sv-tip-btn, | ||
.sv-disclose-btn, | .sv-disclose-btn, | ||
| Line 1,145: | Line 715: | ||
.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,154: | Line 724: | ||
.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-bg2)); | ||
background:var(--sv-ui-pop-bg, var(--sv-ui- | 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,193: | Line 758: | ||
.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- | border-bottom:1px solid var(--sv-ui-line2); | ||
background:var(--sv-ui- | background:var(--sv-ui-bg3); | ||
} | } | ||
| Line 1,206: | Line 770: | ||
.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,250: | Line 812: | ||
.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; | |||
text-underline-offset:3px; | |||
} | |||
.sv-uipop a:focus-visible, | |||
.sv-uipop-title a.sv-uipop-title-link:focus-visible{ | |||
outline:2px solid var(--sv-ui-accent3); | |||
outline-offset:2px; | |||
border-radius:6px; | |||
} | } | ||
.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) Motion */ | |||
/* -------------------------------------------------------------------------- */ | |||
.sv- | @media (prefers-reduced-motion: reduce){ | ||
.sv-hover-lift{transition:none;} | |||
.sv-hover-lift:hover{transform:none;} | |||
} | |||
/* -------------------------------------------------------------------------- */ | |||
/* 11) Responsive */ | |||
/* -------------------------------------------------------------------------- */ | |||
/* default (<640px): compact end value and helper text. */ | |||
/* sm and up (>=640px): restore the standard control sizing. */ | |||
@media (min-width:640px){ | |||
.sv-level-endvalue, | |||
.mw-parser-output .sv-level-endvalue{ | |||
padding:2px 8px; | |||
min-width:30px; | |||
font-size:13px; | |||
line-height:1.25; | |||
} | |||
.sv- | .sv-level-label[data-sv-helper-text]::after, | ||
.sv-level-ui .sv-level-label:not([data-sv-helper-text])::after, | |||
.mw-parser-output .sv-level-label[data-sv-helper-text]::after, | |||
.mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text])::after{ | |||
font-size:13px; | |||
} | |||
} | } | ||