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 105: Line 105:
}
}


/* ------------------------------------------------------------
//* ------------------------------------------------------------
   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 348: Line 343:
}
}


/* ------------------------------------------------------------
/* Shared pill look (all modules)
  Shared pill look (ALL modules)
   - Desktop pills shrink (width:auto)
   Desktop pills now shrink-to-fit (no forced width:100%).
   - Mobile keeps its own padding overrides below */
   ------------------------------------------------------------ */
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: auto;
   display: inline-block;
   display: inline-block;
  width: auto;
   max-width: 100%;
   max-width: 100%;
  white-space: nowrap;


   padding: 0.18em 0.35em;
   padding: 0.18em 0.35em;
Line 367: Line 362:


   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 398: Line 389:
/* ============================================================
/* ============================================================
   Skill Type (Hero Bar Slot 2)
   Skill Type (Hero Bar Slot 2)
   Desktop: 4 columns, 2 rows (row-major fill)
   - Desktop: 2 rows x 3 columns (3-col grid)
    Damage, Element, Hits, Target / Cast, Combo
   - Mobile:   2 rows x 3 columns (same grid), but reorder:
   Mobile: single row, 6 columns, reordered:
      Damage, Element, Target, Cast, Hits, Combo
    Damage, Element, Target, Cast, Hits, Combo
   ============================================================ */
   ============================================================ */
table.spiritvale-skill-infobox .hero-bar-module-2 .hero-bar-module-body,
table.spiritvale-skill-infobox .hero-bar-module-2 .module-skill-type {
  width: 100%;
}


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


   display: grid;
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0.45em;
   gap: 0.50em;
   padding: 0.35em;
   padding: 0.40em;
 
  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 427: Line 418:


   padding: 0.20em 0.35em;
   padding: 0.20em 0.35em;
   gap: 0.45em;
   gap: 0.50em;
  min-width: 0;
}
}


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 442: Line 431:
   word-break: break-word;
   word-break: break-word;
}
}
/* Desktop ordering */
table.spiritvale-skill-infobox .module-skill-type .sv-type-damage  { order: 1; }
table.spiritvale-skill-infobox .module-skill-type .sv-type-element { order: 2; }
table.spiritvale-skill-infobox .module-skill-type .sv-type-hits    { order: 3; }
table.spiritvale-skill-infobox .module-skill-type .sv-type-target  { order: 4; }
table.spiritvale-skill-infobox .module-skill-type .sv-type-cast    { order: 5; }
table.spiritvale-skill-infobox .module-skill-type .sv-type-combo  { order: 6; }


/* SourceType */
/* SourceType */
Line 550: Line 547:


/* ============================================================
/* ============================================================
   Special Mechanics
   Special Mechanics (Flags + 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 (flags | effects)
     * 2 groups => 2 columns
   - Everything centered
   - Everything centered
   ============================================================ */
   ============================================================ */
Line 647: Line 640:
   }
   }


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


   /* Mobile order: Damage, Element, Target, Cast, Hits, Combo */
   /* SkillType stays 3 columns, but reorders to:
   table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk--damage { order: 1; }
    Damage, Element, Target, Cast, Hits, Combo */
   table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk--element { order: 2; }
   table.spiritvale-skill-infobox .module-skill-type .sv-type-damage { order: 1; }
   table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk--target { order: 3; }
   table.spiritvale-skill-infobox .module-skill-type .sv-type-element { order: 2; }
   table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk--cast { order: 4; }
   table.spiritvale-skill-infobox .module-skill-type .sv-type-target { order: 3; }
   table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk--hits { order: 5; }
   table.spiritvale-skill-infobox .module-skill-type .sv-type-cast   { order: 4; }
   table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk--combo { order: 6; }
   table.spiritvale-skill-infobox .module-skill-type .sv-type-hits   { order: 5; }
   table.spiritvale-skill-infobox .module-skill-type .sv-type-combo   { order: 6; }


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


   /* QuickStats becomes 2 cols on mobile */
   /* QuickStats becomes 2 cols in tiles */
   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 695: Line 691:
   }
   }


   /* Special Mechanics: stack groups on mobile */
   /* Special Mechanics:
    - If 2 groups: single centered column (stacked) */
   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;
Retrieved from "https://spiritvale.info/wiki/MediaWiki:Common.css"