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 188: Line 188:


/* ============================================================
/* ============================================================
  SpiritVale: Skill top band (Level Select + Type side-by-side)
   SpiritVale: Passives
  (Used by the new 2-column header row markup/classes in GameSkills)
  ========================================================== */
 
table.spiritvale-skill-infobox .sv-topband-cell {
    padding: 0 !important; /* inner table handles spacing */
    background: linear-gradient(135deg, rgba(90, 78, 124, 0.55), rgba(55, 43, 84, 0.55)) !important; /* beat zebra */
}
 
table.spiritvale-skill-infobox .sv-topband-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
 
table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td {
    width: 50%;
    vertical-align: top;
    padding: 0.75em 0.9em;
}
 
table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td:first-child {
    border-right: 1px solid rgba(148, 163, 184, 0.25);
}
 
/* Level UI */
table.spiritvale-skill-infobox .sv-level-ui {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}
 
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%;
}
 
/* Type list mini-table */
table.spiritvale-skill-infobox .sv-type-table {
    width: 100%;
    border-collapse: collapse;
}
 
table.spiritvale-skill-infobox .sv-type-table th,
table.spiritvale-skill-infobox .sv-type-table td {
    padding: 0.2em 0;
    background: transparent !important; /* ensure zebra never leaks in */
}
 
table.spiritvale-skill-infobox .sv-type-table th {
    text-align: left;
    font-weight: 700;
    white-space: nowrap;
    padding-right: 0.6em;
}
 
table.spiritvale-skill-infobox .sv-type-table td {
    text-align: left;
    overflow-wrap: anywhere;
    word-break: break-word;
}
 
/* Optional: on small screens, stack Level + Type */
@media (max-width: 560px) {
    table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td {
        display: block;
        width: 100%;
        border-right: none !important;
    }
}
 
/* ============================================================
   SpiritVale: Passives (single source of truth)
   - Fixed, consistent desktop width
   - Fixed, consistent desktop width
   - Centered body cells
   - Centered body cells
Line 394: Line 311:
         overflow-wrap: anywhere;
         overflow-wrap: anywhere;
         word-break: break-word;
         word-break: break-word;
    }
}
/* ============================================================
  SpiritVale: Skills
  - Fixed max width (desktop) + centered
  - Better spacing between skill cards in lists
  - Top band layout (Level Select + Type side-by-side)
  ========================================================== */
/* Desktop width knob for skills (slightly larger than passives) */
:root { --sv-skill-max-width: 640px; }
/* Lock max width (no min width), centered */
table.spiritvale-skill-infobox {
    width: 100%;
    max-width: var(--sv-skill-max-width);
    margin: 1.5em auto;
}
/* Skill list layout: more separation between cards */
.spiritvale-skill-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75em; /* spacing between skill cards */
    margin: 0 auto;
}
/* In lists, let the container gap control spacing */
.spiritvale-skill-list table.spiritvale-skill-infobox {
    margin: 0 auto;
}
/* Citizen/table wrappers: remove outlines/extra padding in lists */
.spiritvale-skill-list .mw-table-wrapper,
.spiritvale-skill-list .table-overflow,
.spiritvale-skill-list .table-scroll,
.spiritvale-skill-list .citizen-table {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* ------------------------------------------------------------
  Skill top band (Level Select + Type)
  Matches current GameSkills markup:
  - td.sv-topband-cell > div.sv-skill-topband
    - div.sv-topband-left  (Level UI)
    - div.sv-topband-right (Type list)
  ------------------------------------------------------------ */
table.spiritvale-skill-infobox .sv-topband-cell {
    padding: 0 !important; /* inner grid handles spacing */
    background: linear-gradient(
        135deg,
        rgba(90, 78, 124, 0.55),
        rgba(55, 43, 84, 0.55)
    ) !important; /* override zebra striping */
}
/* Two-column band */
table.spiritvale-skill-infobox .sv-skill-topband {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
/* Left + right padding + divider */
table.spiritvale-skill-infobox .sv-topband-left,
table.spiritvale-skill-infobox .sv-topband-right {
    padding: 0.75em 0.9em;
    vertical-align: top;
}
table.spiritvale-skill-infobox .sv-topband-left {
    border-right: 1px solid rgba(148, 163, 184, 0.25);
}
/* Level UI */
table.spiritvale-skill-infobox .sv-level-ui {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}
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;
}
/* Slider sizing (your JS inserts the <input type="range"> here) */
table.spiritvale-skill-infobox .sv-level-slider input[type="range"] {
    width: 100%;
}
/* Type list (label left, value right) */
table.spiritvale-skill-infobox .sv-type-box {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}
table.spiritvale-skill-infobox .sv-type-row {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 0.6em;
    align-items: baseline;
}
table.spiritvale-skill-infobox .sv-type-key {
    text-align: left;
    font-weight: 700;
    white-space: nowrap;
}
table.spiritvale-skill-infobox .sv-type-val {
    text-align: left;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Small screens: stack Level + Type */
@media (max-width: 560px) {
    table.spiritvale-skill-infobox .sv-skill-topband {
        grid-template-columns: 1fr;
    }
    table.spiritvale-skill-infobox .sv-topband-left {
        border-right: none;
        border-bottom: 1px solid rgba(148, 163, 184, 0.25);
     }
     }
}
}
Retrieved from "https://spiritvale.info/wiki/MediaWiki:Common.css"