Toggle search
Toggle menu
110
215
16
2K
SpiritVale Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Join the Playtest on Steam Now: SpiritVale

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
More actions
← Older edit
No edit summary
No edit summary
 
(18 intermediate revisions by the same user not shown)
Line 27: Line 27:


/* Custom Additions */
/* Custom Additions */
.playtest-info-box {
.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;
     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: 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 {
.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 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 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 {
.citizen - search - trigger:hover {
     transform: translateY(-2px);
     transform: translateY(-2px);
     transition: transform .15s ease-in-out;
     transition: transform .15s ease -in -out;
}
}


/* ============================================================
/* ============================================================
   SpiritVale: generic infobox styling (skills, passives, etc.)
   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)
   ========================================================== */
   ========================================================== */


table.spiritvale-skill-infobox,
/* ------------------------------------------------------------
table.spiritvale-passive-infobox {
  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 */
     /* Layout */
     border-collapse: separate;
     border - collapse: separate;
     border-spacing: 0;
     border - spacing: 0;
     width: 100%;
     width: 100 %;
     max-width: 620px;
     max - width: var(--sv - infobox - max);
     margin: 1.5em auto;
     margin: 1.5em auto;


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


     /* Typography */
     /* Typography */
     font-size: 0.95em;
     font - size: 0.95em;
}
}


/* Optional: float single infoboxes on wide screens.
/* HERO row (icon+name left, description right) */
  (Lists of many boxes will still stack nicely.) */
table.spiritvale - skill - infobox > tbody > tr.spiritvale - infobox - main > th,
/*
    table.spiritvale - skill - infobox > tbody > tr.spiritvale - infobox - main > td,
@media (min-width: 960px) {
     table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > th,
     table.spiritvale-skill-infobox,
     table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > td {
     table.spiritvale-passive-infobox {
    background: linear - gradient(135deg, #7a6fb0, #372b54);
        float: right;
    color: #fff;
        margin: 0 0 1.5em 1.5em;
    padding: 0.9em 1.1em;
     }
     text - align: center;
    vertical - align: middle;
}
}
*/


/* Header row: icon + name */
/* Icon spacing in hero row */
table.spiritvale-skill-infobox > tbody > tr:first-child > th,
table.spiritvale - skill - infobox > tbody > tr: first - child > th.image,
table.spiritvale-passive-infobox > tbody > tr:first-child > th {
    table.spiritvale - passive - infobox > tbody > tr: first - child > th.image {
     background: linear-gradient(135deg, #7a6fb0, #372b54);
     margin - right: 0.6em;
    color: #fff;
     vertical - align: middle;
    padding: 0.75em 1em;
    font-size: 1.1em;
    line-height: 1.3;
     text-align: left;
}
}


/* Make the icon sit nicely next to the title */
/* Adds in the description */
table.spiritvale-skill-infobox > tbody > tr:first-child > th .image,
table.spiritvale - skill - infobox > tbody > tr.spiritvale - infobox - main > th,
table.spiritvale-passive-infobox > tbody > tr:first-child > th .image {
    table.spiritvale - skill - infobox > tbody > tr.spiritvale - infobox - main > td,
     margin-right: 0.6em;
    table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > th,
     vertical-align: middle;
    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;
}
}


/* Body rows (labels + values) */
/* 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;
}
}


/* Default label cells */
/* Label cells (direct children only; avoids styling nested top-band tables) */
table.spiritvale-skill-infobox tbody tr 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 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;
}
}


/* Default value cells */
/* 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 for readability */
/* Zebra striping (direct children only) */
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 inside infobox (e.g. "General", "Type", "Mechanics") */
/* Section headers (Requirements / Mechanics / etc.) */
.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 */
.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/MediaWiki:Common.css"