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:
/* ============================================================
/* ============================================================
   SpiritVale Wiki – Site CSS
   SpiritVale Wiki – Site CSS
   ============================================================
   ============================================================ */
  Split into two safe zones:


  1) Global custom additions (HARDENED)
/* ------------------------------------------------------------
  2) HERO TEMPLATE (Shared Infobox System)
   Global additions (hardened)
  ========================================================== */
   --------------------------------------------------------- */
 
/* ============================================================
   1) Global custom additions (HARDENED)
   ========================================================== */


.mw-parser-output .playtest-info-box {
.mw-parser-output .playtest-info-box {
Line 110: Line 105:
}
}


/* ============================================================
/* ------------------------------------------------------------
   SpiritVale Hero Infobox System (Skills + Passives)
   Hero Infobox System (Skills + Passives)
   ========================================================== */
   --------------------------------------------------------- */


/* Theme tokens */
:root {
:root {
   --sv-skill-width: 660px;
   --sv-skill-width: 660px;
Line 140: Line 134:
}
}


/* ============================================================
/* Base infobox */
  Base infobox (shared)
  ========================================================== */
 
table.spiritvale-skill-infobox,
table.spiritvale-skill-infobox,
table.spiritvale-passive-infobox {
table.spiritvale-passive-infobox {
Line 190: Line 181:
}
}


/* Hero title + description rows (shared visual band) */
/* Hero band */
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 214: Line 205:
table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td { padding: 0.55em 1.1em; }
table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td { padding: 0.55em 1.1em; }


/* Shared title/desc text */
.spiritvale-infobox-title {
.spiritvale-infobox-title {
   font-size: 1.25em;
   font-size: 1.25em;
Line 229: Line 219:
}
}


/* ============================================================
/* Skills sizing + list wrapper */
  Skills sizing + list wrapper
  ========================================================== */
 
table.spiritvale-skill-infobox {
table.spiritvale-skill-infobox {
   max-width: var(--sv-skill-width);
   max-width: var(--sv-skill-width);
Line 278: Line 265:
}
}


/* ============================================================
/* Hero bar (2 slots) */
  Skills: Hero Bar (2 slots)
  ========================================================== */
 
table.spiritvale-skill-infobox .hero-bar-grid {
table.spiritvale-skill-infobox .hero-bar-grid {
   width: 100%;
   width: 100%;
Line 308: Line 292:
table.spiritvale-skill-infobox .sv-herobar-icon img { vertical-align: middle; }
table.spiritvale-skill-infobox .sv-herobar-icon img { vertical-align: middle; }


/* ============================================================
/* Modules row (2x2) */
  Shared: slot wrappers (hero bar + tiles)
  ========================================================== */
 
table.spiritvale-skill-infobox .sv-hero-slot {
  min-width: 0;
}
 
table.spiritvale-skill-infobox .sv-hero-slot-body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
 
/* ============================================================
  Skills: Modules row (4 slots)
  ========================================================== */
 
table.spiritvale-skill-infobox tr.hero-modules-row > td.hero-modules-cell {
table.spiritvale-skill-infobox tr.hero-modules-row > td.hero-modules-cell {
   padding: 0 !important;
   padding: 0 !important;
Line 337: Line 301:
table.spiritvale-skill-infobox .hero-modules-grid {
table.spiritvale-skill-infobox .hero-modules-grid {
   display: grid;
   display: grid;
   grid-template-columns: 1fr 1fr; /* 2x2 */
   grid-template-columns: 1fr 1fr;
   gap: 0;
   gap: 0;
}
}
Line 352: Line 316:
}
}


/* 2x2 borders */
table.spiritvale-skill-infobox .hero-module:nth-child(-n + 2) { border-top: none; }
table.spiritvale-skill-infobox .hero-module:nth-child(-n + 2) { border-top: none; }
table.spiritvale-skill-infobox .hero-module:nth-child(odd) { border-left: none; }
table.spiritvale-skill-infobox .hero-module:nth-child(odd) { border-left: none; }
Line 360: Line 323:
}
}


/* Soft white + outline (hero bar + tiles) */
table.spiritvale-skill-infobox .hero-module .hero-module-body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
 
/* Soft white + outline */
table.spiritvale-skill-infobox .hero-module,
table.spiritvale-skill-infobox .hero-module,
table.spiritvale-skill-infobox .hero-module *,
table.spiritvale-skill-infobox .hero-module *,
Line 371: Line 343:
}
}


/* ============================================================
/* Shared pill look (all modules) */
  Pills (shared across modules)
table.spiritvale-skill-infobox :where(.sv-type-label, .sv-source-pill, .sv-m4-label, .sv-sm-label, .sv-sm-flag) {
  ========================================================== */
 
table.spiritvale-skill-infobox :where(.sv-type-label, .sv-source-pill, .sv-m4-label) {
   width: 100%;
   width: 100%;
   padding: 0.18em 0.35em;
   padding: 0.18em 0.35em;
Line 389: Line 358:
}
}


/* ============================================================
/* Level selector */
  Module: Level Selector (EXCEPTION: does not need portability)
  ========================================================== */
 
table.spiritvale-skill-infobox .module-level-selector .sv-level-ui {
table.spiritvale-skill-infobox .module-level-selector .sv-level-ui {
   width: 90%;
   width: 90%;
Line 415: Line 381:
}
}


/* ============================================================
/* Skill type */
  Module: Skill Type (PORTABLE across slots)
table.spiritvale-skill-infobox .hero-module.module-skill-type .hero-module-body {
  ========================================================== */
 
table.spiritvale-skill-infobox .sv-hero-slot.module-skill-type .sv-hero-slot-body {
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
Line 456: Line 419:
}
}


/* ============================================================
/* SourceType */
  Module: SourceType (PORTABLE across slots)
table.spiritvale-skill-infobox .hero-module.skill-source-module .hero-module-body {
  ========================================================== */
 
table.spiritvale-skill-infobox .sv-hero-slot.module-source-type .sv-hero-slot-body {
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
}
}


table.spiritvale-skill-infobox .module-source-type .sv-source-grid {
table.spiritvale-skill-infobox .skill-source-module .sv-source-grid {
   width: 100%;
   width: 100%;
   box-sizing: border-box;
   box-sizing: border-box;
Line 475: Line 435:
}
}


table.spiritvale-skill-infobox .sv-hero-slot.module-source-type.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;
   grid-template-columns: 0.85fr 1fr 1fr;
}
}
table.spiritvale-skill-infobox .sv-hero-slot.module-source-type.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;
   grid-template-columns: 1fr 1fr;
}
}
table.spiritvale-skill-infobox .sv-hero-slot.module-source-type.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 .sv-hero-slot.module-source-type.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;
}
}
table.spiritvale-skill-infobox .sv-hero-slot.module-source-type.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 .sv-hero-slot.module-source-type.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 {
   grid-template-columns: 0.95fr 1.05fr;
   grid-template-columns: 0.95fr 1.05fr;
}
}


table.spiritvale-skill-infobox .module-source-type .sv-source-col {
table.spiritvale-skill-infobox .skill-source-module .sv-source-col {
   width: 100%;
   width: 100%;
   display: flex;
   display: flex;
Line 500: Line 460:
}
}


table.spiritvale-skill-infobox .module-source-type :where(.sv-modifier-value, .sv-source-value) {
table.spiritvale-skill-infobox .skill-source-module :where(.sv-modifier-value, .sv-source-value) {
   font-weight: 800;
   font-weight: 800;
   line-height: 1.05;
   line-height: 1.05;
Line 511: Line 471:
}
}


table.spiritvale-skill-infobox .module-source-type .sv-scaling-list {
table.spiritvale-skill-infobox .skill-source-module .sv-scaling-list {
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
Line 518: Line 478:
}
}


table.spiritvale-skill-infobox .module-source-type .sv-scaling-item {
table.spiritvale-skill-infobox .skill-source-module .sv-scaling-item {
   font-weight: 500;
   font-weight: 500;
   font-size: 0.88em;
   font-size: 0.88em;
Line 525: Line 485:
}
}


/* ============================================================
/* Quick stats */
  Module: Quick Stats (PORTABLE across slots)
table.spiritvale-skill-infobox .hero-module.module-quick-stats .hero-module-body {
  ========================================================== */
 
table.spiritvale-skill-infobox .sv-hero-slot.module-quick-stats .sv-hero-slot-body {
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
Line 568: Line 525:
}
}


/* ============================================================
/* Special Mechanics */
  Mobile
table.spiritvale-skill-infobox .hero-module.module-special-mechanics .hero-module-body {
  ========================================================== */
  width: 100%;
  height: 100%;
}
 
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-root {
  width: 100%;
}


table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-empty {
  width: 100%;
  font-weight: 650;
  opacity: 0.95;
}
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr; /* becomes 2 cols when flags exist */
  gap: 0.5em;
  align-items: start;
}
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-has-flags {
  grid-template-columns: auto 1fr;
}
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-flags {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  align-items: stretch;
}
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em;
  justify-content: center;
  align-items: stretch;
}
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-item {
  flex: 1 1 9.5em;
  min-width: 9.0em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.15em 0.25em;
}
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-value {
  font-weight: 500;
  font-size: 0.98em;
  line-height: 1.2;
  opacity: 0.98;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Mobile */
@media (max-width: 560px) {
@media (max-width: 560px) {
   /* Hero bar stacks */
   /* Hero bar stacks */
Line 579: Line 599:
   }
   }


  /* Tiles breathe a bit */
   .mw-parser-output table.spiritvale-skill-infobox .hero-module {
   .mw-parser-output table.spiritvale-skill-infobox .hero-module {
     padding: 0.55em;
     padding: 0.55em;
   }
   }


   /* Pills shrink by width, not font size */
   /* Pills shrink by width (not font size) */
   table.spiritvale-skill-infobox :where(.sv-type-label, .sv-source-pill, .sv-m4-label) {
   table.spiritvale-skill-infobox :where(.sv-type-label, .sv-source-pill, .sv-m4-label, .sv-sm-label, .sv-sm-flag) {
     width: auto !important;
     width: auto !important;
     display: inline-block !important;
     display: inline-block !important;
Line 593: Line 612:
   }
   }


   table.spiritvale-skill-infobox .module-skill-type .sv-type-grid {
  /* Hero Bar Slot 2: spread/flatten compactable module grids */
     gap: 0.40em;
   table.spiritvale-skill-infobox .hero-bar-module-2.sv-herobar-compact .module-skill-type .sv-type-grid {
     padding: 0.30em;
    grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr));
    gap: 0.35em;
    padding: 0.25em;
  }
 
  table.spiritvale-skill-infobox .hero-bar-module-2.sv-herobar-compact .module-quick-stats .sv-m4-grid {
    grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr));
     gap: 0.35em;
     padding: 0.25em;
  }
 
  table.spiritvale-skill-infobox .hero-bar-module-2.sv-herobar-compact .module-special-mechanics .sv-sm-layout.sv-sm-has-flags {
    grid-template-columns: 1fr;
  }
  table.spiritvale-skill-infobox .hero-bar-module-2.sv-herobar-compact .module-special-mechanics .sv-sm-flags {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  table.spiritvale-skill-infobox .hero-bar-module-2.sv-herobar-compact .module-special-mechanics .sv-sm-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr));
    gap: 0.35em;
   }
   }
   table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk {
   table.spiritvale-skill-infobox .hero-bar-module-2.sv-herobar-compact .module-special-mechanics .sv-sm-item {
     padding: 0.18em;
     min-width: 0;
   }
   }


   /* SourceType: mod over source, beside scaling */
   /* SourceType: mod over source, beside scaling */
   table.spiritvale-skill-infobox
   table.spiritvale-skill-infobox
     .sv-hero-slot.module-source-type.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling)
     .hero-module.skill-source-module.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling)
     .sv-source-grid {
     .sv-source-grid {
     grid-template-columns: 1fr 1fr;
     grid-template-columns: 1fr 1fr;
Line 613: Line 654:


   table.spiritvale-skill-infobox
   table.spiritvale-skill-infobox
     .sv-hero-slot.module-source-type.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling)
     .hero-module.skill-source-module.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling)
     .sv-source-modifier { grid-area: mod; }
     .sv-source-modifier { grid-area: mod; }


   table.spiritvale-skill-infobox
   table.spiritvale-skill-infobox
     .sv-hero-slot.module-source-type.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling)
     .hero-module.skill-source-module.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling)
     .sv-source-main { grid-area: source; }
     .sv-source-main { grid-area: source; }


   table.spiritvale-skill-infobox
   table.spiritvale-skill-infobox
     .sv-hero-slot.module-source-type.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling)
     .hero-module.skill-source-module.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling)
     .sv-source-scaling {
     .sv-source-scaling {
     grid-area: scaling;
     grid-area: scaling;
Line 627: Line 668:
   }
   }


   /* QuickStats becomes 2 columns */
   /* QuickStats becomes 2 cols in tiles (still) */
   table.spiritvale-skill-infobox .module-quick-stats .sv-m4-grid {
   table.spiritvale-skill-infobox .module-quick-stats .sv-m4-grid {
     grid-template-columns: 1fr 1fr;
     grid-template-columns: 1fr 1fr;
Line 635: Line 676:
}
}


/* ============================================================
/* Passives */
  Passives (kept simple)
  ========================================================== */
 
table.spiritvale-passive-infobox {
table.spiritvale-passive-infobox {
   width: var(--sv-passive-width);
   width: var(--sv-passive-width);
Line 677: Line 715:
}
}


/* ============================================================
/* Light mode tweaks */
  Light mode tweaks
  ========================================================== */
 
.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),
Retrieved from "https://spiritvale.info/wiki/MediaWiki:Common.css"