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 editNewer edit →
No edit summary
No edit summary
(10 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* 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
   Global custom additions
   ========================================================== */
   ========================================================== */


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


.header-container-outer {
/* Header container band (supports:
  1) class="header-container-outer"
  2) class="header container outer"  */
.header-container-outer,
.header.container.outer {
   max-width: 100%;
   max-width: 100%;
   margin: 1px;
   margin: 1px;
Line 56: Line 34:
}
}


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


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


/* Generic custom table */
table.custom-table {
table.custom-table {
   float: none;
   float: none;
Line 100: Line 81:
   border-top-left-radius: 8px;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   border-top-right-radius: 8px;
   word-wrap: break-word;
   overflow-wrap: anywhere;
   overflow-wrap: break-word;
   word-break: break-word;
}
}


Line 124: Line 105:
}
}


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


/* ============================================================
/* ============================================================
Line 136: Line 118:
   ========================================================== */
   ========================================================== */


/* Global size knobs */
:root {
:root {
   --sv-passive-width: 540px;
   --sv-passive-width: 540px;
Line 160: Line 141:
}
}


/* Hero band background (supports both old + split hero rows) */
/* 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 > th,
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > td,
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > td,
Line 166: Line 147:
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td,
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-title-row > th,
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td {
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);
   background: linear-gradient(135deg, #7a6fb0, #372b54);
   color: #fff;
   color: #fff;
   padding: 0.9em 1.1em;
   padding: 0.9em 1.1em;
   text-align: center;
   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;
   vertical-align: middle;
}
}
Line 191: Line 167:
}
}


/* Label cells (direct children only) */
/* Label/value cells (direct children only) */
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),
table.spiritvale-passive-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) {
Line 201: Line 177:
}
}


/* 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 {
Line 227: Line 202:
}
}


/* Hero content helpers */
/* Hero helper classes */
.spiritvale-infobox-main-left-inner {
.spiritvale-infobox-main-left-inner {
   display: flex;
   display: flex;
Line 251: Line 226:
   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;
}
}


/* Skills hero split rows */
 
/* ============================================================
  Skills: split hero rows (tuned)
  ========================================================== */
 
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row {
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row {
   border-bottom: none !important;
   border-bottom: none !important;
}
}
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th {
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th {
   padding-bottom: 0.5em;
   padding-bottom: 0.55em;
}
}
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td {
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td {
   padding-top: 0.1em;
   padding-top: 0.55em;
   padding-bottom: 0.9em;
   padding-bottom: 0.55em;
}
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row .spiritvale-infobox-description {
  font-size: 1.0em;
  opacity: 0.95;
  max-width: 42em;
}
}


/* Passives */
 
/* ============================================================
  Passives
  ========================================================== */
 
table.spiritvale-passive-infobox {
table.spiritvale-passive-infobox {
   width: var(--sv-passive-width);
   width: var(--sv-passive-width);
Line 280: Line 261:
}
}


table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th {
/* Passive split hero rows (match Skills) */
   width: 42%;
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row {
  white-space: normal;
  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.spiritvale-infobox-main > td {
table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td {
   width: 58%;
   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) > th,
table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > td {
table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > td {
Line 297: Line 283:
}
}


table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main)
/* Passive section headers centered */
  > th:not(.spiritvale-infobox-section-header) {
  white-space: normal;
}
 
table.spiritvale-passive-infobox .spiritvale-infobox-section-header {
table.spiritvale-passive-infobox .spiritvale-infobox-section-header {
   text-align: center;
   text-align: center;
}
}


table.spiritvale-passive-infobox .spiritvale-infobox-description {
/* Passive list layout */
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
 
.spiritvale-passive-list {
.spiritvale-passive-list {
   display: flex;
   display: flex;
Line 319: Line 296:
}
}


/* Remove Citizen wrapper borders/spacing around passive tables in lists */
.spiritvale-passive-list .mw-table-wrapper,
.spiritvale-passive-list .mw-table-wrapper,
.spiritvale-passive-list .table-overflow,
.spiritvale-passive-list .table-overflow,
Line 330: Line 308:
}
}


@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;
  Skills
  }
  ========================================================== */
 
  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 {
table.spiritvale-skill-infobox {
   width: 100%;
   width: 100%;
Line 382: Line 320:
}
}


/* List wrapper */
.sv-skill-collection {
.sv-skill-collection {
   width: 100%;
   width: 100%;
Line 397: Line 336:
}
}


/* Neutralize Citizen wrappers inside the skill collection */
.sv-skill-collection .mw-table-wrapper,
.sv-skill-collection .mw-table-wrapper,
.sv-skill-collection .table-overflow,
.sv-skill-collection .table-overflow,
Line 408: Line 348:
}
}


/* In list mode, each skill becomes a “row” inside the wrapper */
.sv-skill-collection table.spiritvale-skill-infobox {
.sv-skill-collection table.spiritvale-skill-infobox {
   width: 100%;
   width: 100%;
Line 418: Line 359:
}
}


/* Divider between skills */
.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);
}
}


/* Top band */
 
/* ============================================================
  Skills top band (nested-table)
  ========================================================== */
 
table.spiritvale-skill-infobox .sv-topband-cell {
table.spiritvale-skill-infobox .sv-topband-cell {
   padding: 0 !important;
   padding: 0 !important;
Line 454: Line 400:
}
}


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


Line 468: Line 414:
   text-transform: uppercase;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   letter-spacing: 0.05em;
   font-size: 0.85em;
   font-size: 0.8em;
   opacity: 0.95;
   opacity: 0.95;
}
}
Line 479: Line 425:
   width: 100%;
   width: 100%;
   box-sizing: border-box;
   box-sizing: border-box;
  margin: 0;
}
}


/* Type table (Option A integrated) */
 
table.spiritvale-skill-infobox .sv-type-table {
/* ============================================================
  Type grid: 4 chunks (2x2), label + value (tightened)
  ========================================================== */
 
table.spiritvale-skill-infobox .sv-type-grid {
   width: 100% !important;
   width: 100% !important;
   margin: 0 !important;
   margin: 0 !important;
   padding: 0.75em 0.9em;
   padding: 0.6em 0.75em;
  box-sizing: border-box;


   border: 0 !important;
   display: grid;
   border-collapse: collapse !important;
  grid-template-columns: 1fr 1fr;
   background: transparent !important;
  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;


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


table.spiritvale-skill-infobox .sv-type-table th,
/* grid borders */
table.spiritvale-skill-infobox .sv-type-table td {
table.spiritvale-skill-infobox .sv-type-chunk:nth-child(-n + 2) {
  background: transparent !important;
  border-top: none;
  padding: 0.2em 0;
}
  vertical-align: top;
table.spiritvale-skill-infobox .sv-type-chunk:nth-child(odd) {
   line-height: 1.25;
   border-left: none;
}
}


table.spiritvale-skill-infobox .sv-type-table th {
table.spiritvale-skill-infobox .sv-type-label {
   width: 6.75em;
   width: 100%;
   font-weight: 700;
  padding: 0.18em 0.35em;
   white-space: nowrap;
  border-radius: 6px;
   padding-right: 0.6em;
 
   text-align: right;
   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-table th::after {
table.spiritvale-skill-infobox .sv-type-value {
   content: ":";
   margin-top: 0.2em;
   opacity: 0.7;
   font-weight: 600;
   margin-left: 0.25em;
   line-height: 1.25;
}


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


/* Mobile: stack Level + Type, and Type grid becomes 1 column */
@media (max-width: 560px) {
@media (max-width: 560px) {
   table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td {
   table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td {
Line 533: Line 504:
     border-bottom: 1px solid rgba(148, 163, 184, 0.25);
     border-bottom: 1px solid rgba(148, 163, 184, 0.25);
   }
   }
}


/* ============================================================
  table.spiritvale-skill-infobox .sv-type-grid {
  Top bar / callout compatibility (supports hyphenated OR split classes)
    grid-template-columns: 1fr;
  ========================================================== */
  }


/* Playtest info box */
  /* simplify borders for 1-col */
.playtest-info-box,
   table.spiritvale-skill-infobox .sv-type-chunk {
.playtest.info.box {
    border-left: none;
  max-width: 100%;
  }
  margin: 0 0 10px 0;
  table.spiritvale-skill-infobox .sv-type-chunk:first-child {
  border: 1px solid #ccc;
    border-top: none;
   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/MediaWiki:Common.css"