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


   1) Global custom additions (HARDENED)
   1) Global custom additions (HARDENED)
      - Scoped to .mw-parser-output so it can’t affect Citizen chrome.
      - Uses hyphenated class names to avoid generic collisions.
   2) HERO TEMPLATE (Shared Infobox System)
   2) HERO TEMPLATE (Shared Infobox System)
      - Used by Skills + Passives (and future templates).
      - Dark mode is the design truth.
      - Modules intentionally stay dark in BOTH themes (for now).
   ========================================================== */
   ========================================================== */


/* ============================================================
/* ============================================================
Line 19: Line 12:
   ========================================================== */
   ========================================================== */


/* Playtest info box */
.mw-parser-output .playtest-info-box {
.mw-parser-output .playtest-info-box {
   max-width: 100%;
   max-width: 100%;
Line 34: Line 26:
}
}


/* Header container band (custom page header template wrapper) */
.mw-parser-output .header-container-outer {
.mw-parser-output .header-container-outer {
   max-width: 100%;
   max-width: 100%;
Line 65: Line 56:
}
}


/* Generic custom table */
.mw-parser-output table.custom-table {
.mw-parser-output table.custom-table {
   float: none;
   float: none;
Line 113: Line 103:
}
}


/* Citizen search hover (targets a specific Citizen class) */
.citizen-search-trigger {
.citizen-search-trigger {
   transition: transform 0.15s ease-in-out;
   transition: transform 0.15s ease-in-out;
Line 120: Line 109:
   transform: translateY(-2px);
   transform: translateY(-2px);
}
}


/* ============================================================
/* ============================================================
   2) HERO TEMPLATE (Shared Infobox System)
   2) HERO TEMPLATE (Shared Infobox System)
  ============================================================
  Used by:
    - 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 (intentional)
   ========================================================== */
   ========================================================== */


/* ------------------------------------------------------------
  Global sizing + tokens
  --------------------------------------------------------- */
:root {
:root {
  /* Infobox sizing */
   --sv-infobox-max: 620px;
   --sv-infobox-max: 620px;
   --sv-skill-width: 660px;
   --sv-skill-width: 660px;
   --sv-passive-width: 540px;
   --sv-passive-width: 540px;


  /* Module palette (kept dark across themes) */
   --sv-module-box-a: #5a4e7c;
   --sv-module-box-a: #5a4e7c; /* top */
   --sv-module-box-b: #372b54;
   --sv-module-box-b: #372b54; /* bottom */
   --sv-module-box:  #5a4e7c;
   --sv-module-box:  #5a4e7c; /* tile fill */
   --sv-module-gridline: rgba(255, 255, 255, 0.10);
   --sv-module-gridline: rgba(255, 255, 255, 0.10);


  /* Modules band (used by the modules row background) */
   --sv-modules-band-a: var(--sv-module-box-a);
   --sv-modules-band-a: var(--sv-module-box-a);
   --sv-modules-band-b: var(--sv-module-box-b);
   --sv-modules-band-b: var(--sv-module-box-b);
  /* NEW: pill “navy” treatment */
  --sv-pill-a: rgba(22, 52, 102, 0.78);
  --sv-pill-b: rgba(12, 30, 66, 0.58);
}
}


/* ------------------------------------------------------------
  Shared base: Skill + Passive tables
  --------------------------------------------------------- */
table.spiritvale-skill-infobox,
table.spiritvale-skill-infobox,
table.spiritvale-passive-infobox {
table.spiritvale-passive-infobox {
Line 174: Line 148:
}
}


/* Hero (title + description) band background */
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,
Line 190: Line 163:
}
}


/* Row separators */
table.spiritvale-skill-infobox > tbody > tr,
table.spiritvale-skill-infobox > tbody > tr,
table.spiritvale-passive-infobox > tbody > tr {
table.spiritvale-passive-infobox > tbody > tr {
Line 200: Line 172:
}
}


/* Label/value rows (shared default) */
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) {
Line 216: Line 187:
}
}


/* 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 224: Line 194:
}
}


/* Hero helpers (icon + title + description) */
.spiritvale-infobox-main-left-inner {
.spiritvale-infobox-main-left-inner {
   display: flex;
   display: flex;
Line 253: Line 222:
}
}


/* Skill hero split-row tuning */
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row {
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row {
   border-bottom: none !important;
   border-bottom: none !important;
Line 264: Line 232:
   padding-bottom: 0.55em;
   padding-bottom: 0.55em;
}
}


/* ------------------------------------------------------------
/* ------------------------------------------------------------
   SKILLS: sizing + list wrapper behavior
   SKILLS sizing + list wrapper
   --------------------------------------------------------- */
   --------------------------------------------------------- */
table.spiritvale-skill-infobox {
table.spiritvale-skill-infobox {
Line 275: Line 242:
}
}


/* List-mode wrapper */
.sv-skill-collection {
.sv-skill-collection {
   width: 100%;
   width: 100%;
Line 291: Line 257:
}
}


/* Neutralize Citizen wrappers inside the collection */
.sv-skill-collection .mw-table-wrapper,
.sv-skill-collection .mw-table-wrapper,
.sv-skill-collection .table-overflow,
.sv-skill-collection .table-overflow,
Line 303: Line 268:
}
}


/* Remove each skill’s individual border/shadow when inside the list wrapper */
.sv-skill-collection table.spiritvale-skill-infobox {
.sv-skill-collection table.spiritvale-skill-infobox {
   width: 100%;
   width: 100%;
Line 314: Line 278:
}
}


/* Divider between skill entries in list mode */
.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);
}
}


/* ------------------------------------------------------------
/* ------------------------------------------------------------
   SKILLS: Hero Modules (4-slot scaffold)
   SKILLS: Hero Modules
  - One row contains a 2x2 grid of module tiles.
  - Modules intentionally stay 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 {
Line 331: Line 291:
}
}


/* 2x2 grid of module tiles */
table.spiritvale-skill-infobox .hero-modules-grid {
table.spiritvale-skill-infobox .hero-modules-grid {
   display: grid;
   display: grid;
Line 349: Line 308:
}
}


/* Grid borders: remove top border on first row; remove left border on first column */
/* Desktop grid borders */
table.spiritvale-skill-infobox .hero-module:nth-child(-n + 2) {
table.spiritvale-skill-infobox .hero-module:nth-child(-n + 2) {
   border-top: none;
   border-top: none;
Line 357: Line 316:
}
}


/* Empty slots still reserve space for future modules */
table.spiritvale-skill-infobox .hero-module-empty .hero-module-body {
table.spiritvale-skill-infobox .hero-module-empty .hero-module-body {
   min-height: 3.2em;
   min-height: 3.2em;
}
}


/* ------------------------------------------------------------
/* ------------------------------------------------------------
   SKILLS: Module 1 – Level Selector (self-contained)
   Module 1 – Level Selector
   --------------------------------------------------------- */
   --------------------------------------------------------- */
table.spiritvale-skill-infobox .module-level-selector .sv-level-ui {
table.spiritvale-skill-infobox .module-level-selector .sv-level-ui {
Line 374: Line 331:
}
}


/* Navy pill-style title (so Module 1 matches “pillboxes”) */
table.spiritvale-skill-infobox .module-level-selector .sv-level-title {
table.spiritvale-skill-infobox .module-level-selector .sv-level-title {
   font-weight: 700;
   font-weight: 800;
   text-transform: uppercase;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   letter-spacing: 0.05em;
   font-size: 0.8em;
   font-size: 0.78em;
   opacity: 0.95;
   opacity: 0.98;
 
  width: 100%;
  text-align: center;
  padding: 0.18em 0.35em;
  border-radius: 6px;
 
  background: linear-gradient(180deg, var(--sv-pill-a), var(--sv-pill-b));
}
}


Line 392: Line 357:
}
}


/* Single-level skills (no input; keep spacing stable) */
table.spiritvale-skill-infobox .module-level-selector .sv-level-ui-single .sv-level-slider-single {
table.spiritvale-skill-infobox .module-level-selector .sv-level-ui-single .sv-level-slider-single {
   min-height: 0.45em;
   min-height: 0.45em;
}
}


/* Slot 1: center selector within the module tile */
table.spiritvale-skill-infobox .hero-module.module-level-selector {
table.spiritvale-skill-infobox .hero-module.module-level-selector {
   display: flex;
   display: flex;
Line 407: Line 370:
   justify-content: center;
   justify-content: center;
}
}


/* ------------------------------------------------------------
/* ------------------------------------------------------------
   SKILLS: Module 2 – Skill Type (2x2 grid)
   Module 2 – Skill Type
  - Centered contents
  - No divider lines (spacing instead)
   --------------------------------------------------------- */
   --------------------------------------------------------- */
table.spiritvale-skill-infobox .hero-module.module-skill-type .hero-module-body {
table.spiritvale-skill-infobox .hero-module.module-skill-type .hero-module-body {
Line 422: Line 382:
}
}


/* Grid stays 2x2 */
table.spiritvale-skill-infobox .module-skill-type .sv-type-grid {
table.spiritvale-skill-infobox .module-skill-type .sv-type-grid {
   width: 100%;
   width: 100%;
Line 457: Line 416:
   line-height: 1.15;
   line-height: 1.15;


   background: linear-gradient(
  /* NAVY */
    180deg,
   background: linear-gradient(180deg, var(--sv-pill-a), var(--sv-pill-b));
    rgba(122, 111, 176, 0.35),
    rgba(90, 78, 124, 0.20)
  );
}
}


Line 476: Line 432:


/* ------------------------------------------------------------
/* ------------------------------------------------------------
   SKILLS: Module 3 – Skill Source (Modifier + Source + Scaling)
   Module 3 – Skill Source
  - Optional Modifier column (hidden if empty)
  - Titles aligned (no drifting when scaling list grows)
  - Modifier value and Source value match in size/weight
   --------------------------------------------------------- */
   --------------------------------------------------------- */
/* Center the entire module contents within the tile */
table.spiritvale-skill-infobox .hero-module.skill-source-module .hero-module-body {
table.spiritvale-skill-infobox .hero-module.skill-source-module .hero-module-body {
   height: 100%;
   height: 100%;
   display: flex;
   display: flex;
   align-items: center;     /* vertical center of the grid block */
   align-items: center;
   justify-content: center; /* horizontal center */
   justify-content: center;
}
}


/* Grid container */
table.spiritvale-skill-infobox .skill-source-module .sv-source-grid {
table.spiritvale-skill-infobox .skill-source-module .sv-source-grid {
   width: 100%;
   width: 100%;
Line 498: Line 448:
   gap: 0.55em;
   gap: 0.55em;


  /* Critical: keep pill titles aligned across columns */
   align-items: start;
   align-items: start;
   justify-items: center;
   justify-items: center;
}
}


/* Layout variants (driven by classes from Lua) */
table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-has-mod .sv-source-grid {
table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-has-mod .sv-source-grid {
   grid-template-columns: 0.85fr 1fr 1fr; /* Modifier | Source | Scaling */
   grid-template-columns: 0.85fr 1fr 1fr;
}
}
table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-no-mod .sv-source-grid {
table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-no-mod .sv-source-grid {
   grid-template-columns: 1fr 1fr;       /* Source | Scaling */
   grid-template-columns: 1fr 1fr;
}
}
/* Only one content column (Source-only or Scaling-only) */
table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-only-source.sv-no-mod .sv-source-grid,
table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-only-source.sv-no-mod .sv-source-grid,
table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-only-scaling.sv-no-mod .sv-source-grid {
table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-only-scaling.sv-no-mod .sv-source-grid {
   grid-template-columns: 1fr;
   grid-template-columns: 1fr;
}
}
/* Modifier + only one content column */
table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-only-source.sv-has-mod .sv-source-grid,
table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-only-source.sv-has-mod .sv-source-grid,
table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-only-scaling.sv-has-mod .sv-source-grid {
table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-only-scaling.sv-has-mod .sv-source-grid {
Line 524: Line 467:
}
}


/* Each column is centered, but pinned to the top for title alignment */
table.spiritvale-skill-infobox .skill-source-module .sv-source-col {
table.spiritvale-skill-infobox .skill-source-module .sv-source-col {
   width: 100%;
   width: 100%;
Line 531: Line 473:


   align-items: center;
   align-items: center;
   justify-content: flex-start; /* keeps pill titles parallel */
   justify-content: flex-start;
   text-align: center;
   text-align: center;


Line 537: Line 479:
}
}


/* Pill styling: match Module 2 label treatment */
table.spiritvale-skill-infobox .skill-source-module .sv-source-pill {
table.spiritvale-skill-infobox .skill-source-module .sv-source-pill {
   width: 100%;
   width: 100%;
Line 549: Line 490:
   line-height: 1.15;
   line-height: 1.15;


   background: linear-gradient(
  /* NAVY */
    180deg,
   background: linear-gradient(180deg, var(--sv-pill-a), var(--sv-pill-b));
    rgba(122, 111, 176, 0.35),
    rgba(90, 78, 124, 0.20)
  );
}
}


/* Modifier value + Source value (MATCHED) */
table.spiritvale-skill-infobox .skill-source-module .sv-modifier-value,
table.spiritvale-skill-infobox .skill-source-module .sv-modifier-value,
table.spiritvale-skill-infobox .skill-source-module .sv-source-value {
table.spiritvale-skill-infobox .skill-source-module .sv-source-value {
Line 563: Line 500:
   font-size: clamp(1.05em, 2.2vw, 1.35em);
   font-size: clamp(1.05em, 2.2vw, 1.35em);


  /* Wrap “Magic Attack” nicely */
   white-space: normal;
   white-space: normal;
   overflow-wrap: anywhere;
   overflow-wrap: anywhere;
Line 571: Line 507:
}
}


/* Scaling list (smaller than the big values, centered) */
table.spiritvale-skill-infobox .skill-source-module .sv-scaling-list {
table.spiritvale-skill-infobox .skill-source-module .sv-scaling-list {
   display: flex;
   display: flex;
Line 585: Line 520:
   opacity: 0.95;
   opacity: 0.95;
}
}


/* ------------------------------------------------------------
/* ------------------------------------------------------------
   SKILLS: Module 4 – Quick Stats (3x2 grid)
   Module 4 – Quick Stats
  - Range / Area / Cost / Cast Time / Cooldown / Duration
  - Shows em dash when missing
   --------------------------------------------------------- */
   --------------------------------------------------------- */
table.spiritvale-skill-infobox .hero-module.module-quick-stats .hero-module-body {
table.spiritvale-skill-infobox .hero-module.module-quick-stats .hero-module-body {
Line 634: Line 566:
   line-height: 1.15;
   line-height: 1.15;


   background: linear-gradient(
  /* NAVY */
    180deg,
   background: linear-gradient(180deg, var(--sv-pill-a), var(--sv-pill-b));
    rgba(122, 111, 176, 0.35),
    rgba(90, 78, 124, 0.20)
  );
}
}


Line 651: Line 580:
   word-break: break-word;
   word-break: break-word;
}
}


/* ------------------------------------------------------------
/* ------------------------------------------------------------
   Mobile behavior
   Mobile behavior
   - Outer modules grid stacks to 1 column.
   - Stack modules 1 per row
   - Skill Type module internally stays 2x2.
   - FIX: ensure border between Module 1 and 2
   - Module 4 goes to 2 columns (3 rows) to avoid tiny text.
  - Increase + even out padding
   - Module 4 => 2 columns
   --------------------------------------------------------- */
   --------------------------------------------------------- */
@media (max-width: 560px) {
@media (max-width: 560px) {
Line 664: Line 593:
   }
   }


   table.spiritvale-skill-infobox .hero-module {
   /* Even + slightly larger padding so modules read as separate blocks */
  .mw-parser-output table.spiritvale-skill-infobox .hero-module {
    padding: 0.60em 0.60em;
     border-left: none;
     border-left: none;
   }
   }


  /* Override desktop “first row” rule so Module 2 gets a top border */
  table.spiritvale-skill-infobox .hero-module:nth-child(-n + 2) {
    border-top: 1px solid var(--sv-module-gridline) !important;
  }
   table.spiritvale-skill-infobox .hero-module:first-child {
   table.spiritvale-skill-infobox .hero-module:first-child {
     border-top: none;
     border-top: none !important;
   }
   }


   /* Tighten type chunks on mobile */
   /* Tighten type chunks */
   table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk {
   table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk {
     padding: 0.15em 0.15em;
     padding: 0.15em 0.15em;
   }
   }
   table.spiritvale-skill-infobox .module-skill-type .sv-type-label {
   table.spiritvale-skill-infobox .module-skill-type .sv-type-label {
     font-size: 0.68em;
     font-size: 0.68em;
Line 688: Line 622:
   }
   }
}
}


/* ------------------------------------------------------------
/* ------------------------------------------------------------
   PASSIVES (kept as-is for now)
   PASSIVES (unchanged)
   --------------------------------------------------------- */
   --------------------------------------------------------- */
table.spiritvale-passive-infobox {
table.spiritvale-passive-infobox {
Line 700: Line 633:
}
}


/* Passive split hero rows (match Skills) */
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row {
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row {
   border-bottom: none !important;
   border-bottom: none !important;
Line 712: Line 644:
}
}


/* Center + wrap passive body 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 {
Line 722: Line 653:
}
}


/* 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 list layout */
.spiritvale-passive-list {
.spiritvale-passive-list {
   display: flex;
   display: flex;
Line 735: Line 664:
}
}


/* 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,
Line 746: Line 674:
   margin: 0 !important;
   margin: 0 !important;
}
}


/* ------------------------------------------------------------
/* ------------------------------------------------------------
   LIGHT MODE OVERRIDES
   LIGHT MODE OVERRIDES
  - Keep modules DARK for now (no module background overrides).
  - Increase zebra/separator contrast so body rows read cleanly.
   --------------------------------------------------------- */
   --------------------------------------------------------- */
.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,
Retrieved from "https://spiritvale.info/wiki/MediaWiki:Common.css"