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
 
(90 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* ============================================================
/* SpiritVale Wiki — Common.css */
   Global custom additions (HARDENED)
/* Role: shared tokens, primitives, utilities, and interactive anatomy */
   - Scoped to page content so it cannot affect the skin header/top bar
/* Scope: sitewide SpiritVale UI foundations only */
  - Uses ONLY hyphenated class names (no generic multi-class fallbacks)
/* -------------------------------------------------------------------------- */
  ========================================================== */
/* 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.                    */
/* -------------------------------------------------------------------------- */


/* Playtest info box */
 
.mw-parser-output .playtest-info-box {
/* -------------------------------------------------------------------------- */
   max-width: 100%;
/* 1) SpiritVale tokens */
   margin: 0 0 10px 0;
/* -------------------------------------------------------------------------- */
   border: 1px solid #ccc;
 
   border-radius: 6px;
:root{
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  /* Surface ladder.
   background: #f0f2f8;
    bg0 = site background only
   padding: 10px;
    bg1 = main component surface
   text-align: center;
    bg2 = nested/grouped panel surface
   color: #333;
    bg3 = deep inset / pill surface
   overflow-wrap: anywhere;
    bg4 = highest emphasis / selected / strong highlight surface
   word-break: break-word;
  */
  --sv-ui-bg0:#0f172a;
  --sv-ui-bg1:#1f2937;
  --sv-ui-bg2:#273449;
  --sv-ui-bg3:#2e3f59;
  --sv-ui-bg4:#4e6d97;
 
  /* Border / frame ladder. */
  --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);
}
}


/* Header container band (your custom page header template wrapper) */
/* Fallback light skin mapping. */
.mw-parser-output .header-container-outer {
.mw-theme-light{
   max-width: 100%;
  --sv-ui-bg0:#1f2937;
   margin: 1px;
  --sv-ui-bg1:#273449;
   border: 2px solid #372b54;
  --sv-ui-bg2:#2e3f59;
   border-radius: 10px;
  --sv-ui-bg3:#364a69;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  --sv-ui-bg4:#6888b4;
   background: #f0f2f8;
 
  --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;
}
}


.mw-parser-output .header-container-middle {
/* -------------------------------------------------------------------------- */
   background: #f0f2f8;
/* 2) Sitewide link treatment */
   color: white;
/* -------------------------------------------------------------------------- */
   text-align: center;
 
   padding: 1px;
.mw-parser-output a{
   border-radius: 8px;
   color:var(--color-link, var(--sv-ui-accent));
   overflow-wrap: anywhere;
   text-decoration:underline;
  word-break: break-word;
   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;
}
}


.mw-parser-output .header-container-inner {
.mw-parser-output a:visited{
   background: linear-gradient(180deg, #5a4e7c, #372b54);
   color:var(--color-visited, var(--sv-ui-accent2));
  color: white;
  text-align: center;
  padding: 1px;
  border-radius: 8px;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 300%;
}
}


/* Generic custom table (yours) */
.mw-parser-output a:hover{
.mw-parser-output table.custom-table {
   text-decoration-thickness:3px;
   float: none;
   text-underline-offset:3px;
  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 table.custom-table > tbody > tr:nth-child(1) > th {
.mw-parser-output a:focus-visible{
   background: linear-gradient(180deg, #7a6fb0, #5a4e7c);
   outline:2px solid var(--sv-ui-accent3);
  color: white;
   outline-offset:2px;
  text-align: center;
   border-radius:6px;
  padding: 6px;
   box-shadow:0 0 0 3px rgba(230,240,255,0.12);
  font-size: 120%;
   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(2) > th {
/* -------------------------------------------------------------------------- */
   text-align: center;
/* 3) Shared primitives */
   padding: 4px;
/* -------------------------------------------------------------------------- */
   border-bottom: 1px solid #555;
 
.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));
}
}


.mw-parser-output table.custom-table > tbody > tr > td {
.sv-card :where(h1,h2,h3,h4,h5,h6,th,summary,.mw-headline),
   text-align: center;
.mw-parser-output .sv-card :where(h1,h2,h3,h4,h5,h6,th,summary,.mw-headline){
  padding: 4px;
   color:var(--color-emphasized, var(--sv-ui-text1));
  border-bottom: 1px solid #555;
}
}


.mw-parser-output table.custom-table > tbody > tr.middle-header > th {
.sv-tile,
   background: linear-gradient(180deg, #7a6fb0, #5a4e7c);
.mw-parser-output .sv-tile{
   color: white;
   background:var(--sv-ui-bg2);
   text-align: center;
   border:1px solid var(--sv-ui-line2);
   padding: 6px;
   border-radius:var(--sv-ui-rad-sm);
  font-size: 110%;
   color:var(--color-emphasized, var(--sv-ui-text1));
}
}


/* Citizen search hover (safe: already targets a specific Citizen class) */
.sv-pill,
.citizen-search-trigger {
.mw-parser-output .sv-pill{
   transition: transform 0.15s ease-in-out;
  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;
}
}
.citizen-search-trigger:hover {
 
   transform: translateY(-2px);
.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,
.mw-parser-output .sv-focus-ring:focus-visible{
  outline:2px solid var(--sv-ui-accent3);
  outline-offset:2px;
  border-radius:var(--sv-ui-rad-sm);
}


/* ============================================================
/* -------------------------------------------------------------------------- */
  HERO TEMPLATE (Shared Infobox System)
/* 3a) Hover lift utility */
  - Used by Skills + Passives (and future templates)
/* -------------------------------------------------------------------------- */
  - Dark mode = default styling
  - Light mode = overrides via .mw-theme-light (plus optional OS fallback)
  ========================================================== */


/* ------------------------------------------------------------
.sv-hover-lift{
  Global sizing tokens
   transition:transform 0.15s ease-in-out;
  --------------------------------------------------------- */
   will-change:transform;
:root {
   --sv-infobox-max: 620px;    /* shared fallback cap */
  --sv-skill-width: 660px;     /* skills pages + lists */
   --sv-passive-width: 540px;   /* passives pages + lists (kept as-is for now) */
}
}


/* ------------------------------------------------------------
.sv-hover-lift:hover{
  Shared base: both Skill + Passive tables
   transform:translateY(-2px);
  --------------------------------------------------------- */
}
table.spiritvale-skill-infobox,
table.spiritvale-passive-infobox {
   border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  max-width: var(--sv-infobox-max);
  margin: 1.5em auto;


  border-radius: 12px;
/* -------------------------------------------------------------------------- */
  overflow: hidden;
/* 3b) Right infobox wrapper */
  border: 1px solid rgba(55, 43, 84, 0.65);
/* -------------------------------------------------------------------------- */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);


   font-size: 0.95em;
.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;
}
}


/* Hero (title + description) band background */
.sv-card.sv-infobox-right.sv-infobox-right--md{max-width:260px;}
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > th,
.sv-card.sv-infobox-right.sv-infobox-right--lg{max-width:320px;}
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,
/* 4) Shared utilities */
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,
.sv-hidden,
table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td {
.mw-parser-output .sv-hidden{
  background: linear-gradient(135deg, #7a6fb0, #372b54);
   display:none !important;
  color: #fff;
  padding: 0.9em 1.1em;
  text-align: center;
   vertical-align: middle;
}
}


/* Row separators */
[hidden]{display:none !important;}
table.spiritvale-skill-infobox > tbody > tr,
 
table.spiritvale-passive-infobox > tbody > tr {
.sv-miss,
   border-bottom: 1px solid rgba(148, 163, 184, 0.40);
.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;
}
}
table.spiritvale-skill-infobox > tbody > tr:last-child,
 
table.spiritvale-passive-infobox > tbody > tr:last-child {
.sv-img,
   border-bottom: none;
.mw-parser-output .sv-img{
  display:inline-flex;
  align-items:center;
   justify-content:center;
}
}


/* Label/value rows (shared default) */
.sv-img img,
table.spiritvale-skill-infobox > tbody > tr:not(.spiritvale-infobox-main) > th:not(.spiritvale-infobox-section-header),
.mw-parser-output .sv-img img{
table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > th:not(.spiritvale-infobox-section-header) {
   display:block;
   width: 26%;
   max-width:100%;
   padding: 0.45em 0.85em;
   height:auto;
   text-align: left;
   border-radius:var(--sv-ui-rad-sm);
   font-weight: 600;
  white-space: nowrap;
}
}


table.spiritvale-skill-infobox > tbody > tr > td,
.sv-img--shadow img,
table.spiritvale-passive-infobox > tbody > tr > td {
.mw-parser-output .sv-img--shadow img{
   padding: 0.45em 0.85em;
   box-shadow:0 10px 18px rgba(0,0,0,0.35);
  text-align: left;
}
}


/* Zebra striping */
/* -------------------------------------------------------------------------- */
table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > td,
/* 5) Shared level selector */
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) {
.sv-level-ui,
   background-color: rgba(148, 163, 184, 0.05);
.mw-parser-output .sv-level-ui{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  text-align:center;
   margin:0;
}
}


/* Hero helper classes (icon + title + description) */
.sv-level-label,
.spiritvale-infobox-main-left-inner {
.mw-parser-output .sv-level-label{
   display: flex;
   margin:0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
}
}


.spiritvale-infobox-title {
.sv-level-label[data-sv-helper-text],
   font-size: 1.25em;
.sv-level-ui .sv-level-label:not([data-sv-helper-text]),
   font-weight: 600;
.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;
}
}


.spiritvale-infobox-main-right-inner {
.sv-level-ui .sv-level-label:not([data-sv-helper-text]),
   display: flex;
.mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text]){
   align-items: center;
   position:static;
   justify-content: center;
   top:auto;
  right:auto;
  bottom:auto;
  left:auto;
   transform:none;
}
}


.spiritvale-infobox-description {
.sv-level-label[data-sv-helper-text]::after,
   font-size: 1.05em;
.mw-parser-output .sv-level-label[data-sv-helper-text]::after{
   font-style: italic;
   content:attr(data-sv-helper-text);
   text-align: center;
  display:inline-block;
   max-width: 42em;
   font-weight:900;
   margin: 0 auto;
   font-size:12px;
   opacity: 0.95;
   line-height:1.25;
   letter-spacing:0.15px;
   color:var(--sv-ui-text1);
}
}


/* Skill hero split-row tuning */
.sv-level-ui .sv-level-label:not([data-sv-helper-text])::after,
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row {
.mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text])::after{
   border-bottom: none !important;
   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);
}
}
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th {
 
   padding-bottom: 0.55em;
.sv-level-slider,
.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;
}
}
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td {
 
   padding-top: 0.55em;
.sv-level-slider input.sv-level-range[type="range"],
   padding-bottom: 0.55em;
.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;
  box-sizing:border-box;
  margin:0;
  order:1;
}
}


/* ------------------------------------------------------------
.sv-level-endvalue,
  SKILLS: sizing + list wrapper behavior
.mw-parser-output .sv-level-endvalue{
  --------------------------------------------------------- */
  flex:0 0 auto;
table.spiritvale-skill-infobox {
  order:2;
   max-width: var(--sv-skill-width);
  min-width:28px;
   margin: 1.25em auto;
  padding:1px 7px;
   table-layout: fixed;
  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;
}
}


/* List-mode wrapper: one outer panel, skills become rows inside it */
.sv-level--hide-ticks .sv-level-ticklabels,
.sv-skill-collection {
[data-sv-level-hide-ticks="1"] .sv-level-ticklabels,
   width: 100%;
.mw-parser-output .sv-level--hide-ticks .sv-level-ticklabels,
   max-width: var(--sv-skill-width);
.mw-parser-output [data-sv-level-hide-ticks="1"] .sv-level-ticklabels{
   margin: 0 auto !important;
  display:none;
   padding: 0 !important;
}
 
.sv-level-range--custom,
.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;
}
 
.sv-level-track{
  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;
}
 
.sv-level-fill{
  display:block;
  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));
}
 
.sv-level-thumb{
  position:absolute;
  left:0%;
  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);
}


   border: 2px solid #372b54;
.sv-level-ticklabels{
   border-radius: 10px;
   display:flex;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
   justify-content:space-between;
   background: transparent !important;
  gap:10px;
   margin-top:7px;
  font-weight:900;
  font-size:12px;
  color:var(--sv-ui-text3);
  line-height:1.1;
   min-height:12px;
}


   overflow: hidden;
.sv-level-tick{
   display: block !important;
  display:inline-flex;
   align-items:center;
   justify-content:center;
  min-width:18px;
}
}


/* Neutralize Citizen wrappers inside the collection */
.sv-level-range--custom .sv-level-bubble,
.sv-skill-collection .mw-table-wrapper,
.sv-level-range[data-sv-slider="1"] .sv-level-bubble{
.sv-skill-collection .table-overflow,
  position:absolute;
.sv-skill-collection .table-scroll,
  top:-45px;
.sv-skill-collection .citizen-table {
  left:0%;
   border: none !important;
  transform:translateX(-50%);
   box-shadow: none !important;
  padding:9px 15px;
   background: transparent !important;
  border-radius:36px;
   padding: 0 !important;
  border:1px solid var(--sv-ui-line3);
   margin: 0 !important;
  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;
}
}


/* Remove each skill’s individual border/shadow when inside the list wrapper */
.sv-level-range--custom .sv-level-bubble:after,
.sv-skill-collection table.spiritvale-skill-infobox {
.sv-level-range[data-sv-slider="1"] .sv-level-bubble:after{
   width: 100%;
   content:"";
   max-width: 100%;
  position:absolute;
   margin: 0 !important;
  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);
}


   border: none !important;
.sv-level-range--custom:focus-visible,
   box-shadow: none !important;
.sv-level-range[data-sv-slider="1"]:focus-visible{
   border-radius: 0 !important;
   outline:2px solid var(--sv-ui-accent3);
   outline-offset:2px;
   border-radius:var(--sv-ui-rad-sm);
}
}


/* Divider between skill entries in list mode */
/* -------------------------------------------------------------------------- */
.sv-skill-collection > * + * {
/* 6) Shared tabs */
   border-top: 1px solid rgba(148, 163, 184, 0.25);
/* -------------------------------------------------------------------------- */
 
.sv-tabs,
.mw-parser-output .sv-tabs{
   margin:10px 0 0;
}
}


/* ------------------------------------------------------------
.sv-tabs-list,
  SKILLS: Hero Modules (4-slot scaffold)
.mw-parser-output .sv-tabs-list{
  - Replaces the old “top band (nested-table)” system
   display:flex;
  - Row contains a 2x2 grid of module boxes
   gap:8px;
  --------------------------------------------------------- */
  flex-wrap:wrap;
table.spiritvale-skill-infobox tr.hero-modules-row > td.hero-modules-cell {
  margin:0 0 10px 0;
   padding: 0 !important;
   padding:0;
   background: linear-gradient(
    135deg,
    rgba(40, 30, 70, 0.92),
    rgba(22, 16, 45, 0.92)
  ) !important;
   color: #fff;
}
}


/* 2x2 grid of module boxes */
.sv-tab,
table.spiritvale-skill-infobox .hero-modules-grid {
.mw-parser-output .sv-tab{
   display: grid;
   display:inline-flex;
   grid-template-columns: 1fr 1fr;
   align-items:center;
   gap: 0;
  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;
}
}


/* Standard module box styling */
.sv-tab:hover,
table.spiritvale-skill-infobox .hero-module {
.mw-parser-output .sv-tab:hover{
   padding: 0.6em 0.75em;
   background:var(--sv-ui-bg3);
  box-sizing: border-box;
}


   border-top: 1px solid rgba(255, 255, 255, 0.10);
.sv-tab[aria-selected="true"],
   border-left: 1px solid rgba(255, 255, 255, 0.10);
.mw-parser-output .sv-tab[aria-selected="true"]{
   background:var(--sv-ui-bg3);
   border-color:var(--sv-ui-accent);
}


  background: rgba(18, 12, 32, 0.72); /* <-- much darker than 0.18 */
.sv-tabpanel,
   box-shadow:
.mw-parser-output .sv-tabpanel{
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
   padding:10px 12px;
    inset 0 0 0 1px rgba(0, 0, 0, 0.30);
  border-radius:var(--sv-ui-rad-md);
  border:1px solid var(--sv-ui-line1);
  background:var(--sv-ui-bg1);
}


   color: #fff;
.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);
}
}


/* Grid borders: remove top border on first row; remove left border on first column */
/* -------------------------------------------------------------------------- */
table.spiritvale-skill-infobox .hero-module:nth-child(-n + 2) {
/* 7) Shared tip trigger */
   border-top: none;
/* -------------------------------------------------------------------------- */
 
.sv-tip,
.mw-parser-output .sv-tip{
  position:relative;
  display:inline-flex;
  align-items:center;
   flex:0 0 auto;
}
}
table.spiritvale-skill-infobox .hero-module:nth-child(odd) {
 
   border-left: none;
.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;
}
}


/* Empty slots still reserve vertical space for future modules */
.sv-tip-btn:hover,
table.spiritvale-skill-infobox .hero-module-empty .hero-module-body {
.mw-parser-output .sv-tip-btn:hover{
   min-height: 3.2em;
   background:var(--sv-ui-bg3);
}
}


/* ------------------------------------------------------------
.sv-tip-btn:focus-visible,
  SKILLS: Module 1 – Level Selector (self-contained)
.mw-parser-output .sv-tip-btn:focus-visible{
  --------------------------------------------------------- */
  outline:2px solid var(--sv-ui-accent3);
table.spiritvale-skill-infobox .module-level-selector .sv-level-ui {
   outline-offset:2px;
  width: 100%;
  margin: 0 !important;
   display: flex;
  flex-direction: column;
  gap: 0.3em;
}
}


table.spiritvale-skill-infobox .module-level-selector .sv-level-title {
.sv-tip-btn--icon,
  font-weight: 700;
.sv-tip-btn:not(.sv-tip-btn--pill),
  text-transform: uppercase;
.mw-parser-output .sv-tip-btn--icon,
   letter-spacing: 0.05em;
.mw-parser-output .sv-tip-btn:not(.sv-tip-btn--pill){
   font-size: 0.8em;
   width:28px;
   opacity: 0.95;
   height:28px;
   border-radius:var(--sv-ui-rad-pill);
}
}


table.spiritvale-skill-infobox .module-level-selector .sv-level-label {
.sv-tip-btn--pill,
   font-weight: 600;
.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);
}
}


table.spiritvale-skill-infobox .module-level-selector .sv-level-slider input[type="range"] {
.sv-ico--info,
   width: 100%;
.mw-parser-output .sv-ico--info{
   box-sizing: border-box;
   width:18px;
   margin: 0;
  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;
}
}


/* ------------------------------------------------------------
/* -------------------------------------------------------------------------- */
  SKILLS: Module 2 – Skill Type (self-contained 2x2 grid)
/* 8) Shared disclosure */
  --------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
table.spiritvale-skill-infobox .module-skill-type .sv-type-grid {
  width: 100%;
  margin: 0 !important;
  padding: 0;
  box-sizing: border-box;


  display: grid;
.sv-disclose,
  grid-template-columns: 1fr 1fr;
.mw-parser-output .sv-disclose{
   gap: 0;
   position:relative;
}
}


table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk {
.sv-disclose-btn,
   display: flex;
.mw-parser-output .sv-disclose-btn{
   flex-direction: column;
   display:flex;
   align-items: center;
   align-items:center;
   justify-content: center;
  justify-content:space-between;
  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;
}


  text-align: center;
.sv-disclose-btn:hover,
   padding: 0.35em 0.45em;
.mw-parser-output .sv-disclose-btn:hover{
   background:var(--sv-ui-bg2);
}


   border-top: 1px solid rgba(148, 163, 184, 0.18);
.sv-disclose-btn--compact,
   border-left: 1px solid rgba(148, 163, 184, 0.18);
.mw-parser-output .sv-disclose-btn--compact{
   border-radius:var(--sv-ui-rad-pill);
   min-height:36px;
  padding:0 12px;
}
}


/* Grid borders */
.sv-disclose-count,
table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk:nth-child(-n + 2) {
.mw-parser-output .sv-disclose-count{
   border-top: none;
  font-weight:800;
  font-size:13px;
  color:var(--sv-ui-text3);
   white-space:nowrap;
}
}
table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk:nth-child(odd) {
 
   border-left: none;
/* -------------------------------------------------------------------------- */
/* 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;
}
}


table.spiritvale-skill-infobox .module-skill-type .sv-type-label {
.sv-tip-btn *,
   width: 100%;
.sv-disclose-btn *,
   padding: 0.18em 0.35em;
.sv-uipop-head *{
  border-radius: 6px;
   -webkit-user-select:none;
   user-select:none;
}


   font-weight: 800;
.sv-uipop{
   text-transform: uppercase;
  position:fixed;
   letter-spacing: 0.03em;
  z-index:9000;
   font-size: 0.72em;
  top:0;
   line-height: 1.15;
  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;
}
 
.sv-uipop[aria-hidden="true"]{display:none;}


  background: linear-gradient(
.sv-uipop--sm,
    180deg,
.sv-uipop--lg{
    rgba(122, 111, 176, 0.35),
  width:240px;
    rgba(90, 78, 124, 0.20)
   max-width:calc(100vw - 20px);
   );
}
}


table.spiritvale-skill-infobox .module-skill-type .sv-type-value {
.sv-uipop--sm{max-height:min(45vh, 320px);}
  margin-top: 0.2em;
.sv-uipop--lg{max-height:min(70vh, 560px);}
  font-weight: 600;
  line-height: 1.25;


   white-space: normal;
.sv-uipop-head{
   overflow-wrap: anywhere;
   display:flex;
   word-break: break-word;
  align-items:center;
   justify-content:center;
  padding:12px 12px;
   border-bottom:1px solid var(--sv-ui-line2);
  background:var(--sv-ui-bg3);
}
}


/* Mobile: modules stack to 1 column; type grid becomes 1 column */
.sv-uipop-head--clickable{cursor:pointer;}
@media (max-width: 560px) {
  table.spiritvale-skill-infobox .hero-modules-grid {
    grid-template-columns: 1fr;
  }


   table.spiritvale-skill-infobox .hero-module {
.sv-uipop-title{
    border-left: none;
   width:100%;
   }
  text-align:center;
  font-weight:900;
  font-size:16px;
  letter-spacing:0.02em;
   color:var(--color-emphasized, var(--sv-ui-text1));
}


  table.spiritvale-skill-infobox .hero-module:first-child {
.sv-uipop-title a.sv-uipop-title-link{
    border-top: none;
  color:inherit;
  }
  text-decoration:none;
}


  table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk {
.sv-uipop-title a.sv-uipop-title-link:hover{
    padding: 0.28em 0.35em;
  text-decoration:underline;
   }
  text-decoration-thickness:2px;
   text-underline-offset:2px;
}


  table.spiritvale-skill-infobox .module-skill-type .sv-type-label {
.sv-uipop-body{
    font-size: 0.68em;
  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;
}
}


.sv-uipop-body--pre{white-space:pre-line;}
.sv-uipop-body p,
.sv-uipop-body ul,
.sv-uipop-body ol{margin:0;}


/* ------------------------------------------------------------
.sv-uipop-body ul,
  PASSIVES (kept as-is for now)
.sv-uipop-body ol{padding-left:1.15em;}
  --------------------------------------------------------- */
 
table.spiritvale-passive-infobox {
.sv-uipop-body li{margin:0;}
   width: var(--sv-passive-width);
 
   max-width: var(--sv-passive-width);
.sv-uipop a{
   margin: 1em auto;
   color:var(--color-link, var(--sv-ui-accent));
   table-layout: fixed;
   text-decoration:underline;
   text-decoration-thickness:2px;
   text-underline-offset:2px;
}
}


/* Passive split hero rows (match Skills) */
.sv-uipop a:hover{
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row {
  text-decoration-thickness:3px;
   border-bottom: none !important;
   text-underline-offset:3px;
}
}
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th {
 
   padding-bottom: 0.55em;
.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;
}
}
table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td {
 
   padding-top: 0.55em;
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list){
   padding-bottom: 0.55em;
  margin:0;
   padding:0;
   list-style:none;
}
}


/* Center + wrap passive body rows */
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li{
table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > th,
   padding:6px 0;
table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > td {
   border-top:1px solid var(--sv-ui-line1);
   text-align: center;
   font-size:13px;
   vertical-align: middle;
   color:var(--sv-ui-text2);
   white-space: normal;
   overflow-wrap: anywhere;
  word-break: break-word;
}
}


/* Passive section headers centered */
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li:first-child{
table.spiritvale-passive-infobox .spiritvale-infobox-section-header {
   border-top:none;
   text-align: center;
  padding-top:0;
}
}


/* Passive list layout */
.sv-uipop :where(.sv-disclose-group-title, .sv-uipop-group-title){
.spiritvale-passive-list {
   padding-top:10px;
   display: flex;
   font-weight:900;
   flex-direction: column;
   font-size:12px;
   align-items: center;
   letter-spacing:0.02em;
   gap: 1.25em;
  color:var(--sv-ui-text1);
}
}


/* Remove Citizen wrapper borders/spacing around passive tables in lists */
.sv-uipop .sv-disclose-sections{
.spiritvale-passive-list .mw-table-wrapper,
   display:flex;
.spiritvale-passive-list .table-overflow,
   flex-direction:column;
.spiritvale-passive-list .table-scroll,
   gap:10px;
.spiritvale-passive-list .citizen-table {
   border: none !important;
   box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
   margin: 0 !important;
}
}


/* ------------------------------------------------------------
.sv-uipop .sv-disclose-sec + .sv-disclose-sec{
  LIGHT MODE OVERRIDES
  padding-top:10px;
  - Primary: .mw-theme-light (MediaWiki theme flag)
  border-top:1px solid var(--sv-ui-line1);
  - Optional fallback: OS prefers-color-scheme: light
}
  --------------------------------------------------------- */


.sv-uipop .sv-disclose-sec-title{
  font-weight:900;
  font-size:13px;
  letter-spacing:0.02em;
  color:var(--sv-ui-text1);
  margin:0 0 4px 0;
}


/* Shared: stronger zebra striping + row separators in light mode */
.sv-uipop .sv-disclose-sec-items{
.mw-theme-light table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > td,
  font-size:13px;
.mw-theme-light table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header),
  line-height:1.45;
.mw-theme-light table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > td,
  color:var(--sv-ui-text2);
.mw-theme-light table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header) {
  background-color: rgba(148, 163, 184, 0.12);
}
}


.mw-theme-light table.spiritvale-skill-infobox > tbody > tr,
.sv-uipop .sv-disclose-item{display:inline;}
.mw-theme-light table.spiritvale-passive-infobox > tbody > tr {
.sv-uipop .sv-disclose-sfx{opacity:0.78;}
   border-bottom: 1px solid rgba(55, 43, 84, 0.18);
.sv-uipop .sv-tip-pop-body{white-space:pre-line;}
 
/* -------------------------------------------------------------------------- */
/* 10) Motion */
/* -------------------------------------------------------------------------- */
 
@media (prefers-reduced-motion: reduce){
  .sv-hover-lift{transition:none;}
   .sv-hover-lift:hover{transform:none;}
}
}


  table.spiritvale-skill-infobox .hero-module {
/* -------------------------------------------------------------------------- */
    background: rgba(255, 255, 255, 0.65);
/* 11) Responsive                                                              */
  }
/* -------------------------------------------------------------------------- */
/* default (<640px): compact end value and helper text.                        */
/* sm and up (>=640px): restore the standard control sizing.                   */


  table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > td,
@media (min-width:640px){
   table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header),
   .sv-level-endvalue,
   table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > td,
   .mw-parser-output .sv-level-endvalue{
  table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header) {
    padding:2px 8px;
     background-color: rgba(148, 163, 184, 0.12);
    min-width:30px;
    font-size:13px;
     line-height:1.25;
   }
   }


   table.spiritvale-skill-infobox > tbody > tr,
   .sv-level-label[data-sv-helper-text]::after,
   table.spiritvale-passive-infobox > tbody > tr {
   .sv-level-ui .sv-level-label:not([data-sv-helper-text])::after,
    border-bottom: 1px solid rgba(55, 43, 84, 0.18);
  .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"