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
 
(97 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* ============================================================
/* SpiritVale Wiki — Common.css */
   HERO TEMPLATE (Shared Infobox System)
/* Role: shared tokens, primitives, utilities, and interactive anatomy */
   - Used by Skills + Passives (and future templates)
/* Scope: sitewide SpiritVale UI foundations only */
  - Dark mode = default styling
/* -------------------------------------------------------------------------- */
  - Light mode = overrides via .mw-theme-light (plus optional OS fallback)
/* 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.                    */
/* -------------------------------------------------------------------------- */


/* ------------------------------------------------------------
 
  Global sizing tokens
/* -------------------------------------------------------------------------- */
  --------------------------------------------------------- */
/* 1) SpiritVale tokens */
:root {
/* -------------------------------------------------------------------------- */
   --sv-infobox-max: 620px;     /* shared fallback cap */
 
   --sv-skill-width: 660px;     /* skills pages + lists */
:root{
   --sv-passive-width: 540px;  /* passives pages + lists (kept as-is for now) */
  /* 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-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);
}
 
/* 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;
}
}


/* ------------------------------------------------------------
/* -------------------------------------------------------------------------- */
  Shared base: both Skill + Passive tables
/* 2) Sitewide link treatment */
  --------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
table.spiritvale-skill-infobox,
 
table.spiritvale-passive-infobox {
.mw-parser-output a{
   border-collapse: separate;
  color:var(--color-link, var(--sv-ui-accent));
   border-spacing: 0;
  text-decoration:underline;
   width: 100%;
  text-decoration-thickness:2px;
   max-width: var(--sv-infobox-max);
  text-underline-offset:2px;
   margin: 1.5em auto;
  text-decoration-skip-ink:auto;
  transition:
    color 120ms ease,
    text-decoration-thickness 120ms ease,
    text-underline-offset 120ms ease;
}
 
.mw-parser-output a:visited{
   color:var(--color-visited, var(--sv-ui-accent2));
}
 
.mw-parser-output a:hover{
   text-decoration-thickness:3px;
   text-underline-offset:3px;
}
 
.mw-parser-output a:focus-visible{
   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);
}


  border-radius: 12px;
/* -------------------------------------------------------------------------- */
  overflow: hidden;
/* 3) Shared primitives */
  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,
.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));
}
}


/* Hero (title + description) band background */
.sv-card :where(h1,h2,h3,h4,h5,h6,th,summary,.mw-headline),
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > th,
.mw-parser-output .sv-card :where(h1,h2,h3,h4,h5,h6,th,summary,.mw-headline){
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > td,
  color:var(--color-emphasized, var(--sv-ui-text1));
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: linear-gradient(135deg, #7a6fb0, #372b54);
  color: #fff;
  padding: 0.9em 1.1em;
  text-align: center;
  vertical-align: middle;
}
}


/* Row separators */
.sv-tile,
table.spiritvale-skill-infobox > tbody > tr,
.mw-parser-output .sv-tile{
table.spiritvale-passive-infobox > tbody > tr {
  background:var(--sv-ui-bg2);
   border-bottom: 1px solid rgba(148, 163, 184, 0.40);
   border:1px solid var(--sv-ui-line2);
  border-radius:var(--sv-ui-rad-sm);
  color:var(--color-emphasized, var(--sv-ui-text1));
}
}
table.spiritvale-skill-infobox > tbody > tr:last-child,
 
table.spiritvale-passive-infobox > tbody > tr:last-child {
.sv-pill,
   border-bottom: none;
.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;
}
}


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


table.spiritvale-skill-infobox > tbody > tr > td,
.sv-pill--value,
table.spiritvale-passive-infobox > tbody > tr > td {
.mw-parser-output .sv-pill--value{
   padding: 0.45em 0.85em;
   border-radius:var(--sv-ui-rad-pill);
   text-align: left;
  font-weight:900;
   text-transform:none;
  letter-spacing:0.01em;
}
}


/* Zebra striping */
.sv-focus-ring:focus-visible,
table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > td,
.mw-parser-output .sv-focus-ring:focus-visible{
table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header),
  outline:2px solid var(--sv-ui-accent3);
table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > td,
  outline-offset:2px;
table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header) {
  border-radius:var(--sv-ui-rad-sm);
  background-color: rgba(148, 163, 184, 0.05);
}
}


/* Hero helper classes (icon + title + description) */
/* -------------------------------------------------------------------------- */
.spiritvale-infobox-main-left-inner {
/* 3a) Hover lift utility */
   display: flex;
/* -------------------------------------------------------------------------- */
  flex-direction: column;
 
  align-items: center;
.sv-hover-lift{
   justify-content: center;
   transition:transform 0.15s ease-in-out;
  gap: 0.35em;
   will-change:transform;
}
}


.spiritvale-infobox-title {
.sv-hover-lift:hover{
   font-size: 1.25em;
   transform:translateY(-2px);
  font-weight: 600;
}
}


.spiritvale-infobox-main-right-inner {
/* -------------------------------------------------------------------------- */
   display: flex;
/* 3b) Right infobox wrapper */
   align-items: center;
/* -------------------------------------------------------------------------- */
   justify-content: center;
 
.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;
}
}


.spiritvale-infobox-description {
.sv-card.sv-infobox-right.sv-infobox-right--md{max-width:260px;}
  font-size: 1.05em;
.sv-card.sv-infobox-right.sv-infobox-right--lg{max-width:320px;}
  font-style: italic;
 
  text-align: center;
/* -------------------------------------------------------------------------- */
  max-width: 42em;
/* 4) Shared utilities */
  margin: 0 auto;
/* -------------------------------------------------------------------------- */
   opacity: 0.95;
 
.sv-hidden,
.mw-parser-output .sv-hidden{
   display:none !important;
}
}


/* Skill hero split-row tuning */
[hidden]{display:none !important;}
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row {
 
   border-bottom: none !important;
.sv-miss,
.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.sv-hero-title-row > th {
 
   padding-bottom: 0.55em;
.sv-img,
.mw-parser-output .sv-img{
  display:inline-flex;
  align-items:center;
   justify-content:center;
}
}
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td {
 
   padding-top: 0.55em;
.sv-img img,
   padding-bottom: 0.55em;
.mw-parser-output .sv-img img{
   display:block;
  max-width:100%;
  height:auto;
   border-radius:var(--sv-ui-rad-sm);
}
}


/* ------------------------------------------------------------
.sv-img--shadow img,
  SKILLS: sizing + list wrapper behavior
.mw-parser-output .sv-img--shadow img{
  --------------------------------------------------------- */
   box-shadow:0 10px 18px rgba(0,0,0,0.35);
table.spiritvale-skill-infobox {
   max-width: var(--sv-skill-width);
  margin: 1.25em auto;
  table-layout: fixed;
}
}


/* List-mode wrapper: one outer panel, skills become rows inside it */
/* -------------------------------------------------------------------------- */
.sv-skill-collection {
/* 5) Shared level selector */
  width: 100%;
/* -------------------------------------------------------------------------- */
  max-width: var(--sv-skill-width);
  margin: 0 auto !important;
  padding: 0 !important;


   border: 2px solid #372b54;
.sv-level-ui,
   border-radius: 10px;
.mw-parser-output .sv-level-ui{
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  display:flex;
   background: transparent !important;
  align-items:center;
  justify-content:center;
   gap:8px;
   flex-wrap:wrap;
   text-align:center;
  margin:0;
}
 
.sv-level-label,
.mw-parser-output .sv-level-label{
   margin:0;
}


   overflow: hidden;
.sv-level-label[data-sv-helper-text],
   display: block !important;
.sv-level-ui .sv-level-label:not([data-sv-helper-text]),
.mw-parser-output .sv-level-label[data-sv-helper-text],
.mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text]){
  display:inline-block;
  margin:0;
   padding:0;
   font-size:0;
  line-height:0;
}
}


/* Neutralize Citizen wrappers inside the collection */
.sv-level-ui .sv-level-label:not([data-sv-helper-text]),
.sv-skill-collection .mw-table-wrapper,
.mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text]){
.sv-skill-collection .table-overflow,
   position:static;
.sv-skill-collection .table-scroll,
  top:auto;
.sv-skill-collection .citizen-table {
   right:auto;
   border: none !important;
   bottom:auto;
   box-shadow: none !important;
   left:auto;
   background: transparent !important;
   transform:none;
   padding: 0 !important;
   margin: 0 !important;
}
}


/* Remove each skill’s individual border/shadow when inside the list wrapper */
.sv-level-label[data-sv-helper-text]::after,
.sv-skill-collection table.spiritvale-skill-infobox {
.mw-parser-output .sv-level-label[data-sv-helper-text]::after{
   width: 100%;
   content:attr(data-sv-helper-text);
   max-width: 100%;
  display:inline-block;
   margin: 0 !important;
   font-weight:900;
   font-size:12px;
  line-height:1.25;
  letter-spacing:0.15px;
  color:var(--sv-ui-text1);
}


   border: none !important;
.sv-level-ui .sv-level-label:not([data-sv-helper-text])::after,
   box-shadow: none !important;
.mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text])::after{
   border-radius: 0 !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);
}
}


/* Divider between skill entries in list mode */
.sv-level-slider,
.sv-skill-collection > * + * {
.mw-parser-output .sv-level-slider{
   border-top: 1px solid rgba(148, 163, 184, 0.25);
   position:relative;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  width:100%;
  flex-wrap:nowrap;
  direction:ltr;
}
}


/* ------------------------------------------------------------
.sv-level-slider input.sv-level-range[type="range"],
  SKILLS: Hero Modules (4-slot scaffold)
.sv-level-slider .sv-level-range--custom,
  - Replaces the old “top band (nested-table)” system
.sv-level-slider .sv-level-range[data-sv-slider="1"],
  - Row contains a 2x2 grid of module boxes
.mw-parser-output .sv-level-slider input.sv-level-range[type="range"],
  --------------------------------------------------------- */
.mw-parser-output .sv-level-slider .sv-level-range--custom,
table.spiritvale-skill-infobox tr.hero-modules-row > td.hero-modules-cell {
.mw-parser-output .sv-level-slider .sv-level-range[data-sv-slider="1"]{
   padding: 0 !important;
   flex:1 1 auto;
   background: linear-gradient(
  min-width:0;
    135deg,
   width:auto;
    rgba(90, 78, 124, 0.55),
  box-sizing:border-box;
    rgba(55, 43, 84, 0.55)
  margin:0;
   ) !important;
   order:1;
}
}


/* 2x2 grid of module boxes */
.sv-level-endvalue,
table.spiritvale-skill-infobox .hero-modules-grid {
.mw-parser-output .sv-level-endvalue{
   display: grid;
   flex:0 0 auto;
   grid-template-columns: 1fr 1fr;
  order:2;
   gap: 0;
  min-width:28px;
  padding:1px 7px;
  border-radius:var(--sv-ui-rad-pill);
  border:1px solid var(--sv-ui-pill-line);
  background:var(--sv-ui-pill-bg);
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:var(--sv-ui-pill-shadow);
  color:var(--sv-ui-text2);
  font-weight:900;
   font-size:12px;
  line-height:1.25;
   letter-spacing:0.15px;
  text-align:center;
  white-space:nowrap;
}
}


/* Standard module box styling */
.sv-level--hide-ticks .sv-level-ticklabels,
table.spiritvale-skill-infobox .hero-module {
[data-sv-level-hide-ticks="1"] .sv-level-ticklabels,
  padding: 0.6em 0.75em;
.mw-parser-output .sv-level--hide-ticks .sv-level-ticklabels,
   box-sizing: border-box;
.mw-parser-output [data-sv-level-hide-ticks="1"] .sv-level-ticklabels{
   display:none;
}


   border-top: 1px solid rgba(148, 163, 184, 0.25);
.sv-level-range--custom,
   border-left: 1px solid rgba(148, 163, 184, 0.25);
.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;
}


   background: rgba(90, 78, 124, 0.18);
.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;
}
}


/* Grid borders: remove top border on first row; remove left border on first column */
.sv-level-fill{
table.spiritvale-skill-infobox .hero-module:nth-child(-n + 2) {
  display:block;
   border-top: none;
  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 .hero-module:nth-child(odd) {
 
   border-left: none;
.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);
}
}


/* Empty slots still reserve vertical space for future modules */
.sv-level-ticklabels{
table.spiritvale-skill-infobox .hero-module-empty .hero-module-body {
  display:flex;
   min-height: 3.2em;
  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{
  SKILLS: Module 1 – Level Selector (self-contained)
   display:inline-flex;
  --------------------------------------------------------- */
   align-items:center;
table.spiritvale-skill-infobox .module-level-selector .sv-level-ui {
   justify-content:center;
   width: 100%;
   min-width:18px;
   margin: 0 !important;
   display: flex;
   flex-direction: column;
  gap: 0.3em;
}
}


table.spiritvale-skill-infobox .module-level-selector .sv-level-title {
.sv-level-range--custom .sv-level-bubble,
   font-weight: 700;
.sv-level-range[data-sv-slider="1"] .sv-level-bubble{
   text-transform: uppercase;
   position:absolute;
   letter-spacing: 0.05em;
  top:-45px;
   font-size: 0.8em;
  left:0%;
   opacity: 0.95;
  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;
}
}


table.spiritvale-skill-infobox .module-level-selector .sv-level-label {
.sv-level-range--custom .sv-level-bubble:after,
   font-weight: 600;
.sv-level-range[data-sv-slider="1"] .sv-level-bubble:after{
   content:"";
  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-skill-infobox .module-level-selector .sv-level-slider input[type="range"] {
.sv-level-range--custom:focus-visible,
   width: 100%;
.sv-level-range[data-sv-slider="1"]:focus-visible{
   box-sizing: border-box;
   outline:2px solid var(--sv-ui-accent3);
   margin: 0;
   outline-offset:2px;
   border-radius:var(--sv-ui-rad-sm);
}
}


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


  display: grid;
.sv-tabs,
  grid-template-columns: 1fr 1fr;
.mw-parser-output .sv-tabs{
   gap: 0;
   margin:10px 0 0;
}
}


table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk {
.sv-tabs-list,
   display: flex;
.mw-parser-output .sv-tabs-list{
   flex-direction: column;
   display:flex;
   align-items: center;
  gap:8px;
   justify-content: center;
   flex-wrap:wrap;
   margin:0 0 10px 0;
   padding:0;
}


   text-align: center;
.sv-tab,
   padding: 0.35em 0.45em;
.mw-parser-output .sv-tab{
   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;
}


  border-top: 1px solid rgba(148, 163, 184, 0.18);
.sv-tab:hover,
   border-left: 1px solid rgba(148, 163, 184, 0.18);
.mw-parser-output .sv-tab:hover{
   background:var(--sv-ui-bg3);
}
}


/* Grid borders */
.sv-tab[aria-selected="true"],
table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk:nth-child(-n + 2) {
.mw-parser-output .sv-tab[aria-selected="true"]{
   border-top: none;
  background:var(--sv-ui-bg3);
   border-color:var(--sv-ui-accent);
}
}
table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk:nth-child(odd) {
 
   border-left: none;
.sv-tabpanel,
.mw-parser-output .sv-tabpanel{
  padding:10px 12px;
  border-radius:var(--sv-ui-rad-md);
   border:1px solid var(--sv-ui-line1);
  background:var(--sv-ui-bg1);
}
}


table.spiritvale-skill-infobox .module-skill-type .sv-type-label {
.sv-tab:focus-visible,
   width: 100%;
.mw-parser-output .sv-tab:focus-visible,
   padding: 0.18em 0.35em;
.sv-disclose-btn:focus-visible,
   border-radius: 6px;
.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);
}


  font-weight: 800;
/* -------------------------------------------------------------------------- */
  text-transform: uppercase;
/* 7) Shared tip trigger */
  letter-spacing: 0.03em;
/* -------------------------------------------------------------------------- */
  font-size: 0.72em;
  line-height: 1.15;


   background: linear-gradient(
.sv-tip,
    180deg,
.mw-parser-output .sv-tip{
    rgba(122, 111, 176, 0.35),
  position:relative;
    rgba(90, 78, 124, 0.20)
   display:inline-flex;
  );
  align-items:center;
  flex:0 0 auto;
}
}


table.spiritvale-skill-infobox .module-skill-type .sv-type-value {
.sv-tip-btn,
   margin-top: 0.2em;
.mw-parser-output .sv-tip-btn{
   font-weight: 600;
   display:inline-flex;
   line-height: 1.25;
  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;
}


  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);
}
}


/* Mobile: modules stack to 1 column; type grid becomes 1 column */
.sv-tip-btn:focus-visible,
@media (max-width: 560px) {
.mw-parser-output .sv-tip-btn:focus-visible{
   table.spiritvale-skill-infobox .hero-modules-grid {
  outline:2px solid var(--sv-ui-accent3);
     grid-template-columns: 1fr;
  outline-offset:2px;
   }
}
 
.sv-tip-btn--icon,
.sv-tip-btn:not(.sv-tip-btn--pill),
.mw-parser-output .sv-tip-btn--icon,
.mw-parser-output .sv-tip-btn:not(.sv-tip-btn--pill){
  width:28px;
  height:28px;
  border-radius:var(--sv-ui-rad-pill);
}
 
.sv-tip-btn--pill,
.sv-overcap-btn,
.mw-parser-output .sv-tip-btn--pill,
.mw-parser-output .sv-overcap-btn{
  width:auto;
  height:auto;
  min-width:0;
  min-height:0;
  padding:1px 8px;
  border-radius:var(--sv-ui-rad-pill);
  font-weight:900;
  font-size:13px;
  line-height:1.25;
  letter-spacing:0.15px;
  white-space:nowrap;
  background:var(--sv-ui-pill-bg);
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:var(--sv-ui-pill-shadow);
  border-color:var(--sv-ui-pill-line);
  color:var(--sv-ui-text2);
}
 
.sv-ico--info,
.mw-parser-output .sv-ico--info{
  width:18px;
  height:18px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-style:normal;
  font-weight:900;
  font-size:12px;
  line-height:1;
}
 
/* -------------------------------------------------------------------------- */
/* 8) Shared disclosure */
/* -------------------------------------------------------------------------- */
 
.sv-disclose,
.mw-parser-output .sv-disclose{
  position:relative;
}
 
.sv-disclose-btn,
.mw-parser-output .sv-disclose-btn{
  display:flex;
  align-items: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;
}
 
.sv-disclose-btn:hover,
.mw-parser-output .sv-disclose-btn:hover{
  background:var(--sv-ui-bg2);
}
 
.sv-disclose-btn--compact,
.mw-parser-output .sv-disclose-btn--compact{
  border-radius:var(--sv-ui-rad-pill);
  min-height:36px;
  padding:0 12px;
}
 
.sv-disclose-count,
.mw-parser-output .sv-disclose-count{
  font-weight:800;
  font-size:13px;
  color:var(--sv-ui-text3);
  white-space:nowrap;
}
 
/* -------------------------------------------------------------------------- */
/* 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;
}
 
.sv-tip-btn *,
.sv-disclose-btn *,
.sv-uipop-head *{
  -webkit-user-select:none;
  user-select:none;
}
 
.sv-uipop{
  position:fixed;
  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;
}


  table.spiritvale-skill-infobox .hero-module {
.sv-uipop[aria-hidden="true"]{display:none;}
    border-left: none;
  }


  table.spiritvale-skill-infobox .hero-module:first-child {
.sv-uipop--sm,
    border-top: none;
.sv-uipop--lg{
  }
  width:240px;
  max-width:calc(100vw - 20px);
}


  table.spiritvale-skill-infobox .module-skill-type .sv-type-grid {
.sv-uipop--sm{max-height:min(45vh, 320px);}
    grid-template-columns: 1fr;
.sv-uipop--lg{max-height:min(70vh, 560px);}
  }


  /* Simplify borders for 1-col type grid */
.sv-uipop-head{
  table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk {
  display:flex;
    border-left: none;
  align-items:center;
   }
   justify-content:center;
   table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk:first-child {
   padding:12px 12px;
    border-top: none;
  border-bottom:1px solid var(--sv-ui-line2);
  }
  background:var(--sv-ui-bg3);
}
}


/* ------------------------------------------------------------
.sv-uipop-head--clickable{cursor:pointer;}
  PASSIVES (kept as-is for now)
 
  --------------------------------------------------------- */
.sv-uipop-title{
table.spiritvale-passive-infobox {
   width:100%;
   width: var(--sv-passive-width);
  text-align:center;
   max-width: var(--sv-passive-width);
  font-weight:900;
  margin: 1em auto;
  font-size:16px;
  table-layout: fixed;
  letter-spacing:0.02em;
   color:var(--color-emphasized, var(--sv-ui-text1));
}
}


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


/* Center + wrap passive body rows */
.sv-uipop-body--pre{white-space:pre-line;}
table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > th,
 
table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > td {
.sv-uipop-body p,
  text-align: center;
.sv-uipop-body ul,
   vertical-align: middle;
.sv-uipop-body ol{margin:0;}
   white-space: normal;
 
   overflow-wrap: anywhere;
.sv-uipop-body ul,
   word-break: break-word;
.sv-uipop-body ol{padding-left:1.15em;}
 
.sv-uipop-body li{margin:0;}
 
.sv-uipop a{
   color:var(--color-link, var(--sv-ui-accent));
   text-decoration:underline;
   text-decoration-thickness:2px;
   text-underline-offset:2px;
}
}


/* Passive section headers centered */
.sv-uipop a:hover{
table.spiritvale-passive-infobox .spiritvale-infobox-section-header {
  text-decoration-thickness:3px;
   text-align: center;
   text-underline-offset:3px;
}
}


/* Passive list layout */
.sv-uipop a:focus-visible,
.spiritvale-passive-list {
.sv-uipop-title a.sv-uipop-title-link:focus-visible{
   display: flex;
   outline:2px solid var(--sv-ui-accent3);
   flex-direction: column;
   outline-offset:2px;
   align-items: center;
   border-radius:6px;
  gap: 1.25em;
}
}


/* Remove Citizen wrapper borders/spacing around passive tables in lists */
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list){
.spiritvale-passive-list .mw-table-wrapper,
   margin:0;
.spiritvale-passive-list .table-overflow,
   padding:0;
.spiritvale-passive-list .table-scroll,
   list-style:none;
.spiritvale-passive-list .citizen-table {
   border: none !important;
  box-shadow: none !important;
  background: transparent !important;
   padding: 0 !important;
   margin: 0 !important;
}
}


/* ------------------------------------------------------------
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li{
  LIGHT MODE OVERRIDES
  padding:6px 0;
  - Primary: .mw-theme-light (MediaWiki theme flag)
  border-top:1px solid var(--sv-ui-line1);
  - Optional fallback: OS prefers-color-scheme: light
  font-size:13px;
  --------------------------------------------------------- */
  color:var(--sv-ui-text2);
}


/* Skills: lighten the hero-modules band + module backgrounds */
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li:first-child{
.mw-theme-light table.spiritvale-skill-infobox tr.hero-modules-row > td.hero-modules-cell {
   border-top:none;
   background: linear-gradient(
  padding-top:0;
    135deg,
    rgba(255, 255, 255, 0.92),
    rgba(226, 232, 240, 0.92)
  ) !important;
}
}


.mw-theme-light table.spiritvale-skill-infobox .hero-module {
.sv-uipop :where(.sv-disclose-group-title, .sv-uipop-group-title){
   background: rgba(255, 255, 255, 0.65);
   padding-top:10px;
  font-weight:900;
  font-size:12px;
  letter-spacing:0.02em;
  color:var(--sv-ui-text1);
}
}


/* Skills: improve text contrast inside modules */
.sv-uipop .sv-disclose-sections{
.mw-theme-light table.spiritvale-skill-infobox .module-level-selector .sv-level-title,
  display:flex;
.mw-theme-light table.spiritvale-skill-infobox .module-level-selector .sv-level-label,
  flex-direction:column;
.mw-theme-light table.spiritvale-skill-infobox .module-skill-type .sv-type-value,
   gap:10px;
.mw-theme-light table.spiritvale-skill-infobox .module-skill-type .sv-type-label {
   color: #111827;
}
}


.mw-theme-light table.spiritvale-skill-infobox .module-skill-type .sv-type-label {
.sv-uipop .sv-disclose-sec + .sv-disclose-sec{
   background: linear-gradient(
   padding-top:10px;
    180deg,
  border-top:1px solid var(--sv-ui-line1);
    rgba(122, 111, 176, 0.22),
    rgba(90, 78, 124, 0.12)
  );
}
}


/* Shared: stronger zebra striping + row separators in light mode */
.sv-uipop .sv-disclose-sec-title{
.mw-theme-light table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > td,
  font-weight:900;
.mw-theme-light table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header),
  font-size:13px;
.mw-theme-light table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > td,
  letter-spacing:0.02em;
.mw-theme-light table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header) {
  color:var(--sv-ui-text1);
   background-color: rgba(148, 163, 184, 0.12);
   margin:0 0 4px 0;
}
}


.mw-theme-light table.spiritvale-skill-infobox > tbody > tr,
.sv-uipop .sv-disclose-sec-items{
.mw-theme-light table.spiritvale-passive-infobox > tbody > tr {
  font-size:13px;
   border-bottom: 1px solid rgba(55, 43, 84, 0.18);
  line-height:1.45;
   color:var(--sv-ui-text2);
}
}


/* Optional OS-level fallback (only applies if your wiki doesn't set .mw-theme-light) */
.sv-uipop .sv-disclose-item{display:inline;}
@media (prefers-color-scheme: light) {
.sv-uipop .sv-disclose-sfx{opacity:0.78;}
   table.spiritvale-skill-infobox tr.hero-modules-row > td.hero-modules-cell {
.sv-uipop .sv-tip-pop-body{white-space:pre-line;}
    background: linear-gradient(
 
      135deg,
/* -------------------------------------------------------------------------- */
      rgba(255, 255, 255, 0.92),
/* 10) Motion */
      rgba(226, 232, 240, 0.92)
/* -------------------------------------------------------------------------- */
    ) !important;
 
  }
@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"