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
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* ============================================================
/* ============================================================
   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 19: Line 21:
}
}


.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 28: Line 34:
}
}


.header-container-middle {
.header-container-middle,
.header.container.middle {
   background: #f0f2f8;
   background: #f0f2f8;
   color: white;
   color: white;
Line 38: Line 45:
}
}


.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 49: Line 57:
}
}


/* Generic custom table */
table.custom-table {
table.custom-table {
   float: none;
   float: none;
Line 96: 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 103: Line 112:
   transform: translateY(-2px);
   transform: translateY(-2px);
}
}


/* ============================================================
/* ============================================================
Line 108: Line 118:
   ========================================================== */
   ========================================================== */


/* Global size knobs */
:root {
:root {
   --sv-passive-width: 540px;
   --sv-passive-width: 540px;
Line 132: 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 138: 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;
Line 156: 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 166: 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 192: Line 202:
}
}


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


/* ============================================================
/* ============================================================
Line 248: 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 265: Line 283:
}
}


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


/* Passive list layout */
.spiritvale-passive-list {
.spiritvale-passive-list {
   display: flex;
   display: flex;
Line 276: 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 286: Line 307:
   margin: 0 !important;
   margin: 0 !important;
}
}


/* ============================================================
/* ============================================================
Line 314: 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 325: 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 335: 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 (nested-table) */
 
/* ============================================================
  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 371: 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 385: 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 396: Line 425:
   width: 100%;
   width: 100%;
   box-sizing: border-box;
   box-sizing: border-box;
  margin: 0;
}
}


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


Line 405: Line 436:
   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;
   box-sizing: border-box;


Line 420: Line 451:


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


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


/* grid borders */
table.spiritvale-skill-infobox .sv-type-chunk:nth-child(-n + 2) {
table.spiritvale-skill-infobox .sv-type-chunk:nth-child(-n + 2) {
   border-top: none;
   border-top: none;
Line 435: Line 467:
table.spiritvale-skill-infobox .sv-type-label {
table.spiritvale-skill-infobox .sv-type-label {
   width: 100%;
   width: 100%;
   padding: 0.25em 0.4em;
   padding: 0.18em 0.35em;
   border-radius: 6px;
   border-radius: 6px;


   font-weight: 800;
   font-weight: 800;
   text-transform: uppercase;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   letter-spacing: 0.03em;
   font-size: 0.8em;
   font-size: 0.72em;
  line-height: 1.15;


   background: linear-gradient(
   background: linear-gradient(
Line 451: Line 484:


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


  /* simplify borders for 1-col */
   table.spiritvale-skill-infobox .sv-type-chunk {
   table.spiritvale-skill-infobox .sv-type-chunk {
     border-left: none;
     border-left: none;
   }
   }
   table.spiritvale-skill-infobox .sv-type-chunk:nth-child(1) {
   table.spiritvale-skill-infobox .sv-type-chunk:first-child {
     border-top: none;
     border-top: none;
   }
   }
  table.spiritvale-skill-infobox .sv-type-chunk:nth-child(-n + 2) {
    border-top: 1px solid rgba(148, 163, 184, 0.18);
  }
}
/* ============================================================
  PageHeader / callout compatibility
  - Supports BOTH:
    1) class="header-container-outer"
    2) class="header container outer"
  ========================================================== */
/* 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 */
.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"