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 344: Line 344:
   box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
   box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);


   /* Place slider first, helper text under it, tick/check row under slider */
   /* Place slider first, helper text under it */
   display:flex;
   display:flex;
   flex-direction:column;
   flex-direction:column;
Line 350: Line 350:
}
}


/* Slider row: actual slider + end-of-bar value readout (added by JS) */
/* Remove numbered checkmarks row entirely */
.sv-skill-level .sv-level-ticklabels{
  display:none;
}
 
/* Slider row: [bar on the left] [level badge on the right] */
.sv-skill-level .sv-level-slider{
.sv-skill-level .sv-level-slider{
   display:flex;
   display:flex;
Line 370: Line 375:
   flex:0 0 auto;
   flex:0 0 auto;
   min-width:30px;
   min-width:30px;
   padding:2px 8px;
   padding:2px 8px;
   border-radius:999px;
   border-radius:999px;
  border:1px solid rgba(245,249,255,0.16);
  background:rgba(255,255,255,0.04);


   font-weight:900;
   font-weight:900;
Line 380: Line 382:
   line-height:1.25;
   line-height:1.25;
   letter-spacing:0.15px;
   letter-spacing:0.15px;
  color:rgba(245,249,255,0.94);


   text-align:center;
   text-align:center;
Line 400: Line 401:
   justify-content:center;
   justify-content:center;
   gap:8px;
   gap:8px;
  /* Allow graceful wrap on ultra-small screens */
   flex-wrap:wrap;
   flex-wrap:wrap;


Line 411: Line 410:
.sv-gi-card .sv-level-label,
.sv-gi-card .sv-level-label,
.sv-skill-card .sv-level-label{
.sv-skill-card .sv-level-label{
   font-size:0;     /* hides emitted text + numbers */
   font-size:0;
   line-height:0;
   line-height:0;
   margin:0;
   margin:0;
Line 448: Line 447:
}
}


/* Overcap badge pill — matched to helper text, overrides sv-tip-btn icon sizing */
/* Overcap badge pill — uses scaling-item tone + overrides sv-tip-btn icon sizing */
.sv-skill-level .sv-overcap-btn{
.sv-skill-level .sv-overcap-btn{
   position:static;
   position:static;
Line 463: Line 462:
   justify-content:center;
   justify-content:center;


  /* match helper text */
   font-weight:900;
   font-weight:900;
   font-size:13px;
   font-size:13px;
   line-height:1.25;
   line-height:1.25;
   letter-spacing:0.15px;
   letter-spacing:0.15px;
  color:rgba(245,249,255,0.94);


   padding:1px 8px !important;
   padding:1px 8px !important;
   border-radius:999px;
   border-radius:999px;
  border:1px solid rgba(245,249,255,0.16);
  background:rgba(255,255,255,0.04);
  background-image:none !important;
  box-shadow:none !important;


   cursor:pointer;
   cursor:pointer;
Line 489: Line 483:


.sv-skill-level .sv-overcap-btn:hover{
.sv-skill-level .sv-overcap-btn:hover{
   background:rgba(255,255,255,0.07);
   background:#2e3f59;
  border-color:rgba(245,249,255,0.22);
}
}


.sv-skill-level .sv-overcap-btn:active{
.sv-skill-level .sv-overcap-btn:active{
   background:rgba(255,255,255,0.10);
   background:#314463;
   transform:translateY(1px);
   transform:translateY(1px);
}
/* Numbered checkmarks row (built by Common.js into .sv-level-ticklabels) */
.sv-skill-level .sv-level-ticklabels{
  margin:2px 0 0;
  padding:0 2px;
  display:flex;
  align-items:flex-start;
}
/* Full mode: distribute evenly */
.sv-skill-level .sv-level-ticklabels[data-sv-ticks$="/full"]{
  justify-content:space-between;
}
.sv-skill-level .sv-level-ticklabels[data-sv-ticks$="/full"] .sv-level-tick{
  flex:1 1 0;
  text-align:center;
}
/* Min/max mode: pin to edges */
.sv-skill-level .sv-level-ticklabels[data-sv-ticks$="/minmax"]{
  justify-content:space-between;
}
.sv-skill-level .sv-level-ticklabels[data-sv-ticks$="/minmax"] .sv-level-tick{
  flex:0 0 auto;
}
.sv-skill-level .sv-level-tick--min{ text-align:left; }
.sv-skill-level .sv-level-tick--max{ text-align:right; }
.sv-skill-level .sv-level-tick{
  min-width:0;
  font-weight:900;
  color:rgba(215,226,244,0.92);
}
.sv-skill-level .sv-level-tickmark{
  display:block;
  font-size:12px;
  line-height:1;
  opacity:0.18;
}
.sv-skill-level .sv-level-ticknum{
  display:block;
  margin-top:1px;
  font-size:10px;
  line-height:1;
  opacity:0.72;
}
/* Checked/current states */
.sv-skill-level .sv-level-tick--checked .sv-level-tickmark{ opacity:0.92; }
.sv-skill-level .sv-level-tick--checked .sv-level-ticknum{ opacity:0.95; }
.sv-skill-level .sv-level-tick--current .sv-level-tickmark,
.sv-skill-level .sv-level-tick--current .sv-level-ticknum{
  color:rgba(245,249,255,0.98);
  opacity:1;
}
}


Line 575: Line 509:
   .sv-skill-level .sv-level-label:after{
   .sv-skill-level .sv-level-label:after{
     font-size:12px;
     font-size:12px;
  }
  .sv-skill-level .sv-level-range--custom,
  .sv-skill-level .sv-level-range[data-sv-slider="1"]{
    height:24px;
  }
  .sv-skill-level .sv-level-track{
    margin-top:-3px;
    height:6px;
    width:calc(100% - 16px);
  }
  .sv-skill-level .sv-level-thumb{
    margin-top:-8px;
    margin-left:-8px;
    width:16px;
    height:16px;
  }
  .sv-skill-level .sv-level-bubble{
    top:-28px;
    padding:5px 9px;
    font-size:11px;
   }
   }


Line 607: Line 517:
     min-height:0 !important;
     min-height:0 !important;
   }
   }
  .sv-skill-level .sv-level-tickmark{ font-size:11px; }
  .sv-skill-level .sv-level-ticknum{ font-size:9px; }
}
}


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