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 2: Line 2:
   SpiritVale Wiki – Site CSS
   SpiritVale Wiki – Site CSS
   ============================================================
   ============================================================
   1) Global custom additions
  Split into two safe zones:
   2) HERO TEMPLATE (Skills + Passives)
 
   1) Global custom additions (HARDENED)
   2) HERO TEMPLATE (Shared Infobox System)
   ========================================================== */
   ========================================================== */


/* ============================================================
/* ============================================================
   1) Global custom additions
   1) Global custom additions (HARDENED)
   ========================================================== */
   ========================================================== */


Line 101: Line 103:
}
}


.citizen-search-trigger { transition: transform 0.15s ease-in-out; }
.citizen-search-trigger {
.citizen-search-trigger:hover { transform: translateY(-2px); }
  transition: transform 0.15s ease-in-out;
}
.citizen-search-trigger:hover {
  transform: translateY(-2px);
}


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


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


/* Base infobox */
/* ============================================================
  Base infobox (shared)
  ========================================================== */
 
table.spiritvale-skill-infobox,
table.spiritvale-skill-infobox,
table.spiritvale-passive-infobox {
table.spiritvale-passive-infobox {
Line 154: Line 164:
}
}
table.spiritvale-skill-infobox > tbody > tr:last-child,
table.spiritvale-skill-infobox > tbody > tr:last-child,
table.spiritvale-passive-infobox > tbody > tr:last-child { border-bottom: none; }
table.spiritvale-passive-infobox > tbody > tr:last-child {
  border-bottom: none;
}


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),
Line 178: Line 190:
}
}


/* Hero band */
/* Hero title + description rows (shared visual 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 202: Line 214:
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; }


.spiritvale-infobox-title { font-size: 1.25em; font-weight: 600; }
/* Shared title/desc text */
.spiritvale-infobox-title {
  font-size: 1.25em;
  font-weight: 600;
}


.spiritvale-infobox-description {
.spiritvale-infobox-description {
Line 213: Line 229:
}
}


/* 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 255: Line 274:
}
}


.sv-skill-collection > * + * { border-top: 1px solid rgba(148, 163, 184, 0.25); }
.sv-skill-collection > * + * {
  border-top: 1px solid rgba(148, 163, 184, 0.25);
}
 
/* ============================================================
  Skills: Hero Bar (2 slots)
  ========================================================== */


/* Hero bar */
table.spiritvale-skill-infobox .hero-bar-grid {
table.spiritvale-skill-infobox .hero-bar-grid {
   width: 100%;
   width: 100%;
Line 274: Line 298:
}
}


table.spiritvale-skill-infobox .hero-bar-module-body {
table.spiritvale-skill-infobox .sv-herobar-1-wrap {
  width: 100%;
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;
  gap: 0.65em;
}
}


table.spiritvale-skill-infobox .sv-herobar-1-wrap {
table.spiritvale-skill-infobox .sv-herobar-icon { line-height: 0; }
table.spiritvale-skill-infobox .sv-herobar-icon img { vertical-align: middle; }
 
/* ============================================================
  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;
   display: flex;
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;
   gap: 0.65em;
   text-align: center;
}
}


table.spiritvale-skill-infobox .sv-herobar-icon { line-height: 0; }
/* ============================================================
table.spiritvale-skill-infobox .sv-herobar-icon img { vertical-align: middle; }
  Skills: Modules row (4 slots)
  ========================================================== */


/* Modules row */
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 300: Line 337:
table.spiritvale-skill-infobox .hero-modules-grid {
table.spiritvale-skill-infobox .hero-modules-grid {
   display: grid;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-columns: 1fr 1fr; /* 2x2 */
   gap: 0;
   gap: 0;
}
}
Line 315: Line 352:
}
}


/* 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; }


table.spiritvale-skill-infobox .hero-module-empty .hero-module-body { min-height: 3.2em; }
table.spiritvale-skill-infobox .hero-module-empty .hero-module-body {
 
  min-height: 3.2em;
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 text + outline */
/* Soft white + outline (hero bar + tiles) */
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 340: Line 371:
}
}


/* Pills */
/* ============================================================
  Pills (shared across modules)
  ========================================================== */
 
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) {
   width: 100%;
   width: 100%;
Line 355: Line 389:
}
}


/* 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 364: Line 401:
}
}


table.spiritvale-skill-infobox .module-level-selector .sv-level-label { font-weight: 600; }
table.spiritvale-skill-infobox .module-level-selector .sv-level-label {
  font-weight: 600;
}


table.spiritvale-skill-infobox .module-level-selector .sv-level-slider input[type="range"] {
table.spiritvale-skill-infobox .module-level-selector .sv-level-slider input[type="range"] {
Line 376: Line 415:
}
}


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


/* SourceType */
/* ============================================================
table.spiritvale-skill-infobox .hero-module.skill-source-module .hero-module-body {
  Module: SourceType (PORTABLE across slots)
  ========================================================== */
 
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 .skill-source-module .sv-source-grid {
table.spiritvale-skill-infobox .module-source-type .sv-source-grid {
   width: 100%;
   width: 100%;
   box-sizing: border-box;
   box-sizing: border-box;
Line 430: Line 475:
}
}


table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-has-mod .sv-source-grid {
table.spiritvale-skill-infobox .sv-hero-slot.module-source-type.sv-has-mod .sv-source-grid {
   grid-template-columns: 0.85fr 1fr 1fr;
   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 .sv-hero-slot.module-source-type.sv-no-mod .sv-source-grid {
   grid-template-columns: 1fr 1fr;
   grid-template-columns: 1fr 1fr;
}
}
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-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 .sv-hero-slot.module-source-type.sv-only-scaling.sv-no-mod .sv-source-grid {
   grid-template-columns: 1fr;
   grid-template-columns: 1fr;
}
}
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-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 .sv-hero-slot.module-source-type.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 .skill-source-module .sv-source-col {
table.spiritvale-skill-infobox .module-source-type .sv-source-col {
   width: 100%;
   width: 100%;
   display: flex;
   display: flex;
Line 455: Line 500:
}
}


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


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


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


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


/* QuickStats (hero bar: compact strip wrapper) */
/* ============================================================
table.spiritvale-skill-infobox .hero-bar-module.module-quick-stats .sv-qs-strip {
  Mobile
  width: 100%;
  ========================================================== */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* desktop: compact 3-wide */
  gap: 0.35em 0.55em;
  padding: 0.10em 0.15em;
  box-sizing: border-box;
}


table.spiritvale-skill-infobox .hero-bar-module.module-quick-stats .sv-qs-strip .sv-m4-cell {
  min-height: 0;
  padding: 0;
  gap: 0.20em;
}
/* Mobile */
@media (max-width: 560px) {
@media (max-width: 560px) {
  /* Hero bar stacks */
   table.spiritvale-skill-infobox .hero-bar-grid {
   table.spiritvale-skill-infobox .hero-bar-grid {
     grid-template-columns: 1fr;
     grid-template-columns: 1fr;
Line 543: Line 579:
   }
   }


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


  /* 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) {
     width: auto !important;
     width: auto !important;
Line 557: Line 597:
     padding: 0.30em;
     padding: 0.30em;
   }
   }
   table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk { padding: 0.18em; }
   table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk {
    padding: 0.18em;
  }


  /* SourceType: mod over source, beside scaling */
   table.spiritvale-skill-infobox
   table.spiritvale-skill-infobox
     .hero-module.skill-source-module.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling)
     .sv-hero-slot.module-source-type.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 570: Line 613:


   table.spiritvale-skill-infobox
   table.spiritvale-skill-infobox
     .hero-module.skill-source-module.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling)
     .sv-hero-slot.module-source-type.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
     .hero-module.skill-source-module.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling)
     .sv-hero-slot.module-source-type.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
     .hero-module.skill-source-module.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling)
     .sv-hero-slot.module-source-type.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling)
     .sv-source-scaling {
     .sv-source-scaling {
     grid-area: scaling;
     grid-area: scaling;
Line 584: Line 627:
   }
   }


  /* QuickStats becomes 2 columns */
   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 589: Line 633:
     padding: 0.30em;
     padding: 0.30em;
   }
   }
}


  /* HERO BAR "flatten": 6 evenly spread columns */
/* ============================================================
  table.spiritvale-skill-infobox .hero-bar-module.module-quick-stats .sv-qs-strip {
  Passives (kept simple)
    grid-template-columns: repeat(6, minmax(0, 1fr));
  ========================================================== */
    gap: 0.20em 0.35em;
    padding: 0.05em 0.10em;
  }
}


/* Passives */
table.spiritvale-passive-infobox {
table.spiritvale-passive-infobox {
   width: var(--sv-passive-width);
   width: var(--sv-passive-width);
Line 615: Line 655:
}
}


table.spiritvale-passive-infobox .spiritvale-infobox-section-header { text-align: center; }
table.spiritvale-passive-infobox .spiritvale-infobox-section-header {
  text-align: center;
}


.spiritvale-passive-list {
.spiritvale-passive-list {
Line 635: Line 677:
}
}


/* Light mode */
/* ============================================================
  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"