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 413: Line 413:
.sv_skill_scaling__body{
.sv_skill_scaling__body{
   display:grid;
   display:grid;
   grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
   grid-template-columns:minmax(0, 1.2fr) minmax(0, 0.86fr) minmax(0, 1fr);
   gap:10px;
   gap:10px;
   align-items:start;
   align-items:start;
Line 427: Line 427:
}
}


/* Primary column */
.sv_skill_scaling__column--primary{
.sv_skill_scaling__column--primary{
   padding:14px 12px;
   padding:14px 12px;
   min-height:100%;
   min-height:330px;
   display:flex;
   display:flex;
   flex-direction:column;
   flex-direction:column;
Line 439: Line 440:
.sv_skill_scaling__primary-value{
.sv_skill_scaling__primary-value{
   font-weight:900;
   font-weight:900;
   font-size:42px;
   font-size:44px;
   line-height:0.95;
   line-height:0.95;
   letter-spacing:-0.5px;
   letter-spacing:-0.5px;
Line 461: Line 462:
}
}


.sv_skill_scaling__stats-grid,
.sv_skill_scaling__stats-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
 
.sv_skill_scaling__core-grid{
.sv_skill_scaling__core-grid{
   display:grid;
   display:grid;
   grid-template-columns:1fr;
   grid-template-columns:repeat(3, minmax(0, 1fr));
   gap:8px;
   gap:8px;
}
}


.sv_skill_scaling__pill{
.sv_skill_scaling__pill{
  position:relative;
   min-width:0;
   min-width:0;
  min-height:52px;
   padding:10px 12px;
   padding:10px 12px;
   border-radius:14px;
   border-radius:14px;
Line 484: Line 490:


.sv_skill_scaling__stat-pill{
.sv_skill_scaling__stat-pill{
  min-height:74px;
   display:flex;
   display:flex;
   align-items:center;
   align-items:center;
Line 495: Line 502:
   display:flex;
   display:flex;
   align-items:center;
   align-items:center;
}
.sv_skill_scaling__stat-visual{
  min-width:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.sv_skill_scaling__stat-icon{
  flex:0 0 auto;
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:0;
  line-height:0;
}
.sv_skill_scaling__stat-icon a{
  text-decoration:none;
}
.sv_skill_scaling__stat-icon .sv-img img{
  box-shadow:none;
}
.sv_skill_scaling__stat-icon .sv-miss{
  width:14px;
  height:14px;
  font-size:10px;
  line-height:1;
}
}


Line 500: Line 540:
   flex:0 0 auto;
   flex:0 0 auto;
   font-weight:900;
   font-weight:900;
   font-size:15px;
   font-size:18px;
   line-height:1.05;
   line-height:1.05;
   color:rgba(245,249,255,0.98);
   color:rgba(245,249,255,0.98);
Line 507: Line 547:
.sv_skill_scaling__stat-label{
.sv_skill_scaling__stat-label{
   font-weight:900;
   font-weight:900;
   font-size:13px;
   font-size:16px;
   line-height:1.05;
   line-height:1.05;
   letter-spacing:0.25px;
   letter-spacing:0.25px;
Line 514: Line 554:
}
}


.sv_skill_scaling__stat-def{
/* Full-pill definitions overlay for active pills */
   min-width:0;
.sv_skill_scaling__stat-hit{
}
   position:absolute;
 
  top:0;
.sv_skill_scaling__stat-def .sv-def{
   right:0;
   display:inline-flex;
   bottom:0;
   align-items:center;
   left:0;
   gap:6px;
   z-index:5;
   min-width:0;
   opacity:0;
   cursor:default;
}
}


.sv_skill_scaling__stat-def .sv-def-text{
.sv_skill_scaling__stat-hit .sv-def{
  color:inherit;
   display:block;
  border-bottom:none;
   width:100%;
  font-weight:900;
   height:100%;
  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;
}
}


Line 555: Line 582:


.sv_skill_scaling__stat-pill.is-inactive .sv_skill_scaling__stat-label{
.sv_skill_scaling__stat-pill.is-inactive .sv_skill_scaling__stat-label{
   color:rgba(140,156,184,0.78);
   color:rgba(140,156,184,0.82);
}
}


Line 565: Line 592:
}
}


.sv_skill_scaling__stat-pill.is-active .sv_skill_scaling__stat-label,
.sv_skill_scaling__stat-pill.is-active .sv_skill_scaling__stat-value{
.sv_skill_scaling__stat-pill.is-active .sv_skill_scaling__stat-value{
   color:rgba(245,249,255,0.99);
   color:rgba(245,249,255,0.99);
}
}


/* Per-stat color treatments */
/* Darker per-stat colors based on icon families */
.sv_skill_scaling__stat-pill--str.is-active{
.sv_skill_scaling__stat-pill--str.is-active{
   border-color:rgba(165,89,103,0.95);
   border-color:rgba(145,63,82,0.96);
   background:#311822;
   background:#32131d;
   background-image:linear-gradient(180deg, rgba(196,101,118,0.18), rgba(0,0,0,0.00));
   background-image:linear-gradient(180deg, rgba(190,88,113,0.16), 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-label,
.sv_skill_scaling__stat-pill--str.is-active .sv_skill_scaling__stat-value{
.sv_skill_scaling__stat-pill--str.is-active .sv_skill_scaling__stat-value{
   color:#ffd7de;
   color:#ffdce5;
}
}


.sv_skill_scaling__stat-pill--vit.is-active{
.sv_skill_scaling__stat-pill--vit.is-active{
   border-color:rgba(91,157,117,0.95);
   border-color:rgba(158,112,22,0.96);
   background:#173123;
   background:#352609;
   background-image:linear-gradient(180deg, rgba(96,188,132,0.18), rgba(0,0,0,0.00));
   background-image:linear-gradient(180deg, rgba(210,144,18,0.15), 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-label,
.sv_skill_scaling__stat-pill--vit.is-active .sv_skill_scaling__stat-value{
.sv_skill_scaling__stat-pill--vit.is-active .sv_skill_scaling__stat-value{
   color:#dbffe7;
   color:#ffefc9;
}
}


.sv_skill_scaling__stat-pill--dex.is-active{
.sv_skill_scaling__stat-pill--dex.is-active{
   border-color:rgba(183,146,84,0.95);
   border-color:rgba(118,146,24,0.96);
   background:#342716;
   background:#243208;
   background-image:linear-gradient(180deg, rgba(232,187,90,0.16), rgba(0,0,0,0.00));
   background-image:linear-gradient(180deg, rgba(159,194,27,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-label,
.sv_skill_scaling__stat-pill--dex.is-active .sv_skill_scaling__stat-value{
.sv_skill_scaling__stat-pill--dex.is-active .sv_skill_scaling__stat-value{
   color:#fff0c9;
   color:#edf8cc;
}
}


.sv_skill_scaling__stat-pill--agi.is-active{
.sv_skill_scaling__stat-pill--agi.is-active{
   border-color:rgba(75,160,154,0.95);
   border-color:rgba(125,62,152,0.96);
   background:#153132;
   background:#2b1438;
   background-image:linear-gradient(180deg, rgba(80,191,181,0.17), rgba(0,0,0,0.00));
   background-image:linear-gradient(180deg, rgba(165,82,198,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-label,
.sv_skill_scaling__stat-pill--agi.is-active .sv_skill_scaling__stat-value{
.sv_skill_scaling__stat-pill--agi.is-active .sv_skill_scaling__stat-value{
   color:#d7fffb;
   color:#f0dcff;
}
}


.sv_skill_scaling__stat-pill--int.is-active{
.sv_skill_scaling__stat-pill--int.is-active{
   border-color:rgba(104,129,201,0.96);
   border-color:rgba(45,118,191,0.96);
   background:#18233d;
   background:#11263d;
   background-image:linear-gradient(180deg, rgba(101,141,255,0.20), rgba(0,0,0,0.00));
   background-image:linear-gradient(180deg, rgba(35,140,230,0.18), 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-label,
.sv_skill_scaling__stat-pill--int.is-active .sv_skill_scaling__stat-value{
.sv_skill_scaling__stat-pill--int.is-active .sv_skill_scaling__stat-value{
   color:#dce8ff;
   color:#d8eeff;
}
}


.sv_skill_scaling__stat-pill--luk.is-active{
.sv_skill_scaling__stat-pill--luk.is-active{
   border-color:rgba(147,101,183,0.95);
   border-color:rgba(183,150,22,0.96);
   background:#281739;
   background:#3a2f07;
   background-image:linear-gradient(180deg, rgba(184,114,232,0.18), rgba(0,0,0,0.00));
   background-image:linear-gradient(180deg, rgba(234,194,9,0.16), 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-label,
.sv_skill_scaling__stat-pill--luk.is-active .sv_skill_scaling__stat-value{
.sv_skill_scaling__stat-pill--luk.is-active .sv_skill_scaling__stat-value{
   color:#f0dcff;
   color:#fff2ba;
}
}


Line 641: Line 669:


.sv_skill_scaling__core-pill{
.sv_skill_scaling__core-pill{
  min-height:92px;
   display:flex;
   display:flex;
   flex-direction:column;
   flex-direction:column;
Line 673: Line 702:
   font-size:12px;
   font-size:12px;
   font-weight:900;
   font-weight:900;
   letter-spacing:0.25px;
   letter-spacing:0.22px;
   text-transform:uppercase;
   text-transform:uppercase;
   color:rgba(182,198,224,0.95);
   color:rgba(182,198,224,0.95);
Line 1,006: Line 1,035:
   .sv_skill_scaling__body{
   .sv_skill_scaling__body{
     grid-template-columns:1fr;
     grid-template-columns:1fr;
  }
  .sv_skill_scaling__column--primary{
    min-height:170px;
   }
   }


   .sv_skill_scaling__primary-value{
   .sv_skill_scaling__primary-value{
     font-size:38px;
     font-size:40px;
   }
   }
}
}
Line 1,096: Line 1,129:
   .sv_skill_scaling__level{
   .sv_skill_scaling__level{
     padding:0 0 9px;
     padding:0 0 9px;
  }
  .sv_skill_scaling__column--primary{
    min-height:150px;
   }
   }


   .sv_skill_scaling__primary-value{
   .sv_skill_scaling__primary-value{
     font-size:34px;
     font-size:36px;
     line-height:0.98;
     line-height:0.98;
   }
   }
Line 1,109: Line 1,146:


   .sv_skill_scaling__pill{
   .sv_skill_scaling__pill{
    min-height:48px;
     padding:9px 10px;
     padding:9px 10px;
  }
  .sv_skill_scaling__stat-pill{
    min-height:64px;
  }
  .sv_skill_scaling__stat-label{
    font-size:14px;
   }
   }


   .sv_skill_scaling__stat-value{
   .sv_skill_scaling__stat-value{
     font-size:14px;
     font-size:16px;
  }
 
  .sv_skill_scaling__core-pill{
    min-height:82px;
   }
   }


   .sv_skill_scaling__core-value{
   .sv_skill_scaling__core-value{
     font-size:17px;
     font-size:17px;
  }
  .sv_skill_scaling__core-label{
    font-size:11px;
    letter-spacing:0.15px;
   }
   }


Line 1,137: Line 1,190:
     flex:1 1 100%;
     flex:1 1 100%;
     max-width:100%;
     max-width:100%;
  }
  .sv_skill_scaling__core-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
   }
   }
}
}
Retrieved from "https://spiritvale.info/wiki/Module:GameInfo/styles.css"