Toggle search
Toggle menu
110
215
16
2.1K
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
No edit summary
(12 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* ============================================================
  Global custom additions
  ========================================================== */


/*
/* Playtest info box (supports:
@media (prefers-color-scheme: dark) {
  1) class="playtest-info-box"
    body, #mw-head {
  2) class="playtest info box"  */
        background-color: #1f2937;
.playtest-info-box,
    }
.playtest.info.box {
 
  max-width: 100%;
    a, .vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a {
  margin: 0 0 10px 0;
        color: oklch(62.3% 0.214 259.815);
  border: 1px solid #ccc;
    }
  border-radius: 6px;
   
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    a:visited, .vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited {
  background: #f0f2f8;
        color: oklch(54.6% 0.245 262.881);
  padding: 10px;
    }
  text-align: center;
  color: #333;
  overflow-wrap: anywhere;
  word-break: break-word;
}


    a:hover, .vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:hover {
/* Header container band (supports:
        color: oklch(70.7% 0.165 254.624);
  1) class="header-container-outer"
        text-decoration: none;
  2) class="header container outer"  */
    }
.header-container-outer,
 
.header.container.outer {
    a.new {
  max-width: 100%;
        color: oklch(64.5% 0.246 16.439);
  margin: 1px;
    }
  border: 2px solid #372b54;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  background: #f0f2f8;
}
}
*/


/* Custom Additions */
.header-container-middle,
.playtest - info - box {
.header.container.middle {
    max - width: 100 %; margin - bottom: 10px; border: 1px solid #ccc; border - radius: 6px; box - shadow: 0 1px 3px rgba(0, 0, 0, 0.1); background: #f0f2f8; padding: 10px; text - align: center; color:#333; word - wrap: break-word; overflow - wrap: break-word;
  background: #f0f2f8;
  color: white;
  text-align: center;
  padding: 1px;
  border-radius: 8px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
}


.header - container - outer {
.header-container-inner,
    max - width: 100 %; margin: 1 1px; border: 2px solid #372b54; border - radius: 10px; box - shadow: 0 2px 6px rgba(0, 0, 0, 0.25); background: #f0f2f8;
.header.container.inner {
  background: linear-gradient(180deg, #5a4e7c, #372b54);
  color: white;
  text-align: center;
  padding: 1px;
  border-radius: 8px;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 300%;
}
}


.header - container - middle {
/* Generic custom table */
    background: #f0f2f8; color: white; text - align: center; padding: 1px 1px; border - radius: 8px; word - wrap: break-word; overflow - wrap: break-word;
table.custom-table {
  float: none;
  border: 2px solid #372b54;
  border-radius: 10px;
  padding: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  margin: 1em auto;
  text-align: center;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  -webkit-user-select: text;
  user-select: text;
}
}


.header - container - inner {
table.custom-table > tbody > tr:nth-child(1) > th {
    background: linear - gradient(180deg,#5a4e7c,#372b54); color: white; text - align: center; padding: 1px 1px; border - radius: 8px; word - wrap: break-word; overflow - wrap: break-word; font - size: 300 %;
  background: linear-gradient(180deg, #7a6fb0, #5a4e7c);
  color: white;
  text-align: center;
  padding: 6px;
  font-size: 120%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
}


table.custom - table {
table.custom-table > tbody > tr:nth-child(2) > th {
    float: none; border: 2px solid #372b54; border - radius: 10px; padding: 2px; box - shadow: 0 2px 6px rgba(0, 0, 0, 0.25); margin: 1em auto; text - align: center; border - collapse: separate; border - spacing: 0; overflow: hidden; -webkit - user - select: text; user - select: text;
  text-align: center;
  padding: 4px;
  border-bottom: 1px solid #555;
}
}


table.custom - table > tbody > tr: nth - child(1) > th {
table.custom-table > tbody > tr > td {
    background: linear - gradient(180deg,#7a6fb0,#5a4e7c); color: white; text - align: center; padding: 6px; font - size: 120 %; border - top - left - radius: 8px; border - top - right - radius: 8px; word - wrap: break-word; overflow - wrap: break-word;
  text-align: center;
  padding: 4px;
  border-bottom: 1px solid #555;
}
}


table.custom - table > tbody > tr: nth - child(2) > th {
table.custom-table > tbody > tr.middle-header > th {
    text - align: center; padding: 4px; border - bottom: 1px solid #555;
  background: linear-gradient(180deg, #7a6fb0, #5a4e7c);
  color: white;
  text-align: center;
  padding: 6px;
  font-size: 110%;
}
}


table.custom - table > tbody > tr > td {
/* Citizen search hover (transition goes on base state) */
    text - align: center; padding: 4px; border - bottom: 1px solid #555;
.citizen-search-trigger {
  transition: transform 0.15s ease-in-out;
}
}
 
.citizen-search-trigger:hover {
table.custom - table > tbody > tr.middle - header > th {
  transform: translateY(-2px);
    background: linear - gradient(180deg,#7a6fb0,#5a4e7c); color: white; text - align: center; padding: 6px; font - size: 110 %;
}
}


.citizen - search - trigger:hover {
    transform: translateY(-2px);
    transition: transform .15s ease -in -out;
}


/* ============================================================
/* ============================================================
   SpiritVale Infoboxes (Skills + Passives)
   SpiritVale Infoboxes (Skills + Passives)
  - Shared styling for both infobox types
  - Passives: fixed desktop width, centered contents
  - Skills: fixed desktop max width + list wrapper panel
  - Skills top band: NESTED TABLE version ONLY
    (GameSkills outputs .sv-topband-cell > .sv-topband-table > .sv-type-table)
   ========================================================== */
   ========================================================== */


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


/* ============================================================
/* Shared base */
  1) Shared base: both Skills + Passives
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;


table.spiritvale - skill - infobox,
  border-radius: 12px;
    table.spiritvale - passive - infobox {
  overflow: hidden;
    /* Layout */
  border: 1px solid rgba(55, 43, 84, 0.65);
    border - collapse: separate;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    border - spacing: 0;
    width: 100 %;
    max - width: var(--sv - infobox - max);
    margin: 1.5em auto;


    /* Shape */
  font-size: 0.95em;
    border - radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(55, 43, 84, 0.65);
    box - shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
 
    /* Typography */
    font - size: 0.95em;
}
}


/* HERO rows (shared) */
/* Hero band background (supports old main row + new split rows for BOTH) */
table.spiritvale - skill - infobox > tbody > tr.spiritvale - infobox - main > th,
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > th,
    table.spiritvale - skill - infobox > tbody > tr.spiritvale - infobox - main > td,
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 > th,
    table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > td {
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td,
    background: linear - gradient(135deg, #7a6fb0, #372b54);
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th,
    color: #fff;
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td,
    padding: 0.9em 1.1em;
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th,
    text - align: center;
table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td {
    vertical - align: middle;
  background: linear-gradient(135deg, #7a6fb0, #372b54);
}
  color: #fff;
 
  padding: 0.9em 1.1em;
/* Icon spacing in hero row */
  text-align: center;
table.spiritvale - skill - infobox > tbody > tr: first - child > th.image,
  vertical-align: middle;
    table.spiritvale - passive - infobox > tbody > tr: first - child > th.image {
    margin - right: 0.6em;
    vertical - align: middle;
}
}


/* Row separators (direct children only) */
/* Row separators (direct children only) */
table.spiritvale - skill - infobox > tbody > tr,
table.spiritvale-skill-infobox > tbody > tr,
    table.spiritvale - passive - infobox > tbody > tr {
table.spiritvale-passive-infobox > tbody > tr {
    border - bottom: 1px solid rgba(148, 163, 184, 0.4);
  border-bottom: 1px solid rgba(148, 163, 184, 0.4);
}
}
table.spiritvale - skill - infobox > tbody > tr: last - child,
table.spiritvale-skill-infobox > tbody > tr:last-child,
    table.spiritvale - passive - infobox > tbody > tr: last - child {
table.spiritvale-passive-infobox > tbody > tr:last-child {
    border - bottom: none;
  border-bottom: none;
}
}


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


/* Value cells (direct children only) */
table.spiritvale-skill-infobox > tbody > tr > td,
table.spiritvale - skill - infobox > tbody > tr > td,
table.spiritvale-passive-infobox > tbody > tr > td {
    table.spiritvale - passive - infobox > tbody > tr > td {
  padding: 0.45em 0.85em;
    padding: 0.45em 0.85em;
  text-align: left;
    text - align: left;
}
}


/* Zebra striping (direct children only) */
/* Zebra striping */
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: rgba(148, 163, 184, 0.05);
  background-color: rgba(148, 163, 184, 0.05);
}
}


/* Section headers (Requirements / Mechanics / etc.) */
/* Section headers */
.spiritvale - infobox - section - header {
.spiritvale-infobox-section-header {
    background: linear - gradient(135deg, #5a4e7c, #372b54);
  background: linear-gradient(135deg, #5a4e7c, #372b54);
    color: #fff;
  color: #fff;
    text - align: left;
  text-align: left;
    padding: 0.5em 0.9em;
  padding: 0.5em 0.9em;
    font - size: 0.9em;
  font-size: 0.9em;
    text - transform: uppercase;
  text-transform: uppercase;
    letter - spacing: 0.05em;
  letter-spacing: 0.05em;
}
}


/* Hero content helpers */
/* Hero helper classes */
.spiritvale - infobox - main - left - inner {
.spiritvale-infobox-main-left-inner {
    display: flex;
  display: flex;
    flex - direction: column;
  flex-direction: column;
    align - items: center;
  align-items: center;
    justify - content: center;
  justify-content: center;
    gap: 0.35em;
  gap: 0.35em;
}
}


.spiritvale - infobox - title {
.spiritvale-infobox-title {
    font - size: 1.25em;
  font-size: 1.25em;
    font - weight: 600;
  font-weight: 600;
}
}


.spiritvale - infobox - main - right - inner {
.spiritvale-infobox-main-right-inner {
    display: flex;
  display: flex;
    align - items: center;
  align-items: center;
    justify - content: center;
  justify-content: center;
}
}


.spiritvale - infobox - description {
.spiritvale-infobox-description {
    font - size: 1.05em;
  font-size: 1.05em;
    font - style: italic;
  font-style: italic;
    text - align: center;
  text-align: center;
    max - width: 32em;
  max-width: 42em;
    margin: 0 auto;
  margin: 0 auto;
  opacity: 0.95;
}
}


/* ============================================================
/* ============================================================
   1.1) Skills hero split rows (skills only)
   Skills: split hero rows (tuned)
   ========================================================== */
   ========================================================== */


table.spiritvale - skill - infobox > tbody > tr.sv - hero - title - row {
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row {
    border - bottom: none!important; /* no divider between title and desc */
  border-bottom: none !important;
}
}


table.spiritvale - skill - infobox > tbody > tr.sv - hero - title - row > th {
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th {
    padding - bottom: 0.5em;
  padding-bottom: 0.55em;
}
}


table.spiritvale - skill - infobox > tbody > tr.sv - hero - desc - row > td {
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td {
    padding - top: 0.1em;
  padding-top: 0.55em;
    padding - bottom: 0.9em;
  padding-bottom: 0.55em;
}
}


table.spiritvale - skill - infobox > tbody > tr.sv - hero - desc - row.spiritvale - infobox - description {
    font - size: 1.0em;
    opacity: 0.95;
    max - width: 42em;
}


/* ============================================================
/* ============================================================
   2) Passives (stable, consistent tooltip layout)
   Passives
   ========================================================== */
   ========================================================== */


table.spiritvale - passive - infobox {
table.spiritvale-passive-infobox {
    width: var(--sv - passive - width);
  width: var(--sv-passive-width);
    max - width: var(--sv - passive - width);
  max-width: var(--sv-passive-width);
    margin: 1em auto;
  margin: 1em auto;
    table - layout: fixed;
  table-layout: fixed;
}
}


/* Hero column balance */
/* Passive split hero rows (match Skills) */
table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > th {
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row {
    width: 42 %;
  border-bottom: none !important;
    white - space: normal;
}
}
table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > td {
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th {
    width: 58 %;
  padding-bottom: 0.55em;
}
}
 
table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td {
/* Center + wrap all non-hero rows */
  padding-top: 0.55em;
table.spiritvale - passive - infobox > tbody > tr: not(.spiritvale - infobox - main) > th,
  padding-bottom: 0.55em;
    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;
}
}


/* Let passive labels wrap */
/* Center + wrap passive body rows */
table.spiritvale - passive - infobox > tbody > tr: not(.spiritvale - infobox - main)
table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > th,
    > th: not(.spiritvale - infobox - section - header) {
table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > td {
    white - space: normal;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
}


/* Passive section headers centered */
/* Passive section headers centered */
table.spiritvale - passive - infobox.spiritvale - infobox - section - header {
table.spiritvale-passive-infobox .spiritvale-infobox-section-header {
    text - align: center;
  text-align: center;
}
 
/* Passive description never forces odd layout */
table.spiritvale - passive - infobox.spiritvale - infobox - description {
    max - width: 100 %;
    overflow - wrap: anywhere;
    word -break: break-word;
}
}


/* Passive list layout (stacked, centered) */
/* Passive list layout */
.spiritvale - passive - list {
.spiritvale-passive-list {
    display: flex;
  display: flex;
    flex - direction: column;
  flex-direction: column;
    align - items: center;
  align-items: center;
    gap: 1.25em;
  gap: 1.25em;
}
}


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


/* Mobile/portrait: keep passive hero row side-by-side */
@media(max - width: 768px) {
    body.skin - citizen table.spiritvale - passive - infobox {
        width: 100 %;
        max - width: 100 %;
        display: table!important;
    }
    body.skin - citizen table.spiritvale - passive - infobox > tbody {
        display: table - row - group!important;
    }
    body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main {
        display: table - row!important;
    }
    body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > th,
        body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > td {
        display: table - cell!important;
        float: none!important;
        box - sizing: border - box;
        vertical - align: middle;
        text - align: center;
        white - space: normal;
        overflow - wrap: anywhere;
        word -break: break-word;
    }
    body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > th {
        width: 46 % !important;
        padding: 0.75em 0.75em;
    }
    body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > td {
        width: 54 % !important;
        padding: 0.75em 0.75em;
    }
    body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > th.image img {
        width: 64px!important;
        height: auto!important;
    }
    body.skin - citizen table.spiritvale - passive - infobox.spiritvale - infobox - title,
        body.skin - citizen table.spiritvale - passive - infobox.spiritvale - infobox - description {
        white - space: normal;
        overflow - wrap: anywhere;
        word -break: break-word;
    }
}


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


/* Single-skill width */
table.spiritvale-skill-infobox {
table.spiritvale - skill - infobox {
  width: 100%;
    width: 100 %;
  max-width: var(--sv-skill-width);
    max - width: var(--sv - skill - width);
  margin: 1.25em auto;
    margin: 1.25em auto;
  table-layout: fixed;
    table - layout: fixed;
}
}


/* List wrapper: flush, “pop” border, no background */
/* List wrapper */
.sv - skill - collection {
.sv-skill-collection {
    width: 100 %;
  width: 100%;
    max - width: var(--sv - skill - width);
  max-width: var(--sv-skill-width);
    margin: 0 auto!important;
  margin: 0 auto !important;
    padding: 0!important;
  padding: 0 !important;


    border: 2px solid #372b54;
  border: 2px solid #372b54;
    border - radius: 10px;
  border-radius: 10px;
    box - shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    background: transparent!important;
  background: transparent !important;


    overflow: hidden;
  overflow: hidden;
    display: block!important;
  display: block !important;
}
}


/* Neutralize Citizen wrappers inside the skill collection */
/* Neutralize Citizen wrappers inside the skill collection */
.sv - skill - collection.mw - table - wrapper,
.sv-skill-collection .mw-table-wrapper,
.sv - skill - collection.table - overflow,
.sv-skill-collection .table-overflow,
.sv - skill - collection.table - scroll,
.sv-skill-collection .table-scroll,
.sv - skill - collection.citizen - table {
.sv-skill-collection .citizen-table {
    border: none!important;
  border: none !important;
    box - shadow: none!important;
  box-shadow: none !important;
    background: transparent!important;
  background: transparent !important;
    padding: 0!important;
  padding: 0 !important;
    margin: 0!important;
  margin: 0 !important;
}
}


/* In list mode, each skill becomes a “row” inside the wrapper */
/* In list mode, each skill becomes a “row” inside the wrapper */
.sv - skill - collection table.spiritvale - skill - infobox {
.sv-skill-collection table.spiritvale-skill-infobox {
    width: 100 %;
  width: 100%;
    max - width: 100 %;
  max-width: 100%;
    margin: 0!important;
  margin: 0 !important;


    border: none!important;
  border: none !important;
    box - shadow: none!important;
  box-shadow: none !important;
    border - radius: 0!important;
  border-radius: 0 !important;
}
}


/* Divider between skills */
/* Divider between skills */
.sv - skill - collection > * + * {
.sv-skill-collection > * + * {
    border- top: 1px solid rgba(148, 163, 184, 0.25);
  border-top: 1px solid rgba(148, 163, 184, 0.25);
}
}


/* -------------------------
  Skill top band (nested-table)
  ------------------------- */


table.spiritvale - skill - infobox.sv - topband - cell {
/* ============================================================
    padding: 0!important;
  Skills top band (nested-table)
    background: linear - gradient(
  ========================================================== */
        135deg,
 
        rgba(90, 78, 124, 0.55),
table.spiritvale-skill-infobox .sv-topband-cell {
        rgba(55, 43, 84, 0.55)
  padding: 0 !important;
    )!important;
  background: linear-gradient(
    135deg,
    rgba(90, 78, 124, 0.55),
    rgba(55, 43, 84, 0.55)
  ) !important;
}
}


/* Inner 2-column table must fully fill the cell */
table.spiritvale-skill-infobox .sv-topband-table {
table.spiritvale - skill - infobox.sv - topband - table {
  width: 100% !important;
    width: 100 % !important;
  max-width: 100% !important;
    max - width: 100 % !important;
  margin: 0 !important;
    margin: 0!important;


    border: 0!important;
  border: 0 !important;
    border - collapse: collapse!important;
  border-collapse: collapse !important;
    border - spacing: 0!important;
  border-spacing: 0 !important;
    table - layout: fixed;
  table-layout: fixed;
    background: transparent!important;
  background: transparent !important;
}
}


/* Two halves of the top band */
table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td {
table.spiritvale - skill - infobox.sv - topband - table > tbody > tr > td {
  width: 50%;
    width: 50 %;
  padding: 0 !important;
    padding: 0!important;
  vertical-align: middle;
    vertical - align: middle;
}
}


table.spiritvale - skill - infobox.sv - topband - table > tbody > tr > td: first - child {
table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td:first-child {
    border - right: 1px solid rgba(148, 163, 184, 0.25);
  border-right: 1px solid rgba(148, 163, 184, 0.25);
}
}


/* Left: Level Select block fills the entire half */
/* Level Select (tightened) */
table.spiritvale - skill - infobox.sv - level - ui {
table.spiritvale-skill-infobox .sv-level-ui {
    width: 100 %;
  width: 100%;
    margin: 0!important;
  margin: 0 !important;
    padding: 0.75em 0.9em;
  padding: 0.6em 0.75em;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}


    display: flex;
table.spiritvale-skill-infobox .sv-level-title {
    flex - direction: column;
  font-weight: 700;
    gap: 0.4em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8em;
  opacity: 0.95;
}
}


table.spiritvale - skill - infobox.sv - level - title {
table.spiritvale-skill-infobox .sv-level-label {
    font - weight: 700;
  font-weight: 600;
    text - transform: uppercase;
    letter - spacing: 0.05em;
    font - size: 0.85em;
    opacity: 0.95;
}
}


table.spiritvale - skill - infobox.sv - level - label {
table.spiritvale-skill-infobox .sv-level-slider input[type="range"] {
    font - weight: 600;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}
}


table.spiritvale - skill - infobox.sv - level - slider input[type = "range"] {
 
    width: 100 %;
/* ============================================================
    box - sizing: border - box;
  Type grid: 4 chunks (2x2), label + value (tightened)
  ========================================================== */
 
table.spiritvale-skill-infobox .sv-type-grid {
  width: 100% !important;
  margin: 0 !important;
  padding: 0.6em 0.75em;
  box-sizing: border-box;
 
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
}


/* Right: Type table fills the entire half (Option A integrated) */
table.spiritvale-skill-infobox .sv-type-chunk {
table.spiritvale - skill - infobox.sv - type - table {
  display: flex;
    width: 100 % !important;
  flex-direction: column;
    margin: 0!important;
  align-items: center;
    padding: 0.75em 0.9em;
  justify-content: center;


    border: 0!important;
  text-align: center;
    border - collapse: collapse!important;
  padding: 0.35em 0.45em;
    background: transparent!important;


    table - layout: fixed;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  border-left: 1px solid rgba(148, 163, 184, 0.18);
}
}


table.spiritvale - skill - infobox.sv - type - table th,
/* grid borders */
    table.spiritvale - skill - infobox.sv - type - table td {
table.spiritvale-skill-infobox .sv-type-chunk:nth-child(-n + 2) {
    background: transparent!important;
  border-top: none;
    padding: 0.2em 0;
}
    vertical - align: top;
table.spiritvale-skill-infobox .sv-type-chunk:nth-child(odd) {
    line - height: 1.25;
  border-left: none;
}
}


/* Label column */
table.spiritvale-skill-infobox .sv-type-label {
table.spiritvale - skill - infobox.sv - type - table th {
  width: 100%;
    width: 6.75em;
  padding: 0.18em 0.35em;
    font - weight: 700;
  border-radius: 6px;
    white - space: nowrap;
 
    padding - right: 0.6em;
  font-weight: 800;
    text - align: right; /* cleaner, as discussed */
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.72em;
  line-height: 1.15;
 
  background: linear-gradient(
    180deg,
    rgba(122, 111, 176, 0.35),
    rgba(90, 78, 124, 0.20)
  );
}
}


table.spiritvale - skill - infobox.sv - type - table th::after {
table.spiritvale-skill-infobox .sv-type-value {
    content: ":";
  margin-top: 0.2em;
    opacity: 0.7;
  font-weight: 600;
    margin - left: 0.25em;
  line-height: 1.25;
 
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
}


/* Value column */
/* Mobile: stack Level + Type, and Type grid becomes 1 column */
table.spiritvale - skill - infobox.sv - type - table td {
@media (max-width: 560px) {
     text - align: left!important;
  table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td {
     white - space: normal;
     display: block;
     overflow - wrap: anywhere;
     width: 100%;
     word -break: break-word;
  }
}
 
  table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td:first-child {
     border-right: none;
     border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  }


/* Mobile: stack Level + Type */
  table.spiritvale-skill-infobox .sv-type-grid {
@media(max - width: 560px) {
    grid-template-columns: 1fr;
    table.spiritvale - skill - infobox.sv - topband - table > tbody > tr > td {
  }
        display: block;
        width: 100 %;
    }


     table.spiritvale - skill - infobox.sv - topband - table > tbody > tr > td: first - child {
  /* simplify borders for 1-col */
        border - right: none;
  table.spiritvale-skill-infobox .sv-type-chunk {
        border - bottom: 1px solid rgba(148, 163, 184, 0.25);
     border-left: none;
    }
  }
  table.spiritvale-skill-infobox .sv-type-chunk:first-child {
    border-top: none;
  }
}
}
Retrieved from "https://spiritvale.info/wiki/MediaWiki:Common.css"