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
   Two-row layout:
   Layout:
   - row 1: primary output + six stat pills
   - Row 1: ONE locked unit (primary damage + compact stat chips grid)
   - row 2: full-width core pills
   - Row 2: Core pills (full width)


   Important:
   Stat chip rules:
   - the outer scaling card remains visible
   - Active: icon + value (single line), no label
   - inner section wrappers are intentionally transparent so the block reads
  - Inactive: en dash only, no icon, no label
    as one cohesive card rather than nested sub-cards
 
  Stat grid order (2 columns x 3 rows):
   - Column 1: STR, VIT, DEX
  - Column 2: AGI, INT, LUK
   ========================================================================== */
   ========================================================================== */


Line 449: Line 452:
}
}


/* Two-row system:
  - row 1: primary + stats (locked together)
  - row 2: core spans full width
*/
.sv_skill_scaling__body{
.sv_skill_scaling__body{
   display:grid;
   display:grid;
   grid-template-columns:minmax(110px, 0.85fr) repeat(6, minmax(0, 1fr));
   grid-template-columns:minmax(120px, 0.95fr) minmax(0, 1.05fr);
   gap:10px;
   grid-template-rows:auto auto;
   align-items:stretch;
  column-gap:12px;
  row-gap:12px;
   align-items:center;
}
}


Line 466: Line 475:
}
}


/* Primary output block */
/* Primary output (Damage Mod) */
.sv_skill_scaling__column--primary{
.sv_skill_scaling__column--primary{
   grid-column:1;
   grid-column:1;
   grid-row:1;
   grid-row:1;


  padding:0;
   min-height:0;
   min-height:0;
  padding:6px 0;


   display:flex;
   display:flex;
   flex-direction:column;
   flex-direction:column;
   justify-content:center;
   justify-content:center;
   align-items:center;
   align-items:flex-start;
   text-align:center;
   text-align:left;
}
}


Line 487: Line 496:
}
}


/* Stats occupy the rest of row 1 */
/* Stats chip grid sits directly beside the primary output */
.sv_skill_scaling__column--stats{
.sv_skill_scaling__column--stats{
   grid-column:2 / -1;
   grid-column:2;
   grid-row:1;
   grid-row:1;
  padding:0;
}
}


.sv_skill_scaling__body > .sv_skill_scaling__column:nth-child(2){
.sv_skill_scaling__body > .sv_skill_scaling__column:nth-child(2){
   grid-column:2 / -1;
   grid-column:2;
   grid-row:1;
   grid-row:1;
}
}


/* Core spans the full second row */
/* Core spans full width below */
.sv_skill_scaling__column--core{
.sv_skill_scaling__column--core{
   grid-column:1 / -1;
   grid-column:1 / -1;
   grid-row:2;
   grid-row:2;
  padding:0;
}
}


Line 509: Line 520:
}
}


/* Primary typography: keep big + dense */
.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:30px;
   font-size:40px;
   line-height:0.95;
   line-height:0.92;
   letter-spacing:-0.35px;
   letter-spacing:-0.55px;
   color:rgba(245,249,255,0.99);
   color:rgba(245,249,255,0.99);
}
}


.sv_skill_scaling__primary-label{
.sv_skill_scaling__primary-label{
   margin-top:7px;
   margin-top:6px;


   font-weight:900;
   font-weight:900;
   font-size:11px;
   font-size:11px;
   line-height:1.15;
   line-height:1.10;
   letter-spacing:0.24px;
   letter-spacing:0.22px;
   text-transform:uppercase;
   text-transform:uppercase;
   color:rgba(182,198,224,0.96);
   color:rgba(182,198,224,0.96);
Line 536: Line 548:
}
}


/* Desktop layout: six stat pills across, six core pills across */
/* --------------------------------------------------------------------------
  7A) STAT CHIPS GRID (2 columns x 3 rows)
  Column 1: STR, VIT, DEX
  Column 2: AGI, INT, LUK
  -------------------------------------------------------------------------- */
 
.sv_skill_scaling__stats-grid{
.sv_skill_scaling__stats-grid{
   display:grid;
   display:grid;
   grid-template-columns:repeat(6, minmax(0, 1fr));
   grid-template-columns:repeat(2, minmax(0, 1fr));
   gap:8px;
   gap:6px;
 
  /* Hard-ordering regardless of DOM order */
  grid-template-areas:
    "str agi"
    "vit int"
    "dex luk";
}
}


.sv_skill_scaling__core-grid{
.sv_skill_scaling__stat-pill--str{ grid-area:str; }
  display:grid;
.sv_skill_scaling__stat-pill--vit{ grid-area:vit; }
  grid-template-columns:repeat(6, minmax(0, 1fr));
.sv_skill_scaling__stat-pill--dex{ grid-area:dex; }
  gap:8px;
.sv_skill_scaling__stat-pill--agi{ grid-area:agi; }
}
.sv_skill_scaling__stat-pill--int{ grid-area:int; }
.sv_skill_scaling__stat-pill--luk{ grid-area:luk; }


/* Shared pill shell */
/* Shared pill shell (core keeps the old look; stats override below) */
.sv_skill_scaling__pill{
.sv_skill_scaling__pill{
   position:relative;
   position:relative;
   min-width:0;
   min-width:0;
  padding:10px 8px;


   border-radius:14px;
   border-radius:14px;
Line 562: Line 585:
}
}


/* --------------------------------------------------------------------------
/* Stat chips: ultra-compact, single-line */
  7A) Schema 2: stat pills
  Three-line layout inside each pill:
  - icon
  - short stat label
  - value
  -------------------------------------------------------------------------- */
 
.sv_skill_scaling__stat-pill{
.sv_skill_scaling__stat-pill{
   min-height:106px;
  border-radius:999px;
   min-height:30px;
  padding:6px 10px;


   display:flex;
   display:flex;
  flex-direction:column;
   align-items:center;
   align-items:center;
   justify-content:center;
   justify-content:center;
  gap:8px;
   text-align:left;
   text-align:center;
}
}


/* Flatten inner structure into one row */
.sv_skill_scaling__stat-main{
.sv_skill_scaling__stat-main{
  width:auto;
   min-width:0;
   min-width:0;
  flex:0 0 auto;
  width:100%;


   display:flex;
   display:flex;
Line 595: Line 611:


   display:flex;
   display:flex;
   flex-direction:column;
   flex-direction:row;
   align-items:center;
   align-items:center;
   justify-content:center;
   justify-content:center;
   gap:6px;
   gap:8px;
}
 
/* No label text in compact chip mode */
.sv_skill_scaling__stat-label{
  display:none;
}
}


/* Icon sizing */
.sv_skill_scaling__stat-icon{
.sv_skill_scaling__stat-icon{
  flex:0 0 auto;
   width:14px;
   width:22px;
   height:14px;
   height:22px;


   display:flex;
   display:flex;
Line 623: Line 644:


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


.sv_skill_scaling__stat-label{
/* Value sizing */
  font-weight:900;
  font-size:13px;
  line-height:1.05;
  letter-spacing:0.22px;
  text-transform:uppercase;
  color:rgba(182,198,224,0.92);
}
 
.sv_skill_scaling__stat-value{
.sv_skill_scaling__stat-value{
  flex:0 0 auto;
  word-wrap:break-word;
  text-align:center;
   font-weight:900;
   font-weight:900;
   font-size:18px;
   font-size:16px;
   line-height:1.05;
   line-height:1;
  letter-spacing:-0.15px;
   color:rgba(245,249,255,0.98);
   color:rgba(245,249,255,0.98);
}
}
Line 666: Line 676:
}
}


/* Inactive state */
/* Inactive chips: dash only (no icon, no value) */
.sv_skill_scaling__stat-pill.is-inactive{
.sv_skill_scaling__stat-pill.is-inactive{
   border-color:rgba(59,75,99,0.72);
   border-color:rgba(59,75,99,0.72);
   background:#182130;
   background:#182130;
  background-image:none;
  box-shadow:none;
}
}


.sv_skill_scaling__stat-pill.is-inactive .sv_skill_scaling__stat-label{
.sv_skill_scaling__stat-pill.is-inactive .sv_skill_scaling__stat-icon,
   color:rgba(140,156,184,0.82);
.sv_skill_scaling__stat-pill.is-inactive .sv_skill_scaling__stat-value{
   display:none;
}
}


.sv_skill_scaling__stat-pill.is-inactive .sv_skill_scaling__stat-value{
.sv_skill_scaling__stat-pill.is-inactive::before{
  content:"—";
  font-weight:900;
  font-size:16px;
  line-height:1;
   color:rgba(140,156,184,0.78);
   color:rgba(140,156,184,0.78);
}
}
Line 687: Line 704:
}
}


.sv_skill_scaling__stat-pill.is-active .sv_skill_scaling__stat-label,
/* Per-stat color treatments (unchanged, now applied to compact chips) */
.sv_skill_scaling__stat-pill.is-active .sv_skill_scaling__stat-value{
  color:rgba(245,249,255,0.99);
}
 
/* 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 699: Line 711:
}
}


.sv_skill_scaling__stat-pill--str.is-active .sv_skill_scaling__stat-label,
.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;
}


.sv_skill_scaling__stat-pill--vit.is-active{
.sv_skill_scaling__stat-pill--vit.is-active{
Line 710: Line 719:
}
}


.sv_skill_scaling__stat-pill--vit.is-active .sv_skill_scaling__stat-label,
.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;
}


.sv_skill_scaling__stat-pill--dex.is-active{
.sv_skill_scaling__stat-pill--dex.is-active{
Line 721: Line 727:
}
}


.sv_skill_scaling__stat-pill--dex.is-active .sv_skill_scaling__stat-label,
.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;
}


.sv_skill_scaling__stat-pill--agi.is-active{
.sv_skill_scaling__stat-pill--agi.is-active{
Line 732: Line 735:
}
}


.sv_skill_scaling__stat-pill--agi.is-active .sv_skill_scaling__stat-label,
.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;
}


.sv_skill_scaling__stat-pill--int.is-active{
.sv_skill_scaling__stat-pill--int.is-active{
Line 743: Line 743:
}
}


.sv_skill_scaling__stat-pill--int.is-active .sv_skill_scaling__stat-label,
.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;
}


.sv_skill_scaling__stat-pill--luk.is-active{
.sv_skill_scaling__stat-pill--luk.is-active{
Line 754: Line 751:
}
}


.sv_skill_scaling__stat-pill--luk.is-active .sv_skill_scaling__stat-label,
.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) Schema 2: core pills
   7B) CORE PILLS (unchanged layout; full-width row 2)
   -------------------------------------------------------------------------- */
   -------------------------------------------------------------------------- */
.sv_skill_scaling__core-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:8px;
}


.sv_skill_scaling__core-pill{
.sv_skill_scaling__core-pill{
   min-height:88px;
   min-height:88px;
  padding:10px 8px;


   display:flex;
   display:flex;
Line 819: Line 820:
.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)); }
}
}


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