Toggle search
Toggle menu
115
248
25
2.7K
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
Tags: Mobile edit Mobile web edit
No edit summary
Tags: Mobile edit Mobile web edit
Line 1: Line 1:
/* ============================================================
/* ============================================================
   SpiritVale Wiki – Site CSS
   SpiritVale Wiki – Site CSS
  ============================================================ */
/* ============================================================
  LEGACY (KEEP FOR SAFETY)
  - This section is preserved as-is to avoid breaking pages.
  - New unified theme overrides are appended at the bottom.
   ============================================================ */
   ============================================================ */


Line 244: Line 250:
}
}


@media (min-width: 1024px) {
/* Desktop (850+) */
@media (min-width: 850px) {
     :root {
     :root {
         --sv-skill-width: 75%;
         --sv-skill-width: 75%;
Line 540: Line 547:
/* ============================================================
/* ============================================================
   Skill Type (Hero Bar Slot 2)
   Skill Type (Hero Bar Slot 2)
  - Desktop: 2 rows x 3 columns (3-col grid)
  - Mobile:  2 rows x 3 columns (same grid), but reorder:
      Damage, Element, Target, Cast, Hits, Combo
   ============================================================ */
   ============================================================ */


Line 702: Line 706:
/* ============================================================
/* ============================================================
   Special Mechanics (Flags + Mechanics)
   Special Mechanics (Flags + Mechanics)
  - Desktop:
    * 1 group => centered
    * 2 groups => flags (narrow) + mechanics (wide)
  - Mechanics spread out on the right + centered
   ============================================================ */
   ============================================================ */


Line 779: Line 779:
}
}


/* Desktop behavior: mechanics spread out across the right column */
/* Desktop behavior: mechanics spread out across the right column (850+) */
@media (min-width: 720px) {
@media (min-width: 850px) {


     table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2 {
     table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2 {
Line 801: Line 801:
}
}


/* Mobile */
/* Mobile (<=500) */
@media (max-width: 560px) {
@media (max-width: 500px) {


     :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot-grid {
     :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot-grid {
Line 987: Line 987:
}
}


@media (max-width: 560px) {
@media (max-width: 500px) {
     table.spiritvale-passive-infobox .sv-slot-grid {
     table.spiritvale-passive-infobox .sv-slot-grid {
         grid-template-columns: 1fr;
         grid-template-columns: 1fr;
Line 1,054: Line 1,054:
.mw-theme-light table.spiritvale-passive-infobox > tbody > tr {
.mw-theme-light table.spiritvale-passive-infobox > tbody > tr {
     border-bottom: 1px solid rgba(55, 43, 84, 0.18);
     border-bottom: 1px solid rgba(55, 43, 84, 0.18);
}
/* ============================================================
  NEW UNIFIED THEME (BLUE SYSTEM)
  - This section is the forward-looking replacement layer.
  - It is appended last so it overrides legacy safely.
  - Legacy remains above as a fallback during migration.
  ============================================================ */
/* ------------------------------------------------------------
  Tokens (Blue System v0)
  - Conservative padding, rounded corners, readable links.
  ------------------------------------------------------------ */
:root {
  /* Core blues */
  --sv-ui-bg0:  #071225; /* page backdrop */
  --sv-ui-bg1:  #0b1a33; /* main surface */
  --sv-ui-bg2:  #10264b; /* raised tile */
  --sv-ui-bg3:  #14315f; /* stronger tile/pill */
  /* Borders */
  --sv-ui-line1: #22385f;
  --sv-ui-line2: #2a4572;
  /* Text */
  --sv-ui-text1: #eaf2ff;
  --sv-ui-text2: #c9d8f2;
  --sv-ui-text3: #9fb3d8;
  /* Accent / links (blue-only) */
  --sv-ui-accent:  #2f86ff;
  --sv-ui-accent2: #5aa6ff;
  /* Radii */
  --sv-ui-rad-sm: 10px;
  --sv-ui-rad-md: 14px;
  --sv-ui-rad-lg: 18px;
  --sv-ui-rad-pill: 999px;
  /* Shadows */
  --sv-ui-shadow1: 0 10px 28px rgba(0,0,0,0.40);
  /* Legacy var remap (Hero Infobox System)
    - Keeps old selectors working while shifting colors to blue. */
  --sv-base: var(--sv-ui-bg0);
  --sv-surface: var(--sv-ui-bg2);
  --sv-card-border: var(--sv-ui-line1);
  --sv-row-border: var(--sv-ui-line1);
  --sv-gridline: var(--sv-ui-line2);
  --sv-pill: var(--sv-ui-bg3);
  --sv-pill-a: var(--sv-ui-bg3);
  --sv-pill-b: var(--sv-ui-bg3);
  --sv-text-soft: var(--sv-ui-text1);
}
/* Light theme support (keep readable if mw-theme-light is enabled) */
.mw-theme-light {
  --sv-ui-bg0:  #eef4ff;
  --sv-ui-bg1:  #f6f9ff;
  --sv-ui-bg2:  #ffffff;
  --sv-ui-bg3:  #dbe8ff;
  --sv-ui-line1: #b8c9e8;
  --sv-ui-line2: #9fb6df;
  --sv-ui-text1: #0c1830;
  --sv-ui-text2: #203657;
  --sv-ui-text3: #456083;
  --sv-ui-accent:  #0b63f0;
  --sv-ui-accent2: #2b7bff;
  --sv-base: var(--sv-ui-bg2);
  --sv-surface: var(--sv-ui-bg3);
  --sv-card-border: var(--sv-ui-line1);
  --sv-row-border: var(--sv-ui-line1);
  --sv-gridline: var(--sv-ui-line2);
  --sv-pill: var(--sv-ui-bg3);
  --sv-pill-a: var(--sv-ui-bg3);
  --sv-pill-b: var(--sv-ui-bg3);
  --sv-text-soft: var(--sv-ui-text1);
}
/* ------------------------------------------------------------
  Sitewide link visibility (blue-only, more obvious)
  ------------------------------------------------------------ */
.mw-parser-output a {
  color: var(--sv-ui-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.mw-parser-output a:visited {
  color: var(--sv-ui-accent2);
}
.mw-parser-output a:hover {
  text-decoration-thickness: 3px;
}
.mw-parser-output a:focus-visible {
  outline: 2px solid var(--sv-ui-accent2);
  outline-offset: 2px;
  border-radius: 6px;
}
/* ------------------------------------------------------------
  Shared primitives (opt-in for new modules)
  ------------------------------------------------------------ */
.mw-parser-output .sv-card {
  background: var(--sv-ui-bg1);
  border: 1px solid var(--sv-ui-line1);
  border-radius: var(--sv-ui-rad-md);
  box-shadow: var(--sv-ui-shadow1);
}
.mw-parser-output .sv-tile {
  background: var(--sv-ui-bg2);
  border: 1px solid var(--sv-ui-line2);
  border-radius: var(--sv-ui-rad-sm);
}
.mw-parser-output .sv-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.18em 0.40em; /* conservative */
  border-radius: var(--sv-ui-rad-sm);
  background: var(--sv-ui-bg3);
  border: 1px solid var(--sv-ui-line2);
  color: var(--sv-ui-text1);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.72em;
  line-height: 1.15;
  white-space: nowrap;
}
.mw-parser-output .sv-focus-ring:focus-visible {
  outline: 2px solid var(--sv-ui-accent2);
  outline-offset: 2px;
  border-radius: 8px;
}
/* ------------------------------------------------------------
  Legacy component “replacement” overrides (safe cascade)
  - These keep the same selectors but change look to blue theme.
  ------------------------------------------------------------ */
/* Playtest box: shift to blue surfaces */
.mw-parser-output .playtest-info-box {
  border: 1px solid var(--sv-ui-line1);
  border-radius: var(--sv-ui-rad-md);
  background: var(--sv-ui-bg1);
  color: var(--sv-ui-text1);
}
/* Header containers: remove purple, use blue gradients */
.mw-parser-output .header-container-outer {
  border: 2px solid var(--sv-ui-line2);
  border-radius: var(--sv-ui-rad-lg);
  background: var(--sv-ui-bg1);
}
.mw-parser-output .header-container-middle {
  background: var(--sv-ui-bg1);
}
.mw-parser-output .header-container-inner {
  border-radius: calc(var(--sv-ui-rad-lg) - 4px);
  background: linear-gradient(180deg, var(--sv-ui-bg3), var(--sv-ui-bg2));
  color: var(--sv-ui-text1);
}
/* Custom tables: remove purple, unify borders + header */
.mw-parser-output table.custom-table {
  border: 2px solid var(--sv-ui-line2);
  border-radius: var(--sv-ui-rad-lg);
  background: var(--sv-ui-bg1);
}
.mw-parser-output table.custom-table > tbody > tr:nth-child(1) > th,
.mw-parser-output table.custom-table > tbody > tr.middle-header > th {
  background: linear-gradient(180deg, var(--sv-ui-bg3), var(--sv-ui-bg2));
  color: var(--sv-ui-text1);
}
.mw-parser-output table.custom-table > tbody > tr:nth-child(2) > th,
.mw-parser-output table.custom-table > tbody > tr > td {
  border-bottom: 1px solid var(--sv-ui-line1);
}
/* Hero infobox: slightly rounder, tighter “game UI” feel */
table.spiritvale-skill-infobox,
table.spiritvale-passive-infobox {
  border-radius: var(--sv-ui-rad-lg);
  border: 1px solid var(--sv-card-border);
  box-shadow: var(--sv-ui-shadow1);
  background: var(--sv-base);
  color: var(--sv-ui-text1);
}
/* Alternating rows: avoid alpha-heavy look; keep subtle */
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: var(--sv-ui-bg1);
}
/* Slots: unify border/radius to new tokens */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot {
  border-radius: var(--sv-ui-rad-md);
  border: 1px solid var(--sv-gridline);
}
/* Pills inside legacy infobox: map to shared feel */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
:where(.sv-type-label, .sv-source-pill, .sv-m4-label, .sv-sm-label, .sv-sm-flag, .sv-pill, .sv-pill--req) {
  border-radius: var(--sv-ui-rad-sm);
  background: var(--sv-ui-bg3);
  border: 1px solid var(--sv-ui-line2);
  color: var(--sv-ui-text1);
}
/* Tooltip shell: keep desktop readable; mobile override below removes transparency */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop {
  border-radius: var(--sv-ui-rad-md);
  border: 1px solid var(--sv-ui-line2);
}
/* Notes button: shift to blue */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
.module-icon-name .sv-tip-btn--notes {
  border-radius: var(--sv-ui-rad-pill);
  border: 1px solid var(--sv-ui-line2);
  background: rgba(255,255,255,0.08); /* desktop only; mobile gets solid */
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
.module-icon-name .sv-ico--info {
  background: var(--sv-ui-accent2);
  color: #081018;
}
/* ------------------------------------------------------------
  Mobile rule (in Common for now; can be moved to Mobile.css later)
  - Enforce “no transparency” for the legacy infobox UI elements.
  ------------------------------------------------------------ */
@media (max-width: 500px) {
  :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop {
    background: #14181e; /* solid */
    border: 1px solid #30394b;
  }
  :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
  .module-icon-name .sv-tip-btn--notes {
    background: #27324a; /* solid */
    border: 1px solid #3a4b6b;
  }
  :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
  .module-icon-name .sv-tip-btn--notes:hover {
    background: #2f3a54; /* solid */
  }
  /* If you decide text shadow looks too heavy on mobile, uncomment:
  :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot,
  :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot * {
    text-shadow: none !important;
  }
  */
}
}
Retrieved from "https://spiritvale.info/wiki/MediaWiki:Common.css"