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:
   Surface hierarchy:
   Surface hierarchy:
   - bg1 = outer card / inactive neutral base
   - bg1 = outer card / inactive neutral base
   - bg2 = first nested section surface
   - bg2 = grouped section surface
   - bg3 = inner framed block / pill surface
   - bg3 = inner framed block / pill surface
  Raw per-attribute semantic colors remain explicit.
*/
*/


Line 19: Line 18:
   overflow:visible;
   overflow:visible;


  /* Base component surface. */
   background:var(--sv-ui-bg1);
   background:var(--sv-ui-bg1);
   background-image:none;
   background-image:none;
Line 57: Line 55:
.sv-skill-icon,
.sv-skill-icon,
.sv-meta-icon,
.sv-meta-icon,
.sv-ref-ico{
.sv-ref-ico,
.sv_skill_scaling__stat-icon{
   font-size:0;
   font-size:0;
   line-height:0;
   line-height:0;
Line 64: Line 63:
.sv-skill-icon a,
.sv-skill-icon a,
.sv-meta-icon a,
.sv-meta-icon a,
.sv-ref-ico a{ text-decoration:none; }
.sv-ref-ico a,
.sv_skill_scaling__stat-icon a{ text-decoration:none; }


.sv-skill-icon .sv-miss{
.sv-skill-icon .sv-miss{
Line 311: Line 311:
   background-image:none;
   background-image:none;
   box-shadow:none;
   box-shadow:none;
}
@media (max-width:700px){
  .sv-skill-meta-block{
    grid-template-columns:minmax(0, 1fr);
  }
  .sv-skill-meta-block__bubble{
    min-height:auto;
    max-height:none;
  }
}
}


Line 337: Line 326:


   border-radius:16px;
   border-radius:16px;
  /* Grouped section surface. */
   background:var(--sv-ui-bg2);
   background:var(--sv-ui-bg2);
   background-image:none;
   background-image:none;
Line 355: Line 342:


   border-radius:18px;
   border-radius:18px;
  /* Grouped section surface. */
   background:var(--sv-ui-bg2);
   background:var(--sv-ui-bg2);
   background-image:none;
   background-image:none;
Line 449: Line 434:
}
}


/* Damage. */
.sv_skill_scaling__column--primary{
.sv_skill_scaling__column--primary{
   display:flex;
   display:flex;
Line 480: Line 464:
}
}


/* Attributes. */
.sv_skill_scaling__stats-grid{
.sv_skill_scaling__stats-grid{
   display:grid;
   display:grid;
Line 516: Line 499:
}
}


/* Stat chips keep a fixed size. */
.sv_skill_scaling__stat-pill{
.sv_skill_scaling__stat-pill{
   border-radius:999px;
   border-radius:999px;
Line 555: Line 537:
   align-items:center;
   align-items:center;
   justify-content: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{
.sv_skill_scaling__stat-icon .sv-img img{
Line 583: Line 560:
}
}


.sv_skill_scaling__stat-hit{
.sv_skill_scaling__stat-hit,
.sv_skill_scaling__core-hit{
   position:absolute;
   position:absolute;
   top:0; right:0; bottom:0; left:0;
   top:0; right:0; bottom:0; left:0;
Line 590: Line 568:
}
}


.sv_skill_scaling__stat-hit .sv-def{
.sv_skill_scaling__stat-hit .sv-def,
.sv_skill_scaling__core-hit .sv-def{
   display:block;
   display:block;
   width:100%;
   width:100%;
Line 613: Line 592:
}
}


.sv_skill_scaling__stat-pill.is-active{
  box-shadow:none;
}
/* Per-stat semantic colors. */
.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);
Line 660: Line 634:
.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; }


/* Core grid. */
.sv_skill_scaling__core-grid{
.sv_skill_scaling__core-grid{
   display:grid;
   display:grid;
Line 752: Line 725:
.sv-skill-tabs .sv-tabpanel{
.sv-skill-tabs .sv-tabpanel{
   min-width:0;
   min-width:0;
  /* Keep shared tab colors and flatten. */
   background-image:none;
   background-image:none;
   box-shadow:none;
   box-shadow:none;
Line 770: Line 741:
}
}


/* Section framing inside panels. */
.sv-skill-tabs .sv-tab-section + .sv-tab-section{
.sv-skill-tabs .sv-tab-section + .sv-tab-section{
   margin-top:12px;
   margin-top:12px;
Line 776: Line 746:


.sv-skill-tabs .sv-tab-section-title{
.sv-skill-tabs .sv-tab-section-title{
  width:100%;
   margin:0 0 8px;
   margin:0 0 8px;
  text-align:center;


   font-weight:900;
   font-weight:900;
Line 795: Line 767:
   column-gap:16px;
   column-gap:16px;
   row-gap:12px;
   row-gap:12px;
   align-items:start;
   align-items:stretch;
}
}


Line 801: Line 773:
   min-width:0;
   min-width:0;
   max-width:100%;
   max-width:100%;
  min-height:176px;
  max-height:176px;
   padding:10px 12px;
   padding:10px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;


   border-radius:16px;
   border-radius:16px;
Line 811: Line 791:
.sv-skill-tabs .sv-mech-panel__mods{
.sv-skill-tabs .sv-mech-panel__mods{
   grid-column:1;
   grid-column:1;
  overflow:hidden;
}
}


Line 819: Line 798:
}
}


/* Mods use a compact 3x3 matrix. */
.sv-skill-tabs .sv-mech-mod-grid{
.sv-skill-tabs .sv-mech-panel__mods .sv-kw-grid{
   display:grid;
   display:grid;
   grid-template-columns:repeat(3, minmax(0, max-content));
   grid-template-columns:repeat(3, minmax(0, 1fr));
   justify-content:start;
   justify-content:center;
   justify-items:start;
   justify-items:stretch;
   align-content:start;
   align-content:center;
   gap:8px 10px;
   gap:8px 10px;


  width:100%;
   max-width:100%;
   max-width:100%;
}
}


.sv-skill-tabs .sv-mech-panel__mods .sv-kw-cell{
.sv-skill-tabs .sv-mech-mod-pill{
   width:auto;
   position:relative;
   min-width:84px;
   min-width:0;
  max-width:100%;
   min-height:48px;
   min-height:0;
   padding:7px 9px 6px;
   padding:7px 9px 6px;


Line 845: Line 823:


   border-radius:14px;
   border-radius:14px;
  border:1px solid var(--sv-ui-line2);
   background:var(--sv-ui-bg3);
   background:var(--sv-ui-bg3);
   background-image:none;
   background-image:none;
Line 850: Line 829:
}
}


.sv-skill-tabs .sv-mech-panel__mods .sv-kw-label{
.sv-skill-tabs .sv-mech-mod-pill__label{
  width:100%;
  min-width:0;
 
   font-weight:900;
   font-weight:900;
   font-size:10px;
   font-size:10px;
Line 859: Line 841:
}
}


.sv-skill-tabs .sv-mech-panel__mods .sv-kw-value{
.sv-skill-tabs .sv-mech-mod-pill__value{
   margin-top:4px;
   margin-top:4px;
  width:100%;
  min-width:0;
   word-wrap:break-word;
   word-wrap:break-word;
   overflow-wrap:anywhere;
   overflow-wrap:anywhere;
Line 870: Line 854:
}
}


/* Keywords use a centered rail. */
.sv-skill-tabs .sv-mech-mod-pill__hit,
.sv-skill-tabs .sv-mech-keyword-pill__hit{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:5;
  opacity:0;
}
 
.sv-skill-tabs .sv-mech-mod-pill__hit .sv-def,
.sv-skill-tabs .sv-mech-keyword-pill__hit .sv-def{
  display:block;
  width:100%;
  height:100%;
}
 
.sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills{
.sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills{
   display:flex;
   display:grid;
   flex-direction:column;
   grid-template-columns:repeat(2, minmax(0, 1fr));
   align-items:stretch;
   align-items:stretch;
   gap:8px;
   gap:8px;
  width:100%;
}
}


Line 891: Line 893:


   border-radius:14px;
   border-radius:14px;
  border:1px solid var(--sv-ui-line2);
   background:var(--sv-ui-bg3);
   background:var(--sv-ui-bg3);
  background-image:none;
}
}


Line 906: Line 910:
}
}


.sv-skill-tabs .sv-mech-keyword-pill__hit{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:5;
  opacity:0;
}
.sv-skill-tabs .sv-mech-keyword-pill__hit .sv-def{
  display:block;
  width:100%;
  height:100%;
}
/* Larger keyword mode. */
.sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills.sv-tab-pills--xl .sv-mech-keyword-pill,
.sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills.sv-tab-pills--xl .sv-mech-keyword-pill,
.sv-skill-tabs .sv-mech-keyword-pill.sv-pill--xl{
.sv-skill-tabs .sv-mech-keyword-pill.sv-pill--xl{
Line 1,034: Line 1,021:


   .sv-skill-title{ font-size:20px; }
   .sv-skill-title{ font-size:20px; }
  .sv-skill-meta{ grid-template-columns:repeat(2, minmax(0, 1fr)); }


   .sv_skill_scaling__body{
   .sv_skill_scaling__body{
Line 1,059: Line 1,044:
   }
   }


   .sv-skill-tabs .sv-mech-panel__mods .sv-kw-grid{
   .sv-skill-tabs .sv-mech-panel__group{
     grid-template-columns:repeat(3, minmax(0, max-content));
     min-height:172px;
    max-height:172px;
  }
 
  .sv-skill-tabs .sv-mech-mod-grid{
     gap:8px 8px;
     gap:8px 8px;
   }
   }


   .sv-skill-tabs .sv-mech-panel__mods .sv-kw-cell{
   .sv-skill-tabs .sv-mech-mod-pill{
     min-width:80px;
     min-height:46px;
     padding:6px 8px 5px;
     padding:6px 8px 5px;
   }
   }


   .sv-skill-tabs .sv-mech-panel__mods .sv-kw-value{ font-size:12px; }
   .sv-skill-tabs .sv-mech-mod-pill__value{ font-size:12px; }


   .sv-skill-tabs .sv-mech-keyword-pill{
   .sv-skill-tabs .sv-mech-keyword-pill{
Line 1,086: Line 1,075:
   .sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills.sv-tab-pills--xl .sv-mech-keyword-pill__label,
   .sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills.sv-tab-pills--xl .sv-mech-keyword-pill__label,
   .sv-skill-tabs .sv-mech-keyword-pill.sv-pill--xl .sv-mech-keyword-pill__label{ font-size:13px; }
   .sv-skill-tabs .sv-mech-keyword-pill.sv-pill--xl .sv-mech-keyword-pill__label{ font-size:13px; }
}
@media (max-width:700px){
  .sv-skill-meta-block{
    grid-template-columns:minmax(0, 1fr);
  }
  .sv-skill-meta-block__bubble{
    min-height:auto;
    max-height:none;
  }
}
}


Line 1,121: Line 1,121:
   }
   }


   .sv_skill_scaling__cluster{
   .sv_skill_scaling__cluster{ height:auto; }
    height:auto;
  }


   .sv_skill_scaling__primary-value{ font-size:30px; }
   .sv_skill_scaling__primary-value{ font-size:30px; }
Line 1,146: Line 1,144:


   .sv-skill-tabs .sv-mech-panel__group{
   .sv-skill-tabs .sv-mech-panel__group{
    min-height:auto;
    max-height:none;
     padding:9px 10px;
     padding:9px 10px;
   }
   }


   .sv-skill-tabs .sv-mech-panel__keywords{ margin-top:0; }
   .sv-skill-tabs .sv-mech-mod-grid{
 
  .sv-skill-tabs .sv-mech-panel__mods .sv-kw-grid{
    grid-template-columns:repeat(3, minmax(0, max-content));
     gap:8px 8px;
     gap:8px 8px;
   }
   }


   .sv-skill-tabs .sv-mech-panel__mods .sv-kw-cell{
   .sv-skill-tabs .sv-mech-mod-pill{
     min-width:76px;
     min-height:44px;
     padding:6px 8px 5px;
     padding:6px 8px 5px;
     border-radius:14px;
     border-radius:14px;
   }
   }


   .sv-skill-tabs .sv-mech-panel__mods .sv-kw-label{
   .sv-skill-tabs .sv-mech-mod-pill__label{
     font-size:9px;
     font-size:9px;
     line-height:1.04;
     line-height:1.04;
   }
   }


   .sv-skill-tabs .sv-mech-panel__mods .sv-kw-value{
   .sv-skill-tabs .sv-mech-mod-pill__value{
     margin-top:3px;
     margin-top:3px;
     font-size:12px;
     font-size:12px;
Line 1,197: Line 1,194:
   .sv-skill-card .sv-skill-meta,
   .sv-skill-card .sv-skill-meta,
   .sv-gi-card .sv-skill-meta{
   .sv-gi-card .sv-skill-meta{
    grid-template-columns:repeat(2, minmax(0, 1fr));
     gap:6px;
     gap:6px;
     max-width:200px;
     max-width:200px;
Line 1,240: Line 1,236:
   }
   }


   .sv-skill-tabs .sv-mech-panel__mods .sv-kw-grid{
   .sv-skill-tabs .sv-mech-mod-grid{
     grid-template-columns:repeat(2, minmax(0, max-content));
     grid-template-columns:repeat(2, minmax(0, 1fr));
     gap:8px 8px;
     gap:8px 8px;
   }
   }


   .sv-skill-tabs .sv-mech-panel__mods .sv-kw-cell{
   .sv-skill-tabs .sv-mech-mod-pill{
     min-width:74px;
     min-height:42px;
     padding:6px 7px 5px;
     padding:6px 7px 5px;
   }
   }
Retrieved from "https://spiritvale.info/wiki/Module:GameInfo/styles.css"