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

Module:GameInfo/styles.css: Difference between revisions

From SpiritVale Wiki
No edit summary
Tags: Mobile edit Mobile web edit
No edit summary
Tags: Mobile edit Mobile web edit
Line 386: Line 386:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   7) SCHEMA 2 SKILL SCALING DASHBOARD (NEW SYSTEM)
   7) SCHEMA 2 SKILL SCALING DASHBOARD (REWORKED TWO-ROW SYSTEM)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 411: Line 411:
}
}


/* Two-row desktop system:
  Row 1 = primary damage mod + six stat pills
  Row 2 = core across full width
*/
.sv_skill_scaling__body{
.sv_skill_scaling__body{
   display:grid;
   display:grid;
   grid-template-columns:minmax(0, 1.2fr) minmax(0, 0.86fr) minmax(0, 1fr);
   grid-template-columns:minmax(110px, 0.85fr) repeat(6, minmax(0, 1fr));
   gap:10px;
   gap:10px;
   align-items:start;
   align-items:stretch;
}
}


Line 427: Line 431:
}
}


/* Primary column */
/* Primary block: compact damage mod on top-left */
.sv_skill_scaling__column--primary{
.sv_skill_scaling__column--primary{
   padding:14px 12px;
  grid-column:1;
   min-height:330px;
  grid-row:1;
   padding:12px 10px;
   min-height:0;
   display:flex;
   display:flex;
   flex-direction:column;
   flex-direction:column;
Line 436: Line 442:
   align-items:center;
   align-items:center;
   text-align:center;
   text-align:center;
}
/* Fallback if Lua does not emit modifier classes yet */
.sv_skill_scaling__body > .sv_skill_scaling__column:nth-child(1){
  grid-column:1;
  grid-row:1;
}
/* Stats wrapper occupies the rest of row 1 */
.sv_skill_scaling__column--stats{
  grid-column:2 / -1;
  grid-row:1;
}
.sv_skill_scaling__body > .sv_skill_scaling__column:nth-child(2){
  grid-column:2 / -1;
  grid-row:1;
}
/* Core spans full second row */
.sv_skill_scaling__column--core{
  grid-column:1 / -1;
  grid-row:2;
}
.sv_skill_scaling__body > .sv_skill_scaling__column:nth-child(3){
  grid-column:1 / -1;
  grid-row:2;
}
}


.sv_skill_scaling__primary-value{
.sv_skill_scaling__primary-value{
   font-weight:900;
   font-weight:900;
   font-size:44px;
   font-size:30px;
   line-height:0.95;
   line-height:0.95;
   letter-spacing:-0.5px;
   letter-spacing:-0.35px;
   color:rgba(245,249,255,0.99);
   color:rgba(245,249,255,0.99);
   word-wrap:break-word;
   word-wrap:break-word;
Line 448: Line 482:


.sv_skill_scaling__primary-label{
.sv_skill_scaling__primary-label{
   margin-top:8px;
   margin-top:7px;
   font-size:13px;
   font-size:11px;
   font-weight:900;
   font-weight:900;
   letter-spacing:0.35px;
  line-height:1.15;
   letter-spacing:0.24px;
   text-transform:uppercase;
   text-transform:uppercase;
   color:rgba(182,198,224,0.96);
   color:rgba(182,198,224,0.96);
}
}


/* Shared pill container rules */
/* Shared container rules */
.sv_skill_scaling__stats,
.sv_skill_scaling__stats,
.sv_skill_scaling__core{
.sv_skill_scaling__core{
Line 462: Line 497:
}
}


/* Desktop: all six attributes across */
.sv_skill_scaling__stats-grid{
.sv_skill_scaling__stats-grid{
   display:grid;
   display:grid;
   grid-template-columns:repeat(2, minmax(0, 1fr));
   grid-template-columns:repeat(6, minmax(0, 1fr));
   gap:8px;
   gap:8px;
}
}


/* Desktop core uses full row width */
.sv_skill_scaling__core-grid{
.sv_skill_scaling__core-grid{
   display:grid;
   display:grid;
   grid-template-columns:repeat(3, minmax(0, 1fr));
   grid-template-columns:repeat(6, minmax(0, 1fr));
   gap:8px;
   gap:8px;
}
}
Line 477: Line 514:
   position:relative;
   position:relative;
   min-width:0;
   min-width:0;
   padding:10px 12px;
   padding:10px 8px;
   border-radius:14px;
   border-radius:14px;
   border:1px solid rgba(59,75,99,0.92);
   border:1px solid rgba(59,75,99,0.92);
Line 490: Line 527:


.sv_skill_scaling__stat-pill{
.sv_skill_scaling__stat-pill{
   min-height:74px;
   min-height:106px;
   display:flex;
   display:flex;
  flex-direction:column;
   align-items:center;
   align-items:center;
   justify-content:space-between;
   justify-content:center;
   gap:10px;
   gap:8px;
  text-align:center;
}
}


.sv_skill_scaling__stat-main{
.sv_skill_scaling__stat-main{
   min-width:0;
   min-width:0;
   flex:1 1 auto;
   flex:0 0 auto;
  width:100%;
   display:flex;
   display:flex;
   align-items:center;
   align-items:center;
  justify-content:center;
}
}


.sv_skill_scaling__stat-visual{
.sv_skill_scaling__stat-visual{
   min-width:0;
   min-width:0;
   display:inline-flex;
   display:flex;
  flex-direction:column;
   align-items:center;
   align-items:center;
   gap:8px;
  justify-content:center;
   gap:6px;
}
}


.sv_skill_scaling__stat-icon{
.sv_skill_scaling__stat-icon{
   flex:0 0 auto;
   flex:0 0 auto;
   width:18px;
   width:22px;
   height:18px;
   height:22px;
   display:inline-flex;
   display:flex;
   align-items:center;
   align-items:center;
   justify-content:center;
   justify-content:center;
Line 531: Line 574:


.sv_skill_scaling__stat-icon .sv-miss{
.sv_skill_scaling__stat-icon .sv-miss{
   width:14px;
   width:16px;
   height:14px;
   height:16px;
   font-size:10px;
   font-size:11px;
   line-height:1;
   line-height:1;
}
.sv_skill_scaling__stat-label{
  font-weight:900;
  font-size:13px;
  line-height:1.05;
  letter-spacing:0.22px;
  text-transform:uppercase;
  color:rgba(182,198,224,0.92);
}
}


Line 543: Line 595:
   line-height:1.05;
   line-height:1.05;
   color:rgba(245,249,255,0.98);
   color:rgba(245,249,255,0.98);
}
   text-align:center;
 
   word-wrap:break-word;
.sv_skill_scaling__stat-label{
   font-weight:900;
  font-size:16px;
  line-height:1.05;
   letter-spacing:0.25px;
  text-transform:uppercase;
  color:rgba(182,198,224,0.92);
}
}


Line 669: Line 714:


.sv_skill_scaling__core-pill{
.sv_skill_scaling__core-pill{
   min-height:92px;
   min-height:88px;
   display:flex;
   display:flex;
   flex-direction:column;
   flex-direction:column;
   justify-content:center;
   justify-content:center;
  align-items:center;
  text-align:center;
}
}


Line 678: Line 725:
   display:flex;
   display:flex;
   align-items:baseline;
   align-items:baseline;
  justify-content:center;
   gap:6px;
   gap:6px;
   min-width:0;
   min-width:0;
  flex-wrap:wrap;
}
}


.sv_skill_scaling__core-value{
.sv_skill_scaling__core-value{
   font-weight:900;
   font-weight:900;
   font-size:18px;
   font-size:17px;
   line-height:1.02;
   line-height:1.02;
   color:rgba(245,249,255,0.98);
   color:rgba(245,249,255,0.98);
Line 693: Line 742:
.sv_skill_scaling__core-unit{
.sv_skill_scaling__core-unit{
   font-weight:900;
   font-weight:900;
   font-size:12px;
   font-size:11px;
   line-height:1.05;
   line-height:1.05;
   color:rgba(182,198,224,0.95);
   color:rgba(182,198,224,0.95);
Line 700: Line 749:
.sv_skill_scaling__core-label{
.sv_skill_scaling__core-label{
   margin-top:6px;
   margin-top:6px;
   font-size:12px;
   font-size:11px;
   font-weight:900;
   font-weight:900;
   letter-spacing:0.22px;
  line-height:1.12;
   letter-spacing:0.16px;
   text-transform:uppercase;
   text-transform:uppercase;
   color:rgba(182,198,224,0.95);
   color:rgba(182,198,224,0.95);