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 3: Line 3:
   --------------------------------------------------------------------------
   --------------------------------------------------------------------------
   Common.css owns shared components and tokens:
   Common.css owns shared components and tokens:
  - surface tokens / text tokens / border tokens
   - slider anatomy
   - slider anatomy
   - tabs
   - tabs
   - tips / discloses / popups
   - tips / discloses / popups
  - shared card / tile / pill primitives


   This file owns GameInfo-family presentation only:
   This file owns GameInfo-family presentation only:
   - card shell
   - card shell sizing / layout
   - section layout
   - section layout
   - skill-specific display blocks
   - skill-specific display blocks
  - stat accent colors for scaling pills
*/
*/


Line 21: Line 24:
   max-width:600px;
   max-width:600px;
   margin:18px auto;
   margin:18px auto;
   border-radius:22px;
   border-radius:22px;
   border:1px solid rgba(75,99,136,0.55);
   overflow:visible;


   background-color:#0f172a;
   /* Outer shell uses the site’s darkest surface step */
   background-image:
   background:var(--sv-ui-bg0);
    radial-gradient(900px 360px at 40% -10%, rgba(106,166,255,0.18), rgba(0,0,0,0) 60%),
   background-image:none;
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    linear-gradient(180deg, #0f172a, #0b1324);
 
   box-shadow:0 16px 38px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  overflow:visible;


   color:rgba(245,249,255,0.94);
   color:var(--sv-ui-text2);
   font-size:15px;
   font-size:15px;
   line-height:1.35;
   line-height:1.35;
Line 55: Line 52:
   padding:10px 12px;
   padding:10px 12px;


   border-radius:14px;
   overflow-wrap:anywhere;
   border:1px solid rgba(75,99,136,0.55);
   word-break:break-word;
  background:#1f2937;
 
  color:rgba(245,249,255,0.92);
}
}


Line 97: Line 91:
   line-height:1;
   line-height:1;
}
}
.sv-gi-card .sv-img img,
.sv-skill-card .sv-img img{ box-shadow:0 10px 18px rgba(0,0,0,0.30); }


/* ==========================================================================
/* ==========================================================================
Line 116: Line 107:
   width:64px;
   width:64px;
   height:64px;
   height:64px;
  border-radius:16px;
  border:1px solid rgba(75,99,136,0.55);
  background:#1f2937;


   display:flex;
   display:flex;
Line 125: Line 112:
   justify-content:center;
   justify-content:center;
   overflow:hidden;
   overflow:hidden;
  border-radius:16px;
}
}


Line 146: Line 135:
   line-height:1.10;
   line-height:1.10;
   letter-spacing:0.2px;
   letter-spacing:0.2px;
   color:rgba(245,249,255,0.98);
   color:var(--sv-ui-text1);
}
}


Line 155: Line 144:
   font-size:14px;
   font-size:14px;
   line-height:1.35;
   line-height:1.35;
   color:rgba(215,226,244,0.92);
   color:var(--sv-ui-text2);
}
}


Line 183: Line 172:


   border-radius:999px;
   border-radius:999px;
  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);


   font-weight:900;
   font-weight:900;
Line 193: Line 178:
   letter-spacing:0.08px;
   letter-spacing:0.08px;
   text-transform:none;
   text-transform:none;
  color:rgba(245,249,255,0.96);
}
}


Line 210: Line 194:


   border-radius:999px;
   border-radius:999px;
   border:1px solid rgba(59,75,99,0.85);
   border:1px solid var(--sv-ui-line2);
   background:#273449;
   background:var(--sv-ui-bg2);
   background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
   background-image:none;
   box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
   color:var(--sv-ui-text1);
}
}


.sv-gi-card .sv-meta-card:hover,
.sv-gi-card .sv-meta-card:hover,
.sv-skill-card .sv-meta-card:hover{ background:#2e3f59; }
.sv-skill-card .sv-meta-card:hover{ background:var(--sv-ui-bg3); }


.sv-gi-card .sv-meta-icon,
.sv-gi-card .sv-meta-icon,
Line 231: Line 215:


   border-radius:999px;
   border-radius:999px;
   border:1px solid rgba(75,99,136,0.55);
 
   background:#0f172a;
  /* small inner bubble contrast */
   background:var(--sv-ui-bg1);
   background-image:none;
}
}


Line 251: Line 237:
   line-height:1.02;
   line-height:1.02;
   letter-spacing:0.08px;
   letter-spacing:0.08px;
   color:rgba(245,249,255,0.96);
   color:var(--sv-ui-text1);
}
}


Line 269: Line 255:
.sv-skill-card .sv-meta-text .sv-meta-lines span + span{
.sv-skill-card .sv-meta-text .sv-meta-lines span + span{
   margin-top:1px;
   margin-top:1px;
  opacity:0.90;


   font-size:10px;
   font-size:10px;
   font-weight:800;
   font-weight:800;
   letter-spacing:0.12px;
   letter-spacing:0.12px;
  color:var(--sv-ui-text3);
}
}


Line 330: Line 316:


   border-radius:16px;
   border-radius:16px;
   border:1px solid rgba(59,75,99,0.85);
 
   background:#1f2937;
   /* section surface */
   background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
   background:var(--sv-ui-bg1);
   box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
   background-image:none;
   box-shadow:none;
}
}


Line 361: Line 348:
   line-height:1.25;
   line-height:1.25;
   letter-spacing:0.15px;
   letter-spacing:0.15px;
   color:rgba(245,249,255,0.94);
   color:var(--sv-ui-text1);
}
}


/* ==========================================================================
/* ==========================================================================
   7) SKILL SCALING
   7) SKILL SCALING (native schema)
   ========================================================================== */
   ========================================================================== */


Line 373: Line 360:


   border-radius:18px;
   border-radius:18px;
   border:1px solid rgba(59,75,99,0.85);
 
   background:#1f2937;
   /* section surface */
   background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
   background:var(--sv-ui-bg1);
   box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
   background-image:none;
   box-shadow:none;
}
}


Line 388: Line 376:
   background:transparent;
   background:transparent;
   box-shadow:none;
   box-shadow:none;
   border-bottom:1px solid rgba(59,75,99,0.72);
   border-bottom:1px solid var(--sv-ui-line1);
}
}


Line 398: Line 386:
   row-gap:12px;
   row-gap:12px;
   align-items:start;
   align-items:start;
  /* KEY: prevent grid-item stretch so centering works */
   justify-items:center;
   justify-items:center;
}
}
Line 411: Line 397:
   grid-row:1;
   grid-row:1;


   display:inline-flex;   /* shrink-wrap */
   display:inline-flex;
   align-items:center;
   align-items:center;
   justify-content:center;
   justify-content:center;
Line 461: Line 447:
   line-height:0.95;
   line-height:0.95;
   letter-spacing:-0.50px;
   letter-spacing:-0.50px;
   color:rgba(245,249,255,0.99);
   color:var(--sv-ui-text1);
}
}


Line 472: Line 458:
   letter-spacing:0.22px;
   letter-spacing:0.22px;
   text-transform:uppercase;
   text-transform:uppercase;
   color:rgba(182,198,224,0.96);
   color:var(--sv-ui-text3);
}
}


Line 503: Line 489:


   border-radius:14px;
   border-radius:14px;
   border:1px solid rgba(59,75,99,0.92);
   border:1px solid var(--sv-ui-line2);
   background:#1a2434;
   background:var(--sv-ui-bg2);
   background-image:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00));
   background-image:none;
   box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
   box-shadow:none;
}
}


Line 573: Line 559:
   line-height:1;
   line-height:1;
   letter-spacing:-0.10px;
   letter-spacing:-0.10px;
   color:rgba(245,249,255,0.98);
   color:var(--sv-ui-text1);
}
}


Line 590: Line 576:


.sv_skill_scaling__stat-pill.is-inactive{
.sv_skill_scaling__stat-pill.is-inactive{
   border-color:rgba(59,75,99,0.72);
   background:var(--sv-ui-bg1);
  background:#182130;
   background-image:none;
   background-image:none;
   box-shadow:none;
   box-shadow:none;
Line 604: Line 589:
   font-size:12px;
   font-size:12px;
   line-height:1;
   line-height:1;
   color:rgba(140,156,184,0.78);
   color:var(--sv-ui-text3);
}
}


.sv_skill_scaling__stat-pill.is-active{
.sv_skill_scaling__stat-pill.is-active{
   box-shadow:
   box-shadow:none;
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(255,255,255,0.01);
}
}


/* per-stat colors */
/* per-stat colors (intentionally local / semantic) */
.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);
   background:#32131d;
   background:#32131d;
   background-image:linear-gradient(180deg, rgba(190,88,113,0.16), rgba(0,0,0,0.00));
   background-image:none;
}
}
.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 624: Line 607:
   border-color:rgba(158,112,22,0.96);
   border-color:rgba(158,112,22,0.96);
   background:#352609;
   background:#352609;
   background-image:linear-gradient(180deg, rgba(210,144,18,0.15), rgba(0,0,0,0.00));
   background-image:none;
}
}
.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 631: Line 614:
   border-color:rgba(118,146,24,0.96);
   border-color:rgba(118,146,24,0.96);
   background:#243208;
   background:#243208;
   background-image:linear-gradient(180deg, rgba(159,194,27,0.16), rgba(0,0,0,0.00));
   background-image:none;
}
}
.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 638: Line 621:
   border-color:rgba(125,62,152,0.96);
   border-color:rgba(125,62,152,0.96);
   background:#2b1438;
   background:#2b1438;
   background-image:linear-gradient(180deg, rgba(165,82,198,0.17), rgba(0,0,0,0.00));
   background-image:none;
}
}
.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 645: Line 628:
   border-color:rgba(45,118,191,0.96);
   border-color:rgba(45,118,191,0.96);
   background:#11263d;
   background:#11263d;
   background-image:linear-gradient(180deg, rgba(35,140,230,0.18), rgba(0,0,0,0.00));
   background-image:none;
}
}
.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 652: Line 635:
   border-color:rgba(183,150,22,0.96);
   border-color:rgba(183,150,22,0.96);
   background:#3a2f07;
   background:#3a2f07;
   background-image:linear-gradient(180deg, rgba(234,194,9,0.16), rgba(0,0,0,0.00));
   background-image:none;
}
}
.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; }
Line 661: Line 644:
   grid-template-columns:repeat(3, minmax(0, 1fr));
   grid-template-columns:repeat(3, minmax(0, 1fr));
   gap:8px;
   gap:8px;
  /* KEY: center each core cell within its track (fixes mobile left bias) */
   justify-items:center;
   justify-items:center;
}
}
Line 677: Line 658:
   align-items:center;
   align-items:center;
   text-align:center;
   text-align:center;
}


  border:1px solid rgba(59,75,99,0.85);
.sv_skill_scaling__core-pill.is-active{
   background:#182130;
   background:var(--sv-ui-bg2);
   background-image:none;
   background-image:none;
  box-shadow:none;
}
}
.sv_skill_scaling__core-pill.is-active{ background:#1a2434; }


.sv_skill_scaling__core-main{
.sv_skill_scaling__core-main{
Line 702: Line 681:
   font-size:14px;
   font-size:14px;
   line-height:1.02;
   line-height:1.02;
   color:rgba(245,249,255,0.98);
   color:var(--sv-ui-text1);
}
}


Line 709: Line 688:
   font-size:10px;
   font-size:10px;
   line-height:1.05;
   line-height:1.05;
   color:rgba(182,198,224,0.95);
   color:var(--sv-ui-text3);
}
}


Line 720: Line 699:
   letter-spacing:0.14px;
   letter-spacing:0.14px;
   text-transform:uppercase;
   text-transform:uppercase;
   color:rgba(182,198,224,0.95);
   color:var(--sv-ui-text3);
}
}


.sv_skill_scaling__core-pill.is-inactive{
.sv_skill_scaling__core-pill.is-inactive{
   border-color:rgba(59,75,99,0.72);
   background:var(--sv-ui-bg1);
  background:#182130;
}
}


Line 731: Line 709:
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-unit,
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-unit,
.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:var(--sv-ui-text3);
}
}


Line 790: Line 768:


/* ==========================================================================
/* ==========================================================================
   8) TAB PANELS AND CONTENT BLOCKS
   8) LEGACY SCHEMA BLOCKS (kept for compatibility)
  ========================================================================== */
 
.sv-skill-scaling,
.sv-skill-core{
  margin:8px 0 10px;
  padding:10px 12px;
  border-radius:16px;
 
  background:var(--sv-ui-bg1);
  background-image:none;
  box-shadow:none;
}
 
.sv-scaling-row,
.sv-core-row{ width:100%; }
 
.sv-scaling-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:12px;
  align-items:start;
}
 
.sv-scaling-col{ min-width:0; }
 
.sv-scaling-value{
  font-weight:900;
  font-size:34px;
  line-height:0.95;
  letter-spacing:-0.50px;
  text-align:center;
  color:var(--sv-ui-text1);
}
 
.sv-scaling-label{
  margin-top:6px;
  text-align:center;
  font-weight:900;
  font-size:10px;
  line-height:1.05;
  letter-spacing:0.22px;
  text-transform:uppercase;
  color:var(--sv-ui-text3);
}
 
.sv-scaling-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
 
.sv-scaling-item{
  min-width:0;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--sv-ui-line2);
  background:var(--sv-ui-bg2);
  background-image:none;
  color:var(--sv-ui-text1);
  overflow-wrap:anywhere;
  word-break:break-word;
}
 
.sv-scaling-item--stat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
 
.sv-scale-stat{
  font-weight:900;
  color:var(--sv-ui-text1);
}
 
.sv-scale-val{
  font-weight:900;
  color:var(--sv-ui-text2);
}
 
.sv-core-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}
 
.sv-core-cell{
  min-width:0;
  padding:8px 6px;
  text-align:center;
  border-radius:12px;
}
 
.sv-core-top{
  min-width:0;
  display:flex;
  align-items:baseline;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px;
}
 
.sv-core-num{
  font-weight:900;
  font-size:14px;
  line-height:1.02;
  color:var(--sv-ui-text1);
}
 
.sv-core-unit{
  font-weight:900;
  font-size:10px;
  line-height:1.05;
  color:var(--sv-ui-text3);
}
 
.sv-core-label{
  margin-top:5px;
  font-weight:900;
  font-size:10px;
  line-height:1.10;
  letter-spacing:0.14px;
  text-transform:uppercase;
  color:var(--sv-ui-text3);
}
 
.sv-core-label--tight{ letter-spacing:0.08px; }
 
@media (max-width:500px){
  .sv-scaling-grid{ grid-template-columns:1fr; }
  .sv-core-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
 
/* ==========================================================================
  9) TAB PANELS AND CONTENT BLOCKS
   ========================================================================== */
   ========================================================================== */


Line 803: Line 916:
.sv-skill-tabs .sv-tabpanel{
.sv-skill-tabs .sv-tabpanel{
   min-width:0;
   min-width:0;
  /* keep site tab panel colors, just flatten */
  background-image:none;
  box-shadow:none;
}
}


Line 810: Line 927:


   border-radius:14px;
   border-radius:14px;
   border:1px solid rgba(59,75,99,0.78);
   background:var(--sv-ui-bg2);
  background:#182130;


   font-weight:900;
   font-weight:900;
   font-size:13px;
   font-size:13px;
   color:rgba(140,156,184,0.82);
   color:var(--sv-ui-text3);
}
}


Line 831: Line 947:
   letter-spacing:0.22px;
   letter-spacing:0.22px;
   text-transform:uppercase;
   text-transform:uppercase;
   color:rgba(182,198,224,0.94);
   color:var(--sv-ui-text3);
}
}


Line 888: Line 1,004:


   border-radius:12px;
   border-radius:12px;
  border:1px solid rgba(59,75,99,0.85);
   background-image:none;
  background:#1a2434;
   box-shadow:none;
   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);
}
}


Line 900: Line 1,014:
   letter-spacing:0.12px;
   letter-spacing:0.12px;
   text-transform:uppercase;
   text-transform:uppercase;
   color:rgba(182,198,224,0.95);
   color:var(--sv-ui-text3);
}
}


Line 911: Line 1,025:
   font-size:13px;
   font-size:13px;
   line-height:1.02;
   line-height:1.02;
   color:rgba(245,249,255,0.98);
   color:var(--sv-ui-text1);
}
}


Line 935: Line 1,049:


   border-radius:13px;
   border-radius:13px;
  border:1px solid rgba(75,99,136,0.58);
  background:#223248;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
}


Line 949: Line 1,059:
   font-size:13px;
   font-size:13px;
   line-height:1.10;
   line-height:1.10;
   color:rgba(245,249,255,0.97);
   color:var(--sv-ui-text1);
   text-align:center;
   text-align:center;
}
}
Line 984: Line 1,094:


/* ==========================================================================
/* ==========================================================================
   9) EFFECT CARDS
   10) EFFECT CARDS
   ========================================================================== */
   ========================================================================== */


Line 1,003: Line 1,113:


   border-radius:16px;
   border-radius:16px;
  border:1px solid rgba(59,75,99,0.85);
   background-image:none;
  background:#1f2937;
   box-shadow:none;
   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);


   color:rgba(245,249,255,0.94);
   color:var(--sv-ui-text2);
}
}


Line 1,023: Line 1,131:


   border-radius:16px;
   border-radius:16px;
  border:1px solid rgba(75,99,136,0.55);
  background:#273449;
}
}


Line 1,040: Line 1,146:
   font-size:15px;
   font-size:15px;
   line-height:1.15;
   line-height:1.15;
   color:rgba(245,249,255,0.98);
   color:var(--sv-ui-text1);
}
}


Line 1,053: Line 1,159:
.sv-gi-card .sv-ref-stat,
.sv-gi-card .sv-ref-stat,
.sv-skill-card .sv-ref-stat{
.sv-skill-card .sv-ref-stat{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  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);
   font-weight:900;
   font-weight:900;
   font-size:12px;
   font-size:12px;
   color:rgba(215,226,244,0.92);
   color:var(--sv-ui-text1);
}
}


Line 1,073: Line 1,169:
   font-weight:900;
   font-weight:900;
   font-size:13px;
   font-size:13px;
   color:rgba(182,198,224,0.95);
   color:var(--sv-ui-text3);
}
}


/* ==========================================================================
/* ==========================================================================
   10) RESPONSIVE (card/layout)
   11) RESPONSIVE (card/layout)
   ========================================================================== */
   ========================================================================== */


Line 1,145: Line 1,241:
   .sv-skill-title{ font-size:18px; }
   .sv-skill-title{ font-size:18px; }
   .sv-skill-desc{ font-size:13px; }
   .sv-skill-desc{ font-size:13px; }
  .sv-gi-card .sv-scaling-grid,
  .sv-skill-card .sv-scaling-grid{ grid-template-columns:1fr; }


   .sv-skill-tabs .sv-mech-panel{
   .sv-skill-tabs .sv-mech-panel{
Retrieved from "https://spiritvale.info/wiki/Module:GameInfo/styles.css"