Toggle search
Toggle menu
115
248
25
2.7K
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 1: Line 1:
/* ============================================================
/* ============================================================
   Global custom additions (HARDENED)
   SpiritVale Wiki – Site CSS
  - Scoped to page content so it cannot affect the skin header/top bar
  ============================================================
  - Uses ONLY hyphenated class names (no generic multi-class fallbacks)
  This file is intentionally split into two safe, predictable zones:
 
  1) Global custom additions (HARDENED)
      - Scoped to .mw-parser-output so it cannot affect the Citizen skin header/top bar.
      - Uses ONLY hyphenated class names to avoid matching generic site classes.
 
  2) HERO TEMPLATE (Shared Infobox System)
      - Used by Skills + Passives (and future templates).
      - Dark mode is the “design truth.”
      - For now: module colors intentionally stay dark in BOTH themes.
  ========================================================== */
 
 
/* ============================================================
  1) Global custom additions (HARDENED)
   ========================================================== */
   ========================================================== */


Line 109: Line 123:


/* ============================================================
/* ============================================================
   HERO TEMPLATE (Shared Infobox System)
   2) HERO TEMPLATE (Shared Infobox System)
   - Used by Skills + Passives (and future templates)
   ============================================================
   - Dark mode = default styling
  Used by:
  - Light mode = overrides via .mw-theme-light (plus optional OS fallback)
    - table.spiritvale-skill-infobox
    - table.spiritvale-passive-infobox
 
   Theme strategy:
    - Dark mode: default styling
    - Light mode: ONLY adjusts zebra/separators for readability
    - Modules: STAY dark in light mode (by design, for now)
   ========================================================== */
   ========================================================== */


/* ------------------------------------------------------------
/* ------------------------------------------------------------
   Global sizing tokens
   Global sizing + color tokens
   --------------------------------------------------------- */
   --------------------------------------------------------- */
:root {
:root {
  /* Shared sizing */
   --sv-infobox-max: 620px;    /* shared fallback cap */
   --sv-infobox-max: 620px;    /* shared fallback cap */
   --sv-skill-width: 660px;    /* skills pages + lists */
   --sv-skill-width: 660px;    /* skills pages + lists */
   --sv-passive-width: 540px;  /* passives pages + lists (kept as-is for now) */
   --sv-passive-width: 540px;  /* passives pages + lists (kept as-is for now) */
  /* Module palette (kept dark across themes) */
  --sv-modules-band-a: #3a2c61; /* band gradient start */
  --sv-modules-band-b: #1c1435; /* band gradient end */
  --sv-module-box: #120c20;    /* module box fill */
  --sv-module-gridline: rgba(255, 255, 255, 0.10);
}
}


Line 185: Line 212:
}
}


/* Zebra striping */
/* Zebra striping (subtle by default) */
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),
Line 233: Line 260:
   padding-bottom: 0.55em;
   padding-bottom: 0.55em;
}
}


/* ------------------------------------------------------------
/* ------------------------------------------------------------
Line 286: Line 314:
   border-top: 1px solid rgba(148, 163, 184, 0.25);
   border-top: 1px solid rgba(148, 163, 184, 0.25);
}
}


/* ------------------------------------------------------------
/* ------------------------------------------------------------
   SKILLS: Hero Modules (4-slot scaffold)
   SKILLS: Hero Modules (4-slot scaffold)
   - Replaces the old “top band (nested-table)” system
   - One row contains a 2x2 grid of module boxes.
  - Row contains a 2x2 grid of module boxes
  - Modules are intentionally dark across themes for now.
   --------------------------------------------------------- */
   --------------------------------------------------------- */
table.spiritvale-skill-infobox tr.hero-modules-row > td.hero-modules-cell {
table.spiritvale-skill-infobox tr.hero-modules-row > td.hero-modules-cell {
   background: linear-gradient(135deg, #3a2c61, #1c1435) !important;
  padding: 0 !important;
   background: linear-gradient(135deg, var(--sv-modules-band-a), var(--sv-modules-band-b)) !important;
   color: #fff;
   color: #fff;
}
}
Line 304: Line 334:
}
}


/* Standard module box styling */
/* Standard module box styling (DARK, “unbreakable”) */
table.spiritvale-skill-infobox .hero-module {
table.spiritvale-skill-infobox .hero-module {
   background: #120c20;             /* solid dark purple */
  padding: 0.6em 0.75em;
  box-sizing: border-box;
 
   background: var(--sv-module-box) !important;
   color: #fff;
   color: #fff;


  /* optional: keeps the grid lines readable on dark */
   border-top: 1px solid var(--sv-module-gridline);
   border-top: 1px solid rgba(255, 255, 255, 0.10);
   border-left: 1px solid var(--sv-module-gridline);
   border-left: 1px solid rgba(255, 255, 255, 0.10);
}
}


Line 326: Line 358:
   min-height: 3.2em;
   min-height: 3.2em;
}
}


/* ------------------------------------------------------------
/* ------------------------------------------------------------
Line 355: Line 388:
   margin: 0;
   margin: 0;
}
}


/* ------------------------------------------------------------
/* ------------------------------------------------------------
   SKILLS: Module 2 – Skill Type (self-contained 2x2 grid)
   SKILLS: Module 2 – Skill Type (self-contained 2x2 grid)
  - IMPORTANT: On mobile, this stays 2x2 (not 1x4).
   --------------------------------------------------------- */
   --------------------------------------------------------- */
table.spiritvale-skill-infobox .module-skill-type .sv-type-grid {
table.spiritvale-skill-infobox .module-skill-type .sv-type-grid {
Line 366: Line 401:


   display: grid;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-columns: 1fr 1fr; /* stays 2 columns on mobile */
   gap: 0;
   gap: 0;
}
}
Line 419: Line 454:
}
}


/* Mobile: modules stack to 1 column; type grid becomes 1 column */
 
/* ------------------------------------------------------------
  Mobile behavior
  - The OUTER module grid (4-slot scaffold) stacks to 1 column.
  - The Skill Type module INTERNALLY stays 2x2.
  --------------------------------------------------------- */
@media (max-width: 560px) {
@media (max-width: 560px) {
   table.spiritvale-skill-infobox .hero-modules-grid {
   table.spiritvale-skill-infobox .hero-modules-grid {
Line 433: Line 473:
   }
   }


  /* Slightly tighter type chunk spacing on mobile */
   table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk {
   table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk {
     padding: 0.28em 0.35em;
     padding: 0.28em 0.35em;
Line 499: Line 540:
   margin: 0 !important;
   margin: 0 !important;
}
}


/* ------------------------------------------------------------
/* ------------------------------------------------------------
   LIGHT MODE OVERRIDES
   LIGHT MODE OVERRIDES
   - Primary: .mw-theme-light (MediaWiki theme flag)
   - Keep modules DARK for now (no module background overrides).
   - Optional fallback: OS prefers-color-scheme: light
   - Only increase zebra/separator contrast so body rows read cleanly.
   --------------------------------------------------------- */
   --------------------------------------------------------- */
/* Shared: stronger zebra striping + row separators in light mode */
.mw-theme-light table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > td,
.mw-theme-light table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > td,
.mw-theme-light table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header),
.mw-theme-light table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header),
Line 518: Line 557:
.mw-theme-light table.spiritvale-passive-infobox > tbody > tr {
.mw-theme-light table.spiritvale-passive-infobox > tbody > tr {
   border-bottom: 1px solid rgba(55, 43, 84, 0.18);
   border-bottom: 1px solid rgba(55, 43, 84, 0.18);
}
  table.spiritvale-skill-infobox .hero-module {
    background: rgba(255, 255, 255, 0.65);
  }
  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.12);
  }
  table.spiritvale-skill-infobox > tbody > tr,
  table.spiritvale-passive-infobox > tbody > tr {
    border-bottom: 1px solid rgba(55, 43, 84, 0.18);
  }
}
}
Retrieved from "https://spiritvale.info/wiki/MediaWiki:Common.css"