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 editNewer edit →
No edit summary
Tags: Mobile edit Mobile web edit
No edit summary
Tags: Mobile edit Mobile web edit
Line 104: Line 104:
}
}


/* Keep here for safety; can move to Citizen.css later */
.citizen-search-trigger {
.citizen-search-trigger {
     transition: transform 0.15s ease-in-out;
     transition: transform 0.15s ease-in-out;
Line 260: Line 261:
         width: var(--sv-skill-width);
         width: var(--sv-skill-width);
         max-width: var(--sv-skill-width);
         max-width: var(--sv-skill-width);
    }
    table.spiritvale-skill-infobox.sv-skill-inlist {
     }
     }
}
}
Line 472: Line 470:
}
}


/* (was global) now scoped so it cannot affect GameInfo.Skills pills */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-pill--req {
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-pill--req {
     display: inline-flex;
     display: inline-flex;
Line 478: Line 475:
}
}


/* (was global) now scoped so it cannot affect GameInfo.Skills pills */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-pill--req::after {
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-pill--req::after {
     content: " ▼";
     content: " ▼";
Line 504: Line 500:
}
}


/* Shared pill look (all modules)
/* Shared pill look (all modules) */
  - Desktop pills shrink (width:auto)
  - Mobile keeps its own padding overrides below */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) :where(.sv-type-label, .sv-source-pill, .sv-m4-label, .sv-sm-label, .sv-sm-flag, .sv-pill, .sv-pill--req) {
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) :where(.sv-type-label, .sv-source-pill, .sv-m4-label, .sv-sm-label, .sv-sm-flag, .sv-pill, .sv-pill--req) {
     width: auto;
     width: auto;
Line 593: Line 587:
table.spiritvale-skill-infobox .module-skill-type .sv-type-cast { order: 5; }
table.spiritvale-skill-infobox .module-skill-type .sv-type-cast { order: 5; }
table.spiritvale-skill-infobox .module-skill-type .sv-type-combo { order: 6; }
table.spiritvale-skill-infobox .module-skill-type .sv-type-combo { order: 6; }
/* SourceType */
table.spiritvale-skill-infobox .sv-slot.skill-source-module .sv-slot__body {
    width: 100%;
    height: 100%;
}
table.spiritvale-skill-infobox .skill-source-module .sv-source-grid {
    width: 100%;
    box-sizing: border-box;
    display: grid;
    gap: 0.55em;
    align-items: center;
    justify-items: center;
}
table.spiritvale-skill-infobox .sv-slot.skill-source-module.sv-has-mod .sv-source-grid {
    grid-template-columns: 0.85fr 1fr 1fr;
}
table.spiritvale-skill-infobox .sv-slot.skill-source-module.sv-no-mod .sv-source-grid {
    grid-template-columns: 1fr 1fr;
}
table.spiritvale-skill-infobox .sv-slot.skill-source-module.sv-only-source.sv-no-mod .sv-source-grid,
table.spiritvale-skill-infobox .sv-slot.skill-source-module.sv-only-scaling.sv-no-mod .sv-source-grid {
    grid-template-columns: 1fr;
}
table.spiritvale-skill-infobox .sv-slot.skill-source-module.sv-only-source.sv-has-mod .sv-source-grid,
table.spiritvale-skill-infobox .sv-slot.skill-source-module.sv-only-scaling.sv-has-mod .sv-source-grid {
    grid-template-columns: 0.95fr 1.05fr;
}
table.spiritvale-skill-infobox .skill-source-module .sv-source-col {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 0.35em;
}
table.spiritvale-skill-infobox .skill-source-module :where(.sv-modifier-value, .sv-source-value) {
    font-weight: 800;
    line-height: 1.05;
    font-size: clamp(1.05em, 2.2vw, 1.35em);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    opacity: 0.98;
}
table.spiritvale-skill-infobox .skill-source-module .sv-scaling-list {
    display: flex;
    flex-direction: column;
    gap: 0.22em;
    align-items: center;
}
table.spiritvale-skill-infobox .skill-source-module .sv-scaling-item {
    font-weight: 500;
    font-size: 0.88em;
    line-height: 1.15;
    opacity: 0.95;
}
/* Quick stats */
table.spiritvale-skill-infobox .sv-slot.module-quick-stats .sv-slot__body {
    width: 100%;
    height: 100%;
}
table.spiritvale-skill-infobox .module-quick-stats .sv-m4-grid {
    width: 100%;
    margin: 0 !important;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.45em;
    padding: 0.35em;
    justify-items: center;
    align-items: center;
}
table.spiritvale-skill-infobox .sv-slot.sv-slot--full.module-quick-stats .sv-m4-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
table.spiritvale-skill-infobox .module-quick-stats .sv-m4-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.35em;
    padding: 0.10em 0.20em;
    min-height: 2.35em;
}
table.spiritvale-skill-infobox .module-quick-stats .sv-m4-value {
    font-weight: 650;
    font-size: 0.96em;
    line-height: 1.15;
    opacity: 0.98;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* ============================================================
/* ============================================================
Line 724: Line 608:
}
}


/* Layout grid */
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout {
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout {
     width: 100%;
     width: 100%;
Line 742: Line 625:
}
}


/* Columns (default = stacked/centered) */
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col {
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col {
     width: 100%;
     width: 100%;
Line 754: Line 636:
}
}


/* Items */
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-mech {
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-mech {
     width: 100%;
     width: 100%;
Line 766: Line 647:
}
}


/* Values centered */
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-value {
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-value {
     width: 100%;
     width: 100%;
Line 779: Line 659:
}
}


/* Desktop behavior: mechanics spread out across the right column (850+) */
/* Desktop behavior (850+) */
@media (min-width: 850px) {
@media (min-width: 850px) {
     table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2 {
     table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2 {
         grid-template-columns: minmax(8.5em, 0.85fr) minmax(16em, 1.15fr);
         grid-template-columns: minmax(8.5em, 0.85fr) minmax(16em, 1.15fr);
Line 803: Line 682:
/* Mobile (<=500) */
/* Mobile (<=500) */
@media (max-width: 500px) {
@media (max-width: 500px) {
     :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot-grid {
     :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot-grid {
         grid-template-columns: 1fr;
         grid-template-columns: 1fr;
Line 818: Line 696:
     }
     }


    /* SkillType reorders */
    table.spiritvale-skill-infobox .module-skill-type .sv-type-damage { order: 1; }
    table.spiritvale-skill-infobox .module-skill-type .sv-type-element { order: 2; }
    table.spiritvale-skill-infobox .module-skill-type .sv-type-target { order: 3; }
    table.spiritvale-skill-infobox .module-skill-type .sv-type-cast { order: 4; }
    table.spiritvale-skill-infobox .module-skill-type .sv-type-hits { order: 5; }
    table.spiritvale-skill-infobox .module-skill-type .sv-type-combo { order: 6; }
    /* SourceType: mod over source, beside scaling */
    table.spiritvale-skill-infobox
    .sv-slot.skill-source-module.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling)
    .sv-source-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "mod scaling"
            "source scaling";
        align-items: center;
    }
    table.spiritvale-skill-infobox
    .sv-slot.skill-source-module.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling)
    .sv-source-modifier { grid-area: mod; }
    table.spiritvale-skill-infobox
    .sv-slot.skill-source-module.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling)
    .sv-source-main { grid-area: source; }
    table.spiritvale-skill-infobox
    .sv-slot.skill-source-module.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling)
    .sv-source-scaling {
        grid-area: scaling;
        align-self: center;
    }
    /* QuickStats becomes 2 cols */
    table.spiritvale-skill-infobox .module-quick-stats .sv-m4-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.40em;
        padding: 0.30em;
    }
    /* Special Mechanics: if 2 groups => stacked */
     table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2 {
     table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2 {
         grid-template-columns: 1fr;
         grid-template-columns: 1fr;
     }
     }
}
/* Passives */
table.spiritvale-passive-infobox {
    width: min(var(--sv-passive-width), 100%);
    max-width: min(var(--sv-passive-width), 100%);
    margin: 1em auto;
    table-layout: fixed;
}
table.spiritvale-passive-infobox tr.sv-slot-row > td.sv-slot-cell {
    padding: 0 !important;
    background: var(--sv-base) !important;
    color: #fff;
}
table.spiritvale-passive-infobox .sv-slot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row dense;
    gap: 0.55em;
    width: 100%;
    box-sizing: border-box;
    background: var(--sv-base);
    padding: 0.80em;
}
table.spiritvale-passive-infobox .sv-slot-grid > .sv-slot.sv-slot--full {
    grid-column: 1 / -1;
}
table.spiritvale-passive-infobox .sv-slot {
    min-width: 0;
    display: flex;
    box-sizing: border-box;
    background: var(--sv-surface) !important;
    color: #fff !important;
    border: 1px solid var(--sv-gridline);
    border-radius: 8px;
}
table.spiritvale-passive-infobox .sv-slot__body {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.85em;
    box-sizing: border-box;
}
table.spiritvale-passive-infobox .module-passive-effects .sv-slot__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    text-align: left;
}
table.spiritvale-passive-infobox .module-level-selector .sv-level-ui {
    width: 90%;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}
table.spiritvale-passive-infobox .module-level-selector .sv-level-label {
    font-weight: 600;
}
table.spiritvale-passive-infobox .module-level-selector .sv-level-slider input[type="range"] {
    width: 90%;
    box-sizing: border-box;
    margin: 0;
}
table.spiritvale-passive-infobox .module-level-selector .sv-level-ui-single .sv-level-slider-single {
    min-height: 0.45em;
}
table.spiritvale-passive-infobox .module-passive-effects .sv-passive-effects {
    width: 100%;
    display: block;
}
table.spiritvale-passive-infobox .module-passive-effects .sv-pe-table {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    box-sizing: border-box;
    padding: 0.05em 0;
}
table.spiritvale-passive-infobox .module-passive-effects .sv-pe-row {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 0.75em;
    row-gap: 0.05em;
    align-items: center;
}
table.spiritvale-passive-infobox .module-passive-effects .sv-pe-label {
    font-weight: 700;
    text-align: left;
    text-transform: none;
    letter-spacing: 0.01em;
    opacity: 0.95;
    min-width: 0;
    overflow-wrap: anywhere;
}
table.spiritvale-passive-infobox .module-passive-effects .sv-pe-value {
    font-weight: 650;
    text-align: right;
    font-size: 1.02em;
    min-width: 0;
    justify-self: end;
    overflow-wrap: anywhere;
}
@media (max-width: 500px) {
    table.spiritvale-passive-infobox .sv-slot-grid {
        grid-template-columns: 1fr;
        gap: 0.50em;
        padding: 0.70em;
    }
    table.spiritvale-passive-infobox .module-passive-effects .sv-pe-row {
        grid-template-columns: 1fr;
        text-align: center;
        align-items: stretch;
        justify-items: center;
        row-gap: 0.25em;
    }
    table.spiritvale-passive-infobox .module-passive-effects .sv-pe-value {
        text-align: center;
    }
}
table.spiritvale-passive-infobox :is(.sv-slot--5, .sv-slot--6, .sv-slot--7, .sv-slot--8),
table.spiritvale-passive-infobox :is(.sv-slot[data-hero-slot="5"], .sv-slot[data-hero-slot="6"], .sv-slot[data-hero-slot="7"], .sv-slot[data-hero-slot="8"]) {
    display: none !important;
}
table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > th,
table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > td {
    text-align: center;
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
table.spiritvale-passive-infobox .spiritvale-infobox-section-header {
    text-align: center;
}
.spiritvale-passive-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25em;
}
.spiritvale-passive-list .mw-table-wrapper,
.spiritvale-passive-list .table-overflow,
.spiritvale-passive-list .table-scroll,
.spiritvale-passive-list .citizen-table {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Light mode tweaks */
.mw-theme-light table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > td,
.mw-theme-light table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header),
.mw-theme-light table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > td,
.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,
.mw-theme-light table.spiritvale-passive-infobox > tbody > tr {
    border-bottom: 1px solid rgba(55, 43, 84, 0.18);
}
}


/* ============================================================
/* ============================================================
   NEW UNIFIED THEME (BLUE SYSTEM)
   NEW UNIFIED THEME (BLUE SYSTEM)
   - This section is the forward-looking replacement layer.
   - Forward-looking replacement layer
  - It is appended last so it overrides legacy safely.
   - Updated to be compatible with Citizen.css export
   - Legacy remains above as a fallback during migration.
   ============================================================ */
   ============================================================ */


/* ------------------------------------------------------------
/* ------------------------------------------------------------
   Tokens (Blue System v0)
   Tokens (fallback defaults)
   - Conservative padding, rounded corners, readable links.
   - Citizen.css will override these via :root.skin-theme-* exports.
   ------------------------------------------------------------ */
   ------------------------------------------------------------ */


:root {
:root{
  /* Core blues */
--sv-ui-bg0:#0f172a;
  --sv-ui-bg0: #071225; /* page backdrop */
--sv-ui-bg1:#1f2937;
  --sv-ui-bg1: #0b1a33; /* main surface */
--sv-ui-bg2:#273449;
  --sv-ui-bg2: #10264b; /* raised tile */
--sv-ui-bg3:#2e3f59;
  --sv-ui-bg3: #14315f; /* stronger tile/pill */
--sv-ui-line1:#3b4b63;
 
--sv-ui-line2:#4b6388;
  /* Borders */
--sv-ui-text1:#f5f9ff;
  --sv-ui-line1: #22385f;
--sv-ui-text2:#d7e2f4;
  --sv-ui-line2: #2a4572;
--sv-ui-text3:#b6c6e0;
 
--sv-ui-accent:#6aa6ff;
  /* Text */
--sv-ui-accent2:#8cbcff;
  --sv-ui-text1: #eaf2ff;
--sv-ui-rad-sm:10px;
  --sv-ui-text2: #c9d8f2;
--sv-ui-rad-md:14px;
  --sv-ui-text3: #9fb3d8;
--sv-ui-rad-lg:18px;
 
--sv-ui-rad-pill:999px;
  /* Accent / links (blue-only) */
--sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40);
  --sv-ui-accent: #2f86ff;
--sv-base:var(--sv-ui-bg0);
  --sv-ui-accent2: #5aa6ff;
--sv-surface:var(--sv-ui-bg2);
 
--sv-card-border:var(--sv-ui-line1);
  /* Radii */
--sv-row-border:var(--sv-ui-line1);
  --sv-ui-rad-sm: 10px;
--sv-gridline:var(--sv-ui-line2);
  --sv-ui-rad-md: 14px;
--sv-pill:var(--sv-ui-bg3);
  --sv-ui-rad-lg: 18px;
--sv-pill-a:var(--sv-ui-bg3);
  --sv-ui-rad-pill: 999px;
--sv-pill-b:var(--sv-ui-bg3);
 
--sv-text-soft:var(--sv-ui-text1);
  /* Shadows */
  --sv-ui-shadow1: 0 10px 28px rgba(0,0,0,0.40);
 
  /* Legacy var remap (Hero Infobox System)
    - Keeps old selectors working while shifting colors to blue. */
  --sv-base: var(--sv-ui-bg0);
  --sv-surface: var(--sv-ui-bg2);
  --sv-card-border: var(--sv-ui-line1);
  --sv-row-border: var(--sv-ui-line1);
  --sv-gridline: var(--sv-ui-line2);
  --sv-pill: var(--sv-ui-bg3);
  --sv-pill-a: var(--sv-ui-bg3);
  --sv-pill-b: var(--sv-ui-bg3);
  --sv-text-soft: var(--sv-ui-text1);
}
}


/* Light theme support (keep readable if mw-theme-light is enabled) */
/* If other skins use mw-theme-light, keep it consistent (still dark-ish canvas) */
.mw-theme-light {
.mw-theme-light{
  --sv-ui-bg0: #eef4ff;
--sv-ui-bg0:#1f2937;
  --sv-ui-bg1: #f6f9ff;
--sv-ui-bg1:#273449;
  --sv-ui-bg2: #ffffff;
--sv-ui-bg2:#2e3f59;
  --sv-ui-bg3: #dbe8ff;
--sv-ui-bg3:#364a69;
 
--sv-ui-line1:#4b6388;
  --sv-ui-line1: #b8c9e8;
--sv-ui-line2:#5f7fb4;
  --sv-ui-line2: #9fb6df;
--sv-ui-text1:#f5f9ff;
 
--sv-ui-text2:#d7e2f4;
  --sv-ui-text1: #0c1830;
--sv-ui-text3:#b6c6e0;
  --sv-ui-text2: #203657;
--sv-ui-accent:#8cbcff;
  --sv-ui-text3: #456083;
--sv-ui-accent2:#b0d0ff;
 
--sv-base:var(--sv-ui-bg0);
  --sv-ui-accent: #0b63f0;
--sv-surface:var(--sv-ui-bg2);
  --sv-ui-accent2: #2b7bff;
--sv-card-border:var(--sv-ui-line1);
 
--sv-row-border:var(--sv-ui-line1);
  --sv-base: var(--sv-ui-bg2);
--sv-gridline:var(--sv-ui-line2);
  --sv-surface: var(--sv-ui-bg3);
--sv-pill:var(--sv-ui-bg3);
  --sv-card-border: var(--sv-ui-line1);
--sv-pill-a:var(--sv-ui-bg3);
  --sv-row-border: var(--sv-ui-line1);
--sv-pill-b:var(--sv-ui-bg3);
  --sv-gridline: var(--sv-ui-line2);
--sv-text-soft:var(--sv-ui-text1);
  --sv-pill: var(--sv-ui-bg3);
  --sv-pill-a: var(--sv-ui-bg3);
  --sv-pill-b: var(--sv-ui-bg3);
  --sv-text-soft: var(--sv-ui-text1);
}
}


/* ------------------------------------------------------------
/* ------------------------------------------------------------
   Sitewide link visibility (blue-only, more obvious)
   Sitewide link visibility (blue-only, obvious)
   ------------------------------------------------------------ */
   ------------------------------------------------------------ */


.mw-parser-output a {
.mw-parser-output a{
  color: var(--sv-ui-accent);
color:var(--sv-ui-accent);
  text-decoration: underline;
text-decoration:underline;
  text-decoration-thickness: 2px;
text-decoration-thickness:2px;
  text-underline-offset: 2px;
text-underline-offset:2px;
}
}


.mw-parser-output a:visited {
.mw-parser-output a:visited{
  color: var(--sv-ui-accent2);
color:var(--sv-ui-accent2);
}
}


.mw-parser-output a:hover {
.mw-parser-output a:hover{
  text-decoration-thickness: 3px;
text-decoration-thickness:3px;
}
}


.mw-parser-output a:focus-visible {
.mw-parser-output a:focus-visible{
  outline: 2px solid var(--sv-ui-accent2);
outline:2px solid var(--sv-ui-accent2);
  outline-offset: 2px;
outline-offset:2px;
  border-radius: 6px;
border-radius:6px;
}
}


/* ------------------------------------------------------------
/* ------------------------------------------------------------
   Shared primitives (opt-in for new modules)
   Shared primitives (opt-in for new modules)
  - IMPORTANT: set foreground color so text is readable in all modes
   ------------------------------------------------------------ */
   ------------------------------------------------------------ */


.mw-parser-output .sv-card {
.mw-parser-output .sv-card{
  background: var(--sv-ui-bg1);
background:var(--sv-ui-bg1);
  border: 1px solid var(--sv-ui-line1);
border:1px solid var(--sv-ui-line1);
  border-radius: var(--sv-ui-rad-md);
border-radius:var(--sv-ui-rad-md);
  box-shadow: var(--sv-ui-shadow1);
box-shadow:var(--sv-ui-shadow1);
color:var(--sv-ui-text2);
}
 
.mw-parser-output .sv-card :where(h1,h2,h3,h4,h5,h6,th,summary,.mw-headline){
color:var(--sv-ui-text1);
}
}


.mw-parser-output .sv-tile {
.mw-parser-output .sv-tile{
  background: var(--sv-ui-bg2);
background:var(--sv-ui-bg2);
  border: 1px solid var(--sv-ui-line2);
border:1px solid var(--sv-ui-line2);
  border-radius: var(--sv-ui-rad-sm);
border-radius:var(--sv-ui-rad-sm);
color:var(--sv-ui-text1);
}
}


.mw-parser-output .sv-pill {
.mw-parser-output .sv-pill{
  display: inline-flex;
display:inline-flex;
  align-items: center;
align-items:center;
  justify-content: center;
justify-content:center;
  padding: 0.18em 0.40em; /* conservative */
padding:0.18em 0.40em;
  border-radius: var(--sv-ui-rad-sm);
border-radius:var(--sv-ui-rad-sm);
  background: var(--sv-ui-bg3);
background:var(--sv-ui-bg3);
  border: 1px solid var(--sv-ui-line2);
border:1px solid var(--sv-ui-line2);
  color: var(--sv-ui-text1);
color:var(--sv-ui-text1);
  font-weight: 800;
font-weight:800;
  text-transform: uppercase;
text-transform:uppercase;
  letter-spacing: 0.03em;
letter-spacing:0.03em;
  font-size: 0.72em;
font-size:0.72em;
  line-height: 1.15;
line-height:1.15;
  white-space: nowrap;
white-space:nowrap;
}
}


.mw-parser-output .sv-focus-ring:focus-visible {
.mw-parser-output .sv-focus-ring:focus-visible{
  outline: 2px solid var(--sv-ui-accent2);
outline:2px solid var(--sv-ui-accent2);
  outline-offset: 2px;
outline-offset:2px;
  border-radius: 8px;
border-radius:8px;
}
}


/* ------------------------------------------------------------
/* ------------------------------------------------------------
   Legacy component “replacement” overrides (safe cascade)
   Legacy component “replacement” overrides (safe cascade)
   - These keep the same selectors but change look to blue theme.
   - Keep old selectors; update look to match tokens.
   ------------------------------------------------------------ */
   ------------------------------------------------------------ */


/* Playtest box: shift to blue surfaces */
.mw-parser-output .playtest-info-box{
.mw-parser-output .playtest-info-box {
border:1px solid var(--sv-ui-line1);
  border: 1px solid var(--sv-ui-line1);
border-radius:var(--sv-ui-rad-md);
  border-radius: var(--sv-ui-rad-md);
background:var(--sv-ui-bg1);
  background: var(--sv-ui-bg1);
color:var(--sv-ui-text2);
  color: var(--sv-ui-text1);
}
}


/* Header containers: remove purple, use blue gradients */
.mw-parser-output .header-container-outer{
.mw-parser-output .header-container-outer {
border:2px solid var(--sv-ui-line2);
  border: 2px solid var(--sv-ui-line2);
border-radius:var(--sv-ui-rad-lg);
  border-radius: var(--sv-ui-rad-lg);
background:var(--sv-ui-bg1);
  background: var(--sv-ui-bg1);
}
}


.mw-parser-output .header-container-middle {
.mw-parser-output .header-container-middle{
  background: var(--sv-ui-bg1);
background:var(--sv-ui-bg1);
}
}


.mw-parser-output .header-container-inner {
.mw-parser-output .header-container-inner{
  border-radius: calc(var(--sv-ui-rad-lg) - 4px);
border-radius:calc(var(--sv-ui-rad-lg) - 4px);
  background: linear-gradient(180deg, var(--sv-ui-bg3), var(--sv-ui-bg2));
background:linear-gradient(180deg, var(--sv-ui-bg3), var(--sv-ui-bg2));
  color: var(--sv-ui-text1);
color:var(--sv-ui-text1);
}
}


/* Custom tables: remove purple, unify borders + header */
.mw-parser-output table.custom-table{
.mw-parser-output table.custom-table {
border:2px solid var(--sv-ui-line2);
  border: 2px solid var(--sv-ui-line2);
border-radius:var(--sv-ui-rad-lg);
  border-radius: var(--sv-ui-rad-lg);
background:var(--sv-ui-bg1);
  background: var(--sv-ui-bg1);
}
}


.mw-parser-output table.custom-table > tbody > tr:nth-child(1) > th,
.mw-parser-output table.custom-table > tbody > tr:nth-child(1) > th,
.mw-parser-output table.custom-table > tbody > tr.middle-header > th {
.mw-parser-output table.custom-table > tbody > tr.middle-header > th{
  background: linear-gradient(180deg, var(--sv-ui-bg3), var(--sv-ui-bg2));
background:linear-gradient(180deg, var(--sv-ui-bg3), var(--sv-ui-bg2));
  color: var(--sv-ui-text1);
color:var(--sv-ui-text1);
}
}


.mw-parser-output table.custom-table > tbody > tr:nth-child(2) > th,
.mw-parser-output table.custom-table > tbody > tr:nth-child(2) > th,
.mw-parser-output table.custom-table > tbody > tr > td {
.mw-parser-output table.custom-table > tbody > tr > td{
  border-bottom: 1px solid var(--sv-ui-line1);
border-bottom:1px solid var(--sv-ui-line1);
}
}


/* Hero infobox: slightly rounder, tighter “game UI” feel */
/* Infobox overall */
table.spiritvale-skill-infobox,
table.spiritvale-skill-infobox,
table.spiritvale-passive-infobox {
table.spiritvale-passive-infobox{
  border-radius: var(--sv-ui-rad-lg);
border-radius:var(--sv-ui-rad-lg);
  border: 1px solid var(--sv-card-border);
border:1px solid var(--sv-card-border);
  box-shadow: var(--sv-ui-shadow1);
box-shadow:var(--sv-ui-shadow1);
  background: var(--sv-base);
background:var(--sv-base);
  color: var(--sv-ui-text1);
color:var(--sv-ui-text1);
}
}


/* Alternating rows: avoid alpha-heavy look; keep subtle */
table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > td,
table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > td,
table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header),
table.spiritvale-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) > td,
table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header) {
table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header){
  background-color: var(--sv-ui-bg1);
background-color:var(--sv-ui-bg1);
}
}


/* Slots: unify border/radius to new tokens */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot{
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot {
border-radius:var(--sv-ui-rad-md);
  border-radius: var(--sv-ui-rad-md);
border:1px solid var(--sv-gridline);
  border: 1px solid var(--sv-gridline);
}
}


/* Pills inside legacy infobox: map to shared feel */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
:where(.sv-type-label, .sv-source-pill, .sv-m4-label, .sv-sm-label, .sv-sm-flag, .sv-pill, .sv-pill--req) {
:where(.sv-type-label, .sv-source-pill, .sv-m4-label, .sv-sm-label, .sv-sm-flag, .sv-pill, .sv-pill--req){
  border-radius: var(--sv-ui-rad-sm);
border-radius:var(--sv-ui-rad-sm);
  background: var(--sv-ui-bg3);
background:var(--sv-ui-bg3);
  border: 1px solid var(--sv-ui-line2);
border:1px solid var(--sv-ui-line2);
  color: var(--sv-ui-text1);
color:var(--sv-ui-text1);
}
}


/* Tooltip shell: keep desktop readable; mobile override below removes transparency */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop{
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop {
border-radius:var(--sv-ui-rad-md);
  border-radius: var(--sv-ui-rad-md);
border:1px solid var(--sv-ui-line2);
  border: 1px solid var(--sv-ui-line2);
}
}


/* Notes button: shift to blue */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
.module-icon-name .sv-tip-btn--notes {
.module-icon-name .sv-tip-btn--notes{
  border-radius: var(--sv-ui-rad-pill);
border-radius:var(--sv-ui-rad-pill);
  border: 1px solid var(--sv-ui-line2);
border:1px solid var(--sv-ui-line2);
  background: rgba(255,255,255,0.08); /* desktop only; mobile gets solid */
background:rgba(255,255,255,0.08);
}
}


:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
.module-icon-name .sv-ico--info {
.module-icon-name .sv-ico--info{
  background: var(--sv-ui-accent2);
background:var(--sv-ui-accent2);
  color: #081018;
color:#081018;
}
}


/* ------------------------------------------------------------
/* ------------------------------------------------------------
   Mobile rule (in Common for now; can be moved to Mobile.css later)
   Mobile rule (keep in Common for now)
   - Enforce “no transparency” for the legacy infobox UI elements.
   - Enforce “no transparency” for legacy tooltip/button UI
   ------------------------------------------------------------ */
   ------------------------------------------------------------ */


@media (max-width: 500px) {
@media (max-width: 500px){
  :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop {
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop{
    background: #14181e; /* solid */
background:#14181e;
    border: 1px solid #30394b;
border:1px solid #30394b;
  }
}


  :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
  .module-icon-name .sv-tip-btn--notes {
.module-icon-name .sv-tip-btn--notes{
    background: #27324a; /* solid */
background:#27324a;
    border: 1px solid #3a4b6b;
border:1px solid #3a4b6b;
  }
}


  :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
  .module-icon-name .sv-tip-btn--notes:hover {
.module-icon-name .sv-tip-btn--notes:hover{
    background: #2f3a54; /* solid */
background:#2f3a54;
  }
}
 
  /* If you decide text shadow looks too heavy on mobile, uncomment:
  :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot,
  :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot * {
    text-shadow: none !important;
  }
  */
}
}
Retrieved from "https://spiritvale.info/wiki/MediaWiki:Common.css"