Tags: Mobile edit Mobile web edit |
Tags: Mobile edit Mobile web edit |
| (3 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 */ |
| Sitewide base + shared SpiritVale components (all skins)
| | /* Scope: sitewide SpiritVale UI foundations only */ |
| - No Citizen skin selectors | | /* -------------------------------------------------------------------------- */ |
| - Mobile rules are merged into Common.css/Citizen.css (no separate Mobile.css) | | /* Canonical ownership map */ |
| - Common.css owns shared UI primitives + reusable interactive components | | /* -------------------------------------------------------------------------- */ |
| - Module:GameInfo/styles.css should own only GameInfo-family layout/presentation | | /* 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 (fallback defaults) | | /* -------------------------------------------------------------------------- */ |
| - Citizen.css exports will override these where appropriate.
| | /* 1) SpiritVale tokens */ |
| ---------------------------------------------------------------------------- */
| | /* -------------------------------------------------------------------------- */ |
|
| |
|
| :root{ | | :root{ |
| /* SV UI tokens (fallback) */ | | /* Surface ladder. |
| | bg0 = site background only |
| | bg1 = main component surface |
| | bg2 = nested/grouped panel surface |
| | bg3 = deep inset / pill surface |
| | bg4 = highest emphasis / selected / strong highlight surface |
| | */ |
| --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-bg4:#4e6d97; |
|
| |
|
| | /* Border / frame ladder. */ |
| --sv-ui-line1:#3b4b63; | | --sv-ui-line1:#3b4b63; |
| --sv-ui-line2:#4b6388; | | --sv-ui-line2:#4b6388; |
| | --sv-ui-line3:#7d93b5; |
|
| |
|
| | /* Text ladder. */ |
| --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:#7f9fcc; |
|
| |
|
| | /* Accent ladder. */ |
| --sv-ui-accent:#6aa6ff; | | --sv-ui-accent:#6aa6ff; |
| --sv-ui-accent2:#8cbcff; | | --sv-ui-accent2:#8cbcff; |
| | --sv-ui-accent3:#e6f0ff; |
|
| |
|
| /* Popover tuning tokens */ | | /* Popover tokens. */ |
| --sv-ui-pop-bg:var(--sv-ui-bg0); | | --sv-ui-pop-bg:var(--sv-ui-bg2); |
| --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); |
|
| |
|
| | /* Radius tokens. */ |
| --sv-ui-rad-sm:10px; | | --sv-ui-rad-sm:10px; |
| --sv-ui-rad-md:14px; | | --sv-ui-rad-md:14px; |
| Line 40: |
Line 83: |
| --sv-ui-rad-pill:999px; | | --sv-ui-rad-pill:999px; |
|
| |
|
| | /* Shared shadow tokens. */ |
| --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 */ | | /* Shared pill tokens. */ |
| --sv-ui-pill-bg:var(--sv-ui-bg3); | | --sv-ui-pill-bg:var(--sv-ui-bg3); |
| --sv-ui-pill-line:var(--sv-ui-line2); | | --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-shadow:inset 0 1px 0 rgba(255,255,255,0.06); |
| --sv-ui-pill-text:var(--sv-ui-text1); | | --sv-ui-pill-text:var(--sv-ui-text1); |
|
| |
| /* Legacy hero infobox variables (mapped to SV UI tokens) */
| |
| --sv-skill-width:660px;
| |
| --sv-passive-width:540px;
| |
|
| |
| --sv-base:var(--sv-ui-bg0);
| |
| --sv-surface:var(--sv-ui-bg2);
| |
|
| |
| --sv-card-border:var(--sv-ui-line1);
| |
| --sv-row-border:var(--sv-ui-line1);
| |
| --sv-gridline:var(--sv-ui-line2);
| |
|
| |
| --sv-pill:var(--sv-ui-bg3);
| |
| --sv-pill-a:var(--sv-ui-bg3);
| |
| --sv-pill-b:var(--sv-ui-bg3);
| |
|
| |
| --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 */ | | /* Fallback light skin mapping. */ |
| .mw-theme-light{ | | .mw-theme-light{ |
| --sv-ui-bg0:#1f2937; | | --sv-ui-bg0:#1f2937; |
| Line 77: |
Line 99: |
| --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; |
| --sv-base:var(--sv-ui-bg0); | |
| --sv-surface:var(--sv-ui-bg2);
| |
| | |
| --sv-card-border:var(--sv-ui-line1);
| |
| --sv-row-border:var(--sv-ui-line1);
| |
| --sv-gridline:var(--sv-ui-line2);
| |
| | |
| --sv-pill:var(--sv-ui-bg3);
| |
| --sv-pill-a:var(--sv-ui-bg3);
| |
| --sv-pill-b:var(--sv-ui-bg3);
| |
| | |
| --sv-text-soft:var(--sv-ui-text1);
| |
| } | | } |
|
| |
|
| /* ---------------------------------------------------------------------------- | | /* -------------------------------------------------------------------------- */ |
| 2) Sitewide link visibility (prefer skin vars, fallback to SV vars) | | /* 2) Sitewide link treatment */ |
| ---------------------------------------------------------------------------- */
| | /* -------------------------------------------------------------------------- */ |
|
| |
|
| .mw-parser-output a{ | | .mw-parser-output a{ |
| Line 111: |
Line 124: |
| 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; |
| } | | } |
|
| |
|
| Line 119: |
Line 137: |
| .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-accent2); | | 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 (opt-in for new modules) | | /* 3) Shared primitives */ |
| - Include unscoped selectors so template previews/docs still render correctly
| | /* -------------------------------------------------------------------------- */ |
| ---------------------------------------------------------------------------- */
| |
|
| |
|
| .sv-card, | | .sv-card, |
| Line 161: |
Line 180: |
| 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-pill-bg); |
| border:1px solid var(--sv-ui-line2); | | border:1px solid var(--sv-ui-pill-line); |
| box-shadow:inset 0 1px 0 rgba(255,255,255,0.06); | | 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:var(--color-emphasized, var(--sv-ui-text1)); | | color:var(--sv-ui-pill-text); |
| font-weight:800; | | font-weight:800; |
| text-transform:uppercase; | | text-transform:uppercase; |
| Line 190: |
Line 209: |
| .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-accent3); |
| outline-offset:2px; | | outline-offset:2px; |
| border-radius:8px; | | border-radius:var(--sv-ui-rad-sm); |
| } | | } |
|
| |
|
| /* ---------------------------------------------------------------------------- | | /* -------------------------------------------------------------------------- */ |
| SV utility: hover lift (micro-interaction)
| | /* 3a) Hover lift utility */ |
| ---------------------------------------------------------------------------- */
| | /* -------------------------------------------------------------------------- */ |
|
| |
|
| .sv-hover-lift{ | | .sv-hover-lift{ |
| Line 208: |
Line 227: |
| } | | } |
|
| |
|
| @media (prefers-reduced-motion: reduce){
| | /* -------------------------------------------------------------------------- */ |
| .sv-hover-lift{transition:none;}
| | /* 3b) Right infobox wrapper */ |
| .sv-hover-lift:hover{transform:none;}
| | /* -------------------------------------------------------------------------- */ |
| }
| |
| | |
| /* ---------------------------------------------------------------------------- | |
| SV utility: right-side infobox wrapper
| |
| - Unscoped so it works in template previews/docs too
| |
| ---------------------------------------------------------------------------- */
| |
|
| |
|
| .sv-card.sv-infobox-right{ | | .sv-card.sv-infobox-right{ |
| Line 229: |
Line 242: |
| } | | } |
|
| |
|
| /* Optional size modifiers */
| |
| .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;} |
|
| |
|
| /* ---------------------------------------------------------------------------- | | /* -------------------------------------------------------------------------- */ |
| Template: Class Overview Infobox
| | /* 4) Shared utilities */ |
| ---------------------------------------------------------------------------- */
| | /* -------------------------------------------------------------------------- */ |
| | |
| .sv-class-overview__table{
| |
| width:100%;
| |
| border-collapse:separate;
| |
| border-spacing:0;
| |
| }
| |
| | |
| .sv-class-overview__heading,
| |
| .sv-class-overview__subhead{
| |
| padding:10px 10px;
| |
| text-align:center;
| |
| font-weight:800;
| |
| }
| |
|
| |
|
| .sv-class-overview__table td{
| |
| padding:7px 10px;
| |
| border-bottom:1px solid var(--sv-ui-line1);
| |
| vertical-align:middle;
| |
| }
| |
|
| |
| .sv-class-overview__table tr:last-child td{
| |
| border-bottom:none;
| |
| }
| |
|
| |
| .sv-class-overview__label{
| |
| text-align:left;
| |
| font-weight:700;
| |
| color:var(--sv-ui-text1);
| |
| white-space:nowrap;
| |
| }
| |
|
| |
| .sv-class-overview__value{
| |
| text-align:right;
| |
| font-weight:650;
| |
| color:var(--sv-ui-text2);
| |
| }
| |
|
| |
| .sv-class-overview__label img{
| |
| vertical-align:middle;
| |
| margin-right:6px;
| |
| }
| |
|
| |
| /* ----------------------------------------------------------------------------
| |
| 4) Shared utilities / helper contracts
| |
| ---------------------------------------------------------------------------- */
| |
|
| |
| /* Visibility contract (JS toggles these) */
| |
| .sv-hidden, | | .sv-hidden, |
| .mw-parser-output .sv-hidden{ | | .mw-parser-output .sv-hidden{ |
| Line 290: |
Line 256: |
| [hidden]{display:none !important;} | | [hidden]{display:none !important;} |
|
| |
|
| /* Missing icon fallback badge (“?”) */
| |
| .sv-miss, | | .sv-miss, |
| .mw-parser-output .sv-miss{ | | .mw-parser-output .sv-miss{ |
| Line 307: |
Line 272: |
| } | | } |
|
| |
|
| /* Generic image wrapper */
| |
| .sv-img, | | .sv-img, |
| .mw-parser-output .sv-img{ | | .mw-parser-output .sv-img{ |
| Line 323: |
Line 287: |
| } | | } |
|
| |
|
| /* Optional: shadow variant */
| |
| .sv-img--shadow img, | | .sv-img--shadow img, |
| .mw-parser-output .sv-img--shadow img{ | | .mw-parser-output .sv-img--shadow img{ |
| Line 329: |
Line 292: |
| } | | } |
|
| |
|
| /* ---------------------------------------------------------------------------- | | /* -------------------------------------------------------------------------- */ |
| 5) Shared level selector component | | /* 5) Shared level selector */ |
| - Common owns the component anatomy and reusable helper layouts
| | /* -------------------------------------------------------------------------- */ |
| - Module CSS should only control the surrounding section/card layout
| |
| ---------------------------------------------------------------------------- */
| |
|
| |
|
| .sv-level-ui, | | .sv-level-ui, |
| Line 352: |
Line 313: |
|
| |
|
| .sv-level-label[data-sv-helper-text], | | .sv-level-label[data-sv-helper-text], |
| .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; | | font-size:0; |
| line-height:0; | | line-height:0; |
| display:inline-block; | | } |
| | |
| | .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; |
| } | | } |
|
| |
|
| Line 363: |
Line 338: |
| display:inline-block; | | display:inline-block; |
| font-weight:900; | | font-weight:900; |
| font-size:13px; | | font-size:12px; |
| | line-height:1.25; |
| | letter-spacing:0.15px; |
| | color:var(--sv-ui-text1); |
| | } |
| | |
| | .sv-level-ui .sv-level-label:not([data-sv-helper-text])::after, |
| | .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; | | line-height:1.25; |
| letter-spacing:0.15px; | | letter-spacing:0.15px; |
| Line 399: |
Line 385: |
| flex:0 0 auto; | | flex:0 0 auto; |
| order:2; | | order:2; |
| min-width:30px; | | min-width:28px; |
| padding:2px 8px; | | padding:1px 7px; |
| border-radius:var(--sv-ui-rad-pill); | | border-radius:var(--sv-ui-rad-pill); |
| border:1px solid var(--sv-ui-pill-line); | | border:1px solid var(--sv-ui-pill-line); |
| Line 408: |
Line 394: |
| color:var(--sv-ui-text2); | | color:var(--sv-ui-text2); |
| font-weight:900; | | font-weight:900; |
| font-size:13px; | | font-size:12px; |
| line-height:1.25; | | line-height:1.25; |
| letter-spacing:0.15px; | | letter-spacing:0.15px; |
| Line 422: |
Line 408: |
| } | | } |
|
| |
|
| /* 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 430: |
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-bg0); | | background:var(--sv-ui-bg1); |
| cursor:pointer; | | cursor:pointer; |
| box-sizing:border-box; | | box-sizing:border-box; |
| } | | } |
|
| |
|
| /* Track + fill */
| |
| .sv-level-track{ | | .sv-level-track{ |
| position:absolute; | | position:absolute; |
| Line 456: |
Line 440: |
| } | | } |
|
| |
|
| /* Thumb */
| |
| .sv-level-thumb{ | | .sv-level-thumb{ |
| position:absolute; | | position:absolute; |
| Line 466: |
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-line2); | | 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); |
| } | | } |
|
| |
|
| /* Optional tick labels row */
| |
| .sv-level-ticklabels{ | | .sv-level-ticklabels{ |
| display:flex; | | display:flex; |
| Line 491: |
Line 473: |
| } | | } |
|
| |
|
| /* 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{ |
| Line 500: |
Line 481: |
| 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-line3); |
| background:var(--sv-ui-bg1); | | 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); |
| Line 521: |
Line 502: |
| height:14px; | | height:14px; |
| margin-left:-7px; | | margin-left:-7px; |
| background:var(--sv-ui-bg1); | | background:var(--sv-ui-bg3); |
| border-left:1px solid var(--sv-ui-line2); | | border-left:1px solid var(--sv-ui-line3); |
| border-bottom:1px solid var(--sv-ui-line2); | | border-bottom:1px solid var(--sv-ui-line3); |
| transform:rotate(45deg); | | transform:rotate(45deg); |
| } | | } |
|
| |
|
| /* 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{ |
| outline:2px solid var(--sv-ui-accent2); | | outline:2px solid var(--sv-ui-accent3); |
| outline-offset:2px; | | outline-offset:2px; |
| border-radius:10px; | | border-radius:var(--sv-ui-rad-sm); |
| } | | } |
|
| |
|
| /* Mobile */ | | /* -------------------------------------------------------------------------- */ |
| @media (max-width:500px){
| | /* 6) Shared tabs */ |
| .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, |
| Line 604: |
Line 568: |
| } | | } |
|
| |
|
| /* Focus rings for SV controls (sitewide) */
| |
| .sv-tab:focus-visible, | | .sv-tab:focus-visible, |
| .mw-parser-output .sv-tab:focus-visible, | | .mw-parser-output .sv-tab:focus-visible, |
| .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-accent3); |
| outline-offset:2px; | | outline-offset:2px; |
| border-radius:10px; | | border-radius:var(--sv-ui-rad-sm); |
| } | | } |
|
| |
|
| /* ---------------------------------------------------------------------------- | | /* -------------------------------------------------------------------------- */ |
| 7) SV Tip Trigger (shared component) | | /* 7) Shared tip trigger */ |
| - 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
| |
| ---------------------------------------------------------------------------- */
| |
|
| |
|
| .sv-tip, | | .sv-tip, |
| Line 647: |
Line 608: |
| .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-accent3); |
| outline-offset:2px; | | outline-offset:2px; |
| } | | } |
| Line 661: |
Line 622: |
|
| |
|
| .sv-tip-btn--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, | | .sv-overcap-btn, |
| | .mw-parser-output .sv-tip-btn--pill, |
| .mw-parser-output .sv-overcap-btn{ | | .mw-parser-output .sv-overcap-btn{ |
| width:auto; | | width:auto; |
| Line 701: |
Line 643: |
| } | | } |
|
| |
|
| /* Small info icon inside the round button */
| |
| .sv-ico--info, | | .sv-ico--info, |
| .mw-parser-output .sv-ico--info{ | | .mw-parser-output .sv-ico--info{ |
| Line 716: |
Line 657: |
| } | | } |
|
| |
|
| /* ---------------------------------------------------------------------------- | | /* -------------------------------------------------------------------------- */ |
| 8) SV Disclosure (shared source markup) | | /* 8) Shared disclosure */ |
| ---------------------------------------------------------------------------- */
| | /* -------------------------------------------------------------------------- */ |
|
| |
|
| .sv-disclose, | | .sv-disclose, |
| Line 764: |
Line 705: |
| } | | } |
|
| |
|
| /* ---------------------------------------------------------------------------- | | /* -------------------------------------------------------------------------- */ |
| 9) Universal Popups v3.2 | | /* 9) Universal popups */ |
| ---------------------------------------------------------------------------- */
| | /* -------------------------------------------------------------------------- */ |
|
| |
|
| .sv-uipop-v3 .sv-def-tip,
| |
| .sv-uipop-v3 .sv-pop-tip{
| |
| display:none !important;
| |
| }
| |
|
| |
| /* Prevent long-press select/callout on popup triggers + controls */
| |
| .sv-tip-btn, | | .sv-tip-btn, |
| .sv-disclose-btn, | | .sv-disclose-btn, |
| Line 801: |
Line 736: |
| 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-bg2)); |
| 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%), |
| Line 828: |
Line 763: |
| 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-line2); |
| background:var(--sv-ui-bg1); | | background:var(--sv-ui-bg3); |
| } | | } |
|
| |
|
| Line 884: |
Line 819: |
| } | | } |
|
| |
|
| .sv-uipop a:hover{text-decoration-thickness:3px;} | | .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){ |
| Line 941: |
Line 886: |
| .sv-uipop .sv-tip-pop-body{white-space:pre-line;} | | .sv-uipop .sv-tip-pop-body{white-space:pre-line;} |
|
| |
|
| /* ---------------------------------------------------------------------------- | | /* -------------------------------------------------------------------------- */ |
| 10) Legacy safety blocks (kept, unified to tokens) | | /* 10) Motion */ |
| ---------------------------------------------------------------------------- */
| | /* -------------------------------------------------------------------------- */ |
|
| |
|
| .mw-parser-output .playtest-info-box{
| | @media (prefers-reduced-motion: reduce){ |
| max-width:100%;
| | .sv-hover-lift{transition:none;} |
| margin:0 0 10px 0;
| | .sv-hover-lift:hover{transform:none;} |
| 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%;
| | /* 11) Responsive */ |
| margin:1px;
| | /* -------------------------------------------------------------------------- */ |
| border:2px solid var(--sv-ui-line2);
| | /* default (<640px): compact end value and helper text. */ |
| border-radius:var(--sv-ui-rad-lg);
| | /* sm and up (>=640px): restore the standard control sizing. */ |
| box-shadow:0 2px 6px rgba(0,0,0,0.25);
| |
| background:var(--sv-ui-bg1);
| |
| }
| |
|
| |
|
| .mw-parser-output .header-container-middle{
| | @media (min-width:640px){ |
| background:var(--sv-ui-bg1);
| | .sv-level-endvalue, |
| text-align:center;
| | .mw-parser-output .sv-level-endvalue{ |
| padding:1px;
| | padding:2px 8px; |
| border-radius:calc(var(--sv-ui-rad-lg) - 2px);
| | min-width:30px; |
| overflow-wrap:anywhere;
| | font-size:13px; |
| word-break:break-word; | | line-height:1.25; |
| }
| |
| | |
| .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 */
| | .sv-level-label[data-sv-helper-text]::after, |
| :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) tr.sv-slot-row > td.sv-slot-cell{
| | .sv-level-ui .sv-level-label:not([data-sv-helper-text])::after, |
| padding:0 !important; | | .mw-parser-output .sv-level-label[data-sv-helper-text]::after, |
| background:var(--sv-base) !important;
| | .mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text])::after{ |
| color:var(--sv-ui-text1);
| | font-size:13px; |
| }
| |
| | |
| :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;
| |
| }
| |
| | |
| @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%;}
| |
| } | | } |
