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

Module:GameInfo/styles.css: Difference between revisions

From SpiritVale Wiki
More actions
← Older editNewer edit →
No edit summary
Tags: Mobile edit Mobile web edit
No edit summary
Tags: Mobile edit Mobile web edit
Line 415: Line 415:
/* ==========================================================================
/* ==========================================================================
   7) SCHEMA 2 SKILL SCALING DASHBOARD
   7) SCHEMA 2 SKILL SCALING DASHBOARD
   Layout:
   Goal (match mockup):
   - Row 1: ONE locked unit (primary damage + compact stat chips grid)
  - The outer scaling card is one cohesive surface (no inner section panels).
   - Row 2: Core pills (full width)
   - Row 1: LEFT cluster = (big damage + 2x3 attribute chips), centered together.
            RIGHT side reserved for future content (empty for now).
   - Row 2: Core pills across the full width.


   Stat chip rules:
   Attribute chips:
   - Active: icon + value (single line), no label
   - Active: icon + value (single line), no label
   - Inactive: en dash only, no icon, no label
   - Inactive: en dash only (no icon/value/label)


   Stat grid order (2 columns x 3 rows):
   Chip order (2 columns x 3 rows):
   - Column 1: STR, VIT, DEX
   - Col 1: STR, VIT, DEX
   - Column 2: AGI, INT, LUK
   - Col 2: AGI, INT, LUK
   ========================================================================== */
   ========================================================================== */


Line 452: Line 454:
}
}


/* Two-row system:
/* Two-row layout with a reserved right-side column on row 1:
   - row 1: primary + stats (locked together)
   col 1: damage
   - row 2: core spans full width
   col 2: attribute chips
  col 3: reserved (future block)
*/
*/
.sv_skill_scaling__body{
.sv_skill_scaling__body{
   display:grid;
   display:grid;
   grid-template-columns:minmax(120px, 0.95fr) minmax(0, 1.05fr);
   grid-template-columns:max-content max-content minmax(0, 1fr);
   grid-template-rows:auto auto;
   grid-template-rows:auto auto;
   column-gap:12px;
 
   column-gap:14px;
   row-gap:12px;
   row-gap:12px;
   align-items:center;
   align-items:center;
}
}
Line 488: Line 493:
   align-items:flex-start;
   align-items:flex-start;
   text-align:left;
   text-align:left;
  align-self:center;
}
}


Line 496: Line 503:
}
}


/* Stats chip grid sits directly beside the primary output */
/* Attribute chips: sit immediately beside the primary output */
.sv_skill_scaling__column--stats{
.sv_skill_scaling__column--stats{
   grid-column:2;
   grid-column:2;
   grid-row:1;
   grid-row:1;
   padding:0;
   padding:0;
  align-self:center;
  justify-self:start;
}
}


Line 520: Line 530:
}
}


/* Primary typography: keep big + dense */
/* Damage typography (match mockup scale) */
.sv_skill_scaling__primary-value{
.sv_skill_scaling__primary-value{
   word-wrap:break-word;
   word-wrap:break-word;


   font-weight:900;
   font-weight:900;
   font-size:40px;
   font-size:58px;
   line-height:0.92;
   line-height:0.90;
   letter-spacing:-0.55px;
   letter-spacing:-0.85px;
   color:rgba(245,249,255,0.99);
   color:rgba(245,249,255,0.99);
}
}
Line 535: Line 545:


   font-weight:900;
   font-weight:900;
   font-size:11px;
   font-size:12px;
   line-height:1.10;
   line-height:1.05;
   letter-spacing:0.22px;
   letter-spacing:0.22px;
   text-transform:uppercase;
   text-transform:uppercase;
Line 542: Line 552:
}
}


/* Light-touch internal padding only */
/* No extra padding inside these wrappers (outer card already provides it) */
.sv_skill_scaling__stats,
.sv_skill_scaling__stats,
.sv_skill_scaling__core{
.sv_skill_scaling__core{
Line 549: Line 559:


/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   7A) STAT CHIPS GRID (2 columns x 3 rows)
   7A) ATTRIBUTE CHIPS (2 columns x 3 rows)
   Column 1: STR, VIT, DEX
   Fixed positions + compact sizing to prevent stretching.
  Column 2: AGI, INT, LUK
 
  Chip rules:
  - Active: icon + value (single line), no label
  - Inactive: en dash only, no icon, no label
-------------------------------------------------------------------------- */
-------------------------------------------------------------------------- */


.sv_skill_scaling__stats-grid{
.sv_skill_scaling__stats-grid{
   display:grid;
   display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));


   /* Tight spacing to match the damage block height */
   /* Prevent the “fills the whole row” stretch that caused the mismatch */
   gap:3px;
  grid-template-columns:repeat(2, max-content);
 
  /* Row gap / column gap tuned for the mockup */
   row-gap:10px;
  column-gap:12px;


   /* Hard ordering regardless of DOM output order */
   /* Hard ordering regardless of DOM order */
   grid-template-areas:
   grid-template-areas:
     "str agi"
     "str agi"
Line 579: Line 587:
.sv_skill_scaling__stat-pill--luk{ grid-area:luk; }
.sv_skill_scaling__stat-pill--luk{ grid-area:luk; }


/* Stat chips: ultra-compact, single-line */
/* Shared pill shell (core uses this; stat chips override radius/size below) */
.sv_skill_scaling__pill{
  position:relative;
  min-width:0;
 
  border-radius:14px;
  border:1px solid rgba(59,75,99,0.92);
  background:#1a2434;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
}
 
/* Stat chips: compact capsules with a fixed, non-stretchy footprint */
.sv_skill_scaling__stat-pill{
.sv_skill_scaling__stat-pill{
   border-radius:999px;
   border-radius:999px;


   /* Compact height + minimal padding */
   /* Fixed width prevents huge bars */
   min-height:18px;
  width:132px;
   padding:2px 10px;
 
   min-height:28px;
   padding:6px 12px;


   display:flex;
   display:flex;
Line 611: Line 633:
   justify-content:center;
   justify-content:center;


  /* tighter than before */
   gap:8px;
   gap:6px;
}
}


Line 620: Line 641:
}
}


/* Icon sizing (small + crisp) */
/* Icon sizing */
.sv_skill_scaling__stat-icon{
.sv_skill_scaling__stat-icon{
   width:12px;
   width:14px;
   height:12px;
   height:14px;


   display:flex;
   display:flex;
Line 642: Line 663:


.sv_skill_scaling__stat-icon .sv-miss{
.sv_skill_scaling__stat-icon .sv-miss{
   width:10px;
   width:12px;
   height:10px;
   height:12px;
   font-size:8px;
   font-size:9px;
   line-height:1;
   line-height:1;
}
}


/* Value sizing (compact but readable) */
/* Value sizing */
.sv_skill_scaling__stat-value{
.sv_skill_scaling__stat-value{
   font-weight:900;
   font-weight:900;
   font-size:14px;
   font-size:15px;
   line-height:1;
   line-height:1;
   letter-spacing:-0.12px;
   letter-spacing:-0.12px;
Line 690: Line 711:
   content:"—";
   content:"—";
   font-weight:900;
   font-weight:900;
   font-size:14px;
   font-size:15px;
   line-height:1;
   line-height:1;
   color:rgba(140,156,184,0.78);
   color:rgba(140,156,184,0.78);
Line 702: Line 723:
}
}


/* Per-stat color treatments (same identity, compact chip-friendly) */
/* Per-stat color treatments */
.sv_skill_scaling__stat-pill--str.is-active{
.sv_skill_scaling__stat-pill--str.is-active{
   border-color:rgba(145,63,82,0.96);
   border-color:rgba(145,63,82,0.96);
Line 708: Line 729:
   background-image:linear-gradient(180deg, rgba(190,88,113,0.16), rgba(0,0,0,0.00));
   background-image:linear-gradient(180deg, rgba(190,88,113,0.16), rgba(0,0,0,0.00));
}
}
.sv_skill_scaling__stat-pill--str.is-active .sv_skill_scaling__stat-value{ color:#ffdce5; }
.sv_skill_scaling__stat-pill--str.is-active .sv_skill_scaling__stat-value{ color:#ffdce5; }


Line 715: Line 737:
   background-image:linear-gradient(180deg, rgba(210,144,18,0.15), rgba(0,0,0,0.00));
   background-image:linear-gradient(180deg, rgba(210,144,18,0.15), rgba(0,0,0,0.00));
}
}
.sv_skill_scaling__stat-pill--vit.is-active .sv_skill_scaling__stat-value{ color:#ffefc9; }
.sv_skill_scaling__stat-pill--vit.is-active .sv_skill_scaling__stat-value{ color:#ffefc9; }


Line 722: Line 745:
   background-image:linear-gradient(180deg, rgba(159,194,27,0.16), rgba(0,0,0,0.00));
   background-image:linear-gradient(180deg, rgba(159,194,27,0.16), rgba(0,0,0,0.00));
}
}
.sv_skill_scaling__stat-pill--dex.is-active .sv_skill_scaling__stat-value{ color:#edf8cc; }
.sv_skill_scaling__stat-pill--dex.is-active .sv_skill_scaling__stat-value{ color:#edf8cc; }


Line 729: Line 753:
   background-image:linear-gradient(180deg, rgba(165,82,198,0.17), rgba(0,0,0,0.00));
   background-image:linear-gradient(180deg, rgba(165,82,198,0.17), rgba(0,0,0,0.00));
}
}
.sv_skill_scaling__stat-pill--agi.is-active .sv_skill_scaling__stat-value{ color:#f0dcff; }
.sv_skill_scaling__stat-pill--agi.is-active .sv_skill_scaling__stat-value{ color:#f0dcff; }


Line 736: Line 761:
   background-image:linear-gradient(180deg, rgba(35,140,230,0.18), rgba(0,0,0,0.00));
   background-image:linear-gradient(180deg, rgba(35,140,230,0.18), rgba(0,0,0,0.00));
}
}
.sv_skill_scaling__stat-pill--int.is-active .sv_skill_scaling__stat-value{ color:#d8eeff; }
.sv_skill_scaling__stat-pill--int.is-active .sv_skill_scaling__stat-value{ color:#d8eeff; }


Line 743: Line 769:
   background-image:linear-gradient(180deg, rgba(234,194,9,0.16), rgba(0,0,0,0.00));
   background-image:linear-gradient(180deg, rgba(234,194,9,0.16), rgba(0,0,0,0.00));
}
}
.sv_skill_scaling__stat-pill--luk.is-active .sv_skill_scaling__stat-value{ color:#fff2ba; }
.sv_skill_scaling__stat-pill--luk.is-active .sv_skill_scaling__stat-value{ color:#fff2ba; }


/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   7B) CORE PILLS (unchanged layout; full-width row 2)
   7B) CORE PILLS (current placement: row 2)
  -------------------------------------------------------------------------- */
-------------------------------------------------------------------------- */


.sv_skill_scaling__core-grid{
.sv_skill_scaling__core-grid{
Line 812: Line 839:
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-label{
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-label{
   color:rgba(140,156,184,0.78);
   color:rgba(140,156,184,0.78);
}
/* Optional micro-tightening for small screens while keeping primary+stats together */
@media (max-width:500px){
  .sv_skill_scaling__primary-value{ font-size:34px; }
  .sv_skill_scaling__stat-pill{ min-height:28px; padding:6px 9px; }
  .sv_skill_scaling__stat-value{ font-size:15px; }
  .sv_skill_scaling__stat-pill.is-inactive::before{ font-size:15px; }
  .sv_skill_scaling__core-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
}


Line 1,170: Line 1,188:
   }
   }


   /* Schema 2 scaling collapses into a vertical stack */
   /* Keep the damage+chips cluster intact; tighten sizes */
   .sv_skill_scaling__body{
   .sv_skill_scaling__primary-value{
     grid-template-columns:1fr;
     font-size:48px;
    letter-spacing:-0.70px;
   }
   }


   .sv_skill_scaling__column--primary,
   .sv_skill_scaling__stat-pill{
  .sv_skill_scaling__body > .sv_skill_scaling__column:nth-child(1),
    width:118px;
  .sv_skill_scaling__column--stats,
     min-height:26px;
  .sv_skill_scaling__body > .sv_skill_scaling__column:nth-child(2),
     padding:6px 10px;
  .sv_skill_scaling__column--core,
  .sv_skill_scaling__body > .sv_skill_scaling__column:nth-child(3){
     grid-column:auto;
     grid-row:auto;
   }
   }


   .sv_skill_scaling__stats-grid{
   .sv_skill_scaling__stats-grid{
     grid-template-columns:repeat(3, minmax(0, 1fr));
     row-gap:9px;
    column-gap:10px;
   }
   }


   .sv_skill_scaling__core-grid{
   .sv_skill_scaling__core-grid{
     grid-template-columns:repeat(3, minmax(0, 1fr));
     grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  .sv_skill_scaling__primary-value{
    font-size:36px;
  }
  .sv_skill_scaling__stat-pill{
    min-height:98px;
   }
   }
}
}
Line 1,298: Line 1,306:
   }
   }


   .sv_skill_scaling__column--primary{
   /* Keep the cluster intact; scale down */
    padding:8px 0 4px;
  }
 
   .sv_skill_scaling__primary-value{
   .sv_skill_scaling__primary-value{
     font-size:32px;
     font-size:42px;
     line-height:0.98;
     letter-spacing:-0.60px;
   }
   }


   .sv_skill_scaling__primary-label{
   .sv_skill_scaling__primary-label{
    margin-top:6px;
     font-size:11px;
     font-size:11px;
  }
  .sv_skill_scaling__pill{
    padding:9px 8px;
  }
  /* Mobile stats remain three across */
  .sv_skill_scaling__stats-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:7px;
   }
   }


   .sv_skill_scaling__stat-pill{
   .sv_skill_scaling__stat-pill{
     min-height:92px;
    width:104px;
     gap:7px;
     min-height:24px;
     padding:5px 9px;
   }
   }


   .sv_skill_scaling__stat-visual{
   .sv_skill_scaling__stat-icon{
     gap:5px;
     width:13px;
    height:13px;
   }
   }


   .sv_skill_scaling__stat-icon{
   .sv_skill_scaling__stat-value{
     width:20px;
     font-size:14px;
    height:20px;
   }
   }


   .sv_skill_scaling__stat-label{
   .sv_skill_scaling__stat-pill.is-inactive::before{
     font-size:12px;
     font-size:14px;
   }
   }


   .sv_skill_scaling__stat-value{
   .sv_skill_scaling__stats-grid{
     font-size:16px;
     row-gap:8px;
    column-gap:10px;
   }
   }


   .sv_skill_scaling__core-grid{
   .sv_skill_scaling__core-grid{
     grid-template-columns:repeat(3, minmax(0, 1fr));
     grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:7px;
  }
  .sv_skill_scaling__core-pill{
    min-height:78px;
  }
  .sv_skill_scaling__core-value{
    font-size:16px;
  }
  .sv_skill_scaling__core-label{
    font-size:10px;
    letter-spacing:0.10px;
   }
   }


Line 1,381: Line 1,363:
   }
   }


   .sv_skill_scaling__stats-grid{
  /* Ultra-tight: preserve side-by-side cluster without overflow */
     grid-template-columns:repeat(2, minmax(0, 1fr));
   .sv_skill_scaling__primary-value{
     font-size:36px;
    letter-spacing:-0.50px;
  }
 
  .sv_skill_scaling__body{
    column-gap:10px;
  }
 
  .sv_skill_scaling__stat-pill{
    width:92px;
    min-height:22px;
    padding:4px 8px;
  }
 
  .sv_skill_scaling__stat-value{
    font-size:13px;
  }
 
  .sv_skill_scaling__stat-pill.is-inactive::before{
    font-size:13px;
   }
   }


Retrieved from "https://spiritvale.info/wiki/Module:GameInfo/styles.css"