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 207: Line 207:
.sv-gi-card .sv-meta-card,
.sv-gi-card .sv-meta-card,
.sv-skill-card .sv-meta-card{
.sv-skill-card .sv-meta-card{
   position:relative; /* for full-pill def hitbox */
   position:relative;
   display:flex;
   display:flex;
   align-items:center;
   align-items:center;
Line 386: Line 386:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   7) SCALING TOP (module-owned presentation)
   7) SCHEMA 2 SKILL SCALING DASHBOARD (NEW SYSTEM)
---------------------------------------------------------------------------- */
 
.sv_skill_scaling{
  margin:8px 0 10px;
  padding:10px 12px 12px;
  border-radius:18px;
  border:1px solid rgba(59,75,99,0.85);
  background:#1f2937;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
 
/* The level selector is visually absorbed into the dashboard card */
.sv_skill_scaling .sv-skill-level,
.sv_skill_scaling__level{
  margin:0 0 10px;
  padding:0 0 10px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  border-bottom:1px solid rgba(59,75,99,0.72);
}
 
.sv_skill_scaling__body{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
  gap:10px;
  align-items:start;
}
 
.sv_skill_scaling__column{
  min-width:0;
  border-radius:16px;
  border:1px solid rgba(59,75,99,0.85);
  background:#273449;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
 
.sv_skill_scaling__column--primary{
  padding:14px 12px;
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}
 
.sv_skill_scaling__primary-value{
  font-weight:900;
  font-size:42px;
  line-height:0.95;
  letter-spacing:-0.5px;
  color:rgba(245,249,255,0.99);
  word-wrap:break-word;
}
 
.sv_skill_scaling__primary-label{
  margin-top:8px;
  font-size:13px;
  font-weight:900;
  letter-spacing:0.35px;
  text-transform:uppercase;
  color:rgba(182,198,224,0.96);
}
 
/* Shared pill container rules */
.sv_skill_scaling__stats,
.sv_skill_scaling__core{
  padding:8px;
}
 
.sv_skill_scaling__stats-grid,
.sv_skill_scaling__core-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
 
.sv_skill_scaling__pill{
  min-width:0;
  min-height:52px;
  padding:10px 12px;
  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);
}
 
/* -------------------------------------------------------------------------
  7A) STAT PILLS
------------------------------------------------------------------------- */
 
.sv_skill_scaling__stat-pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
 
.sv_skill_scaling__stat-main{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  align-items:center;
}
 
.sv_skill_scaling__stat-value{
  flex:0 0 auto;
  font-weight:900;
  font-size:15px;
  line-height:1.05;
  color:rgba(245,249,255,0.98);
}
 
.sv_skill_scaling__stat-label{
  font-weight:900;
  font-size:13px;
  line-height:1.05;
  letter-spacing:0.25px;
  text-transform:uppercase;
  color:rgba(182,198,224,0.92);
}
 
.sv_skill_scaling__stat-def{
  min-width:0;
}
 
.sv_skill_scaling__stat-def .sv-def{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
  cursor:default;
}
 
.sv_skill_scaling__stat-def .sv-def-text{
  color:inherit;
  border-bottom:none;
  font-weight:900;
  font-size:13px;
  line-height:1.05;
  letter-spacing:0.15px;
}
 
.sv_skill_scaling__stat-def .sv-def img,
.sv_skill_scaling__stat-def img{
  max-width:18px;
  max-height:18px;
  width:auto;
  height:auto;
  vertical-align:middle;
}
 
/* Inactive state */
.sv_skill_scaling__stat-pill.is-inactive{
  background:#182130;
  border-color:rgba(59,75,99,0.72);
}
 
.sv_skill_scaling__stat-pill.is-inactive .sv_skill_scaling__stat-value{
  color:rgba(140,156,184,0.78);
}
 
.sv_skill_scaling__stat-pill.is-inactive .sv_skill_scaling__stat-label{
  color:rgba(140,156,184,0.78);
}
 
/* Active state baseline */
.sv_skill_scaling__stat-pill.is-active{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(255,255,255,0.01);
}
 
.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{
  border-color:rgba(165,89,103,0.95);
  background:#311822;
  background-image:linear-gradient(180deg, rgba(196,101,118,0.18), rgba(0,0,0,0.00));
}
 
.sv_skill_scaling__stat-pill--str.is-active .sv-def-text,
.sv_skill_scaling__stat-pill--str.is-active .sv_skill_scaling__stat-value{
  color:#ffd7de;
}
 
.sv_skill_scaling__stat-pill--vit.is-active{
  border-color:rgba(91,157,117,0.95);
  background:#173123;
  background-image:linear-gradient(180deg, rgba(96,188,132,0.18), rgba(0,0,0,0.00));
}
 
.sv_skill_scaling__stat-pill--vit.is-active .sv-def-text,
.sv_skill_scaling__stat-pill--vit.is-active .sv_skill_scaling__stat-value{
  color:#dbffe7;
}
 
.sv_skill_scaling__stat-pill--dex.is-active{
  border-color:rgba(183,146,84,0.95);
  background:#342716;
  background-image:linear-gradient(180deg, rgba(232,187,90,0.16), rgba(0,0,0,0.00));
}
 
.sv_skill_scaling__stat-pill--dex.is-active .sv-def-text,
.sv_skill_scaling__stat-pill--dex.is-active .sv_skill_scaling__stat-value{
  color:#fff0c9;
}
 
.sv_skill_scaling__stat-pill--agi.is-active{
  border-color:rgba(75,160,154,0.95);
  background:#153132;
  background-image:linear-gradient(180deg, rgba(80,191,181,0.17), rgba(0,0,0,0.00));
}
 
.sv_skill_scaling__stat-pill--agi.is-active .sv-def-text,
.sv_skill_scaling__stat-pill--agi.is-active .sv_skill_scaling__stat-value{
  color:#d7fffb;
}
 
.sv_skill_scaling__stat-pill--int.is-active{
  border-color:rgba(104,129,201,0.96);
  background:#18233d;
  background-image:linear-gradient(180deg, rgba(101,141,255,0.20), rgba(0,0,0,0.00));
}
 
.sv_skill_scaling__stat-pill--int.is-active .sv-def-text,
.sv_skill_scaling__stat-pill--int.is-active .sv_skill_scaling__stat-value{
  color:#dce8ff;
}
 
.sv_skill_scaling__stat-pill--luk.is-active{
  border-color:rgba(147,101,183,0.95);
  background:#281739;
  background-image:linear-gradient(180deg, rgba(184,114,232,0.18), rgba(0,0,0,0.00));
}
 
.sv_skill_scaling__stat-pill--luk.is-active .sv-def-text,
.sv_skill_scaling__stat-pill--luk.is-active .sv_skill_scaling__stat-value{
  color:#f0dcff;
}
 
/* -------------------------------------------------------------------------
  7B) CORE PILLS
------------------------------------------------------------------------- */
 
.sv_skill_scaling__core-pill{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
 
.sv_skill_scaling__core-main{
  display:flex;
  align-items:baseline;
  gap:6px;
  min-width:0;
}
 
.sv_skill_scaling__core-value{
  font-weight:900;
  font-size:18px;
  line-height:1.02;
  color:rgba(245,249,255,0.98);
  min-width:0;
  word-wrap:break-word;
}
 
.sv_skill_scaling__core-unit{
  font-weight:900;
  font-size:12px;
  line-height:1.05;
  color:rgba(182,198,224,0.95);
}
 
.sv_skill_scaling__core-label{
  margin-top:6px;
  font-size:12px;
  font-weight:900;
  letter-spacing:0.25px;
  text-transform:uppercase;
  color:rgba(182,198,224,0.95);
}
 
.sv_skill_scaling__core-pill.is-inactive{
  background:#182130;
  border-color:rgba(59,75,99,0.72);
}
 
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-value,
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-unit,
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-label{
  color:rgba(140,156,184,0.78);
}
 
/* ----------------------------------------------------------------------------
  8) LEGACY SCHEMA 1 — SCALING TOP
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 456: Line 760:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   8) CORE STATS GRID (module-owned presentation)
   9) LEGACY SCHEMA 1 — CORE STATS GRID
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 532: Line 836:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   9) TABS + PANELS CONTENT (tabs component is global; content layouts are module-owned)
   10) TABS + PANELS CONTENT (tabs component is global; content layouts are module-owned)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 584: Line 888:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   10) EFFECT / EVENT CARDS (module-owned presentation)
   11) EFFECT / EVENT CARDS (module-owned presentation)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 670: Line 974:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   11) RESPONSIVE (layout tightening)
   12) RESPONSIVE (layout tightening)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 699: Line 1,003:
   .sv-gi-card .sv-ref-grid,
   .sv-gi-card .sv-ref-grid,
   .sv-skill-card .sv-ref-grid{ grid-template-columns:1fr; }
   .sv-skill-card .sv-ref-grid{ grid-template-columns:1fr; }
  .sv_skill_scaling__body{
    grid-template-columns:1fr;
  }
  .sv_skill_scaling__primary-value{
    font-size:38px;
  }
}
}


Line 775: Line 1,087:
   .sv-skill-card .sv-level-label:not([data-sv-helper-text])::after{
   .sv-skill-card .sv-level-label:not([data-sv-helper-text])::after{
     font-size:12px;
     font-size:12px;
  }
  .sv_skill_scaling{
    padding:9px 10px 10px;
  }
  .sv_skill_scaling .sv-skill-level,
  .sv_skill_scaling__level{
    padding:0 0 9px;
  }
  .sv_skill_scaling__primary-value{
    font-size:34px;
    line-height:0.98;
  }
  .sv_skill_scaling__primary-label{
    margin-top:7px;
    font-size:12px;
  }
  .sv_skill_scaling__pill{
    min-height:48px;
    padding:9px 10px;
  }
  .sv_skill_scaling__stat-value{
    font-size:14px;
  }
  .sv_skill_scaling__core-value{
    font-size:17px;
   }
   }


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