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 2: Line 2:
/* GameInfo Box v1 — TemplateStyles-safe (no CSS vars / no var()) */
/* GameInfo Box v1 — TemplateStyles-safe (no CSS vars / no var()) */
/* Phase 4.1 — Unified + Reusable (Layout restored, scoped, mobile-safe) */
/* Phase 4.1 — Unified + Reusable (Layout restored, scoped, mobile-safe) */
/* ----------------------------------------------------------------------------
  0) PALETTE (fallback, non-Citizen / non-token contexts)
  - Uses the same “Blue System” values as Common.css fallback tokens.
---------------------------------------------------------------------------- */


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
Line 37: Line 32:
.sv-gi-top,
.sv-gi-top,
.sv-skill-top{
.sv-skill-top{
  /* was: padding:14px 14px 4px; */
   padding:14px 18px 4px;
   padding:14px 18px 4px;
}
}
Line 43: Line 37:
.sv-gi-bottom,
.sv-gi-bottom,
.sv-skill-bottom{
.sv-skill-bottom{
  /* was: padding:10px 14px 12px; */
   padding:10px 18px 12px;
   padding:10px 18px 12px;
}
}
Line 81: Line 74:
   list-style:none;
   list-style:none;
}
}
/* NOTE:
  - .sv-hidden + [hidden] are global in Common.css
  - .sv-miss, .sv-img, .sv-pill, .sv-tabs, .sv-tabpanel, .sv-disclose* are global
*/


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
Line 193: Line 181:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   4) NOTES TIP (span button + div popover) — SCOPED
   4) NOTES TIP BUTTON (source pop is hidden; Universal Popups renders UI)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 242: Line 230:
}
}


/* IMPORTANT: do NOT use display:none here; JS controls via .sv-hidden + [hidden] */
/* Source pop styles retained for safety (normally hidden via .sv-hidden) */
.sv-gi-card .sv-tip-pop,
.sv-gi-card .sv-tip-pop,
.sv-skill-card .sv-tip-pop{
.sv-skill-card .sv-tip-pop{
Line 250: Line 238:
   top:34px;
   top:34px;
   right:0;
   right:0;
   width:360px;
   width:340px;
   max-width:92vw;
   max-width:92vw;
   border-radius:16px;
   border-radius:16px;
Line 268: Line 256:
   border-bottom:1px solid rgba(59,75,99,0.85);
   border-bottom:1px solid rgba(59,75,99,0.85);
   background:#1f2937;
   background:#1f2937;
  cursor:pointer;
}
}


Line 277: Line 264:
   letter-spacing:0.2px;
   letter-spacing:0.2px;
   color:rgba(245,249,255,0.96);
   color:rgba(245,249,255,0.96);
}
.sv-gi-card .sv-tip-pop-hint,
.sv-skill-card .sv-tip-pop-hint{
  font-size:12px;
  color:rgba(182,198,224,0.95);
}
}


Line 296: Line 277:
/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   5) META ROW
   5) META ROW
  - Works with either the “meta-card” structure OR “pill” structure
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 432: Line 412:
/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   6) REQUIREMENTS / USERS ROW
   6) REQUIREMENTS / USERS ROW
   - Layout only; the disclosure component itself is global in Common.css
   - Compact, meta-like sizing for the triggers
  - Popup content is styled via .sv-uipop (Universal Popups shell)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 438: Line 419:
.sv-skill-card .sv-reqrow{
.sv-skill-card .sv-reqrow{
   display:flex;
   display:flex;
   gap:10px;
  justify-content:center;
   gap:8px;
   flex-wrap:wrap;
   flex-wrap:wrap;
   margin:6px 0 8px;
   margin:6px 0 10px;
}
}


.sv-gi-card .sv-disclose,
.sv-gi-card .sv-disclose,
.sv-skill-card .sv-disclose{
.sv-skill-card .sv-disclose{
   flex:1 1 220px;
   flex:0 1 190px;
   min-width:220px;
  max-width:205px;
}
 
/* Make disclose buttons match meta pill style (slightly larger) */
.sv-gi-card .sv-disclose-btn,
.sv-skill-card .sv-disclose-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
 
  width:100%;
  min-height:36px;
  padding:0 12px;
 
  border-radius:999px;
  border:1px solid rgba(59,75,99,0.85);
  background:#273449;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
 
  cursor:pointer;
}
 
.sv-gi-card .sv-disclose-btn:hover,
.sv-skill-card .sv-disclose-btn:hover{
  background:#2e3f59;
}
 
.sv-gi-card .sv-disclose-label,
.sv-skill-card .sv-disclose-label{
  font-weight:900;
  font-size:12px;
  letter-spacing:0.08px;
  color:rgba(245,249,255,0.96);
}
 
.sv-gi-card .sv-disclose-count,
.sv-skill-card .sv-disclose-count{
  font-weight:900;
  font-size:12px;
  color:rgba(182,198,224,0.95);
}
 
/* Universal Popups content normalization (prevents big default margins) */
.sv-uipop .sv-uipop-body p,
.sv-uipop .sv-uipop-body ul,
.sv-uipop .sv-uipop-body ol{
  margin:0;
}
 
.sv-uipop .sv-uipop-body ul,
.sv-uipop .sv-uipop-body ol{
  padding-left:18px;
}
 
/* Refined disclose popup body: header + inline comma list */
.sv-uipop .sv-disclose-pop-body{
  padding-top:2px;
}
 
.sv-uipop .sv-disclose-sections{
  display:flex;
  flex-direction:column;
  gap:12px;
}
 
.sv-uipop .sv-disclose-sec-title{
  font-weight:900;
  letter-spacing:0.15px;
  color:rgba(245,249,255,0.96);
  margin-bottom:4px;
}
 
.sv-uipop .sv-disclose-sec-items{
  line-height:1.45;
  color:rgba(215,226,244,0.92);
}
 
.sv-uipop .sv-disclose-item{
  display:inline;
}
 
.sv-uipop .sv-disclose-item:not(:last-child)::after{
  content:", ";
   opacity:0.55;
}
 
.sv-uipop .sv-disclose-sfx{
  opacity:0.75;
  margin-left:2px;
}
}


Line 842: Line 913:
/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   12) THEME OVERRIDES (Citizen only)
   12) THEME OVERRIDES (Citizen only)
  - Day: switch to light palette for readability.
  - Night: keep base (already dark), but align borders/accents lightly.
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 861: Line 930:
:root.skin-theme-clientpref-day .sv-skill-card a{
:root.skin-theme-clientpref-day .sv-skill-card a{
   color:#0b63f0;
   color:#0b63f0;
}
:root.skin-theme-clientpref-day .sv-gi-bottom,
:root.skin-theme-clientpref-day .sv-skill-bottom{
  border-top-color:#bdd7ff;
}
}


Line 977: Line 1,041:
   background:#e8f2ff;
   background:#e8f2ff;
   color:#0b1a33;
   color:#0b1a33;
}
:root.skin-theme-clientpref-day .sv-gi-card .sv-tip-pop,
:root.skin-theme-clientpref-day .sv-skill-card .sv-tip-pop{
  border-color:#bdd7ff;
  background:#f3f8ff;
  color:#0b1a33;
}
:root.skin-theme-clientpref-day .sv-gi-card .sv-tip-pop-head,
:root.skin-theme-clientpref-day .sv-skill-card .sv-tip-pop-head{
  background:#e8f2ff;
  border-bottom-color:#bdd7ff;
}
:root.skin-theme-clientpref-day .sv-gi-card .sv-tip-pop-hint,
:root.skin-theme-clientpref-day .sv-skill-card .sv-tip-pop-hint{
  color:#456083;
}
}


Line 1,041: Line 1,087:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   13) RESPONSIVE (popover repositioning + layout tightening)
   13) RESPONSIVE (layout tightening)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 1,053: Line 1,099:
   .sv-gi-top,
   .sv-gi-top,
   .sv-skill-top{
   .sv-skill-top{
    /* was: padding:12px 12px 4px; */
     padding:12px 16px 4px;
     padding:12px 16px 4px;
   }
   }
Line 1,059: Line 1,104:
   .sv-gi-bottom,
   .sv-gi-bottom,
   .sv-skill-bottom{
   .sv-skill-bottom{
    /* was: padding:10px 12px 12px; */
     padding:10px 16px 12px;
     padding:10px 16px 12px;
   }
   }
Line 1,074: Line 1,118:


   .sv-gi-card .sv-tip-pop,
   .sv-gi-card .sv-tip-pop,
   .sv-skill-card .sv-tip-pop,
   .sv-skill-card .sv-tip-pop{
  .sv-gi-card .sv-disclose-pop,
  .sv-skill-card .sv-disclose-pop{
     right:0;
     right:0;
     left:auto;
     left:auto;
Line 1,101: Line 1,143:
   .sv-gi-card .sv-kw-grid,
   .sv-gi-card .sv-kw-grid,
   .sv-skill-card .sv-kw-grid{ grid-template-columns:1fr; }
   .sv-skill-card .sv-kw-grid{ grid-template-columns:1fr; }
  /* Requirements/Users strict edge padding */
  .sv-gi-card .sv-reqrow,
  .sv-skill-card .sv-reqrow{
    padding-left:16px;
    padding-right:16px;
  }


   .sv-gi-card .sv-disclose,
   .sv-gi-card .sv-disclose,
   .sv-skill-card .sv-disclose{
   .sv-skill-card .sv-disclose{
     min-width:0;
     flex:1 1 170px;
     flex:1 1 100%;
     max-width:190px;
   }
   }


   /* ----------------------------------------------------------------------
   /* META ROW (mobile-tight) */
    META ROW (mobile-tight)
    - Enforce smaller pills regardless of Mobile.css load order.
    - Keep 2 columns, centered away from edges.
    ---------------------------------------------------------------------- */
 
   .sv-skill-card .sv-skill-meta,
   .sv-skill-card .sv-skill-meta,
   .sv-gi-card .sv-skill-meta{
   .sv-gi-card .sv-skill-meta{
Line 1,157: Line 1,201:
     letter-spacing:0;
     letter-spacing:0;
     gap:5px;
     gap:5px;
  }
}
@media (max-width:360px){
  .sv-gi-card .sv-disclose,
  .sv-skill-card .sv-disclose{
    flex:1 1 100%;
    max-width:100%;
   }
   }
}
}
Retrieved from "https://spiritvale.info/wiki/Module:GameInfo/styles.css"