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


/* Special Mechanics */
/* ============================================================
  Special Mechanics (FINAL)
  - Desktop:
    * 1 group => centered
    * 2 groups => 2 columns (separate)
    * 3 groups => 3 columns (flags | mechanics | combo)
  - Pills shrink on desktop
  - Everything centered
  ============================================================ */
 
table.spiritvale-skill-infobox .hero-module.module-special-mechanics .hero-module-body {
table.spiritvale-skill-infobox .hero-module.module-special-mechanics .hero-module-body {
   width: 100%;
   width: 100%;
Line 542: Line 551:
}
}


/* Layout grid (desktop rules) */
/* Layout grid */
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout {
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout {
   width: 100%;
   width: 100%;
   display: grid;
   display: grid;
   gap: 0.55em;
   gap: 0.55em;
   align-items: start;       /* top-align columns */
   align-items: start;     /* top-align all columns */
   justify-items: center;     /* center each column */
   justify-items: center;   /* center each column */
}
}


table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-1 {
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-1 {
   grid-template-columns: 1fr;     /* centered single group */
   grid-template-columns: 1fr;
}
}


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; /* two centered columns */
   grid-template-columns: 1fr 1fr;
}
}


table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-3 {
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-3 {
   grid-template-columns: 1fr 1fr 1fr; /* flags | mechanics | combo */
   grid-template-columns: 1fr 1fr 1fr;
}
}


/* Column containers */
/* Columns */
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col {
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col {
  width: 100%;
   min-width: 0;
   min-width: 0;
  width: 100%;
 
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
   align-items: center;       /* center inside each column */
   align-items: center;     /* center content in each column */
   justify-content: flex-start;
   justify-content: flex-start;
   text-align: center;
   text-align: center;
Line 575: Line 585:
}
}


/* Mechanics + combo items (stacked blocks) */
/* Items */
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-mech {
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-mech {
   width: 100%;
   width: 100%;
  min-width: 0;
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
Line 586: Line 598:
}
}


/* Values centered (fix for drifting/left-align cases) */
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-value {
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-value {
  width: 100%;
  text-align: center;
   font-weight: 500;
   font-weight: 500;
   font-size: 0.98em;
   font-size: 0.98em;
Line 597: Line 613:
}
}


/* Pills: shrink-to-text (desktop + mobile) */
/* 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) {
table.spiritvale-skill-infobox .module-special-mechanics :where(.sv-sm-label, .sv-sm-flag) {
   width: auto !important;
   width: auto !important;
Line 625: Line 641:
     padding: 0.22em 0.45em;
     padding: 0.22em 0.45em;
   }
   }
  /* Special Mechanics: mobile rules
    - If 1 or 2 groups: single centered column (stacked)
    - If all 3: two columns (flags | mechanics+combo), with combo below mechanics
  */
  table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2 {
    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; }


   /* Hero Bar Slot 2: spread/flatten compactable module grids */
   /* Hero Bar Slot 2: spread/flatten compactable module grids */
Line 658: Line 653:
     gap: 0.35em;
     gap: 0.35em;
     padding: 0.25em;
     padding: 0.25em;
  }
  table.spiritvale-skill-infobox .hero-bar-module-2.sv-herobar-compact .module-special-mechanics .sv-sm-layout.sv-sm-has-flags {
    grid-template-columns: 1fr;
  }
  table.spiritvale-skill-infobox .hero-bar-module-2.sv-herobar-compact .module-special-mechanics .sv-sm-flags {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  table.spiritvale-skill-infobox .hero-bar-module-2.sv-herobar-compact .module-special-mechanics .sv-sm-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr));
    gap: 0.35em;
  }
  table.spiritvale-skill-infobox .hero-bar-module-2.sv-herobar-compact .module-special-mechanics .sv-sm-item {
    min-width: 0;
   }
   }


Line 709: Line 687:
     padding: 0.30em;
     padding: 0.30em;
   }
   }
  /* Special Mechanics mobile rules:
    - 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 {
    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"