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 edit
No edit summary
Tags: Mobile edit Mobile web edit
No edit summary
Tags: Mobile edit Mobile web edit
 
(11 intermediate revisions by the same user not shown)
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.
*/
*/
/* -------------------------------------------------------------------------- */
/* Canonical ownership map                                                    */
/* -------------------------------------------------------------------------- */
/* This sheet owns GameInfo-family presentation only. That includes:          */
/* - GameInfo card shells and internal layout                                  */
/* - skill card presentation and module-local responsive changes              */
/* - module-local pills, panels, tabs, metadata blocks, and reference blocks  */
/*                                                                            */
/* It does NOT own:                                                            */
/* - shared site tokens / utilities / slider anatomy (Common.css)              */
/* - skin and chrome theme logic (Citizen.css)                                */
/* - definitions-only token styling (Definitions stylesheet)                  */
/*                                                                            */
/* Responsive cleanup note: GameInfo now maps its legacy mobile cutoffs into  */
/* the canonical six-viewpoint ladder. The module still uses descending range  */
/* queries for parity, but the breakpoints themselves are now canonical.      */
/* -------------------------------------------------------------------------- */
/* Canonical ladder                                                            */
/* -------------------------------------------------------------------------- */
/* - default: <640px                                                          */
/* - sm:      >=640px                                                          */
/* - md:      >=768px                                                          */
/* - lg:      >=1024px                                                        */
/* - xl:      >=1280px                                                        */
/* - 2xl:    >=1536px                                                        */
/* -------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* 1) Base card and safety */
/* 1) Base card and safety                                                     */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


Line 19: Line 45:
   overflow:visible;
   overflow:visible;


  /* Base component surface. */
   background:var(--sv-ui-bg1);
   background:var(--sv-ui-bg1);
   background-image:none;
   background-image:none;
Line 52: Line 77:


/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* 2) Icons and fallback badges */
/* 2) Icons and fallback badges                                               */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


.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 90:
.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 82: Line 109:


/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* 3) Skill header */
/* 2b) Interactive link treatment                                              */
/* -------------------------------------------------------------------------- */
 
.sv-disclose-pop a,
.sv-disclose-pop-title a,
.sv-tip-pop a,
.sv-tip-pop-title a,
.sv-def-pop a,
.sv-def-pop-title a,
.sv-pop a,
.sv-pop-title a,
.sv-gi-card .sv-ref-title a,
.sv-skill-card .sv-ref-title a{
  color:var(--sv-ui-link, #8fc7ff);
  text-decoration-line:underline;
  text-decoration-color:currentColor;
}
 
.sv-disclose-pop a:hover,
.sv-disclose-pop-title a:hover,
.sv-tip-pop a:hover,
.sv-tip-pop-title a:hover,
.sv-def-pop a:hover,
.sv-def-pop-title a:hover,
.sv-pop a:hover,
.sv-pop-title a:hover,
.sv-gi-card .sv-ref-title a:hover,
.sv-skill-card .sv-ref-title a:hover,
.sv-disclose-pop a:focus,
.sv-disclose-pop-title a:focus,
.sv-tip-pop a:focus,
.sv-tip-pop-title a:focus,
.sv-def-pop a:focus,
.sv-def-pop-title a:focus,
.sv-pop a:focus,
.sv-pop-title a:focus,
.sv-gi-card .sv-ref-title a:focus,
.sv-skill-card .sv-ref-title a:focus{
  color:var(--sv-ui-link-hover, #b8ddff);
}
 
.sv-disclose-pop-title a,
.sv-tip-pop-title a,
.sv-def-pop-title a,
.sv-pop-title a{
  font:inherit;
}
 
/* -------------------------------------------------------------------------- */
/* 3) Skill header                                                             */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


Line 137: Line 213:


/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* 4) Meta and requirements block */
/* 4) Meta and requirements block                                             */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


Line 177: Line 253:


/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* 5) Meta row */
/* 5) Meta row                                                                 */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


Line 271: Line 347:
.sv-skill-card .sv-meta-hit{
.sv-skill-card .sv-meta-hit{
   position:absolute;
   position:absolute;
   top:0; right:0; bottom:0; left:0;
   top:0;
  right:0;
  bottom:0;
  left:0;
   z-index:5;
   z-index:5;
   opacity:0;
   opacity:0;
Line 284: Line 363:


/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* 6) Requirements and users row */
/* 6) Requirements and users row                                               */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


Line 311: Line 390:
   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;
  }
}
}


/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* 7) Level selector wrapper */
/* 7) Level selector wrapper                                                   */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


Line 337: Line 405:


   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 347: Line 413:


/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* 8) Skill scaling */
/* 8) Skill scaling                                                           */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


Line 355: Line 421:


   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 513:
}
}


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


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


/* 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 616:
   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 639:
}
}


.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;
   z-index:5;
   z-index:5;
   opacity:0;
   opacity:0;
}
}


.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 674:
}
}


.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 716:
.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 739: Line 794:


/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* 9) Tab panels and content */
/* 9) Tab panels and content                                                   */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


Line 752: Line 807:
.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 823:
}
}


/* 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 828:


.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 787: Line 841:


/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* 10) Mechanics tab */
/* 10) Mechanics tab                                                           */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* Mechanics stays two-column through sm / md / lg. It only collapses into a  */
/* single-column stack in the default viewpoint (<640px).                      */


.sv-skill-tabs .sv-mech-panel{
.sv-skill-tabs .sv-mech-panel{
   display:grid;
   display:grid;
   grid-template-columns:minmax(0, 1fr) minmax(0, 220px);
   grid-template-columns:repeat(2, minmax(0, 1fr));
   column-gap:16px;
   column-gap:14px;
   row-gap:12px;
   row-gap:12px;
   align-items:start;
   align-items:start;
Line 801: Line 857:
   min-width:0;
   min-width:0;
   max-width:100%;
   max-width:100%;
   padding:10px 12px;
  min-height:0;
   padding:10px 12px 12px;
 
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  align-self:start;


  border:0;
   border-radius:16px;
   border-radius:16px;
   background:var(--sv-ui-bg2);
   background:var(--sv-ui-bg2);
   background-image:none;
   background-image:none;
   box-shadow:none;
   box-shadow:none;
}
.sv-skill-tabs .sv-mech-panel__mods,
.sv-skill-tabs .sv-mech-panel__keywords{
  grid-column:auto;
  margin-top:0;
  min-height:0;
}
}


.sv-skill-tabs .sv-mech-panel__mods{
.sv-skill-tabs .sv-mech-panel__mods{
  grid-column:1;
   overflow:visible;
   overflow:hidden;
}
}


.sv-skill-tabs .sv-mech-panel__keywords{
.sv-skill-tabs .sv-mech-panel__keywords{
   grid-column:2;
   justify-content:flex-start;
   margin-top:0;
}
 
.sv-skill-tabs .sv-mech-panel .sv-tab-section-title{
   margin:0 0 8px;
  text-align:center;
}
}


/* Mods use a compact 3x3 matrix. */
/* Modifiers --------------------------------------------------------------- */
.sv-skill-tabs .sv-mech-panel__mods .sv-kw-grid{
 
.sv-skill-tabs .sv-mech-mod-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;
   gap:8px;
  justify-items:start;
   align-content:start;
   align-content:start;
   gap:8px 10px;
   justify-items:stretch;
 
  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%;
   width:100%;
   min-height:0;
   min-height:56px;
   padding:7px 9px 6px;
   padding:6px 8px;


   display:flex;
   display:flex;
Line 845: Line 917:


   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 923:
}
}


.sv-skill-tabs .sv-mech-panel__mods .sv-kw-label{
.sv-skill-tabs .sv-mech-mod-pill__label{
  min-width:0;
  word-wrap:break-word;
  overflow-wrap:anywhere;
 
   font-weight:900;
   font-weight:900;
   font-size:10px;
   font-size:10px;
   line-height:1.05;
   line-height:1.02;
   letter-spacing:0.12px;
   letter-spacing:0.10px;
   text-transform:uppercase;
   text-transform:uppercase;
   color:var(--sv-ui-text3);
   color:var(--sv-ui-text3);
}
}


.sv-skill-tabs .sv-mech-panel__mods .sv-kw-value{
.sv-skill-tabs .sv-mech-mod-pill__value{
   margin-top:4px;
   margin-top:3px;
  min-width:0;
   word-wrap:break-word;
   word-wrap:break-word;
   overflow-wrap:anywhere;
   overflow-wrap:anywhere;


   font-weight:900;
   font-weight:900;
   font-size:13px;
   font-size:12px;
   line-height:1.02;
   line-height:1.02;
   color:var(--sv-ui-text1);
   color:var(--sv-ui-text1);
}
}


/* Keywords use a centered rail. */
.sv-skill-tabs .sv-mech-mod-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{
  display:block;
  width:100%;
  height:100%;
}
 
/* Keywords ---------------------------------------------------------------- */
 
.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;
   gap:8px;
   gap:8px;
  align-content:start;
  justify-items:stretch;
  margin:0;
}
}


Line 882: Line 979:
   min-width:0;
   min-width:0;
   width:100%;
   width:100%;
   min-height:38px;
   min-height:56px;
   padding:8px 10px;
   padding:6px 10px;


   display:flex;
   display:flex;
Line 890: Line 987:
   text-align:center;
   text-align:center;


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


Line 898: Line 998:
   min-width:0;
   min-width:0;
   width:100%;
   width:100%;
  word-wrap:break-word;
  overflow-wrap:anywhere;


   font-weight:900;
   font-weight:900;
   font-size:13px;
   font-size:12px;
   line-height:1.10;
   line-height:1.08;
   color:var(--sv-ui-text1);
   color:var(--sv-ui-text1);
   text-align:center;
   text-align:center;
Line 925: Line 1,027:
.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{
   min-height:46px;
   min-height:60px;
   padding:10px 12px;
   padding:8px 12px;
   border-radius:14px;
   border-radius:999px;
}
}


.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{
.sv-skill-tabs .sv-mech-keyword-pill.sv-pill--xl .sv-mech-keyword-pill__label{
   font-size:14px;
   font-size:13px;
   line-height:1.14;
   line-height:1.12;
}
}


/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* 11) Effect cards */
/* 11) Effect cards                                                           */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


Line 1,017: Line 1,119:


/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* 12) Responsive */
/* 12) Responsive                                                             */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


@media (max-width:850px){
@media (max-width:1023px){
   .sv-gi-card,
   .sv-gi-card,
   .sv-skill-card{
   .sv-skill-card{
Line 1,034: Line 1,136:


   .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,055: Line 1,155:


   .sv-skill-tabs .sv-mech-panel{
   .sv-skill-tabs .sv-mech-panel{
     grid-template-columns:minmax(0, 1fr) minmax(0, 196px);
     grid-template-columns:repeat(2, minmax(0, 1fr));
     column-gap:14px;
    column-gap:12px;
    row-gap:12px;
    align-items:start;
  }
 
  .sv-skill-tabs .sv-mech-panel__group{
    min-height:0;
    max-height:none;
    padding:9px 10px 10px;
    align-self:start;
  }
 
  .sv-skill-tabs .sv-mech-mod-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
     gap:8px;
   }
   }


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


   .sv-skill-tabs .sv-mech-panel__mods .sv-kw-cell{
   .sv-skill-tabs .sv-mech-mod-pill__label{
     min-width:80px;
     font-size:10px;
     padding:6px 8px 5px;
     line-height:1.03;
   }
   }


   .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-panel__keywords .sv-tab-pills{
    gap:8px;
  }


   .sv-skill-tabs .sv-mech-keyword-pill{
   .sv-skill-tabs .sv-mech-keyword-pill{
     min-height:36px;
     min-height:44px;
     padding:7px 9px;
     padding:7px 9px;
   }
   }


   .sv-skill-tabs .sv-mech-keyword-pill__label{ font-size:12px; }
   .sv-skill-tabs .sv-mech-keyword-pill__label{
    font-size:12px;
    line-height:1.10;
  }


   .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{
     min-height:42px;
     min-height:48px;
     padding:9px 10px;
     padding:9px 10px;
   }
   }


   .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:767px){
  .sv-skill-meta-block{
    grid-template-columns:minmax(0, 1fr);
  }
 
  .sv-skill-meta-block__bubble{
    min-height:auto;
    max-height:none;
  }
}
}


@media (max-width:500px){
@media (max-width:639px){
   .sv-skill-head{ gap:10px; }
   .sv-skill-head{ gap:10px; }


Line 1,097: Line 1,231:
   }
   }


   .sv-skill-title{ font-size:18px; }
   .sv-skill-title{ font-size:19px; }
   .sv-skill-desc{ font-size:13px; }
 
   .sv-skill-desc{
    font-size:14px;
    line-height:1.40;
  }


   .sv_skill_scaling{ padding:9px 10px 10px; }
   .sv_skill_scaling{ padding:9px 10px 10px; }
Line 1,113: Line 1,251:
     min-height:auto;
     min-height:auto;
     max-height:none;
     max-height:none;
     padding:9px 10px;
     padding:10px 11px;
   }
   }


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


   .sv_skill_scaling__cluster{
   .sv_skill_scaling__cluster{ height:auto; }
     height:auto;
 
  .sv_skill_scaling__primary-value{ font-size:32px; }
 
  .sv_skill_scaling__primary-label{
    font-size:11px;
     line-height:1.08;
   }
   }


   .sv_skill_scaling__primary-value{ font-size:30px; }
   .sv_skill_scaling__core-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    width:100%;
    align-items:stretch;
  }


   .sv_skill_scaling__core-pill{
   .sv_skill_scaling__core-pill{
     min-height:25px;
    width:100%;
     min-width:70px;
     min-width:0;
     padding:7px 6px;
     min-height:30px;
     padding:8px 7px;
    justify-self:stretch;
    justify-content:center;
    align-items:center;
    text-align:center;
  }
 
  .sv_skill_scaling__core-value{ font-size:14px; }
  .sv_skill_scaling__core-unit{ font-size:11px; }
  .sv_skill_scaling__core-label{ font-size:10px; }
 
  .sv_skill_scaling__core-value,
  .sv_skill_scaling__core-unit,
  .sv_skill_scaling__core-label{
    width:100%;
    text-align:center;
   }
   }


   .sv_skill_scaling__core-value{ font-size:13px; }
   .sv-skill-tabs .sv-tab-section-title{
  .sv_skill_scaling__core-unit{ font-size:10px; }
    margin:0 0 9px;
  .sv_skill_scaling__core-label{ font-size:9px; }
    font-size:12px;
    line-height:1.08;
  }


   .sv-skill-tabs .sv-mech-panel{
   .sv-skill-tabs .sv-mech-panel{
Line 1,146: Line 1,311:


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


   .sv-skill-tabs .sv-mech-panel__keywords{ margin-top:0; }
   .sv-skill-tabs .sv-mech-mod-grid{
 
     grid-template-columns:repeat(2, minmax(0, 1fr));
  .sv-skill-tabs .sv-mech-panel__mods .sv-kw-grid{
     gap:9px;
     grid-template-columns:repeat(3, minmax(0, max-content));
     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:50px;
     padding:6px 8px 5px;
     padding:8px 8px 7px;
     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:10px;
     line-height:1.04;
     line-height:1.06;
   }
   }


   .sv-skill-tabs .sv-mech-panel__mods .sv-kw-value{
   .sv-skill-tabs .sv-mech-mod-pill__value{
     margin-top:3px;
     margin-top:4px;
     font-size:12px;
     font-size:14px;
    line-height:1.05;
   }
   }


   .sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills{ gap:7px; }
   .sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills{ gap:8px; }


   .sv-skill-tabs .sv-mech-keyword-pill{
   .sv-skill-tabs .sv-mech-keyword-pill{
     min-height:34px;
     min-height:40px;
     padding:7px 9px;
     padding:8px 10px;
     border-radius:14px;
     border-radius:14px;
   }
   }


   .sv-skill-tabs .sv-mech-keyword-pill__label{
   .sv-skill-tabs .sv-mech-keyword-pill__label{
     font-size:12px;
     font-size:13px;
     line-height:1.08;
     line-height:1.12;
   }
   }


   .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{
     min-height:40px;
     min-height:46px;
     padding:9px 10px;
     padding:10px 12px;
     border-radius:14px;
     border-radius:14px;
   }
   }


   .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:14px;
  }


   .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:8px;
     gap:6px;
     width:100%;
     max-width:200px;
     max-width:none;
     margin-left:auto;
     margin-left:auto;
     margin-right:auto;
     margin-right:auto;
     justify-content:center;
     justify-content:center;
    align-items:stretch;
   }
   }


   .sv-skill-card .sv-meta-card,
   .sv-skill-card .sv-meta-card,
   .sv-gi-card .sv-meta-card{
   .sv-gi-card .sv-meta-card{
     min-height:32px;
    flex:1 1 calc(50% - 4px);
     gap:7px;
    min-width:0;
     min-height:36px;
     gap:8px;
    padding:7px 9px;
    justify-content:center;
    align-items:center;
    text-align:center;
   }
   }


Line 1,219: Line 1,394:
   .sv-skill-card .sv-meta-text,
   .sv-skill-card .sv-meta-text,
   .sv-gi-card .sv-meta-text{
   .sv-gi-card .sv-meta-text{
     font-size:10px;
    flex:1 1 auto;
     line-height:1.05;
    min-width:0;
     font-size:11px;
     line-height:1.08;
     letter-spacing:0;
     letter-spacing:0;
    text-align:center;
   }
   }


Line 1,227: Line 1,405:
   .sv-gi-card .sv-meta-text .sv-meta-lines span + span{
   .sv-gi-card .sv-meta-text .sv-meta-lines span + span{
     margin-top:1px;
     margin-top:1px;
     font-size:9px;
     font-size:10px;
  }
 
  .sv-skill-level{ padding:9px 10px; }
}
 
@media (max-width:360px){
  .sv_skill_scaling__primary-value{ font-size:28px; }
 
  .sv_skill_scaling__core-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
 
  .sv-skill-tabs .sv-mech-panel__mods .sv-kw-grid{
    grid-template-columns:repeat(2, minmax(0, max-content));
    gap:8px 8px;
  }
 
  .sv-skill-tabs .sv-mech-panel__mods .sv-kw-cell{
    min-width:74px;
    padding:6px 7px 5px;
  }
 
  .sv-skill-tabs .sv-mech-keyword-pill{
    min-height:32px;
    padding:6px 8px;
   }
   }


   .sv-skill-tabs .sv-mech-keyword-pill__label{ font-size:11px; }
   .sv-skill-level{ padding:10px 11px; }


   .sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills.sv-tab-pills--xl .sv-mech-keyword-pill,
   /* Absorbed former micro-phone layout compaction into the default viewpoint. */
  .sv-skill-tabs .sv-mech-keyword-pill.sv-pill--xl{
    min-height:36px;
    padding:8px 9px;
  }
 
  .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:12px; }
}
}
Retrieved from "https://spiritvale.info/wiki/Module:GameInfo/styles.css"