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
 
(2 intermediate revisions by the same user not shown)
Line 35: Line 35:


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


Line 77: Line 77:


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


Line 109: 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 164: Line 213:


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


Line 204: Line 253:


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


Line 298: 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 311: Line 363:


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


Line 341: Line 393:


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


Line 361: Line 413:


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


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


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


Line 786: 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{
Line 793: Line 850:
   grid-template-columns:repeat(2, minmax(0, 1fr));
   grid-template-columns:repeat(2, minmax(0, 1fr));
   column-gap:14px;
   column-gap:14px;
   row-gap:0;
   row-gap:12px;
   align-items:stretch;
   align-items:start;
}
}


Line 800: Line 857:
   min-width:0;
   min-width:0;
   max-width:100%;
   max-width:100%;
   padding:8px 10px 10px;
  min-height:0;
   padding:10px 12px 12px;


   display:flex;
   display:flex;
Line 806: Line 864:
   justify-content:flex-start;
   justify-content:flex-start;
   align-items:stretch;
   align-items:stretch;
   align-self:stretch;
   align-self:start;


   border:0;
   border:0;
Line 842: Line 900:
   gap:8px;
   gap:8px;
   align-content:start;
   align-content:start;
  justify-items:stretch;
}
}


Line 847: Line 906:
   position:relative;
   position:relative;
   min-width:0;
   min-width:0;
  width:100%;
   min-height:56px;
   min-height:56px;
   padding:6px 8px;
   padding:6px 8px;
Line 886: Line 946:
   line-height:1.02;
   line-height:1.02;
   color:var(--sv-ui-text1);
   color:var(--sv-ui-text1);
}
.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%;
}
}


Line 895: Line 971:
   gap:8px;
   gap:8px;
   align-content:start;
   align-content:start;
  justify-items:stretch;
   margin:0;
   margin:0;
}
}
Line 962: Line 1,039:


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


Line 1,042: Line 1,119:


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


Line 1,078: 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;
  }
}
}


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


Line 1,161: 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,184: 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,253: 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,261: 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; }


   /* Absorbed former micro-phone layout compaction into the default viewpoint. */
   /* Absorbed former micro-phone layout compaction into the default viewpoint. */
  .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"