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
No edit summary
Line 107: Line 107:
/* ------------------------------------------------------------
/* ------------------------------------------------------------
   Hero Infobox System (Skills + Passives)
   Hero Infobox System (Skills + Passives)
   --------------------------------------------------------- */
   ------------------------------------------------------------ */


:root {
:root {
Line 280: Line 280:
   justify-content: center;
   justify-content: center;
   text-align: center;
   text-align: center;
}
/* Ensure hero-bar bodies can stretch to full slot width when needed */
table.spiritvale-skill-infobox .hero-bar-module .hero-bar-module-body {
  width: 100%;
}
}


Line 343: Line 348:
}
}


/* Shared pill look (all modules) */
/* ------------------------------------------------------------
  Shared pill look (ALL modules)
  Desktop pills now shrink-to-fit (no forced width:100%).
  ------------------------------------------------------------ */
table.spiritvale-skill-infobox :where(.sv-type-label, .sv-source-pill, .sv-m4-label, .sv-sm-label, .sv-sm-flag) {
table.spiritvale-skill-infobox :where(.sv-type-label, .sv-source-pill, .sv-m4-label, .sv-sm-label, .sv-sm-flag) {
   width: 100%;
   display: inline-block;
  width: auto;
  max-width: 100%;
 
   padding: 0.18em 0.35em;
   padding: 0.18em 0.35em;
   border-radius: 6px;
   border-radius: 6px;
Line 356: Line 367:


   background: linear-gradient(180deg, var(--sv-pill-a), var(--sv-pill-b));
   background: linear-gradient(180deg, var(--sv-pill-a), var(--sv-pill-b));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
}


Line 381: Line 396:
}
}


/* Skill type */
/* ============================================================
table.spiritvale-skill-infobox .hero-module.module-skill-type .hero-module-body {
  Skill Type (Hero Bar Slot 2)
  width: 100%;
  Desktop: 4 columns, 2 rows (row-major fill)
  height: 100%;
    Damage, Element, Hits, Target / Cast, Combo
}
  Mobile: single row, 6 columns, reordered:
    Damage, Element, Target, Cast, Hits, Combo
  ============================================================ */


table.spiritvale-skill-infobox .module-skill-type .sv-type-grid {
table.spiritvale-skill-infobox .module-skill-type .sv-type-grid {
Line 393: Line 410:


   display: grid;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 0.5em;
   gap: 0.45em;
   padding: 0.4em;
   padding: 0.35em;
 
  align-items: start;
}
}


table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk {
table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk {
  min-width: 0;
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
Line 405: Line 426:
   text-align: center;
   text-align: center;


   padding: 0.25em 0.45em;
   padding: 0.20em 0.35em;
   gap: 0.6em;
   gap: 0.45em;
}
}


table.spiritvale-skill-infobox .module-skill-type .sv-type-value {
table.spiritvale-skill-infobox .module-skill-type .sv-type-value {
  width: 100%;
  text-align: center;
   font-weight: 400;
   font-weight: 400;
   font-size: 1.02em;
   font-size: 1.02em;
Line 526: Line 550:


/* ============================================================
/* ============================================================
   Special Mechanics (FINAL)
   Special Mechanics
  - This module now only shows:
    1) Flags
    2) Special Effects
  - Excludes: Hybrid, Self-centered, Bond, Hits, Combo
   - Desktop:
   - Desktop:
     * 1 group => centered
     * 1 group => centered
     * 2 groups => 2 columns (separate)
     * 2 groups => 2 columns (flags | effects)
    * 3 groups => 3 columns (flags | mechanics | combo)
  - Pills shrink on desktop
   - Everything centered
   - Everything centered
   ============================================================ */
   ============================================================ */
Line 556: Line 582:
   display: grid;
   display: grid;
   gap: 0.55em;
   gap: 0.55em;
   align-items: start;     /* top-align all columns */
   align-items: start;
   justify-items: center;   /* center each column */
   justify-items: center;
}
}


Line 566: Line 592:
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 {
   grid-template-columns: 1fr 1fr;
   grid-template-columns: 1fr 1fr;
}
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
}


Line 579: Line 601:
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
   align-items: center;     /* center content in each column */
   align-items: center;
   justify-content: flex-start;
   justify-content: flex-start;
   text-align: center;
   text-align: center;
Line 611: Line 633:
   overflow-wrap: anywhere;
   overflow-wrap: anywhere;
   word-break: break-word;
   word-break: break-word;
}
/* Desktop pill shrink for Special Mechanics (overrides shared pill width:100%) */
table.spiritvale-skill-infobox .module-special-mechanics :where(.sv-sm-label, .sv-sm-flag) {
  width: auto !important;
  display: inline-block !important;
  max-width: 100%;
  white-space: nowrap;
}
}


Line 633: Line 647:
   }
   }


   /* Pills shrink by width (not font size) */
   /* Skill Type mobile: single row, 6 columns, reordered */
  table.spiritvale-skill-infobox :where(.sv-type-label, .sv-source-pill, .sv-m4-label, .sv-sm-label, .sv-sm-flag) {
   table.spiritvale-skill-infobox .module-skill-type .sv-type-grid {
    width: auto !important;
     grid-template-columns: repeat(6, minmax(0, 1fr));
    display: inline-block !important;
    max-width: 100%;
    white-space: nowrap;
    padding: 0.22em 0.45em;
  }
 
  /* Hero Bar Slot 2: spread/flatten compactable module grids */
   table.spiritvale-skill-infobox .hero-bar-module-2.sv-herobar-compact .module-skill-type .sv-type-grid {
     grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr));
     gap: 0.35em;
     gap: 0.35em;
     padding: 0.25em;
     padding: 0.25em;
   }
   }


   table.spiritvale-skill-infobox .hero-bar-module-2.sv-herobar-compact .module-quick-stats .sv-m4-grid {
  /* Mobile order: Damage, Element, Target, Cast, Hits, Combo */
    grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr));
   table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk--damage { order: 1; }
    gap: 0.35em;
  table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk--element { order: 2; }
    padding: 0.25em;
  table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk--target { order: 3; }
  }
  table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk--cast { order: 4; }
  table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk--hits { order: 5; }
  table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk--combo { order: 6; }


   /* SourceType: mod over source, beside scaling */
   /* SourceType: mod over source, beside scaling */
Line 681: Line 688:
   }
   }


   /* QuickStats becomes 2 cols in tiles (still) */
   /* QuickStats becomes 2 cols on mobile */
   table.spiritvale-skill-infobox .module-quick-stats .sv-m4-grid {
   table.spiritvale-skill-infobox .module-quick-stats .sv-m4-grid {
     grid-template-columns: 1fr 1fr;
     grid-template-columns: 1fr 1fr;
Line 688: Line 695:
   }
   }


   /* Special Mechanics mobile rules:
   /* Special Mechanics: stack groups on mobile */
    - If 1 or 2 groups: single centered column (stacked)
    - If all 3: two columns (flags | mechanics+combo), combo below mechanics
  */
   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 {
     grid-template-columns: 1fr;
     grid-template-columns: 1fr;
   }
   }
  table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-3 {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "flags mech"
      "flags combo";
    align-items: start;
    justify-items: center;
  }
  table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-3 .sv-sm-col-flags { grid-area: flags; }
  table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-3 .sv-sm-col-mech  { grid-area: mech;  }
  table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-3 .sv-sm-col-combo { grid-area: combo; }
}
}


Retrieved from "https://spiritvale.info/wiki/MediaWiki:Common.css"