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
Line 3: Line 3:
/*
/*
@media (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
    body, #mw-head {
  body, #mw-head {
        background-color: #1f2937;
    background-color: #1f2937;
    }
  }


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


    a:hover, .vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:hover {
  a:visited,
        color: oklch(70.7% 0.165 254.624);
  .vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited {
        text-decoration: none;
    color: oklch(54.6% 0.245 262.881);
    }
  }


     a.new {
  a:hover,
        color: oklch(64.5% 0.246 16.439);
  .vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:hover {
    }
    color: oklch(70.7% 0.165 254.624);
     text-decoration: none;
  }
 
  a.new {
    color: oklch(64.5% 0.246 16.439);
  }
}
}
*/
*/


/* Custom Additions */
/* ============================================================
.playtest - info - box {
  Global custom additions
    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;
  ========================================================== */
 
.playtest-info-box {
  max-width: 100%;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  background: #f0f2f8;
  padding: 10px;
  text-align: center;
  color: #333;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
}


.header - container - outer {
.header-container-outer {
    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;
  max-width: 100%;
  margin: 1px;
  border: 2px solid #372b54;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  background: #f0f2f8;
}
}


.header - container - middle {
.header-container-middle {
    background: #f0f2f8; color: white; text - align: center; padding: 1px 1px; border - radius: 8px; word - wrap: break-word; overflow - wrap: break-word;
  background: #f0f2f8;
  color: white;
  text-align: center;
  padding: 1px;
  border-radius: 8px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
}


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


table.custom - table {
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;
  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;
}
}


table.custom - table > tbody > tr: nth - child(1) > th {
table.custom-table > tbody > tr:nth-child(1) > th {
    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;
  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;
}
}


table.custom - table > tbody > tr: nth - child(2) > th {
table.custom-table > tbody > tr:nth-child(2) > th {
    text - align: center; padding: 4px; border - bottom: 1px solid #555;
  text-align: center;
  padding: 4px;
  border-bottom: 1px solid #555;
}
}


table.custom - table > tbody > tr > td {
table.custom-table > tbody > tr > td {
    text - align: center; padding: 4px; border - bottom: 1px solid #555;
  text-align: center;
  padding: 4px;
  border-bottom: 1px solid #555;
}
}


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


.citizen - search - trigger:hover {
/* Put transition on the base state so it animates both ways */
    transform: translateY(-2px);
.citizen-search-trigger {
    transition: transform .15s ease -in -out;
  transition: transform 0.15s ease-in-out;
}
.citizen-search-trigger:hover {
  transform: translateY(-2px);
}
}


/* ============================================================
/* ============================================================
   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 */
  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 both old + split hero rows) */
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;
  background: linear-gradient(135deg, #7a6fb0, #372b54);
    text - align: center;
  color: #fff;
    vertical - align: middle;
  padding: 0.9em 1.1em;
  text-align: center;
  vertical-align: middle;
}
}


/* Icon spacing in hero row */
/* Icon spacing in hero row */
table.spiritvale - skill - infobox > tbody > tr: first - child > th.image,
table.spiritvale-skill-infobox > tbody > tr:first-child > th .image,
    table.spiritvale - passive - infobox > tbody > tr: first - child > th.image {
table.spiritvale-passive-infobox > tbody > tr:first-child > th .image {
    margin - right: 0.6em;
  margin-right: 0.6em;
    vertical - align: middle;
  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 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) */
/* Value cells */
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 content helpers */
.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: 32em;
    margin: 0 auto;
  margin: 0 auto;
}
}


/* ============================================================
/* Skills hero split rows */
  1.1) Skills hero split rows (skills only)
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row {
  ========================================================== */
  border-bottom: none !important;
 
table.spiritvale - skill - infobox > tbody > tr.sv - hero - title - row {
    border - bottom: none!important; /* no divider between title and desc */
}
}
 
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.5em;
}
}
 
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.1em;
  padding-bottom: 0.9em;
    padding - bottom: 0.9em;
}
}
 
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row .spiritvale-infobox-description {
table.spiritvale - skill - infobox > tbody > tr.sv - hero - desc - row.spiritvale - infobox - description {
  font-size: 1.0em;
    font - size: 1.0em;
  opacity: 0.95;
    opacity: 0.95;
  max-width: 42em;
    max - width: 42em;
}
}


/* ============================================================
/* Passives */
  2) Passives (stable, consistent tooltip layout)
table.spiritvale-passive-infobox {
  ========================================================== */
  width: var(--sv-passive-width);
 
  max-width: var(--sv-passive-width);
table.spiritvale - passive - infobox {
  margin: 1em auto;
    width: var(--sv - passive - width);
  table-layout: fixed;
    max - width: var(--sv - passive - width);
    margin: 1em auto;
    table - layout: fixed;
}
}


/* Hero column balance */
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th {
table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > th {
  width: 42%;
    width: 42 %;
  white-space: normal;
    white - space: normal;
}
}
table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > td {
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
    width: 58 %;
  width: 58%;
}
}


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


/* Let passive labels wrap */
table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main)
table.spiritvale - passive - infobox > tbody > tr: not(.spiritvale - infobox - main)
  > th:not(.spiritvale-infobox-section-header) {
    > th: not(.spiritvale - infobox - section - header) {
  white-space: normal;
    white - space: normal;
}
}


/* 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 {
table.spiritvale - passive - infobox.spiritvale - infobox - description {
  max-width: 100%;
    max - width: 100 %;
  overflow-wrap: anywhere;
    overflow - wrap: anywhere;
  word-break: break-word;
    word -break: break-word;
}
}


/* Passive list layout (stacked, centered) */
.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 */
.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) {
@media(max - width: 768px) {
  body.skin-citizen table.spiritvale-passive-infobox {
    body.skin - citizen table.spiritvale - passive - infobox {
    width: 100%;
        width: 100 %;
    max-width: 100%;
        max - width: 100 %;
    display: table !important;
        display: table!important;
  }
    }


    body.skin - citizen table.spiritvale - passive - infobox > tbody {
  body.skin-citizen table.spiritvale-passive-infobox > tbody {
        display: table - row - group!important;
    display: table-row-group !important;
    }
  }


    body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main {
  body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main {
        display: table - row!important;
    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 > th,
        body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > td {
  body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
        display: table - cell!important;
    display: table-cell !important;
        float: none!important;
    float: none !important;
        box - sizing: border - box;
    box-sizing: border-box;
        vertical - align: middle;
    vertical-align: middle;
        text - align: center;
    text-align: center;


        white - space: normal;
    white-space: normal;
        overflow - wrap: anywhere;
    overflow-wrap: anywhere;
        word -break: break-word;
    word-break: break-word;
    }
  }


    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 > th {
        width: 46 % !important;
    width: 46% !important;
        padding: 0.75em 0.75em;
    padding: 0.75em;
    }
  }


    body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > td {
  body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
        width: 54 % !important;
    width: 54% !important;
        padding: 0.75em 0.75em;
    padding: 0.75em;
    }
  }


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


/* ============================================================
/* Skills */
  3) Skills
table.spiritvale-skill-infobox {
  - Single skill: fixed desktop max width
  width: 100%;
  - List mode: ONE wrapper panel with dividers
  max-width: var(--sv-skill-width);
  - Top band: nested-table version ONLY
  margin: 1.25em auto;
  ========================================================== */
  table-layout: fixed;
 
/* Single-skill width */
table.spiritvale - skill - infobox {
    width: 100 %;
    max - width: var(--sv - skill - width);
    margin: 1.25em auto;
    table - layout: fixed;
}
}


/* List wrapper: flush, “pop” border, no background */
.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 */
.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 */
.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 */
.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);
}
}


/* -------------------------
/* Top band */
  Skill top band (nested-table)
table.spiritvale-skill-infobox .sv-topband-cell {
  ------------------------- */
  padding: 0 !important;
 
  background: linear-gradient(
table.spiritvale - skill - infobox.sv - topband - cell {
    135deg,
    padding: 0!important;
    rgba(90, 78, 124, 0.55),
    background: linear - gradient(
    rgba(55, 43, 84, 0.55)
        135deg,
  ) !important;
        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 */
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.75em 0.9em;


    display: flex;
  display: flex;
    flex - direction: column;
  flex-direction: column;
    gap: 0.4em;
  gap: 0.4em;
}
}


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


table.spiritvale - skill - infobox.sv - level - label {
table.spiritvale-skill-infobox .sv-level-label {
    font - weight: 600;
  font-weight: 600;
}
}


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


/* Right: Type table fills the entire half (Option A integrated) */
/* Type table (Option A integrated) */
table.spiritvale - skill - infobox.sv - type - table {
table.spiritvale-skill-infobox .sv-type-table {
    width: 100 % !important;
  width: 100% !important;
    margin: 0!important;
  margin: 0 !important;
    padding: 0.75em 0.9em;
  padding: 0.75em 0.9em;


    border: 0!important;
  border: 0 !important;
    border - collapse: collapse!important;
  border-collapse: collapse !important;
    background: transparent!important;
  background: transparent !important;


    table - layout: fixed;
  table-layout: fixed;
}
}


table.spiritvale - skill - infobox.sv - type - table th,
table.spiritvale-skill-infobox .sv-type-table th,
    table.spiritvale - skill - infobox.sv - type - table td {
table.spiritvale-skill-infobox .sv-type-table td {
    background: transparent!important;
  background: transparent !important;
    padding: 0.2em 0;
  padding: 0.2em 0;
    vertical - align: top;
  vertical-align: top;
    line - height: 1.25;
  line-height: 1.25;
}
}


/* Label column */
table.spiritvale-skill-infobox .sv-type-table th {
table.spiritvale - skill - infobox.sv - type - table th {
  width: 6.75em;
    width: 6.75em;
  font-weight: 700;
    font - weight: 700;
  white-space: nowrap;
    white - space: nowrap;
  padding-right: 0.6em;
    padding - right: 0.6em;
  text-align: right;
    text - align: right; /* cleaner, as discussed */
}
}


table.spiritvale - skill - infobox.sv - type - table th::after {
table.spiritvale-skill-infobox .sv-type-table th::after {
    content: ":";
  content: ":";
    opacity: 0.7;
  opacity: 0.7;
    margin - left: 0.25em;
  margin-left: 0.25em;
}
}


/* Value column */
table.spiritvale-skill-infobox .sv-type-table td {
table.spiritvale - skill - infobox.sv - type - table td {
  text-align: left !important;
    text - align: left!important;
  white-space: normal;
    white - space: normal;
  overflow-wrap: anywhere;
    overflow - wrap: anywhere;
  word-break: break-word;
    word -break: break-word;
}
}


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


    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: none;
    border-right: none;
        border - bottom: 1px solid rgba(148, 163, 184, 0.25);
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
    }
  }
}
}
Retrieved from "https://spiritvale.info/wiki/MediaWiki:Common.css"