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

MediaWiki interface page
More actions
Revision as of 03:56, 15 December 2025 by Eviand (talk | contribs)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* CSS placed here will be applied to all skins */

/*
@media (prefers-color-scheme: dark) {
    body, #mw-head {
        background-color: #1f2937;
    }

    a, .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 {
        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 {
    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 {
    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-middle {
    background:#f0f2f8; color:white; text-align:center; padding:1px 1px; border-radius:8px; word-wrap:break-word; overflow-wrap:break-word;
}

.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%;
}

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

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

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

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

table.custom-table > tbody > tr.middle-header > th {
    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)
   - 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 {
    --sv-passive-width: 540px;
    --sv-skill-width: 660px;
    --sv-infobox-max: 620px; /* generic fallback if needed */
}

/* ============================================================
   1) Shared base: both Skills + Passives
   ========================================================== */

table.spiritvale-skill-infobox,
table.spiritvale-passive-infobox {
    /* Layout */
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    max-width: var(--sv-infobox-max);
    margin: 1.5em auto;

    /* Shape */
    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 row (icon+name left, description right) */
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > th,
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > td,
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th,
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
    background: linear-gradient(135deg, #7a6fb0, #372b54);
    color: #fff;
    padding: 0.9em 1.1em;
    text-align: center;
    vertical-align: middle;
}

/* Icon spacing in hero row */
table.spiritvale-skill-infobox > tbody > tr:first-child > th .image,
table.spiritvale-passive-infobox > tbody > tr:first-child > th .image {
    margin-right: 0.6em;
    vertical-align: middle;
}

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

/* Label cells (direct children only; avoids styling nested top-band tables) */
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) {
    width: 26%;
    padding: 0.45em 0.85em;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

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

/* Zebra striping (direct children only) */
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-passive-infobox > tbody > tr:nth-child(odd) > td,
table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header) {
    background-color: rgba(148, 163, 184, 0.05);
}

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

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

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

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

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

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

table.spiritvale-passive-infobox {
    width: var(--sv-passive-width);
    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 {
    width: 42%;
    white-space: normal;
}
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
    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) > td {
    text-align: center;
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

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

/* Passive section headers centered */
table.spiritvale-passive-infobox .spiritvale-infobox-section-header {
    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) */
.spiritvale-passive-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25em;
}

/* Remove Citizen wrapper borders/spacing around passive tables in lists */
.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;
}

/* 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
   - 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 {
    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 {
    width: 100%;
    max-width: var(--sv-skill-width);   /* keeps wrapper aligned to skill width */
    margin: 0 auto !important;          /* remove extra spacing around wrapper */
    padding: 0 !important;

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

    overflow: hidden;
    display: block !important;
}

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

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

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

/* Divider between skills */
.sv-skill-collection > * + * {
    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;
    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 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;

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

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

table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td:first-child {
    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 {
    width: 100%;
    margin: 0 !important;
    padding: 0.75em 0.9em;

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

/* (Re-using the same title/label classes is fine) */
table.spiritvale-skill-infobox .sv-level-title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85em;
    opacity: 0.95;
}

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

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

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

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

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

table.spiritvale-skill-infobox .sv-type-table th {
    font-weight: 700;
    white-space: nowrap;
    padding-right: 0.9em;
}

/* Mobile: stack Level + Type */
@media (max-width: 560px) {
    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 {
        border-right: none;
        border-bottom: 1px solid rgba(148, 163, 184, 0.25);
    }
}
Retrieved from "https://spiritvale.info/wiki/index.php?title=MediaWiki:Common.css&oldid=2083"
Last modified
This page was last edited on 15 December 2025, at 03:56.