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 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 */
/* 3) Skill header                                                             */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


Line 164: Line 164:


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


Line 204: Line 204:


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


Line 298: Line 298:
.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 314:


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


Line 341: Line 344:


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


Line 361: Line 364:


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


Line 590: Line 593:
.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 745:


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


Line 786: Line 792:


/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* 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 801:
   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 808:
   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 815:
   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 851:
   gap:8px;
   gap:8px;
   align-content:start;
   align-content:start;
  justify-items:stretch;
}
}


Line 847: Line 857:
   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 895: Line 906:
   gap:8px;
   gap:8px;
   align-content:start;
   align-content:start;
  justify-items:stretch;
   margin:0;
   margin:0;
}
}
Line 962: Line 974:


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


Line 1,042: Line 1,054:


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


Line 1,078: Line 1,090:


   .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,125: Line 1,156:
   }
   }
}
}


@media (max-width:639px){
@media (max-width:639px){
Line 1,136: Line 1,166:
   }
   }


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


Line 1,162: Line 1,196:
   .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{
   .sv_skill_scaling__core-grid{
Line 1,173: Line 1,212:
     width:100%;
     width:100%;
     min-width:0;
     min-width:0;
     min-height:25px;
     min-height:30px;
     padding:7px 6px;
     padding:8px 7px;
     justify-self:stretch;
     justify-self:stretch;
     justify-content:center;
     justify-content:center;
Line 1,181: Line 1,220:
   }
   }


   .sv_skill_scaling__core-value{ font-size:13px; }
   .sv_skill_scaling__core-value{ font-size:14px; }
   .sv_skill_scaling__core-unit{ font-size:10px; }
   .sv_skill_scaling__core-unit{ font-size:11px; }
   .sv_skill_scaling__core-label{ font-size:9px; }
   .sv_skill_scaling__core-label{ font-size:10px; }


   .sv_skill_scaling__core-value,
   .sv_skill_scaling__core-value,
Line 1,190: Line 1,229:
     width:100%;
     width:100%;
     text-align:center;
     text-align:center;
  }
  .sv-skill-tabs .sv-tab-section-title{
    margin:0 0 9px;
    font-size:12px;
    line-height:1.08;
   }
   }


Line 1,203: Line 1,248:
     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{
     grid-template-columns:repeat(2, minmax(0, 1fr));
     grid-template-columns:repeat(2, minmax(0, 1fr));
     gap:8px 8px;
     gap:9px;
   }
   }


   .sv-skill-tabs .sv-mech-mod-pill{
   .sv-skill-tabs .sv-mech-mod-pill{
     min-height:42px;
     min-height:50px;
     padding:6px 7px 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:32px;
     min-height:40px;
     padding:6px 8px;
     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:11px;
     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:36px;
     min-height:46px;
     padding:8px 9px;
     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:12px; }
   .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;
     width:100%;
     width:100%;
     max-width:none;
     max-width:none;
Line 1,263: Line 1,311:
   .sv-skill-card .sv-meta-card,
   .sv-skill-card .sv-meta-card,
   .sv-gi-card .sv-meta-card{
   .sv-gi-card .sv-meta-card{
     flex:1 1 calc(50% - 3px);
     flex:1 1 calc(50% - 4px);
     min-width:0;
     min-width:0;
     min-height:32px;
     min-height:36px;
     gap:7px;
     gap:8px;
     padding:6px 8px;
     padding:7px 9px;
     justify-content:center;
     justify-content:center;
     align-items:center;
     align-items:center;
Line 1,283: Line 1,331:
     flex:1 1 auto;
     flex:1 1 auto;
     min-width:0;
     min-width:0;
     font-size:10px;
     font-size:11px;
     line-height:1.05;
     line-height:1.08;
     letter-spacing:0;
     letter-spacing:0;
     text-align:center;
     text-align:center;
Line 1,292: Line 1,340:
   .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. */
}
}
Retrieved from "https://spiritvale.info/wiki/Module:GameInfo/styles.css"