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


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


Line 103: Line 101:
}
}


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


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


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


/* ============================================================
/* Base infobox */
  Base infobox (shared)
  ========================================================== */
 
table.spiritvale-skill-infobox,
table.spiritvale-skill-infobox,
table.spiritvale-passive-infobox {
table.spiritvale-passive-infobox {
Line 164: Line 154:
}
}
table.spiritvale-skill-infobox > tbody > tr:last-child,
table.spiritvale-skill-infobox > tbody > tr:last-child,
table.spiritvale-passive-infobox > tbody > tr:last-child {
table.spiritvale-passive-infobox > tbody > tr:last-child { border-bottom: none; }
  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 190: Line 178:
}
}


/* 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 202:
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 { font-size: 1.25em; font-weight: 600; }
.spiritvale-infobox-title {
  font-size: 1.25em;
  font-weight: 600;
}


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


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


.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 Bar (2 slots)
  ========================================================== */


/* Hero bar */
table.spiritvale-skill-infobox .hero-bar-grid {
table.spiritvale-skill-infobox .hero-bar-grid {
   width: 100%;
   width: 100%;
Line 296: Line 272:
   justify-content: center;
   justify-content: center;
   text-align: center;
   text-align: center;
}
table.spiritvale-skill-infobox .hero-bar-module-body {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
}


Line 308: Line 291:
table.spiritvale-skill-infobox .sv-herobar-icon img { vertical-align: middle; }
table.spiritvale-skill-infobox .sv-herobar-icon img { vertical-align: middle; }


/* ============================================================
/* Modules row */
  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 320: Line 300:
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 335: Line 315:
}
}


/* 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 {
table.spiritvale-skill-infobox .hero-module-empty .hero-module-body { min-height: 3.2em; }
  min-height: 3.2em;
}


/* Tile centering */
table.spiritvale-skill-infobox .hero-module .hero-module-body {
table.spiritvale-skill-infobox .hero-module .hero-module-body {
   width: 100%;
   width: 100%;
Line 353: Line 329:
}
}


/* Soft white + outline (hero bar + tiles) */
/* Soft text + 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 364: Line 340:
}
}


/* ============================================================
/* 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 382: Line 355:
}
}


/* ============================================================
/* Level Selector */
  Module: Level Selector
  ========================================================== */
 
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 394: Line 364:
}
}


table.spiritvale-skill-infobox .module-level-selector .sv-level-label {
table.spiritvale-skill-infobox .module-level-selector .sv-level-label { font-weight: 600; }
  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 408: Line 376:
}
}


/* ============================================================
/* Skill Type */
  Module: Skill Type
  ========================================================== */
 
table.spiritvale-skill-infobox .hero-module.module-skill-type .hero-module-body {
table.spiritvale-skill-infobox .hero-module.module-skill-type .hero-module-body {
   width: 100%;
   width: 100%;
Line 449: Line 414:
}
}


/* ============================================================
/* SourceType */
  Module: SourceType
  ========================================================== */
 
table.spiritvale-skill-infobox .hero-module.skill-source-module .hero-module-body {
table.spiritvale-skill-infobox .hero-module.skill-source-module .hero-module-body {
   width: 100%;
   width: 100%;
Line 518: Line 480:
}
}


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


/* ============================================================
/* QuickStats (hero bar: compact strip wrapper) */
  Mobile
table.spiritvale-skill-infobox .hero-bar-module.module-quick-stats .sv-qs-strip {
  ========================================================== */
  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 572: Line 543:
   }
   }


  /* Tiles breathe a bit */
   .mw-parser-output table.spiritvale-skill-infobox .hero-module { padding: 0.55em; }
   .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 590: Line 557:
     padding: 0.30em;
     padding: 0.30em;
   }
   }
   table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk {
   table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk { padding: 0.18em; }
    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)
     .hero-module.skill-source-module.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling)
Line 620: Line 584:
   }
   }


  /* 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;
     gap: 0.40em;
     gap: 0.40em;
     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 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.20em 0.35em;
    padding: 0.05em 0.10em;
   }
   }
}
}


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


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


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


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