Toggle search
Toggle menu
114
215
17
2.2K
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 111: Line 111:


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


/* Theme tokens */
:root {
:root {
  --sv-infobox-max: 620px;
   --sv-skill-width: 660px;
   --sv-skill-width: 660px;
   --sv-passive-width: 540px;
   --sv-passive-width: 540px;


   --sv-module-box-a: #5a4e7c;
   --sv-card-border: rgba(55, 43, 84, 0.65);
  --sv-module-box-b: #372b54;
   --sv-row-border: rgba(148, 163, 184, 0.40);
  --sv-module-box:  #5a4e7c;
   --sv-module-gridline: rgba(255, 255, 255, 0.10);


   --sv-modules-band-a: var(--sv-module-box-a);
   --sv-hero-a: #7a6fb0;
   --sv-modules-band-b: var(--sv-module-box-b);
  --sv-hero-b: #372b54;
 
  --sv-tile-a: #5a4e7c;
   --sv-tile-b: #372b54;
  --sv-gridline: rgba(255, 255, 255, 0.10);


  /* Pills */
   --sv-pill-a: rgba(90, 135, 255, 0.92);
   --sv-pill-a: rgba(90, 135, 255, 0.92);
   --sv-pill-b: rgba(60, 110, 255, 0.88);
   --sv-pill-b: rgba(60, 110, 255, 0.88);


  /* Text tuning */
   --sv-text-soft: rgba(255, 255, 255, 0.92);
   --sv-text-soft: rgba(255, 255, 255, 0.92);
   --sv-text-outline:
   --sv-text-outline:
Line 139: Line 139:
     -1px 0 0 rgba(0,0,0,0.55);
     -1px 0 0 rgba(0,0,0,0.55);
}
}
/* ============================================================
  Base infobox (shared)
  ========================================================== */


table.spiritvale-skill-infobox,
table.spiritvale-skill-infobox,
Line 145: Line 149:
   border-spacing: 0;
   border-spacing: 0;
   width: 100%;
   width: 100%;
  max-width: var(--sv-infobox-max);
   margin: 1.25em auto;
   margin: 1.5em auto;


   border-radius: 12px;
   border-radius: 12px;
   overflow: hidden;
   overflow: hidden;
   border: 1px solid rgba(55, 43, 84, 0.65);
   border: 1px solid var(--sv-card-border);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);


   font-size: 0.95em;
   font-size: 0.95em;
}
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > th,
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > td,
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th,
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td,
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th,
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td,
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th,
table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td {
  background: linear-gradient(135deg, #7a6fb0, #372b54);
  color: #fff;
  padding: 0.9em 1.1em;
  text-align: center;
  vertical-align: middle;
}
}


table.spiritvale-skill-infobox > tbody > tr,
table.spiritvale-skill-infobox > tbody > tr,
table.spiritvale-passive-infobox > tbody > tr {
table.spiritvale-passive-infobox > tbody > tr {
   border-bottom: 1px solid rgba(148, 163, 184, 0.40);
   border-bottom: 1px solid var(--sv-row-border);
}
}
table.spiritvale-skill-infobox > tbody > tr:last-child,
table.spiritvale-skill-infobox > tbody > tr:last-child,
Line 202: Line 190:
}
}


.spiritvale-infobox-main-left-inner {
/* Hero title + description rows (shared visual band) */
   display: flex;
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > th,
   flex-direction: column;
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > td,
   align-items: center;
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th,
   justify-content: center;
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td,
   gap: 0.35em;
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th,
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td,
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th,
table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td {
   background: linear-gradient(135deg, var(--sv-hero-a), var(--sv-hero-b));
   color: #fff;
   padding: 0.9em 1.1em;
   text-align: center;
   vertical-align: middle;
}
}


table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row { border-bottom: none !important; }
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th { padding-bottom: 0.55em; }
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td { padding: 0.55em 1.1em; }
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row { border-bottom: none !important; }
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th { padding-bottom: 0.55em; }
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;
   font-weight: 600;
   font-weight: 600;
}
.spiritvale-infobox-main-right-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
}


Line 230: Line 229:
}
}


table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row {
/* ============================================================
  border-bottom: none !important;
  Skills sizing + list wrapper
}
  ========================================================== */
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th {
  padding-bottom: 0.55em;
}
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td {
  padding-top: 0.55em;
  padding-bottom: 0.55em;
}


/* ------------------------------------------------------------
  SKILLS: Hero Bar (2-slot top bar)
  - Desktop: 2 columns (two real cells)
  - Mobile: 1 column (module 2 stacks under module 1)
  --------------------------------------------------------- */
table.spiritvale-skill-infobox .hero-bar-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0.9em;
}
table.spiritvale-skill-infobox .hero-bar-module {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center; /* center inside its own herobar cell */
  text-align: center;
}
table.spiritvale-skill-infobox .sv-herobar-1-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
}
table.spiritvale-skill-infobox .sv-herobar-icon { line-height: 0; }
table.spiritvale-skill-infobox .sv-herobar-icon img { vertical-align: middle; }
/* ------------------------------------------------------------
  SKILLS sizing + list wrapper
  --------------------------------------------------------- */
table.spiritvale-skill-infobox {
table.spiritvale-skill-infobox {
   max-width: var(--sv-skill-width);
   max-width: var(--sv-skill-width);
  margin: 1.25em auto;
   table-layout: fixed;
   table-layout: fixed;
}
}
Line 287: Line 244:
   padding: 0 !important;
   padding: 0 !important;


   border: 2px solid #372b54;
   border: 2px solid var(--sv-hero-b);
   border-radius: 10px;
   border-radius: 10px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
Line 321: Line 278:
}
}


/* ------------------------------------------------------------
/* ============================================================
   SKILLS: Hero Modules
  Skills: Hero Bar (2 slots)
   --------------------------------------------------------- */
  ========================================================== */
 
table.spiritvale-skill-infobox .hero-bar-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0.9em;
}
 
table.spiritvale-skill-infobox .hero-bar-module {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
 
table.spiritvale-skill-infobox .sv-herobar-1-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
}
 
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)
   ========================================================== */
 
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;
   background: linear-gradient(135deg, var(--sv-modules-band-a), var(--sv-modules-band-b)) !important;
   background: linear-gradient(135deg, var(--sv-tile-a), var(--sv-tile-b)) !important;
   color: #fff;
   color: #fff;
}
}
Line 332: Line 320:
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;
}
}


.mw-parser-output table.spiritvale-skill-infobox .hero-module {
.mw-parser-output table.spiritvale-skill-infobox .hero-module {
   padding: 0.40em 0.40em;
   padding: 0.40em;
   box-sizing: border-box;
   box-sizing: border-box;


   background: #372b54 !important;
   background: var(--sv-hero-b) !important;
   color: #fff !important;
   color: #fff !important;


   border-top: 1px solid var(--sv-module-gridline);
   border-top: 1px solid var(--sv-gridline);
   border-left: 1px solid var(--sv-module-gridline);
   border-left: 1px solid var(--sv-gridline);
}
}


/* Desktop grid borders */
/* 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 355: Line 343:
}
}


/* ------------------------------------------------------------
/* Tile centering */
  Centering: each tile centers its own contents
  --------------------------------------------------------- */
table.spiritvale-skill-infobox .hero-module .hero-module-body {
table.spiritvale-skill-infobox .hero-module .hero-module-body {
   width: 100%;
   width: 100%;
Line 367: Line 353:
}
}


/* ------------------------------------------------------------
/* Soft white + outline (hero bar + tiles) */
  Text tuning: soften white + subtle outline (hero tiles + herobar)
  --------------------------------------------------------- */
table.spiritvale-skill-infobox .hero-module,
table.spiritvale-skill-infobox .hero-module,
table.spiritvale-skill-infobox .hero-module *,
table.spiritvale-skill-infobox .hero-module *,
table.spiritvale-skill-infobox .hero-bar-module,
table.spiritvale-skill-infobox .hero-bar-module,
table.spiritvale-skill-infobox .hero-bar-module * {
table.spiritvale-skill-infobox .hero-bar-module *,
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row,
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row {
   color: var(--sv-text-soft) !important;
   color: var(--sv-text-soft) !important;
   text-shadow: var(--sv-text-outline);
   text-shadow: var(--sv-text-outline);
}
}


table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row,
/* ============================================================
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row {
  Pills (shared across modules)
   color: var(--sv-text-soft) !important;
  ========================================================== */
   text-shadow: var(--sv-text-outline);
 
table.spiritvale-skill-infobox :where(.sv-type-label, .sv-source-pill, .sv-m4-label) {
   width: 100%;
  padding: 0.18em 0.35em;
  border-radius: 6px;
 
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.72em;
   line-height: 1.15;
 
  background: linear-gradient(180deg, var(--sv-pill-a), var(--sv-pill-b));
}
}


/* ------------------------------------------------------------
/* ============================================================
   Module 1 – 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 409: Line 408:
}
}


/* ------------------------------------------------------------
/* ============================================================
   Module 2 – 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%;
   height: 100%;
   height: 100%;
  width: 100%;
}
}


Line 435: Line 435:
   text-align: center;
   text-align: center;


  border: none !important;
   padding: 0.25em 0.45em;
   padding: 0.25em 0.45em;
   gap: 0.6em;
   gap: 0.6em;
}
table.spiritvale-skill-infobox .module-skill-type .sv-type-label {
  width: 100%;
  padding: 0.18em 0.35em;
  border-radius: 6px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.72em;
  line-height: 1.15;
  background: linear-gradient(180deg, var(--sv-pill-a), var(--sv-pill-b));
}
}


table.spiritvale-skill-infobox .module-skill-type .sv-type-value {
table.spiritvale-skill-infobox .module-skill-type .sv-type-value {
  margin-top: 0 !important;
   font-weight: 400;
   font-weight: 400;
   font-size: 1.02em;
   font-size: 1.02em;
Line 465: Line 449:
}
}


/* ------------------------------------------------------------
/* ============================================================
   Module 3 – Skill Source
   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%;
   height: 100%;
   height: 100%;
  width: 100%;
}
}


Line 479: Line 464:
   display: grid;
   display: grid;
   gap: 0.55em;
   gap: 0.55em;
   align-items: start;
   align-items: start;
   justify-items: center;
   justify-items: center;
Line 503: Line 487:
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
   align-items: center;
   align-items: center;
   justify-content: flex-start;
   justify-content: flex-start;
   text-align: center;
   text-align: center;
   gap: 0.35em;
   gap: 0.35em;
}
}


table.spiritvale-skill-infobox .skill-source-module .sv-source-pill {
table.spiritvale-skill-infobox .skill-source-module :where(.sv-modifier-value, .sv-source-value) {
  width: 100%;
  padding: 0.18em 0.35em;
  border-radius: 6px;
 
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.72em;
  line-height: 1.15;
 
  background: linear-gradient(180deg, var(--sv-pill-a), var(--sv-pill-b));
}
 
table.spiritvale-skill-infobox .skill-source-module .sv-modifier-value,
table.spiritvale-skill-infobox .skill-source-module .sv-source-value {
   font-weight: 800;
   font-weight: 800;
   line-height: 1.05;
   line-height: 1.05;
Line 534: Line 501:
   overflow-wrap: anywhere;
   overflow-wrap: anywhere;
   word-break: break-word;
   word-break: break-word;
   opacity: 0.98;
   opacity: 0.98;
}
}
Line 552: Line 518:
}
}


/* ------------------------------------------------------------
/* ============================================================
   Module 4 – Quick Stats
   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%;
   height: 100%;
   height: 100%;
  width: 100%;
}
}


Line 581: Line 548:
   padding: 0.10em 0.20em;
   padding: 0.10em 0.20em;
   min-height: 2.35em;
   min-height: 2.35em;
}
table.spiritvale-skill-infobox .module-quick-stats .sv-m4-label {
  width: 100%;
  padding: 0.18em 0.35em;
  border-radius: 6px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.72em;
  line-height: 1.15;
  background: linear-gradient(180deg, var(--sv-pill-a), var(--sv-pill-b));
}
}


Line 608: Line 561:
}
}


/* ------------------------------------------------------------
/* ============================================================
   Mobile behavior
   Mobile
   - KEEP the hero modules as a 2x2 grid (four squares)
   ========================================================== */
  - Herobar 2 stacks under herobar 1 (above description)
 
  - Pills shrink in WIDTH (not font size)
  - Module 4 stays 2 columns
  --------------------------------------------------------- */
@media (max-width: 560px) {
@media (max-width: 560px) {
   /* Herobar: stack slot 2 under slot 1 (still inside title bar) */
   /* 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 622: Line 572:
   }
   }


   /* KEEP hero modules as 2x2 grid */
   /* Tiles breathe a bit */
  table.spiritvale-skill-infobox .hero-modules-grid {
    grid-template-columns: 1fr 1fr;
  }
 
   .mw-parser-output table.spiritvale-skill-infobox .hero-module {
   .mw-parser-output table.spiritvale-skill-infobox .hero-module {
     padding: 0.55em 0.55em;
     padding: 0.55em;
   }
   }


   /* Shrink pill WIDTH on mobile (keep font-size unchanged) */
   /* Pills shrink by width, not font size */
   table.spiritvale-skill-infobox .module-skill-type .sv-type-label,
   table.spiritvale-skill-infobox :where(.sv-type-label, .sv-source-pill, .sv-m4-label) {
  table.spiritvale-skill-infobox .skill-source-module .sv-source-pill,
  table.spiritvale-skill-infobox .module-quick-stats .sv-m4-label {
     width: auto !important;
     width: auto !important;
     display: inline-block !important;
     display: inline-block !important;
     max-width: 100%;
     max-width: 100%;
     white-space: nowrap;
     white-space: nowrap;
     padding: 0.22em 0.45em; /* outline-friendly breathing room */
     padding: 0.22em 0.45em;
   }
   }


Line 647: Line 591:
   }
   }
   table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk {
   table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk {
     padding: 0.18em 0.18em;
     padding: 0.18em;
   }
   }


   /* Module 3 (has Mod + Source + Scaling):
   /* SourceType: mod over source, beside scaling */
    Stack Modifier above Source, centered 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 677: Line 620:
   }
   }


   /* Module 4 stays 2 columns */
   /* 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 685: Line 628:
}
}


/* ------------------------------------------------------------
/* ============================================================
   PASSIVES (unchanged)
   Passives (kept simple)
   --------------------------------------------------------- */
   ========================================================== */
 
table.spiritvale-passive-infobox {
table.spiritvale-passive-infobox {
   width: var(--sv-passive-width);
   width: var(--sv-passive-width);
Line 693: Line 637:
   margin: 1em auto;
   margin: 1em auto;
   table-layout: fixed;
   table-layout: fixed;
}
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row {
  border-bottom: none !important;
}
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th {
  padding-bottom: 0.55em;
}
table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td {
  padding-top: 0.55em;
  padding-bottom: 0.55em;
}
}


Line 737: Line 670:
}
}


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