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 1: Line 1:
/* Module:GameInfo/styles.css */
/* SpiritVale Wiki — Module:GameInfo/styles.css */
/* NOTE (ownership)
/* GameInfo-family layout and skill-specific presentation. */
  --------------------------------------------------------------------------
  Common.css owns shared components and tokens:
  - surface tokens / text tokens / border tokens
  - slider anatomy
  - tabs
  - tips / discloses / popups
  - shared card / tile / pill primitives


  This file owns GameInfo-family presentation only:
/* -------------------------------------------------------------------------- */
  - card shell sizing / layout
/* 1) Base card and safety */
  - section layout
/* -------------------------------------------------------------------------- */
  - skill-specific display blocks
  - stat accent colors for scaling pills
*/
 
/* ==========================================================================
  1) BASE CARD + SAFETY
  ========================================================================== */


.sv-gi-card,
.sv-gi-card,
Line 27: Line 13:
   overflow:visible;
   overflow:visible;


   /* Outer shell uses the site’s darkest surface step */
   /* Use the darkest site surface. */
   background:var(--sv-ui-bg0);
   background:var(--sv-ui-bg0);
   background-image:none;
   background-image:none;
Line 55: Line 41:
   word-break:break-word;
   word-break:break-word;
}
}
.sv-gi-card .sv-hidden,
.sv-skill-card .sv-hidden{ display:none; }


.sv-gi-card summary,
.sv-gi-card summary,
.sv-skill-card summary{ list-style:none; }
.sv-skill-card summary{ list-style:none; }


/* ==========================================================================
/* -------------------------------------------------------------------------- */
  2) ICONS, IMAGES, AND FALLBACK BADGES
/* 2) Icons and fallback badges */
  ========================================================================== */
/* -------------------------------------------------------------------------- */


.sv-skill-icon,
.sv-skill-icon,
Line 92: Line 75:
}
}


/* ==========================================================================
/* -------------------------------------------------------------------------- */
  3) SKILL HEADER
/* 3) Skill header */
  ========================================================================== */
/* -------------------------------------------------------------------------- */


.sv-skill-head{
.sv-skill-head{
Line 147: Line 130:
}
}


/* ==========================================================================
/* -------------------------------------------------------------------------- */
  4) META ROW
/* 4) Meta row */
  ========================================================================== */
/* -------------------------------------------------------------------------- */


.sv-skill-meta{
.sv-skill-meta{
Line 158: Line 141:
}
}


/* fallback if global .sv-pill is used */
.sv-skill-card .sv-skill-meta .sv-pill,
.sv-gi-card .sv-skill-meta .sv-pill{
  width:100%;
  min-height:34px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  line-height:1.02;
  letter-spacing:0.08px;
  text-transform:none;
}
/* preferred meta-card */
.sv-gi-card .sv-meta-card,
.sv-gi-card .sv-meta-card,
.sv-skill-card .sv-meta-card{
.sv-skill-card .sv-meta-card{
Line 216: Line 176:
   border-radius:999px;
   border-radius:999px;


   /* small inner bubble contrast */
   /* Small inner bubble contrast. */
   background:var(--sv-ui-bg1);
   background:var(--sv-ui-bg1);
   background-image:none;
   background-image:none;
Line 277: Line 237:
}
}


/* ==========================================================================
/* -------------------------------------------------------------------------- */
  5) REQUIREMENTS / USERS ROW
/* 5) Requirements and users row */
  ========================================================================== */
/* -------------------------------------------------------------------------- */


.sv-gi-card .sv-reqrow,
.sv-gi-card .sv-reqrow,
Line 303: Line 263:
}
}


/* ==========================================================================
/* -------------------------------------------------------------------------- */
  6) LEVEL SELECTOR WRAPPER
/* 6) Level selector wrapper */
  ========================================================================== */
/* -------------------------------------------------------------------------- */


.sv-skill-level{
.sv-skill-level{
Line 317: Line 277:
   border-radius:16px;
   border-radius:16px;


   /* section surface */
   /* Section surface. */
   background:var(--sv-ui-bg1);
   background:var(--sv-ui-bg1);
   background-image:none;
   background-image:none;
Line 325: Line 285:
.sv-skill-level:not([data-sv-level-hide-ticks="0"]) .sv-level-ticklabels{ display:none; }
.sv-skill-level:not([data-sv-level-hide-ticks="0"]) .sv-level-ticklabels{ display:none; }


.sv-gi-card .sv-level-label:not([data-sv-helper-text]),
/* -------------------------------------------------------------------------- */
.sv-skill-card .sv-level-label:not([data-sv-helper-text]){
/* 7) Skill scaling */
  position:static;
/* -------------------------------------------------------------------------- */
  top:auto; right:auto; bottom:auto; left:auto;
  transform:none;
 
  display:inline-block;
  margin:0;
  padding:0;
 
  font-size:0;
  line-height:0;
}
 
.sv-gi-card .sv-level-label:not([data-sv-helper-text])::after,
.sv-skill-card .sv-level-label:not([data-sv-helper-text])::after{
  content:"Slide to set level";
  display:inline-block;
 
  font-weight:900;
  font-size:13px;
  line-height:1.25;
  letter-spacing:0.15px;
  color:var(--sv-ui-text1);
}
 
/* ==========================================================================
  7) SKILL SCALING (native schema)
  ========================================================================== */


.sv_skill_scaling{
.sv_skill_scaling{
Line 361: Line 295:
   border-radius:18px;
   border-radius:18px;


   /* section surface */
   /* Section surface. */
   background:var(--sv-ui-bg1);
   background:var(--sv-ui-bg1);
   background-image:none;
   background-image:none;
Line 379: Line 313:
}
}


/* Two columns (left cluster, right core); mobile stacks */
/* Two columns; mobile stacks. */
.sv_skill_scaling__body{
.sv_skill_scaling__body{
   display:grid;
   display:grid;
Line 389: Line 323:
}
}


/* Placeholder not used */
/* Center the left cluster. */
.sv_skill_scaling__side{ display:none; }
 
/* Left cluster centered within column 1 */
.sv_skill_scaling__cluster{
.sv_skill_scaling__cluster{
   grid-column:1;
   grid-column:1;
Line 410: Line 341:
}
}


/* Core column should still fill its track */
/* Keep the core column full-width. */
.sv_skill_scaling__column--core{
.sv_skill_scaling__column--core{
   grid-column:2;
   grid-column:2;
Line 419: Line 350:
}
}


/* Neutral wrappers */
/* Neutral wrappers. */
.sv_skill_scaling__column{
.sv_skill_scaling__column{
   min-width:0;
   min-width:0;
Line 430: Line 361:
}
}


/* Damage */
/* Damage. */
.sv_skill_scaling__column--primary{
.sv_skill_scaling__column--primary{
   display:flex;
   display:flex;
Line 461: Line 392:
}
}


/* Attributes (2×3) */
/* Attributes. */
.sv_skill_scaling__stats-grid{
.sv_skill_scaling__stats-grid{
   display:grid;
   display:grid;
Line 495: Line 426:
}
}


/* Stat chips (fixed size across all viewports) */
/* Stat chips keep a fixed size. */
.sv_skill_scaling__stat-pill{
.sv_skill_scaling__stat-pill{
   border-radius:999px;
   border-radius:999px;
Line 596: Line 527:
}
}


/* per-stat colors (intentionally local / semantic) */
/* 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 639: Line 570:
.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 (3×2 grid) */
/* Core grid. */
.sv_skill_scaling__core-grid{
.sv_skill_scaling__core-grid{
   display:grid;
   display:grid;
Line 712: Line 643:
}
}


/* Scaling responsive (no stat pill size changes) */
/* -------------------------------------------------------------------------- */
@media (max-width:850px){
/* 8) Tab panels and content */
  .sv_skill_scaling__body{
/* -------------------------------------------------------------------------- */
    grid-template-columns:minmax(0, 1fr) minmax(0, 236px);
  }
 
  .sv_skill_scaling__primary-value{ font-size:32px; }
 
  .sv_skill_scaling__core-pill{
    min-height:25px;
    min-width:70px;
  }
 
  .sv_skill_scaling__core-value{ font-size:13px; }
  .sv_skill_scaling__core-label{ font-size:9px; }
}
 
@media (max-width:500px){
  .sv_skill_scaling{ padding:9px 10px 10px; }
 
  .sv_skill_scaling .sv-skill-level,
  .sv_skill_scaling__level{ padding:0 0 9px; }
 
  .sv_skill_scaling__body{
    grid-template-columns:1fr;
    row-gap:12px;
  }
 
  .sv_skill_scaling__column--core{
    grid-column:1;
    grid-row:2;
    width:100%;
  }
 
  .sv_skill_scaling__primary-value{ font-size:30px; }
 
  .sv_skill_scaling__core-pill{
    min-height:25px;
    min-width:70px;
    padding:7px 6px;
  }
 
  .sv_skill_scaling__core-value{ font-size:13px; }
  .sv_skill_scaling__core-unit{ font-size:10px; }
  .sv_skill_scaling__core-label{ font-size:9px; }
}
 
@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));
  }
}
 
/* ==========================================================================
  8) LEGACY SCHEMA BLOCKS (kept for compatibility)
  ========================================================================== */
 
.sv-skill-scaling,
.sv-skill-core{
  margin:8px 0 10px;
  padding:10px 12px;
  border-radius:16px;
 
  background:var(--sv-ui-bg1);
  background-image:none;
  box-shadow:none;
}
 
.sv-scaling-row,
.sv-core-row{ width:100%; }
 
.sv-scaling-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:12px;
  align-items:start;
}
 
.sv-scaling-col{ min-width:0; }
 
.sv-scaling-value{
  font-weight:900;
  font-size:34px;
  line-height:0.95;
  letter-spacing:-0.50px;
  text-align:center;
  color:var(--sv-ui-text1);
}
 
.sv-scaling-label{
  margin-top:6px;
  text-align:center;
  font-weight:900;
  font-size:10px;
  line-height:1.05;
  letter-spacing:0.22px;
  text-transform:uppercase;
  color:var(--sv-ui-text3);
}
 
.sv-scaling-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
 
.sv-scaling-item{
  min-width:0;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--sv-ui-line2);
  background:var(--sv-ui-bg2);
  background-image:none;
  color:var(--sv-ui-text1);
  overflow-wrap:anywhere;
  word-break:break-word;
}
 
.sv-scaling-item--stat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
 
.sv-scale-stat{
  font-weight:900;
  color:var(--sv-ui-text1);
}
 
.sv-scale-val{
  font-weight:900;
  color:var(--sv-ui-text2);
}
 
.sv-core-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}
 
.sv-core-cell{
  min-width:0;
  padding:8px 6px;
  text-align:center;
  border-radius:12px;
}
 
.sv-core-top{
  min-width:0;
  display:flex;
  align-items:baseline;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px;
}
 
.sv-core-num{
  font-weight:900;
  font-size:14px;
  line-height:1.02;
  color:var(--sv-ui-text1);
}
 
.sv-core-unit{
  font-weight:900;
  font-size:10px;
  line-height:1.05;
  color:var(--sv-ui-text3);
}
 
.sv-core-label{
  margin-top:5px;
  font-weight:900;
  font-size:10px;
  line-height:1.10;
  letter-spacing:0.14px;
  text-transform:uppercase;
  color:var(--sv-ui-text3);
}
 
.sv-core-label--tight{ letter-spacing:0.08px; }
 
@media (max-width:500px){
  .sv-scaling-grid{ grid-template-columns:1fr; }
  .sv-core-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
 
/* ==========================================================================
  9) TAB PANELS AND CONTENT BLOCKS
  ========================================================================== */


.sv-skill-tabs{
.sv-skill-tabs{
Line 917: Line 658:
   min-width:0;
   min-width:0;


   /* keep site tab panel colors, just flatten */
   /* Keep shared tab colors and flatten. */
   background-image:none;
   background-image:none;
   box-shadow:none;
   box-shadow:none;
Line 934: Line 675:
}
}


/* Section framing inside panels */
/* 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 950: Line 691:
}
}


/* --------------------------------------------------------------------------
/* -------------------------------------------------------------------------- */
  Mechanics tab
/* Mechanics tab */
  -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


.sv-skill-tabs .sv-mech-panel{
.sv-skill-tabs .sv-mech-panel{
Line 978: Line 719:
}
}


/* Mods: compact 3x3 pill matrix */
/* Mods use a compact 3x3 matrix. */
.sv-skill-tabs .sv-mech-panel__mods .sv-kw-grid{
.sv-skill-tabs .sv-mech-panel__mods .sv-kw-grid{
   display:grid;
   display:grid;
Line 1,028: Line 769:
}
}


/* Keywords: centered compact rail */
/* Keywords use a centered rail. */
.sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills{
.sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills{
   display:flex;
   display:flex;
Line 1,079: Line 820:
}
}


/* Toggle: larger keyword mode */
/* 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,093: Line 834:
}
}


/* ==========================================================================
/* -------------------------------------------------------------------------- */
  10) EFFECT CARDS
/* 9) Effect cards */
  ========================================================================== */
/* -------------------------------------------------------------------------- */


.sv-gi-card .sv-ref-grid,
.sv-gi-card .sv-ref-grid,
Line 1,172: Line 913:
}
}


/* ==========================================================================
/* -------------------------------------------------------------------------- */
  11) RESPONSIVE (card/layout)
/* 10) Responsive */
  ========================================================================== */
/* -------------------------------------------------------------------------- */


@media (max-width:850px){
@media (max-width:850px){
Line 1,192: Line 933:


   .sv-skill-meta{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
   .sv-skill-meta{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .sv_skill_scaling__body{
    grid-template-columns:minmax(0, 1fr) minmax(0, 236px);
  }
  .sv_skill_scaling__primary-value{ font-size:32px; }
  .sv_skill_scaling__core-pill{
    min-height:25px;
    min-width:70px;
  }
  .sv_skill_scaling__core-value{ font-size:13px; }
  .sv_skill_scaling__core-label{ font-size:9px; }


   .sv-gi-card .sv-ref-grid,
   .sv-gi-card .sv-ref-grid,
Line 1,241: Line 996:
   .sv-skill-title{ font-size:18px; }
   .sv-skill-title{ font-size:18px; }
   .sv-skill-desc{ font-size:13px; }
   .sv-skill-desc{ font-size:13px; }
  .sv_skill_scaling{ padding:9px 10px 10px; }
  .sv_skill_scaling .sv-skill-level,
  .sv_skill_scaling__level{ padding:0 0 9px; }
  .sv_skill_scaling__body{
    grid-template-columns:1fr;
    row-gap:12px;
  }
  .sv_skill_scaling__column--core{
    grid-column:1;
    grid-row:2;
    width:100%;
  }
  .sv_skill_scaling__primary-value{ font-size:30px; }
  .sv_skill_scaling__core-pill{
    min-height:25px;
    min-width:70px;
    padding:7px 6px;
  }
  .sv_skill_scaling__core-value{ font-size:13px; }
  .sv_skill_scaling__core-unit{ font-size:10px; }
  .sv_skill_scaling__core-label{ font-size:9px; }


   .sv-skill-tabs .sv-mech-panel{
   .sv-skill-tabs .sv-mech-panel{
Line 1,345: Line 1,128:
   .sv-skill-level{ padding:9px 10px; }
   .sv-skill-level{ padding:9px 10px; }


  .sv-gi-card .sv-level-label:not([data-sv-helper-text])::after,
}
   .sv-skill-card .sv-level-label:not([data-sv-helper-text])::after{ font-size:12px; }
 
@media (max-width:360px){
   .sv_skill_scaling__primary-value{ font-size:28px; }


   .sv-skill-card .sv-skill-meta .sv-pill,
   .sv_skill_scaling__core-grid{
  .sv-gi-card .sv-skill-meta .sv-pill{
     grid-template-columns:repeat(2, minmax(0, 1fr));
     min-height:24px;
    gap:5px;
    font-size:10px;
    line-height:1.05;
    letter-spacing:0;
   }
   }
}


@media (max-width:360px){
   .sv-gi-card .sv-disclose,
   .sv-gi-card .sv-disclose,
   .sv-skill-card .sv-disclose{
   .sv-skill-card .sv-disclose{
Retrieved from "https://spiritvale.info/wiki/Module:GameInfo/styles.css"