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
 
(9 intermediate revisions by the same user not shown)
Line 6: Line 6:
   - bg3 = inner framed block / pill surface
   - bg3 = inner framed block / pill surface
*/
*/
/* -------------------------------------------------------------------------- */
/* 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 50: Line 77:


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


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 314: Line 393:


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


Line 334: Line 413:


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


Line 563: Line 642:
.sv_skill_scaling__core-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;
Line 712: Line 794:


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


Line 759: 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:repeat(2, minmax(0, 1fr));
   grid-template-columns:repeat(2, minmax(0, 1fr));
   column-gap:16px;
   column-gap:14px;
   row-gap:0;
   row-gap:12px;
   align-items:start;
   align-items:start;
}
}
Line 773: Line 857:
   min-width:0;
   min-width:0;
   max-width:100%;
   max-width:100%;
   padding:0;
  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:0;
   border-radius:0;
   border-radius:16px;
   background:transparent;
   background:var(--sv-ui-bg2);
   background-image:none;
   background-image:none;
   box-shadow:none;
   box-shadow:none;
Line 785: Line 877:
   grid-column:auto;
   grid-column:auto;
   margin-top:0;
   margin-top:0;
  min-height:0;
}
}


Line 792: Line 885:


.sv-skill-tabs .sv-mech-panel__keywords{
.sv-skill-tabs .sv-mech-panel__keywords{
   display:flex;
   justify-content:flex-start;
  flex-direction:column;
}
}


.sv-skill-tabs .sv-mech-panel .sv-tab-section-title{
.sv-skill-tabs .sv-mech-panel .sv-tab-section-title{
   margin:0 0 10px;
   margin:0 0 8px;
   text-align:center;
   text-align:center;
}
}


/* Modifiers use the pills as the only real framing. */
/* Modifiers --------------------------------------------------------------- */
 
.sv-skill-tabs .sv-mech-mod-grid{
.sv-skill-tabs .sv-mech-mod-grid{
   display:grid;
   display:grid;
   grid-template-columns:repeat(3, minmax(0, 1fr));
   grid-template-columns:repeat(3, minmax(0, 1fr));
   gap:10px;
   gap:8px;
   align-content:start;
   align-content:start;
  justify-items:stretch;
}
}


Line 812: Line 906:
   position:relative;
   position:relative;
   min-width:0;
   min-width:0;
   min-height:70px;
  width:100%;
   padding:8px 10px;
   min-height:56px;
   padding:6px 8px;


   display:flex;
   display:flex;
Line 826: Line 921:
   background-image:none;
   background-image:none;
   box-shadow:none;
   box-shadow:none;
}
.sv-skill-tabs .sv-mech-mod-pill.sv-hover-lift,
.sv-skill-tabs .sv-mech-mod-pill:hover{
  background:var(--sv-ui-bg3);
}
}


Line 836: Line 926:
   min-width:0;
   min-width:0;
   word-wrap:break-word;
   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);
Line 846: Line 937:


.sv-skill-tabs .sv-mech-mod-pill__value{
.sv-skill-tabs .sv-mech-mod-pill__value{
   margin-top:4px;
   margin-top:3px;
   min-width:0;
   min-width:0;
   word-wrap:break-word;
   word-wrap:break-word;
Line 852: Line 943:


   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 now use a balanced 2-column grid. */
.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:grid;
   display:grid;
   grid-template-columns:repeat(2, minmax(0, 1fr));
   grid-template-columns:repeat(2, minmax(0, 1fr));
   gap:10px;
   gap:8px;
   align-content:start;
   align-content:start;
  justify-items:stretch;
  margin:0;
}
}


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


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


   border-radius:999px;
   border-radius:16px;
   border:1px solid var(--sv-ui-line2);
   border:1px solid var(--sv-ui-line2);
   background:var(--sv-ui-bg3);
   background:var(--sv-ui-bg3);
Line 888: 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 916: Line 1,028:
.sv-skill-tabs .sv-mech-keyword-pill.sv-pill--xl{
.sv-skill-tabs .sv-mech-keyword-pill.sv-pill--xl{
   min-height:60px;
   min-height:60px;
   padding:10px 12px;
   padding:8px 12px;
   border-radius:999px;
   border-radius:999px;
}
}
Line 922: Line 1,034:
.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,007: 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,043: 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{
   .sv-skill-tabs .sv-mech-panel__group{
     min-height:172px;
     min-height:0;
     max-height:172px;
     max-height:none;
    padding:9px 10px 10px;
    align-self:start;
   }
   }


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


   .sv-skill-tabs .sv-mech-mod-pill{
   .sv-skill-tabs .sv-mech-mod-pill{
     min-height:46px;
     min-height:48px;
     padding:6px 8px 5px;
     padding:6px 8px;
  }
 
  .sv-skill-tabs .sv-mech-mod-pill__label{
    font-size:10px;
    line-height:1.03;
   }
   }


   .sv-skill-tabs .sv-mech-mod-pill__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:700px){
@media (max-width:767px){
   .sv-skill-meta-block{
   .sv-skill-meta-block{
     grid-template-columns:minmax(0, 1fr);
     grid-template-columns:minmax(0, 1fr);
Line 1,091: Line 1,222:
}
}


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


Line 1,100: 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,116: Line 1,251:
     min-height:auto;
     min-height:auto;
     max-height:none;
     max-height:none;
     padding:9px 10px;
     padding:10px 11px;
   }
   }


Line 1,126: Line 1,261:
   .sv_skill_scaling__cluster{ height:auto; }
   .sv_skill_scaling__cluster{ height:auto; }


   .sv_skill_scaling__primary-value{ font-size:30px; }
   .sv_skill_scaling__primary-value{ font-size:32px; }
 
  .sv_skill_scaling__primary-label{
    font-size:11px;
    line-height:1.08;
  }
 
  .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,149: Line 1,313:
     min-height:auto;
     min-height:auto;
     max-height:none;
     max-height:none;
     padding:9px 10px;
     padding:10px 11px 11px;
   }
   }


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


   .sv-skill-tabs .sv-mech-mod-pill{
   .sv-skill-tabs .sv-mech-mod-pill{
     min-height:44px;
     min-height:50px;
     padding:6px 8px 5px;
     padding:8px 8px 7px;
     border-radius:14px;
     border-radius:14px;
   }
   }


   .sv-skill-tabs .sv-mech-mod-pill__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-mod-pill__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{
     gap:6px;
     gap:8px;
     max-width:200px;
    width:100%;
     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,218: 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,226: 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; }
   .sv-skill-level{ padding:10px 11px; }
}


@media (max-width:360px){
   /* Absorbed former micro-phone layout compaction into the default viewpoint. */
  .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-mod-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px 8px;
  }
 
   .sv-skill-tabs .sv-mech-mod-pill{
    min-height:42px;
    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-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{
    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"