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 350: Line 350:
}
}


/* Remove numbered checkmarks row entirely */
/* Remove numbered tick labels entirely (end-value replaces them) */
.sv-skill-level .sv-level-ticklabels{
.sv-skill-level .sv-level-ticklabels{
   display:none;
   display:none;
}
}


/* Slider row: [bar on the left] [level badge on the right] */
/* Slider row: FORCE normal LTR order even if any global CSS interferes */
.sv-skill-level .sv-level-slider{
.sv-skill-level .sv-level-slider{
   display:flex;
   display:flex;
  flex-direction:row !important;
  direction:ltr;
   align-items:center;
   align-items:center;
   gap:10px;
   gap:10px;
Line 363: Line 365:
}
}


/* Make the slider element consume the row width */
/* Bar must be left and flexible */
.sv-skill-level .sv-level-slider input.sv-level-range[type="range"],
.sv-skill-level .sv-level-slider input.sv-level-range[type="range"],
.sv-skill-level .sv-level-slider .sv-level-range--custom,
.sv-skill-level .sv-level-slider .sv-level-range--custom,
Line 369: Line 371:
   flex:1 1 auto;
   flex:1 1 auto;
   min-width:0;
   min-width:0;
  order:1;
}
}


/* End-of-bar value (appended by Common.js) */
/* End-of-bar value (appended by Common.js): pinned to the right */
.sv-skill-level .sv-level-endvalue{
.sv-skill-level .sv-level-endvalue{
   flex:0 0 auto;
   flex:0 0 auto;
  order:2;
   min-width:30px;
   min-width:30px;
   padding:2px 8px;
   padding:2px 8px;
Line 387: Line 391:
}
}


/* Reorder siblings without changing Lua/JS markup */
/* Helper row (text + overcap pill) */
.sv-skill-level .sv-level-range--custom,
.sv-skill-level .sv-level-range[data-sv-slider="1"]{
  order:1;
}
 
.sv-skill-level .sv-level-ui{
.sv-skill-level .sv-level-ui{
  order:2;
  /* Helper text + overcap pill on one line */
   display:flex;
   display:flex;
   align-items:center;
   align-items:center;
Line 426: Line 422:
}
}


/* Helper text */
.sv-gi-card .sv-level-label:after,
.sv-gi-card .sv-level-label:after,
.sv-skill-card .sv-level-label:after{
.sv-skill-card .sv-level-label:after{
Line 440: Line 435:
}
}


/* Overcap pill (Option A) */
/* Overcap pill wrapper */
.sv-skill-level .sv-overcap-tip{
.sv-skill-level .sv-overcap-tip{
   display:inline-flex;
   display:inline-flex;
Line 447: Line 442:
}
}


/* Overcap badge pill — uses scaling-item tone + overrides sv-tip-btn icon sizing */
/* Overcap button: pill reset (tone comes from shared pill rule below) */
.sv-skill-level .sv-overcap-btn{
.sv-skill-level .sv-overcap-btn{
   position:static;
   position:static;
Line 462: Line 457:
   justify-content:center;
   justify-content:center;


  /* match helper text */
   font-weight:900;
   font-weight:900;
   font-size:13px;
   font-size:13px;
Line 482: Line 476:
}
}


/* Hover/active tint (keeps the same “scaling pill” family) */
.sv-skill-level .sv-overcap-btn:hover{
.sv-skill-level .sv-overcap-btn:hover{
   background:#2e3f59;
   background:#2e3f59;
Line 576: Line 571:
}
}


/* Shared pill tone:
  - scaling items
  - level end-value
  - overcap pill
*/
.sv-gi-card .sv-scaling-item,
.sv-gi-card .sv-scaling-item,
.sv-skill-card .sv-scaling-item{
.sv-skill-card .sv-scaling-item,
  padding:8px 10px;
.sv-skill-level .sv-level-endvalue,
  border-radius:14px;
.sv-skill-level .sv-overcap-btn{
   border:1px solid rgba(59,75,99,0.85);
   border:1px solid rgba(59,75,99,0.85);
   background:#273449;
   background:#273449;
Line 585: Line 585:
   box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
   box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
   color:rgba(215,226,244,0.92);
   color:rgba(215,226,244,0.92);
}
.sv-gi-card .sv-scaling-item,
.sv-skill-card .sv-scaling-item{
  padding:8px 10px;
  border-radius:14px;
   font-weight:800;
   font-weight:800;
   font-size:13px;
   font-size:13px;