Toggle menu
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
No edit summary
No edit summary
Line 567: Line 567:
/* ------------------------------------------------------------
/* ------------------------------------------------------------
   Mobile behavior
   Mobile behavior
   - Stack modules 1 per row
   - KEEP the hero modules as a 2x2 grid (four squares)
   - FIX: ensure border between Module 1 and 2
   - Keep padding slightly roomier
  - Increase + even out padding
   - Pills shrink in WIDTH (not font size)
   - Module 4 => 2 columns
  - Module 4 stays 2 columns
  - NEW: pills shrink in WIDTH (not text size) on mobile
   --------------------------------------------------------- */
   --------------------------------------------------------- */
@media (max-width: 560px) {
@media (max-width: 560px) {
  /* Return to 2 columns (4 squares) */
   table.spiritvale-skill-infobox .hero-modules-grid {
   table.spiritvale-skill-infobox .hero-modules-grid {
     grid-template-columns: 1fr;
     grid-template-columns: 1fr 1fr;
   }
   }


   /* Even + slightly larger padding so modules read as separate blocks */
   /* Even + slightly larger padding (DON'T remove borders anymore) */
   .mw-parser-output table.spiritvale-skill-infobox .hero-module {
   .mw-parser-output table.spiritvale-skill-infobox .hero-module {
     padding: 0.60em 0.60em;
     padding: 0.55em 0.55em;
    border-left: none;
   }
   }


   /* Override desktop “first row” rule so Module 2 gets a top border */
   /* Shrink pill WIDTH on mobile (keep padding + font-size unchanged) */
   table.spiritvale-skill-infobox .hero-module:nth-child(-n + 2) {
   table.spiritvale-skill-infobox .module-skill-type .sv-type-label,
    border-top: 1px solid var(--sv-module-gridline) !important;
  table.spiritvale-skill-infobox .skill-source-module .sv-source-pill,
  table.spiritvale-skill-infobox .module-quick-stats .sv-m4-label {
    width: auto !important;
    display: inline-block !important;
    max-width: 92%;
    white-space: nowrap;
   }
   }
   table.spiritvale-skill-infobox .hero-module:first-child {
 
     border-top: none !important;
  /* Optional: slightly tighten Module 2 internal spacing on mobile */
   table.spiritvale-skill-infobox .module-skill-type .sv-type-grid {
     gap: 0.40em;
    padding: 0.30em;
   }
   }
  /* Tighten type chunks (OK to keep; doesn't change pill/text size) */
   table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk {
   table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk {
     padding: 0.15em 0.15em;
     padding: 0.18em 0.18em;
   }
   }


   /* Module 4: 2 columns for readability */
   /* Module 4: keep 2 columns */
   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;
     gap: 0.40em;
     gap: 0.40em;
     padding: 0.30em;
     padding: 0.30em;
  }
  /* NEW: shrink pill WIDTH on mobile (keep padding + font-size unchanged) */
  table.spiritvale-skill-infobox .module-skill-type .sv-type-label,
  table.spiritvale-skill-infobox .skill-source-module .sv-source-pill,
  table.spiritvale-skill-infobox .module-quick-stats .sv-m4-label {
    width: auto !important;          /* stop full-width bars */
    display: inline-block !important; /* size to content */
    max-width: 92%;
    white-space: nowrap;
   }
   }
}
}