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
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) */
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 156: Line 165:
}
}


/* 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 175:
}
}


/* 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 200:
}
}


/* Hero content helpers */
/* Hero helper classes */
.spiritvale-infobox-main-left-inner {
.spiritvale-infobox-main-left-inner {
   display: flex;
   display: flex;
Line 216: Line 224:
   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 (tuned)
   Skills: split hero rows (tuned)
  - Even vertical padding on description row
   ========================================================== */
   ========================================================== */


Line 228: Line 237:
   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 {
  /* was: padding-bottom: 0.5em; */
   padding-bottom: 0.55em;
   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 {
  /* was: padding-top: 0.1em; padding-bottom: 0.9em; */
   padding-top: 0.55em;
   padding-top: 0.55em;
   padding-bottom: 0.55em;
   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;
}
/* ============================================================
  Top band padding tightening (Level Select + Type grid)
  ========================================================== */
table.spiritvale-skill-infobox .sv-level-ui {
  /* was: padding: 0.75em 0.9em; gap: 0.4em; */
  padding: 0.6em 0.75em;
  gap: 0.3em;
}
table.spiritvale-skill-infobox .sv-level-title {
  /* was: font-size: 0.85em; */
  font-size: 0.8em;
}
table.spiritvale-skill-infobox .sv-level-slider input[type="range"] {
  width: 100%;
  box-sizing: border-box;
  margin: 0; /* helps remove “mystery” extra space in some skins */
}
}


/* ============================================================
  Type grid (tuned)
  - Less padding in chunks
  - Smaller, less dominant title bars
  ========================================================== */
table.spiritvale-skill-infobox .sv-type-grid {
  /* was: padding: 0.75em 0.9em; */
  padding: 0.6em 0.75em;
}
table.spiritvale-skill-infobox .sv-type-chunk {
  /* was: padding: 0.45em 0.55em; */
  padding: 0.35em 0.45em;
}
table.spiritvale-skill-infobox .sv-type-label {
  /* was: padding: 0.25em 0.4em; font-size: 0.8em; */
  padding: 0.18em 0.35em;
  font-size: 0.72em;
  letter-spacing: 0.03em;
  line-height: 1.15;
}
table.spiritvale-skill-infobox .sv-type-value {
  /* was: margin-top: 0.25em; */
  margin-top: 0.2em;
}


/* ============================================================
/* ============================================================
Line 346: Line 297:
   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;
  }
}


/* ============================================================
/* ============================================================
Line 431: Line 409:
}
}


/* 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 445: Line 423:
   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 456: Line 434:
   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 465: Line 445:
   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 480: Line 460:


   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 486: Line 466:
}
}


/* 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 495: Line 476:
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 511: Line 493:


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 536: Line 518:
   }
   }


  /* 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"