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: Difference between revisions

MediaWiki interface page
More actions
← Older edit
No edit summary
No edit summary
 
(25 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* ============================================================
 
  Global custom additions
/*
  ========================================================== */
@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);
    }
}
*/


/* Custom Additions */
/* Playtest info box (supports:
.playtest-info-box {
  1) class="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;
  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-outer {
/* Header container band (supports:
    max-width:100%; margin:1 1px; border:2px solid #372b54; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,0.25); background:#f0f2f8;
  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 1px; border-radius:8px; word-wrap:break-word; overflow-wrap:break-word;
.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 1px; border-radius:8px; word-wrap:break-word; overflow-wrap:break-word;font-size:300%;
.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 {
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;
  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 {
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;
  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 {
table.custom-table > tbody > tr:nth-child(2) > th {
    text-align:center; padding:4px; border-bottom:1px solid #555;
  text-align: center;
  padding: 4px;
  border-bottom: 1px solid #555;
}
}


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


table.custom-table > tbody > tr.middle-header > th {
table.custom-table > tbody > tr.middle-header > th {
    background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:6px; font-size:110%;
  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 {
.citizen-search-trigger:hover {
    transform: translateY(-2px);
  transform: translateY(-2px);
    transition: transform .15s ease-in-out;
}
}


/* ============================================================
/* ============================================================
   SpiritVale: generic infobox styling (skills, passives, etc.)
   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-skill-infobox,
table.spiritvale-passive-infobox {
table.spiritvale-passive-infobox {
    /* Layout */
  border-collapse: separate;
    border-collapse: separate;
  border-spacing: 0;
    border-spacing: 0;
  width: 100%;
    width: 100%;
  max-width: var(--sv-infobox-max);
    max-width: 620px;
  margin: 1.5em auto;
    margin: 1.5em auto;
 
    /* Shape */
    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);


    /* Typography */
  border-radius: 12px;
    font-size: 0.95em;
  overflow: hidden;
}
  border: 1px solid rgba(55, 43, 84, 0.65);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);


/* Optional: float single infoboxes on wide screens.
  font-size: 0.95em;
  (Lists of many boxes will still stack nicely.) */
/*
@media (min-width: 960px) {
    table.spiritvale-skill-infobox,
    table.spiritvale-passive-infobox {
        float: right;
        margin: 0 0 1.5em 1.5em;
    }
}
}
*/


/* Top "hero" row: icon+name on left, description on right */
/* Hero band background (supports old main row + new split rows) */
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,
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th,
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th,
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td,
    background: linear-gradient(135deg, #7a6fb0, #372b54);
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th,
    color: #fff;
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td {
    padding: 0.9em 1.1em;
  background: linear-gradient(135deg, #7a6fb0, #372b54);
    text-align: center;
  color: #fff;
    vertical-align: middle;
  padding: 0.9em 1.1em;
}
  text-align: center;
 
  vertical-align: middle;
/* Make the icon sit nicely next to the title */
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;
}
}


/* Body rows (labels + values) */
/* Row separators (direct children only) */
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.4);
  border-bottom: 1px solid rgba(148, 163, 184, 0.4);
}
}
 
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;
}
}


/* Default label cells */
/* Label/value cells (direct children only) */
table.spiritvale-skill-infobox tbody tr th:not(.spiritvale-infobox-section-header),
table.spiritvale-skill-infobox > tbody > tr:not(.spiritvale-infobox-main) > th:not(.spiritvale-infobox-section-header),
table.spiritvale-passive-infobox tbody tr th:not(.spiritvale-infobox-section-header) {
table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > th:not(.spiritvale-infobox-section-header) {
    width: 26%;
  width: 26%;
    padding: 0.45em 0.85em;
  padding: 0.45em 0.85em;
    text-align: left;
  text-align: left;
    font-weight: 600;
  font-weight: 600;
    white-space: nowrap;
  white-space: nowrap;
}
}


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


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


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


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


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


/* Right side: big italic description */
.spiritvale-infobox-main-right-inner {
.spiritvale-infobox-main-right-inner {
    display: flex;
  display: flex;
    align-items: center;
  align-items: center;
    justify-content: center;
  justify-content: center;
}
}


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


/* ============================================================
/* ============================================================
   SpiritVale: Passives (single source of truth)
   Skills: split hero rows (tuned)
  - Fixed, consistent desktop width
  - Centered body cells
  - Mobile-safe hero row (stacks)
   ========================================================== */
   ========================================================== */


:root {
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row {
    /* One knob: desktop tooltip width for ALL passives */
  border-bottom: none !important;
    --sv-passive-width: 360px;
}
}


/* Fixed tooltip footprint on desktop, still safe if container is narrower */
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th {
table.spiritvale-passive-infobox {
  padding-bottom: 0.55em;
    width: var(--sv-passive-width);
}
    max-width: 100%;
    margin: 1em auto;


    /* Reset any earlier experiments */
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td {
    display: table;
  padding-top: 0.55em;
    table-layout: fixed;
  padding-bottom: 0.55em;
}
}


/* Center + wrap all NON-hero rows (hero row stays as your “perfect” styling) */
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;
  Passives
    word-break: break-word;
  ========================================================== */
 
table.spiritvale-passive-infobox {
  width: var(--sv-passive-width);
  max-width: var(--sv-passive-width);
  margin: 1em auto;
  table-layout: fixed;
}
}


/* Allow labels to wrap too (generic CSS makes labels nowrap) */
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th {
table.spiritvale-passive-infobox tbody tr:not(.spiritvale-infobox-main)
  width: 42%;
th:not(.spiritvale-infobox-section-header) {
  white-space: normal;
    white-space: normal;
}
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
  width: 58%;
}
}


/* Center section headers for passives */
table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > th,
table.spiritvale-passive-infobox .spiritvale-infobox-section-header {
table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > td {
    text-align: center;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
}


/* Prevent description width rules from pushing layout weirdly */
table.spiritvale-passive-infobox .spiritvale-infobox-section-header {
table.spiritvale-passive-infobox .spiritvale-infobox-description {
  text-align: center;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
}


/* Make auto-lists stack nicely */
.spiritvale-passive-list {
.spiritvale-passive-list {
    display: flex;
  display: flex;
    flex-direction: column;
  flex-direction: column;
    align-items: center;
  align-items: center;
    gap: 1.25em;
  gap: 1.25em;
}
}


/* Remove “mystery wrapper outline” around some passives in lists */
.spiritvale-passive-list .mw-table-wrapper,
.spiritvale-passive-list .mw-table-wrapper,
.spiritvale-passive-list .table-overflow,
.spiritvale-passive-list .table-overflow,
.spiritvale-passive-list .table-scroll,
.spiritvale-passive-list .table-scroll,
.spiritvale-passive-list .citizen-table {
.spiritvale-passive-list .citizen-table {
    border: none !important;
  border: none !important;
    box-shadow: none !important;
  box-shadow: none !important;
    background: transparent !important;
  background: transparent !important;
    padding: 0 !important;
  padding: 0 !important;
    margin: 0 !important;
  margin: 0 !important;
}
 
/* Mobile/portrait: keep passive hero row side-by-side */
@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;
  }
}
}


/* Mobile: go full width AND stack the hero row so nothing goes off-screen */
@media (max-width: 480px) {
    table.spiritvale-passive-infobox {
        width: 100%;
        max-width: 100%;
    }


    /* Stack icon+name over description */
/* ============================================================
    table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th,
  Skills
     table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
  ========================================================== */
        display: block;
 
        width: 100%;
table.spiritvale-skill-infobox {
        box-sizing: border-box;
  width: 100%;
        text-align: center;
  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;
}
 
.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 (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);
  }


    /* Slightly smaller icon on phones */
  table.spiritvale-skill-infobox .sv-type-grid {
    table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th .image img {
    grid-template-columns: 1fr;
        width: 64px !important;
  }
        height: auto !important;
    }


    /* Ensure title wraps cleanly */
  /* simplify borders for 1-col */
    table.spiritvale-passive-infobox .spiritvale-infobox-title {
  table.spiritvale-skill-infobox .sv-type-chunk {
        white-space: normal;
    border-left: none;
        overflow-wrap: anywhere;
  }
        word-break: break-word;
  table.spiritvale-skill-infobox .sv-type-chunk:first-child {
    }
    border-top: none;
  }
}
}
Retrieved from "https://spiritvale.info/wiki/MediaWiki:Common.css"