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 12:27, 15 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.
/* CSS placed here will be applied to all skins */

/*
@media (prefers-color-scheme: dark) {
  body, #mw-head {
    background-color: #1f2937;
  }

  a,
  .vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a {
    color: oklch(62.3% 0.214 259.815);
  }

  a:visited,
  .vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited {
    color: oklch(54.6% 0.245 262.881);
  }

  a:hover,
  .vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:hover {
    color: oklch(70.7% 0.165 254.624);
    text-decoration: none;
  }

  a.new {
    color: oklch(64.5% 0.246 16.439);
  }
}
*/

/* ============================================================
   Global custom additions
   ========================================================== */

.playtest-info-box {
  max-width: 100%;
  margin-bottom: 10px;
  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;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.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 {
  background: #f0f2f8;
  color: white;
  text-align: center;
  padding: 1px;
  border-radius: 8px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

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

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;
  word-wrap: break-word;
  overflow-wrap: 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%;
}

/* Put transition on the base state so it animates both ways */
.citizen-search-trigger {
  transition: transform 0.15s ease-in-out;
}
.citizen-search-trigger:hover {
  transform: translateY(-2px);
}

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

/* Global size knobs */
: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 both old + split hero rows) */
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 {
  background: linear-gradient(135deg, #7a6fb0, #372b54);
  color: #fff;
  padding: 0.9em 1.1em;
  text-align: center;
  vertical-align: middle;
}

/* Icon spacing in hero row */
table.spiritvale-skill-infobox > tbody > tr:first-child > th .image,
table.spiritvale-passive-infobox > tbody > tr:first-child > th .image {
  margin-right: 0.6em;
  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 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;
}

/* Value cells */
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 content helpers */
.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: 32em;
  margin: 0 auto;
}

/* Skills hero split rows */
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.5em;
}
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td {
  padding-top: 0.1em;
  padding-bottom: 0.9em;
}
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row .spiritvale-infobox-description {
  font-size: 1.0em;
  opacity: 0.95;
  max-width: 42em;
}

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

table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th {
  width: 42%;
  white-space: normal;
}
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
  width: 58%;
}

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

table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main)
  > th:not(.spiritvale-infobox-section-header) {
  white-space: normal;
}

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

table.spiritvale-passive-infobox .spiritvale-infobox-description {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

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

.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;
}

@media (max-width: 768px) {
  body.skin-citizen table.spiritvale-passive-infobox {
    width: 100%;
    max-width: 100%;
    display: table !important;
  }

  body.skin-citizen table.spiritvale-passive-infobox > tbody {
    display: table-row-group !important;
  }

  body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main {
    display: table-row !important;
  }

  body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th,
  body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
    display: table-cell !important;
    float: none !important;
    box-sizing: border-box;
    vertical-align: middle;
    text-align: center;

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

  body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th {
    width: 46% !important;
    padding: 0.75em;
  }

  body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
    width: 54% !important;
    padding: 0.75em;
  }

  body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th .image img {
    width: 64px !important;
    height: auto !important;
  }
}

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

.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;
}

.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;
}

.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;
}

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

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

table.spiritvale-skill-infobox .sv-level-ui {
  width: 100%;
  margin: 0 !important;
  padding: 0.75em 0.9em;

  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

table.spiritvale-skill-infobox .sv-level-title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85em;
  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;
}

/* Type table (Option A integrated) */
table.spiritvale-skill-infobox .sv-type-table {
  width: 100% !important;
  margin: 0 !important;
  padding: 0.75em 0.9em;

  border: 0 !important;
  border-collapse: collapse !important;
  background: transparent !important;

  table-layout: fixed;
}

table.spiritvale-skill-infobox .sv-type-table th,
table.spiritvale-skill-infobox .sv-type-table td {
  background: transparent !important;
  padding: 0.2em 0;
  vertical-align: top;
  line-height: 1.25;
}

table.spiritvale-skill-infobox .sv-type-table th {
  width: 6.75em;
  font-weight: 700;
  white-space: nowrap;
  padding-right: 0.6em;
  text-align: right;
}

table.spiritvale-skill-infobox .sv-type-table th::after {
  content: ":";
  opacity: 0.7;
  margin-left: 0.25em;
}

table.spiritvale-skill-infobox .sv-type-table td {
  text-align: left !important;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@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);
  }
}

/* ============================================================
   Top bar / callout compatibility (supports hyphenated OR split classes)
   ========================================================== */

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

.playtest-info-box a,
.playtest.info.box a {
  text-decoration: none;
}

/* Header container band */
.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%;
}
Retrieved from "https://spiritvale.info/wiki/index.php?title=MediaWiki:Common.css&oldid=2091"
Last modified
This page was last edited on 15 December 2025, at 12:27.