Toggle search
Toggle menu
115
248
25
2.7K
SpiritVale Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Join the Playtest on Steam Now: SpiritVale

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
More actions
← Older edit
No edit summary
No edit summary
Tags: Mobile edit Mobile web edit
 
(112 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* 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.                    */
/* -------------------------------------------------------------------------- */


/*
@media (prefers-color-scheme: dark) {
    body, #mw-head {
        background-color: #1f2937;
    }


    a, .vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a {
/* -------------------------------------------------------------------------- */
        color: oklch(62.3% 0.214 259.815);
/* 1) SpiritVale tokens */
    }
/* -------------------------------------------------------------------------- */
   
    a:visited, .vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited {
        color: oklch(54.6% 0.245 262.881);
    }


    a:hover, .vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:hover {
:root{
        color: oklch(70.7% 0.165 254.624);
  /* Surface ladder.
        text-decoration: none;
    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-bg1:#1f2937;
  --sv-ui-bg2:#273449;
  --sv-ui-bg3:#2e3f59;
  --sv-ui-bg4:#4e6d97;


    a.new {
  /* Border / frame ladder. */
        color: oklch(64.5% 0.246 16.439);
  --sv-ui-line1:#3b4b63;
     }
  --sv-ui-line2:#4b6388;
  --sv-ui-line3:#7d93b5;
 
  /* Text ladder. */
  --sv-ui-text1:#f5f9ff;
  --sv-ui-text2:#d7e2f4;
  --sv-ui-text3:#b6c6e0;
  --sv-ui-text4:#7f9fcc;
 
  /* Accent ladder. */
  --sv-ui-accent:#6aa6ff;
  --sv-ui-accent2:#8cbcff;
  --sv-ui-accent3:#e6f0ff;
 
  /* Popover tokens. */
  --sv-ui-pop-bg:var(--sv-ui-bg2);
  --sv-ui-pop-line:var(--sv-ui-line2);
  --sv-ui-pop-shadow:0 10px 30px rgba(0,0,0,0.35);
 
  /* Radius tokens. */
  --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-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{
  --sv-ui-bg0:#1f2937;
  --sv-ui-bg1:#273449;
  --sv-ui-bg2:#2e3f59;
  --sv-ui-bg3:#364a69;
  --sv-ui-bg4:#6888b4;
 
  --sv-ui-line1:#4b6388;
  --sv-ui-line2:#5f7fb4;
  --sv-ui-line3:#8ea7ca;
 
  --sv-ui-text1:#f5f9ff;
  --sv-ui-text2:#d7e2f4;
  --sv-ui-text3:#b6c6e0;
  --sv-ui-text4:#8ba8d1;
 
  --sv-ui-accent:#8cbcff;
  --sv-ui-accent2:#b0d0ff;
  --sv-ui-accent3:#f2f7ff;
}
 
/* -------------------------------------------------------------------------- */
/* 2) Sitewide link treatment */
/* -------------------------------------------------------------------------- */
 
.mw-parser-output a{
  color:var(--color-link, var(--sv-ui-accent));
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:2px;
  text-decoration-skip-ink:auto;
  transition:
     color 120ms ease,
    text-decoration-thickness 120ms ease,
    text-underline-offset 120ms ease;
}
}
*/


/* Custom Additions */
.mw-parser-output a:visited{
.playtest - info - box {
  color:var(--color-visited, var(--sv-ui-accent2));
    max - width: 100 %; margin - bottom: 10px; border: 1px solid #ccc; border - radius: 6px; box - shadow: 0 1px 3px rgba(0, 0, 0, 0.1); background: #f0f2f8; padding: 10px; text - align: center; color:#333; word - wrap: break-word; overflow - wrap: break-word;
}
}


.header - container - outer {
.mw-parser-output a:hover{
    max - width: 100 %; margin: 1 1px; border: 2px solid #372b54; border - radius: 10px; box - shadow: 0 2px 6px rgba(0, 0, 0, 0.25); background: #f0f2f8;
  text-decoration-thickness:3px;
  text-underline-offset:3px;
}
}


.header - container - middle {
.mw-parser-output a:focus-visible{
    background: #f0f2f8; color: white; text - align: center; padding: 1px 1px; border - radius: 8px; word - wrap: break-word; overflow - wrap: break-word;
  outline:2px solid var(--sv-ui-accent3);
  outline-offset:2px;
  border-radius:6px;
  box-shadow:0 0 0 3px rgba(230,240,255,0.12);
}
}


.header - container - inner {
/* -------------------------------------------------------------------------- */
    background: linear - gradient(180deg,#5a4e7c,#372b54); color: white; text - align: center; padding: 1px 1px; border - radius: 8px; word - wrap: break-word; overflow - wrap: break-word; font - size: 300 %;
/* 3) Shared primitives */
/* -------------------------------------------------------------------------- */
 
.sv-card,
.mw-parser-output .sv-card{
  background:var(--sv-ui-bg1);
  border:1px solid var(--sv-ui-line1);
  border-radius:var(--sv-ui-rad-md);
  box-shadow:var(--sv-ui-shadow1);
  color:var(--color-base, var(--sv-ui-text2));
}
}


table.custom - table {
.sv-card :where(h1,h2,h3,h4,h5,h6,th,summary,.mw-headline),
    float: none; border: 2px solid #372b54; border - radius: 10px; 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;
.mw-parser-output .sv-card :where(h1,h2,h3,h4,h5,h6,th,summary,.mw-headline){
  color:var(--color-emphasized, var(--sv-ui-text1));
}
}


table.custom - table > tbody > tr: nth - child(1) > th {
.sv-tile,
    background: linear - gradient(180deg,#7a6fb0,#5a4e7c); color: white; text - align: center; padding: 6px; font - size: 120 %; border - top - left - radius: 8px; border - top - right - radius: 8px; word - wrap: break-word; overflow - wrap: break-word;
.mw-parser-output .sv-tile{
  background:var(--sv-ui-bg2);
  border:1px solid var(--sv-ui-line2);
  border-radius:var(--sv-ui-rad-sm);
  color:var(--color-emphasized, var(--sv-ui-text1));
}
}


table.custom - table > tbody > tr: nth - child(2) > th {
.sv-pill,
    text - align: center; padding: 4px; border - bottom: 1px solid #555;
.mw-parser-output .sv-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.18em 0.40em;
  border-radius:var(--sv-ui-rad-sm);
  background:var(--sv-ui-pill-bg);
  border:1px solid var(--sv-ui-pill-line);
  box-shadow:var(--sv-ui-pill-shadow);
  background-image:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
  color:var(--sv-ui-pill-text);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.03em;
  font-size:0.72em;
  line-height:1.15;
  white-space:nowrap;
}
}


table.custom - table > tbody > tr > td {
.sv-pill--compact,
    text - align: center; padding: 4px; border - bottom: 1px solid #555;
.mw-parser-output .sv-pill--compact{
  padding:0.15em 0.38em;
  border-radius:var(--sv-ui-rad-pill);
}
}


table.custom - table > tbody > tr.middle - header > th {
.sv-pill--value,
    background: linear - gradient(180deg,#7a6fb0,#5a4e7c); color: white; text - align: center; padding: 6px; font - size: 110 %;
.mw-parser-output .sv-pill--value{
  border-radius:var(--sv-ui-rad-pill);
  font-weight:900;
  text-transform:none;
  letter-spacing:0.01em;
}
}


.citizen - search - trigger:hover {
.sv-focus-ring:focus-visible,
    transform: translateY(-2px);
.mw-parser-output .sv-focus-ring:focus-visible{
    transition: transform .15s ease -in -out;
  outline:2px solid var(--sv-ui-accent3);
  outline-offset:2px;
  border-radius:var(--sv-ui-rad-sm);
}
}


/* ============================================================
/* -------------------------------------------------------------------------- */
  SpiritVale Infoboxes (Skills + Passives)
/* 3a) Hover lift utility */
  - Shared styling for both infobox types
/* -------------------------------------------------------------------------- */
  - Passives: fixed desktop width, centered contents
 
  - Skills: fixed desktop max width + list wrapper panel
.sv-hover-lift{
  - Skills top band: NESTED TABLE version ONLY
  transition:transform 0.15s ease-in-out;
    (GameSkills outputs .sv-topband-cell > .sv-topband-table > .sv-type-table)
  will-change:transform;
  ========================================================== */
}


/* ------------------------------------------------------------
.sv-hover-lift:hover{
  Global size knobs (adjust here, everything updates)
  transform:translateY(-2px);
  ------------------------------------------------------------ */
:root {
    --sv - passive - width: 540px;
    --sv - skill - width: 660px;
    --sv - infobox - max: 620px; /* generic fallback if needed */
}
}


/* ============================================================
/* -------------------------------------------------------------------------- */
  1) Shared base: both Skills + Passives
/* 3b) Right infobox wrapper */
  ========================================================== */
/* -------------------------------------------------------------------------- */
 
.sv-card.sv-infobox-right{
  float:right !important;
  width:100%;
  max-width:200px;
  margin:0 0 2em 2em;
  box-sizing:border-box;
  border-radius:var(--sv-ui-rad-lg);
  overflow:hidden;
  clear:right;
}
 
.sv-card.sv-infobox-right.sv-infobox-right--md{max-width:260px;}
.sv-card.sv-infobox-right.sv-infobox-right--lg{max-width:320px;}
 
/* -------------------------------------------------------------------------- */
/* 4) Shared utilities */
/* -------------------------------------------------------------------------- */


table.spiritvale - skill - infobox,
.sv-hidden,
    table.spiritvale - passive - infobox {
.mw-parser-output .sv-hidden{
    /* Layout */
  display:none !important;
    border - collapse: separate;
}
    border - spacing: 0;
    width: 100 %;
    max - width: var(--sv - infobox - max);
    margin: 1.5em auto;


    /* Shape */
[hidden]{display:none !important;}
    border - radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(55, 43, 84, 0.65);
    box - shadow: 0 4px 12px rgba(0, 0, 0, 0.45);


    /* Typography */
.sv-miss,
    font - size: 0.95em;
.mw-parser-output .sv-miss{
  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;
}
}


/* HERO rows (shared) */
.sv-img,
table.spiritvale - skill - infobox > tbody > tr.spiritvale - infobox - main > th,
.mw-parser-output .sv-img{
    table.spiritvale - skill - infobox > tbody > tr.spiritvale - infobox - main > td,
  display:inline-flex;
    table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > th,
  align-items:center;
    table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > td {
  justify-content:center;
    background: linear - gradient(135deg, #7a6fb0, #372b54);
    color: #fff;
    padding: 0.9em 1.1em;
    text - align: center;
    vertical - align: middle;
}
}


/* Icon spacing in hero row */
.sv-img img,
table.spiritvale - skill - infobox > tbody > tr: first - child > th.image,
.mw-parser-output .sv-img img{
    table.spiritvale - passive - infobox > tbody > tr: first - child > th.image {
  display:block;
    margin - right: 0.6em;
  max-width:100%;
    vertical - align: middle;
  height:auto;
  border-radius:var(--sv-ui-rad-sm);
}
}


/* Row separators (direct children only) */
.sv-img--shadow img,
table.spiritvale - skill - infobox > tbody > tr,
.mw-parser-output .sv-img--shadow img{
    table.spiritvale - passive - infobox > tbody > tr {
  box-shadow:0 10px 18px rgba(0,0,0,0.35);
    border - bottom: 1px solid rgba(148, 163, 184, 0.4);
}
}
table.spiritvale - skill - infobox > tbody > tr: last - child,
 
    table.spiritvale - passive - infobox > tbody > tr: last - child {
/* -------------------------------------------------------------------------- */
    border - bottom: none;
/* 5) Shared level selector */
/* -------------------------------------------------------------------------- */
 
.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;
}
}


/* Label cells (direct children only; avoids styling nested top-band tables) */
.sv-level-label,
table.spiritvale - skill - infobox > tbody > tr: not(.spiritvale - infobox - main) > th: not(.spiritvale - infobox - section - header),
.mw-parser-output .sv-level-label{
    table.spiritvale - passive - infobox > tbody > tr: not(.spiritvale - infobox - main) > th: not(.spiritvale - infobox - section - header) {
  margin:0;
    width: 26 %;
    padding: 0.45em 0.85em;
    text - align: left;
    font - weight: 600;
    white - space: nowrap;
}
}


/* Value cells (direct children only) */
.sv-level-label[data-sv-helper-text],
table.spiritvale - skill - infobox > tbody > tr > td,
.sv-level-ui .sv-level-label:not([data-sv-helper-text]),
    table.spiritvale - passive - infobox > tbody > tr > td {
.mw-parser-output .sv-level-label[data-sv-helper-text],
    padding: 0.45em 0.85em;
.mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text]){
    text - align: left;
  display:inline-block;
  margin:0;
  padding:0;
  font-size:0;
  line-height:0;
}
}


/* Zebra striping (direct children only) */
.sv-level-ui .sv-level-label:not([data-sv-helper-text]),
table.spiritvale - skill - infobox > tbody > tr: nth - child(odd) > td,
.mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text]){
    table.spiritvale - skill - infobox > tbody > tr: nth - child(odd) > th: not(.spiritvale - infobox - section - header),
  position:static;
        table.spiritvale - passive - infobox > tbody > tr: nth - child(odd) > td,
  top:auto;
            table.spiritvale - passive - infobox > tbody > tr: nth - child(odd) > th: not(.spiritvale - infobox - section - header) {
  right:auto;
    background - color: rgba(148, 163, 184, 0.05);
  bottom:auto;
  left:auto;
  transform:none;
}
}


/* Section headers (Requirements / Mechanics / etc.) */
.sv-level-label[data-sv-helper-text]::after,
.spiritvale - infobox - section - header {
.mw-parser-output .sv-level-label[data-sv-helper-text]::after{
    background: linear - gradient(135deg, #5a4e7c, #372b54);
  content:attr(data-sv-helper-text);
    color: #fff;
  display:inline-block;
    text - align: left;
  font-weight:900;
    padding: 0.5em 0.9em;
  font-size:12px;
    font - size: 0.9em;
  line-height:1.25;
    text - transform: uppercase;
  letter-spacing:0.15px;
    letter - spacing: 0.05em;
  color:var(--sv-ui-text1);
}
}


/* Hero content helpers */
.sv-level-ui .sv-level-label:not([data-sv-helper-text])::after,
.spiritvale - infobox - main - left - inner {
.mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text])::after{
    display: flex;
  content:"Slide to set level";
    flex - direction: column;
  display:inline-block;
    align - items: center;
  font-weight:900;
    justify - content: center;
  font-size:12px;
    gap: 0.35em;
  line-height:1.25;
  letter-spacing:0.15px;
  color:var(--sv-ui-text1);
}
}


.spiritvale - infobox - title {
.sv-level-slider,
    font - size: 1.25em;
.mw-parser-output .sv-level-slider{
    font - weight: 600;
  position:relative;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  width:100%;
  flex-wrap:nowrap;
  direction:ltr;
}
}


.spiritvale - infobox - main - right - inner {
.sv-level-slider input.sv-level-range[type="range"],
    display: flex;
.sv-level-slider .sv-level-range--custom,
    align - items: center;
.sv-level-slider .sv-level-range[data-sv-slider="1"],
    justify - content: center;
.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;
  box-sizing:border-box;
  margin:0;
  order:1;
}
}


.spiritvale - infobox - description {
.sv-level-endvalue,
    font - size: 1.05em;
.mw-parser-output .sv-level-endvalue{
    font - style: italic;
  flex:0 0 auto;
    text - align: center;
  order:2;
    max - width: 32em;
  min-width:28px;
    margin: 0 auto;
  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,
  1.1) Skills hero split rows (skills only)
[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;
}


table.spiritvale - skill - infobox > tbody > tr.sv - hero - title - row {
.sv-level-range--custom,
    border - bottom: none!important; /* no divider between title and desc */
.sv-level-range[data-sv-slider="1"]{
  display:block;
  position:relative;
  height:26px;
  border-radius:var(--sv-ui-rad-pill);
  border:1px solid var(--sv-ui-line2);
  background:var(--sv-ui-bg1);
  cursor:pointer;
  box-sizing:border-box;
}
}


table.spiritvale - skill - infobox > tbody > tr.sv - hero - title - row > th {
.sv-level-track{
    padding - bottom: 0.5em;
  position:absolute;
  left:8px;
  right:8px;
  top:50%;
  margin-top:-4px;
  height:8px;
  border-radius:var(--sv-ui-rad-pill);
  background:var(--sv-ui-bg2);
  overflow:hidden;
}
}


table.spiritvale - skill - infobox > tbody > tr.sv - hero - desc - row > td {
.sv-level-fill{
    padding - top: 0.1em;
  display:block;
    padding - bottom: 0.9em;
  height:100%;
  width:0%;
  border-radius:var(--sv-ui-rad-pill);
  background:linear-gradient(90deg, var(--sv-ui-accent), rgba(245,249,255,0.22));
}
}


table.spiritvale - skill - infobox > tbody > tr.sv - hero - desc - row.spiritvale - infobox - description {
.sv-level-thumb{
    font - size: 1.0em;
  position:absolute;
    opacity: 0.95;
  left:0%;
    max - width: 42em;
  top:50%;
  margin-top:-9px;
  margin-left:-9px;
  width:18px;
  height:18px;
  border-radius:var(--sv-ui-rad-pill);
  border:2px solid var(--sv-ui-line3);
  background:rgba(245,249,255,0.92);
  box-shadow:0 10px 18px rgba(0,0,0,0.35);
}
}


/* ============================================================
.sv-level-ticklabels{
  2) Passives (stable, consistent tooltip layout)
  display:flex;
  ========================================================== */
  justify-content:space-between;
  gap:10px;
  margin-top:7px;
  font-weight:900;
  font-size:12px;
  color:var(--sv-ui-text3);
  line-height:1.1;
  min-height:12px;
}
 
.sv-level-tick{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
}


table.spiritvale - passive - infobox {
.sv-level-range--custom .sv-level-bubble,
    width: var(--sv - passive - width);
.sv-level-range[data-sv-slider="1"] .sv-level-bubble{
    max - width: var(--sv - passive - width);
  position:absolute;
    margin: 1em auto;
  top:-45px;
    table - layout: fixed;
  left:0%;
  transform:translateX(-50%);
  padding:9px 15px;
  border-radius:36px;
  border:1px solid var(--sv-ui-line3);
  background:var(--sv-ui-bg3);
  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);
  font-weight:900;
  font-size:36px;
  line-height:1;
  color:var(--sv-ui-text1);
  pointer-events:none;
  white-space:nowrap;
}
}


/* Hero column balance */
.sv-level-range--custom .sv-level-bubble:after,
table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > th {
.sv-level-range[data-sv-slider="1"] .sv-level-bubble:after{
    width: 42 %;
  content:"";
    white - space: normal;
  position:absolute;
  left:50%;
  bottom:-9px;
  width:14px;
  height:14px;
  margin-left:-7px;
  background:var(--sv-ui-bg3);
  border-left:1px solid var(--sv-ui-line3);
  border-bottom:1px solid var(--sv-ui-line3);
  transform:rotate(45deg);
}
}
table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > td {
 
    width: 58 %;
.sv-level-range--custom:focus-visible,
.sv-level-range[data-sv-slider="1"]:focus-visible{
  outline:2px solid var(--sv-ui-accent3);
  outline-offset:2px;
  border-radius:var(--sv-ui-rad-sm);
}
}


/* Center + wrap all non-hero rows */
/* -------------------------------------------------------------------------- */
table.spiritvale - passive - infobox > tbody > tr: not(.spiritvale - infobox - main) > th,
/* 6) Shared tabs */
    table.spiritvale - passive - infobox > tbody > tr: not(.spiritvale - infobox - main) > td {
/* -------------------------------------------------------------------------- */
    text - align: center;
 
    vertical - align: middle;
.sv-tabs,
    white - space: normal;
.mw-parser-output .sv-tabs{
    overflow - wrap: anywhere;
  margin:10px 0 0;
    word -break: break-word;
}
}


/* Let passive labels wrap */
.sv-tabs-list,
table.spiritvale - passive - infobox > tbody > tr: not(.spiritvale - infobox - main)
.mw-parser-output .sv-tabs-list{
    > th: not(.spiritvale - infobox - section - header) {
  display:flex;
    white - space: normal;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 10px 0;
  padding:0;
}
}


/* Passive section headers centered */
.sv-tab,
table.spiritvale - passive - infobox.spiritvale - infobox - section - header {
.mw-parser-output .sv-tab{
    text - align: center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--sv-ui-rad-pill);
  padding:7px 10px;
  border:1px solid var(--sv-ui-line2);
  background:var(--sv-ui-bg2);
  color:var(--sv-ui-text1);
  font-weight:900;
  font-size:13px;
  cursor:pointer;
  user-select:none;
}
}


/* Passive description never forces odd layout */
.sv-tab:hover,
table.spiritvale - passive - infobox.spiritvale - infobox - description {
.mw-parser-output .sv-tab:hover{
    max - width: 100 %;
  background:var(--sv-ui-bg3);
    overflow - wrap: anywhere;
    word -break: break-word;
}
}


/* Passive list layout (stacked, centered) */
.sv-tab[aria-selected="true"],
.spiritvale - passive - list {
.mw-parser-output .sv-tab[aria-selected="true"]{
    display: flex;
  background:var(--sv-ui-bg3);
    flex - direction: column;
  border-color:var(--sv-ui-accent);
    align - items: center;
    gap: 1.25em;
}
}


/* Remove Citizen wrapper borders/spacing around passive tables in lists */
.sv-tabpanel,
.spiritvale - passive - list.mw - table - wrapper,
.mw-parser-output .sv-tabpanel{
.spiritvale - passive - list.table - overflow,
  padding:10px 12px;
.spiritvale - passive - list.table - scroll,
  border-radius:var(--sv-ui-rad-md);
.spiritvale - passive - list.citizen - table {
  border:1px solid var(--sv-ui-line1);
    border: none!important;
  background:var(--sv-ui-bg1);
    box - shadow: none!important;
    background: transparent!important;
    padding: 0!important;
    margin: 0!important;
}
}


/* Mobile/portrait: keep passive hero row side-by-side */
.sv-tab:focus-visible,
@media(max - width: 768px) {
.mw-parser-output .sv-tab:focus-visible,
    body.skin - citizen table.spiritvale - passive - infobox {
.sv-disclose-btn:focus-visible,
        width: 100 %;
.mw-parser-output .sv-disclose-btn:focus-visible{
        max - width: 100 %;
  outline:2px solid var(--sv-ui-accent3);
        display: table!important;
  outline-offset:2px;
    }
  border-radius:var(--sv-ui-rad-sm);
}


    body.skin - citizen table.spiritvale - passive - infobox > tbody {
/* -------------------------------------------------------------------------- */
        display: table - row - group!important;
/* 7) Shared tip trigger */
    }
/* -------------------------------------------------------------------------- */


    body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main {
.sv-tip,
        display: table - row!important;
.mw-parser-output .sv-tip{
    }
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}


    body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > th,
.sv-tip-btn,
        body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > td {
.mw-parser-output .sv-tip-btn{
        display: table - cell!important;
  display:inline-flex;
        float: none!important;
  align-items:center;
        box - sizing: border - box;
  justify-content:center;
        vertical - align: middle;
  border:1px solid var(--sv-ui-line2);
        text - align: center;
  background:var(--sv-ui-bg2);
  color:var(--sv-ui-text1);
  cursor:pointer;
  user-select:none;
}


        white - space: normal;
.sv-tip-btn:hover,
        overflow - wrap: anywhere;
.mw-parser-output .sv-tip-btn:hover{
        word -break: break-word;
  background:var(--sv-ui-bg3);
    }
}


    body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > th {
.sv-tip-btn:focus-visible,
        width: 46 % !important;
.mw-parser-output .sv-tip-btn:focus-visible{
        padding: 0.75em 0.75em;
  outline:2px solid var(--sv-ui-accent3);
    }
  outline-offset:2px;
}


    body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > td {
.sv-tip-btn--icon,
        width: 54 % !important;
.sv-tip-btn:not(.sv-tip-btn--pill),
        padding: 0.75em 0.75em;
.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);
}


    body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > th.image img {
.sv-tip-btn--pill,
        width: 64px!important;
.sv-overcap-btn,
        height: auto!important;
.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);
}


    body.skin - citizen table.spiritvale - passive - infobox.spiritvale - infobox - title,
.sv-ico--info,
        body.skin - citizen table.spiritvale - passive - infobox.spiritvale - infobox - description {
.mw-parser-output .sv-ico--info{
        white - space: normal;
  width:18px;
        overflow - wrap: anywhere;
  height:18px;
        word -break: break-word;
  border-radius:999px;
    }
  display:flex;
  align-items:center;
  justify-content:center;
  font-style:normal;
  font-weight:900;
  font-size:12px;
  line-height:1;
}
}


/* ============================================================
/* -------------------------------------------------------------------------- */
  3) Skills
/* 8) Shared disclosure */
  - Single skill: fixed desktop max width
/* -------------------------------------------------------------------------- */
  - List mode: ONE wrapper panel with dividers
  - Top band: nested-table version ONLY
  ========================================================== */


/* Single-skill width */
.sv-disclose,
table.spiritvale - skill - infobox {
.mw-parser-output .sv-disclose{
    width: 100 %;
  position:relative;
    max - width: var(--sv - skill - width);
    margin: 1.25em auto;
    table - layout: fixed;
}
}


/* List wrapper: flush, “pop” border, no background */
.sv-disclose-btn,
.sv - skill - collection {
.mw-parser-output .sv-disclose-btn{
    width: 100 %;
  display:flex;
    max - width: var(--sv - skill - width);
  align-items:center;
    margin: 0 auto!important;
  justify-content:space-between;
    padding: 0!important;
  gap:12px;
  width:100%;
  padding:10px 12px;
  border-radius:var(--sv-ui-rad-md);
  border:1px solid var(--sv-ui-line1);
  background:var(--sv-ui-bg1);
  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));
  color:var(--sv-ui-text1);
  font-weight:900;
  cursor:pointer;
  user-select:none;
}


    border: 2px solid #372b54;
.sv-disclose-btn:hover,
    border - radius: 10px;
.mw-parser-output .sv-disclose-btn:hover{
    box - shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  background:var(--sv-ui-bg2);
    background: transparent!important;
}


    overflow: hidden;
.sv-disclose-btn--compact,
    display: block!important;
.mw-parser-output .sv-disclose-btn--compact{
  border-radius:var(--sv-ui-rad-pill);
  min-height:36px;
  padding:0 12px;
}
}


/* Neutralize Citizen wrappers inside the skill collection */
.sv-disclose-count,
.sv - skill - collection.mw - table - wrapper,
.mw-parser-output .sv-disclose-count{
.sv - skill - collection.table - overflow,
  font-weight:800;
.sv - skill - collection.table - scroll,
  font-size:13px;
.sv - skill - collection.citizen - table {
  color:var(--sv-ui-text3);
    border: none!important;
  white-space:nowrap;
    box - shadow: none!important;
}
    background: transparent!important;
 
    padding: 0!important;
/* -------------------------------------------------------------------------- */
    margin: 0!important;
/* 9) Universal popups */
/* -------------------------------------------------------------------------- */
 
.sv-tip-btn,
.sv-disclose-btn,
.sv-def,
.sv-uipop-head,
.sv-uipop-title,
.sv-uipop-title-link{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
}
}


/* In list mode, each skill becomes a “row” inside the wrapper */
.sv-tip-btn *,
.sv - skill - collection table.spiritvale - skill - infobox {
.sv-disclose-btn *,
    width: 100 %;
.sv-uipop-head *{
    max - width: 100 %;
  -webkit-user-select:none;
    margin: 0!important;
  user-select:none;
}


    border: none!important;
.sv-uipop{
     box - shadow: none!important;
  position:fixed;
     border - radius: 0!important;
  z-index:9000;
  top:0;
  left:0;
  box-sizing:border-box;
  border-radius:var(--sv-ui-rad-lg);
  border:1px solid var(--sv-ui-pop-line, var(--sv-ui-line2));
  background:var(--sv-ui-pop-bg, var(--sv-ui-bg2));
  background-image:
    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));
  color:var(--sv-ui-text1);
  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);
  overflow:hidden;
}
}


/* Divider between skills */
.sv-uipop[aria-hidden="true"]{display:none;}
.sv - skill - collection > * + * {
 
    border- top: 1px solid rgba(148, 163, 184, 0.25);
.sv-uipop--sm,
.sv-uipop--lg{
  width:240px;
  max-width:calc(100vw - 20px);
}
}


/* -------------------------
.sv-uipop--sm{max-height:min(45vh, 320px);}
  Skill top band (nested-table)
.sv-uipop--lg{max-height:min(70vh, 560px);}
  ------------------------- */


table.spiritvale - skill - infobox.sv - topband - cell {
.sv-uipop-head{
    padding: 0!important;
  display:flex;
    background: linear - gradient(
  align-items:center;
        135deg,
  justify-content:center;
        rgba(90, 78, 124, 0.55),
  padding:12px 12px;
        rgba(55, 43, 84, 0.55)
  border-bottom:1px solid var(--sv-ui-line2);
    )!important;
  background:var(--sv-ui-bg3);
}
}


/* Inner 2-column table must fully fill the cell */
.sv-uipop-head--clickable{cursor:pointer;}
table.spiritvale - skill - infobox.sv - topband - table {
 
    width: 100 % !important;
.sv-uipop-title{
    max - width: 100 % !important;
  width:100%;
    margin: 0!important;
  text-align:center;
  font-weight:900;
  font-size:16px;
  letter-spacing:0.02em;
  color:var(--color-emphasized, var(--sv-ui-text1));
}


    border: 0!important;
.sv-uipop-title a.sv-uipop-title-link{
    border - collapse: collapse!important;
  color:inherit;
    border - spacing: 0!important;
  text-decoration:none;
    table - layout: fixed;
    background: transparent!important;
}
}


/* Two halves of the top band */
.sv-uipop-title a.sv-uipop-title-link:hover{
table.spiritvale - skill - infobox.sv - topband - table > tbody > tr > td {
  text-decoration:underline;
    width: 50 %;
  text-decoration-thickness:2px;
    padding: 0!important;
  text-underline-offset:2px;
    vertical - align: middle;
}
}


table.spiritvale - skill - infobox.sv - topband - table > tbody > tr > td: first - child {
.sv-uipop-body{
    border - right: 1px solid rgba(148, 163, 184, 0.25);
  padding:10px 12px 12px;
  font-size:13px;
  line-height:1.4;
  color:var(--sv-ui-text2);
  overflow:auto;
  overflow-wrap:anywhere;
  word-break:break-word;
  -webkit-user-select:text;
  user-select:text;
}
}


/* Left: Level Select block fills the entire half */
.sv-uipop-body--pre{white-space:pre-line;}
table.spiritvale - skill - infobox.sv - level - ui {
 
    width: 100 %;
.sv-uipop-body p,
    margin: 0!important;
.sv-uipop-body ul,
    padding: 0.75em 0.9em;
.sv-uipop-body ol{margin:0;}
 
.sv-uipop-body ul,
.sv-uipop-body ol{padding-left:1.15em;}
 
.sv-uipop-body li{margin:0;}


    display: flex;
.sv-uipop a{
    flex - direction: column;
  color:var(--color-link, var(--sv-ui-accent));
    gap: 0.4em;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:2px;
}
}


table.spiritvale - skill - infobox.sv - level - title {
.sv-uipop a:hover{
    font - weight: 700;
  text-decoration-thickness:3px;
    text - transform: uppercase;
  text-underline-offset:3px;
    letter - spacing: 0.05em;
    font - size: 0.85em;
    opacity: 0.95;
}
}


table.spiritvale - skill - infobox.sv - level - label {
.sv-uipop a:focus-visible,
    font - weight: 600;
.sv-uipop-title a.sv-uipop-title-link:focus-visible{
  outline:2px solid var(--sv-ui-accent3);
  outline-offset:2px;
  border-radius:6px;
}
}


table.spiritvale - skill - infobox.sv - level - slider input[type = "range"] {
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list){
    width: 100 %;
  margin:0;
    box - sizing: border - box;
  padding:0;
  list-style:none;
}
}


/* Right: Type table fills the entire half (Option A integrated) */
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li{
table.spiritvale - skill - infobox.sv - type - table {
  padding:6px 0;
    width: 100 % !important;
  border-top:1px solid var(--sv-ui-line1);
    margin: 0!important;
  font-size:13px;
    padding: 0.75em 0.9em;
  color:var(--sv-ui-text2);
}


    border: 0!important;
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li:first-child{
    border - collapse: collapse!important;
  border-top:none;
    background: transparent!important;
  padding-top:0;
}


    table - layout: fixed;
.sv-uipop :where(.sv-disclose-group-title, .sv-uipop-group-title){
  padding-top:10px;
  font-weight:900;
  font-size:12px;
  letter-spacing:0.02em;
  color:var(--sv-ui-text1);
}
}


table.spiritvale - skill - infobox.sv - type - table th,
.sv-uipop .sv-disclose-sections{
    table.spiritvale - skill - infobox.sv - type - table td {
  display:flex;
    background: transparent!important;
  flex-direction:column;
    padding: 0.2em 0;
  gap:10px;
    vertical - align: top;
    line - height: 1.25;
}
}


/* Label column */
.sv-uipop .sv-disclose-sec + .sv-disclose-sec{
table.spiritvale - skill - infobox.sv - type - table th {
  padding-top:10px;
    width: 6.75em;
  border-top:1px solid var(--sv-ui-line1);
    font - weight: 700;
    white - space: nowrap;
    padding - right: 0.6em;
    text - align: right; /* cleaner, as discussed */
}
}


table.spiritvale - skill - infobox.sv - type - table th::after {
.sv-uipop .sv-disclose-sec-title{
    content: ":";
  font-weight:900;
    opacity: 0.7;
  font-size:13px;
    margin - left: 0.25em;
  letter-spacing:0.02em;
  color:var(--sv-ui-text1);
  margin:0 0 4px 0;
}
}


/* Value column */
.sv-uipop .sv-disclose-sec-items{
table.spiritvale - skill - infobox.sv - type - table td {
  font-size:13px;
    text - align: left!important;
  line-height:1.45;
    white - space: normal;
  color:var(--sv-ui-text2);
    overflow - wrap: anywhere;
    word -break: break-word;
}
}


/* Mobile: stack Level + Type */
.sv-uipop .sv-disclose-item{display:inline;}
@media(max - width: 560px) {
.sv-uipop .sv-disclose-sfx{opacity:0.78;}
    table.spiritvale - skill - infobox.sv - topband - table > tbody > tr > td {
.sv-uipop .sv-tip-pop-body{white-space:pre-line;}
        display: block;
 
        width: 100 %;
/* -------------------------------------------------------------------------- */
     }
/* 10) Motion */
/* -------------------------------------------------------------------------- */
 
@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;
  }


    table.spiritvale - skill - infobox.sv - topband - table > tbody > tr > td: first - child {
  .sv-level-label[data-sv-helper-text]::after,
        border - right: none;
  .sv-level-ui .sv-level-label:not([data-sv-helper-text])::after,
        border - bottom: 1px solid rgba(148, 163, 184, 0.25);
  .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;
  }
}
}
Retrieved from "https://spiritvale.info/wiki/MediaWiki:Common.css"