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 */
/* Module:GameInfo/styles.css */
/* GameInfo Box v1 — TemplateStyles-safe (no CSS vars / no var()) */
/* GameInfo Box v1 — TemplateStyles-safe (no CSS vars / no var()) */
/* Phase 4.1 — Scoping Pass 1b (faithful to current file + icon-text hardening) */
/* Phase 4.1 — Reuse Pass 1 (consume shared Common.css components) */


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
Line 14: Line 14:
   border: 1px solid rgba(255, 255, 255, 0.085);
   border: 1px solid rgba(255, 255, 255, 0.085);
   background-color: #0f1b33;
   background-color: #0f1b33;
   background-image: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), linear-gradient(180deg, #0f1b33, #0c162b);
   background-image:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    linear-gradient(180deg, #0f1b33, #0c162b);
   box-shadow: 0 16px 38px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
   box-shadow: 0 16px 38px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
   overflow: visible;
   overflow: visible;
Line 57: Line 59:
}
}


/* Shared micro-utilities */
/* Simple error capsule */
.sv-gi-error {
.sv-gi-error {
   max-width: 600px;
   max-width: 600px;
Line 67: Line 69:
}
}


/* IMPORTANT: Phase 4.1 hiding contract */
/* NOTE:
.sv-hidden {
  .sv-hidden + [hidden] are now provided globally by Common.css
  display: none !important;
  .sv-miss is now provided globally by Common.css
}
*/
 
[hidden] {
  display: none !important;
}


/* Remove default details marker (safe even if no <details> used) */
/* Remove default details marker (safe even if no <details> used) */
Line 80: Line 78:
.sv-skill-card summary {
.sv-skill-card summary {
   list-style: none;
   list-style: none;
}
.sv-miss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.050);
  background: rgba(255,255,255,0.05);
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
}
}


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   HARDEN ICON BOXES (prevents clipped link/text inside icon squares)
   HARDEN ICON BOXES (prevents clipped link/text inside icon squares)
  (Works with global .sv-miss)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 113: Line 98:
}
}


/* Size bumps for “?” badge inside icon boxes */
.sv-skill-icon .sv-miss {
.sv-skill-icon .sv-miss {
   width: 22px;
   width: 22px;
Line 129: Line 115:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   SCOPED GENERIC PRIMITIVES (avoid collisions with other sv-* systems)
   SCOPED GENERIC PRIMITIVES (still module-owned for now)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 143: Line 129:
}
}


/* Image wrapper produced by Lua */
/* NOTE:
.sv-gi-card .sv-img,
  .sv-img wrapper + base image rounding now provided globally by Common.css.
.sv-skill-card .sv-img {
  Keep this small, module-specific enhancement only (shadow for card imagery).
  display: inline-flex;
*/
  align-items: center;
  justify-content: center;
}
 
.sv-gi-card .sv-img img,
.sv-gi-card .sv-img img,
.sv-skill-card .sv-img img {
.sv-skill-card .sv-img img {
  display: block;
  border-radius: 10px;
   box-shadow: 0 10px 18px rgba(0,0,0,0.35);
   box-shadow: 0 10px 18px rgba(0,0,0,0.35);
}
}


/* Accessible focus for span-buttons */
/* Focus ring stays module-scoped (safe regardless of global components) */
.sv-gi-card .sv-tip-btn:focus,
.sv-gi-card .sv-tip-btn:focus,
.sv-skill-card .sv-tip-btn:focus,
.sv-skill-card .sv-tip-btn:focus,
Line 223: Line 203:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   NOTES TIP (PHASE 4.1: span button + div popover) — SCOPED
   NOTES TIP (span button + div popover) — module-owned (not yet global)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 250: Line 230:
}
}


/* Optional “active” feel */
.sv-gi-card .sv-tip-btn[aria-expanded="true"],
.sv-gi-card .sv-tip-btn[aria-expanded="true"],
.sv-skill-card .sv-tip-btn[aria-expanded="true"],
.sv-skill-card .sv-tip-btn[aria-expanded="true"] {
.sv-gi-card .sv-disclose-btn[aria-expanded="true"],
.sv-skill-card .sv-disclose-btn[aria-expanded="true"] {
   background: rgba(255,255,255,0.07);
   background: rgba(255,255,255,0.07);
   border-color: rgba(255,255,255,0.10);
   border-color: rgba(255,255,255,0.10);
Line 275: Line 252:
}
}


/* IMPORTANT: do NOT use display:none here; JS controls visibility via .sv-hidden + [hidden] */
/* IMPORTANT: do NOT use display:none; JS controls via .sv-hidden + [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 287: Line 264:
   border-radius: 16px;
   border-radius: 16px;
   border: 1px solid rgba(255,255,255,0.08);
   border: 1px solid rgba(255,255,255,0.08);
   background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), rgba(10, 14, 24, 0.92);
   background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    rgba(10, 14, 24, 0.92);
   box-shadow: 0 18px 40px rgba(0,0,0,0.60);
   box-shadow: 0 18px 40px rgba(0,0,0,0.60);
   overflow: hidden;
   overflow: hidden;
Line 327: Line 306:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   META ROW (4 CARDS) — SCOPED GENERICS
   META ROW (4 CARDS)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 391: Line 370:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   REQUIREMENTS / USERS ROW (PHASE 4.1) — SCOPED
   REQUIREMENTS / USERS ROW (layout stays here; component styling is global)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 404: Line 383:
.sv-gi-card .sv-disclose,
.sv-gi-card .sv-disclose,
.sv-skill-card .sv-disclose {
.sv-skill-card .sv-disclose {
  position: relative;
   flex: 1 1 220px;
   flex: 1 1 220px;
   min-width: 220px;
   min-width: 220px;
}
}


.sv-gi-card .sv-disclose-btn,
/* NOTE:
.sv-skill-card .sv-disclose-btn {
  .sv-disclose*, .sv-disclose-btn, .sv-disclose-pop*, etc. now come from Common.css
  display: flex;
*/
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  font-weight: 900;
  color: rgba(235,244,255,0.92);
}
 
.sv-gi-card .sv-disclose-btn:hover,
.sv-skill-card .sv-disclose-btn:hover {
  background: rgba(255,255,255,0.05);
}
 
.sv-gi-card .sv-disclose-label,
.sv-skill-card .sv-disclose-label {
  min-width: 0;
  word-wrap: break-word;
}
 
.sv-gi-card .sv-disclose-count,
.sv-skill-card .sv-disclose-count {
  font-weight: 800;
  font-size: 13px;
  color: rgba(210,224,245,0.70);
  margin-left: 10px;
  white-space: nowrap;
}
 
/* IMPORTANT: do NOT use display:none here; JS controls visibility via .sv-hidden + [hidden] */
.sv-gi-card .sv-disclose-pop,
.sv-skill-card .sv-disclose-pop {
  display: block;
  position: absolute;
  z-index: 50;
  top: 46px;
  left: 0;
  width: 420px;
  max-width: 92vw;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), rgba(10, 14, 24, 0.92);
  box-shadow: 0 18px 40px rgba(0,0,0,0.60);
  overflow: hidden;
}
 
.sv-gi-card .sv-disclose-pop-head,
.sv-skill-card .sv-disclose-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
}
 
.sv-gi-card .sv-disclose-pop-title,
.sv-skill-card .sv-disclose-pop-title {
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.2px;
  color: rgba(245,250,255,0.96);
}
 
.sv-gi-card .sv-disclose-pop-hint,
.sv-skill-card .sv-disclose-pop-hint {
  font-size: 12px;
  color: rgba(210,224,245,0.65);
}
 
.sv-gi-card .sv-disclose-list,
.sv-skill-card .sv-disclose-list {
  margin: 0;
  padding: 10px 12px 12px;
  list-style: none;
}
 
.sv-gi-card .sv-disclose-list li,
.sv-skill-card .sv-disclose-list li {
  padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,0.05);
  color: rgba(225,235,250,0.90);
  font-size: 13px;
}
 
.sv-gi-card .sv-disclose-list li:first-child,
.sv-skill-card .sv-disclose-list li:first-child {
  border-top: none;
  padding-top: 0;
}
 
.sv-gi-card .sv-disclose-group-title,
.sv-skill-card .sv-disclose-group-title {
  font-weight: 900;
  letter-spacing: 0.2px;
  color: rgba(210,224,245,0.78);
  padding-top: 10px;
}


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   LEVEL SELECTOR — SCOPED
   LEVEL SELECTOR (module-owned; not yet global)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 552: Line 429:
}
}


/* Shared base */
.sv-gi-card .sv-level-range,
.sv-gi-card .sv-level-range,
.sv-skill-card .sv-level-range {
.sv-skill-card .sv-level-range {
Line 559: Line 435:
}
}


/* Phase 4.1 custom slider (span-based) */
.sv-gi-card .sv-level-range--custom,
.sv-gi-card .sv-level-range--custom,
.sv-skill-card .sv-level-range--custom {
.sv-skill-card .sv-level-range--custom {
Line 590: Line 465:
   width: 0%;
   width: 0%;
   border-radius: 999px;
   border-radius: 999px;
   background: linear-gradient( 90deg, rgba(170,220,255,0.60), rgba(255,255,255,0.22) );
   background: linear-gradient(90deg, rgba(170,220,255,0.60), rgba(255,255,255,0.22));
}
}


Line 614: Line 489:
}
}


/* Optional tick label row (Lua emits empty container; keep stable spacing) */
.sv-gi-card .sv-level-ticklabels,
.sv-gi-card .sv-level-ticklabels,
.sv-skill-card .sv-level-ticklabels {
.sv-skill-card .sv-level-ticklabels {
Line 629: Line 503:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   SCALING TOP — SCOPED
   SCALING TOP
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 695: Line 569:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   CORE STATS GRID — SCOPED
   CORE STATS GRID
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 767: Line 641:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   TABS — SCOPED
   TABS — now global (Common.css). Keep only module wrapper spacing.
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 774: Line 648:
}
}


.sv-gi-card .sv-tabs-list,
/* Mechanics grid (tabpanel content) */
.sv-skill-card .sv-tabs-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
 
.sv-gi-card .sv-tab,
.sv-skill-card .sv-tab {
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  color: rgba(225,235,250,0.90);
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
}
 
.sv-gi-card .sv-tab:hover,
.sv-skill-card .sv-tab:hover {
  background: rgba(255,255,255,0.05);
}
 
.sv-gi-card .sv-tab[aria-selected="true"],
.sv-skill-card .sv-tab[aria-selected="true"] {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.10);
  color: rgba(245,250,255,0.98);
}
 
.sv-gi-card .sv-tabpanel,
.sv-skill-card .sv-tabpanel {
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}
 
/* Mechanics grid */
.sv-gi-card .sv-kw-grid,
.sv-gi-card .sv-kw-grid,
.sv-skill-card .sv-kw-grid {
.sv-skill-card .sv-kw-grid {
Line 857: Line 691:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   EFFECT / EVENT CARDS — SCOPED
   EFFECT / EVENT CARDS
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 945: Line 779:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   RESPONSIVE (scope popover repositioning)
   RESPONSIVE (keep popover repositioning, since it is card-layout specific)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Retrieved from "https://spiritvale.info/wiki/Module:GameInfo/styles.css"