Toggle search
Toggle menu
110
215
16
2.1K
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

MediaWiki interface page
More actions
Revision as of 05:42, 16 December 2025 by Eviand (talk | contribs)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ============================================================
   Global custom additions
   ========================================================== */

/* Playtest info box (supports:
   1) class="playtest-info-box"
   2) class="playtest info box"  */
.playtest-info-box,
.playtest.info.box {
  max-width: 100%;
  margin: 0 0 10px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  background: #f0f2f8;
  padding: 10px;
  text-align: center;
  color: #333;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Header container band (supports:
   1) class="header-container-outer"
   2) class="header container outer"  */
.header-container-outer,
.header.container.outer {
  max-width: 100%;
  margin: 1px;
  border: 2px solid #372b54;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  background: #f0f2f8;
}

.header-container-middle,
.header.container.middle {
  background: #f0f2f8;
  color: white;
  text-align: center;
  padding: 1px;
  border-radius: 8px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.header-container-inner,
.header.container.inner {
  background: linear-gradient(180deg, #5a4e7c, #372b54);
  color: white;
  text-align: center;
  padding: 1px;
  border-radius: 8px;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 300%;
}

/* Generic custom table */
table.custom-table {
  float: none;
  border: 2px solid #372b54;
  border-radius: 10px;
  padding: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  margin: 1em auto;
  text-align: center;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  -webkit-user-select: text;
  user-select: text;
}

table.custom-table > tbody > tr:nth-child(1) > th {
  background: linear-gradient(180deg, #7a6fb0, #5a4e7c);
  color: white;
  text-align: center;
  padding: 6px;
  font-size: 120%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

table.custom-table > tbody > tr:nth-child(2) > th {
  text-align: center;
  padding: 4px;
  border-bottom: 1px solid #555;
}

table.custom-table > tbody > tr > td {
  text-align: center;
  padding: 4px;
  border-bottom: 1px solid #555;
}

table.custom-table > tbody > tr.middle-header > th {
  background: linear-gradient(180deg, #7a6fb0, #5a4e7c);
  color: white;
  text-align: center;
  padding: 6px;
  font-size: 110%;
}

/* Citizen search hover (transition goes on base state) */
.citizen-search-trigger {
  transition: transform 0.15s ease-in-out;
}
.citizen-search-trigger:hover {
  transform: translateY(-2px);
}


/* ============================================================
   SpiritVale Infoboxes (Skills + Passives)
   ========================================================== */

:root {
  --sv-passive-width: 540px;
  --sv-skill-width: 660px;
  --sv-infobox-max: 620px;
}

/* Shared base */
table.spiritvale-skill-infobox,
table.spiritvale-passive-infobox {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  max-width: var(--sv-infobox-max);
  margin: 1.5em auto;

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

  font-size: 0.95em;
}

/* Hero band background (supports old main row + new split rows for BOTH) */
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;
}

/* Row separators (direct children only) */
table.spiritvale-skill-infobox > tbody > tr,
table.spiritvale-passive-infobox > tbody > tr {
  border-bottom: 1px solid rgba(148, 163, 184, 0.4);
}
table.spiritvale-skill-infobox > tbody > tr:last-child,
table.spiritvale-passive-infobox > tbody > tr:last-child {
  border-bottom: none;
}

/* Label/value cells (direct children only) */
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) {
  width: 26%;
  padding: 0.45em 0.85em;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

table.spiritvale-skill-infobox > tbody > tr > td,
table.spiritvale-passive-infobox > tbody > tr > td {
  padding: 0.45em 0.85em;
  text-align: left;
}

/* Zebra striping */
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-passive-infobox > tbody > tr:nth-child(odd) > td,
table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header) {
  background-color: rgba(148, 163, 184, 0.05);
}

/* Section headers */
.spiritvale-infobox-section-header {
  background: linear-gradient(135deg, #5a4e7c, #372b54);
  color: #fff;
  text-align: left;
  padding: 0.5em 0.9em;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Hero helper classes */
.spiritvale-infobox-main-left-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
}

.spiritvale-infobox-title {
  font-size: 1.25em;
  font-weight: 600;
}

.spiritvale-infobox-main-right-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.spiritvale-infobox-description {
  font-size: 1.05em;
  font-style: italic;
  text-align: center;
  max-width: 42em;
  margin: 0 auto;
  opacity: 0.95;
}


/* ============================================================
   Skills: split hero rows (tuned)
   ========================================================== */

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-top: 0.55em;
  padding-bottom: 0.55em;
}


/* ============================================================
   Passives
   ========================================================== */

table.spiritvale-passive-infobox {
  width: var(--sv-passive-width);
  max-width: var(--sv-passive-width);
  margin: 1em auto;
  table-layout: fixed;
}

/* Passive split hero rows (match Skills) */
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;
}

/* 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) > td {
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Passive section headers centered */
table.spiritvale-passive-infobox .spiritvale-infobox-section-header {
  text-align: center;
}

/* Passive list layout */
.spiritvale-passive-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25em;
}

/* Remove Citizen wrapper borders/spacing around passive tables in lists */
.spiritvale-passive-list .mw-table-wrapper,
.spiritvale-passive-list .table-overflow,
.spiritvale-passive-list .table-scroll,
.spiritvale-passive-list .citizen-table {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* ============================================================
   Skills
   ========================================================== */

table.spiritvale-skill-infobox {
  width: 100%;
  max-width: var(--sv-skill-width);
  margin: 1.25em auto;
  table-layout: fixed;
}

/* List wrapper */
.sv-skill-collection {
  width: 100%;
  max-width: var(--sv-skill-width);
  margin: 0 auto !important;
  padding: 0 !important;

  border: 2px solid #372b54;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  background: transparent !important;

  overflow: hidden;
  display: block !important;
}

/* Neutralize Citizen wrappers inside the skill collection */
.sv-skill-collection .mw-table-wrapper,
.sv-skill-collection .table-overflow,
.sv-skill-collection .table-scroll,
.sv-skill-collection .citizen-table {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* In list mode, each skill becomes a “row” inside the wrapper */
.sv-skill-collection table.spiritvale-skill-infobox {
  width: 100%;
  max-width: 100%;
  margin: 0 !important;

  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Divider between skills */
.sv-skill-collection > * + * {
  border-top: 1px solid rgba(148, 163, 184, 0.25);
}


/* ============================================================
   Skills top band (nested-table)
   ========================================================== */

table.spiritvale-skill-infobox .sv-topband-cell {
  padding: 0 !important;
  background: linear-gradient(
    135deg,
    rgba(90, 78, 124, 0.55),
    rgba(55, 43, 84, 0.55)
  ) !important;
}

table.spiritvale-skill-infobox .sv-topband-table {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;

  border: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  table-layout: fixed;
  background: transparent !important;
}

table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td {
  width: 50%;
  padding: 0 !important;
  vertical-align: middle;
}

table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td:first-child {
  border-right: 1px solid rgba(148, 163, 184, 0.25);
}

/* Level Select (tightened) */
table.spiritvale-skill-infobox .sv-level-ui {
  width: 100%;
  margin: 0 !important;
  padding: 0.6em 0.75em;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

table.spiritvale-skill-infobox .sv-level-title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8em;
  opacity: 0.95;
}

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

table.spiritvale-skill-infobox .sv-level-slider input[type="range"] {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}


/* ============================================================
   Type grid: 4 chunks (2x2), label + value (tightened)
   ========================================================== */

table.spiritvale-skill-infobox .sv-type-grid {
  width: 100% !important;
  margin: 0 !important;
  padding: 0.6em 0.75em;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

table.spiritvale-skill-infobox .sv-type-chunk {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  padding: 0.35em 0.45em;

  border-top: 1px solid rgba(148, 163, 184, 0.18);
  border-left: 1px solid rgba(148, 163, 184, 0.18);
}

/* grid borders */
table.spiritvale-skill-infobox .sv-type-chunk:nth-child(-n + 2) {
  border-top: none;
}
table.spiritvale-skill-infobox .sv-type-chunk:nth-child(odd) {
  border-left: none;
}

table.spiritvale-skill-infobox .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,
    rgba(122, 111, 176, 0.35),
    rgba(90, 78, 124, 0.20)
  );
}

table.spiritvale-skill-infobox .sv-type-value {
  margin-top: 0.2em;
  font-weight: 600;
  line-height: 1.25;

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Mobile: stack Level + Type, and Type grid becomes 1 column */
@media (max-width: 560px) {
  table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td {
    display: block;
    width: 100%;
  }

  table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td:first-child {
    border-right: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  }

  table.spiritvale-skill-infobox .sv-type-grid {
    grid-template-columns: 1fr;
  }

  /* simplify borders for 1-col */
  table.spiritvale-skill-infobox .sv-type-chunk {
    border-left: none;
  }
  table.spiritvale-skill-infobox .sv-type-chunk:first-child {
    border-top: none;
  }
}


/* ============================================================
   Light mode tuning (keeps your dark-mode look intact)
   - 1) Lighter top band panels (Level Select + Type)
   - 2) Stronger borders in top band + type grid
   - 3) More apparent zebra striping
   ========================================================== */

/* Prefer MW theme classes, with a safe fallback to prefers-color-scheme */
.mw-theme-light table.spiritvale-skill-infobox .sv-topband-cell,
@media (prefers-color-scheme: light) {
  table.spiritvale-skill-infobox .sv-topband-cell {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.92),
      rgba(226, 232, 240, 0.92)
    ) !important;
  }
}

/* Text + contrast tweaks inside the top band for light mode */
.mw-theme-light table.spiritvale-skill-infobox .sv-level-title,
.mw-theme-light table.spiritvale-skill-infobox .sv-level-label,
.mw-theme-light table.spiritvale-skill-infobox .sv-type-value,
.mw-theme-light table.spiritvale-skill-infobox .sv-type-label {
  color: #111827;
}

/* Stronger divider between Level + Type panes (light mode) */
.mw-theme-light table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td:first-child {
  border-right: 1px solid rgba(55, 43, 84, 0.28);
}

/* Stronger type-grid cell borders (light mode) */
.mw-theme-light table.spiritvale-skill-infobox .sv-type-chunk {
  border-top: 1px solid rgba(55, 43, 84, 0.20);
  border-left: 1px solid rgba(55, 43, 84, 0.20);
}

/* Slightly lighter label pill background in light mode (so it reads cleaner) */
.mw-theme-light table.spiritvale-skill-infobox .sv-type-label {
  background: linear-gradient(
    180deg,
    rgba(122, 111, 176, 0.22),
    rgba(90, 78, 124, 0.12)
  );
}

/* Mobile separator between stacked panes (light mode) */
@media (max-width: 560px) {
  .mw-theme-light table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td:first-child {
    border-bottom: 1px solid rgba(55, 43, 84, 0.28);
  }
}

/* More apparent zebra striping in light mode */
.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-passive-infobox > tbody > tr:nth-child(odd) > td,
.mw-theme-light table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header) {
  background-color: rgba(148, 163, 184, 0.12);
}

/* Optional: slightly stronger row separators in light mode (keeps structure crisp) */
.mw-theme-light table.spiritvale-skill-infobox > tbody > tr,
.mw-theme-light table.spiritvale-passive-infobox > tbody > tr {
  border-bottom: 1px solid rgba(55, 43, 84, 0.18);
}
Retrieved from "https://spiritvale.info/wiki/index.php?title=MediaWiki:Common.css&oldid=2114"
Last modified
This page was last edited on 16 December 2025, at 05:42.