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 — Reuse Pass 1 (consume shared Common.css components) */
/* Phase 4.1 — Reuse + Theme Match + Mobile Opaque */


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   BASE CARD + SAFETY
   LAYOUT (no theme colors here)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 12: Line 12:
   margin: 18px auto;
   margin: 18px auto;
   border-radius: 22px;
   border-radius: 22px;
   border: 1px solid rgba(255, 255, 255, 0.085);
   border: 1px solid;
  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);
  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;
  color: rgba(235, 244, 255, 0.92);
   font-size: 15px;
   font-size: 15px;
   line-height: 1.35;
   line-height: 1.35;
  box-shadow: 0 16px 38px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}
}


Line 35: Line 30:
.sv-skill-bottom {
.sv-skill-bottom {
   padding: 10px 14px 12px;
   padding: 10px 14px 12px;
   border-top: 1px solid rgba(255, 255, 255, 0.050);
   border-top: 1px solid;
   border-radius: 0 0 22px 22px;
   border-radius: 0 0 22px 22px;
  background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.08));
}
}


Line 48: Line 42:
}
}


.sv-gi-card a,
/* Error capsule */
.sv-skill-card a {
  color: rgba(170, 220, 255, 0.95);
  text-decoration: none;
}
 
.sv-gi-card a:hover,
.sv-skill-card a:hover {
  text-decoration: underline;
}
 
/* Simple error capsule */
.sv-gi-error {
.sv-gi-error {
   max-width: 600px;
   max-width: 600px;
Line 65: Line 48:
   padding: 10px 12px;
   padding: 10px 12px;
   border-radius: 14px;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.085);
   border: 1px solid;
  background: rgba(0,0,0,0.20);
}
}


/* NOTE:
/* Remove default details marker */
  .sv-hidden + [hidden] are now provided globally by Common.css
  .sv-miss is now provided globally by Common.css
*/
 
/* Remove default details marker (safe even if no <details> used) */
.sv-gi-card summary,
.sv-gi-card summary,
.sv-skill-card summary {
.sv-skill-card summary {
   list-style: none;
   list-style: none;
}
}
/* NOTE:
  - .sv-hidden and [hidden] are now global in Common.css
  - .sv-miss is now global in Common.css
  - .sv-img is now global in Common.css
  - .sv-pill is now global in Common.css
  - Tabs + Disclosure are now global in Common.css
*/


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


Line 114: Line 98:
}
}


/* ----------------------------------------------------------------------------
/* Keep image shadow inside cards (global .sv-img handles rounding) */
  SCOPED GENERIC PRIMITIVES (still module-owned for now)
---------------------------------------------------------------------------- */
 
.sv-gi-card .sv-pill,
.sv-skill-card .sv-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.050);
  background: rgba(255,255,255,0.05);
  white-space: nowrap;
}
 
/* NOTE:
  .sv-img wrapper + base image rounding now provided globally by Common.css.
  Keep this small, module-specific enhancement only (shadow for card imagery).
*/
.sv-gi-card .sv-img img,
.sv-gi-card .sv-img img,
.sv-skill-card .sv-img img {
.sv-skill-card .sv-img img {
   box-shadow: 0 10px 18px rgba(0,0,0,0.35);
   box-shadow: 0 10px 18px rgba(0,0,0,0.25);
}
}


/* Focus ring stays module-scoped (safe regardless of global components) */
/* Focus outline (no markup change required) */
.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 145: Line 111:
.sv-gi-card .sv-tab:focus,
.sv-gi-card .sv-tab:focus,
.sv-skill-card .sv-tab:focus {
.sv-skill-card .sv-tab:focus {
   outline: 2px solid rgba(170, 220, 255, 0.55);
   outline: 2px solid;
   outline-offset: 2px;
   outline-offset: 2px;
}
}
Line 165: Line 131:
   height: 64px;
   height: 64px;
   border-radius: 16px;
   border-radius: 16px;
   border: 1px solid rgba(255,255,255,0.06);
   border: 1px solid;
  background: rgba(255,255,255,0.03);
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
Line 189: Line 154:
   font-size: 22px;
   font-size: 22px;
   line-height: 1.10;
   line-height: 1.10;
  color: rgba(245, 250, 255, 0.98);
   min-width: 0;
   min-width: 0;
   word-wrap: break-word;
   word-wrap: break-word;
Line 196: Line 160:
.sv-skill-desc {
.sv-skill-desc {
   margin-top: 6px;
   margin-top: 6px;
  color: rgba(210, 224, 245, 0.86);
   font-size: 14px;
   font-size: 14px;
   line-height: 1.35;
   line-height: 1.35;
Line 203: Line 166:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   NOTES TIP (span button + div popover) — module-owned (not yet global)
   NOTES TIP (module-owned for now)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 220: Line 183:
   height: 28px;
   height: 28px;
   border-radius: 999px;
   border-radius: 999px;
   border: 1px solid rgba(255,255,255,0.06);
   border: 1px solid;
  background: rgba(255,255,255,0.04);
   cursor: pointer;
   cursor: pointer;
}
.sv-gi-card .sv-tip-btn:hover,
.sv-skill-card .sv-tip-btn:hover {
  background: rgba(255,255,255,0.06);
}
}


.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"] {
  background: rgba(255,255,255,0.07);
   border-color: inherit;
   border-color: rgba(255,255,255,0.10);
}
}


Line 247: Line 203:
   font-size: 12px;
   font-size: 12px;
   line-height: 1;
   line-height: 1;
  color: rgba(245,250,255,0.95);
   border: 1px solid;
  background: rgba(0,0,0,0.12);
   border: 1px solid rgba(255,255,255,0.08);
}
}


Line 263: Line 217:
   max-width: 92vw;
   max-width: 92vw;
   border-radius: 16px;
   border-radius: 16px;
   border: 1px solid rgba(255,255,255,0.08);
   border: 1px solid;
  background:
   box-shadow: 0 18px 40px rgba(0,0,0,0.35);
    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;
   overflow: hidden;
}
}
Line 277: Line 228:
   justify-content: space-between;
   justify-content: space-between;
   padding: 10px 12px;
   padding: 10px 12px;
   border-bottom: 1px solid rgba(255,255,255,0.06);
   border-bottom: 1px solid;
  background: rgba(255,255,255,0.03);
   cursor: pointer;
   cursor: pointer;
}
}
Line 287: Line 237:
   font-size: 13px;
   font-size: 13px;
   letter-spacing: 0.2px;
   letter-spacing: 0.2px;
  color: rgba(245,250,255,0.96);
}
}


Line 293: Line 242:
.sv-skill-card .sv-tip-pop-hint {
.sv-skill-card .sv-tip-pop-hint {
   font-size: 12px;
   font-size: 12px;
  color: rgba(210,224,245,0.65);
}
}


Line 300: Line 248:
   padding: 10px 12px;
   padding: 10px 12px;
   font-size: 13px;
   font-size: 13px;
  color: rgba(225,235,250,0.88);
   line-height: 1.4;
   line-height: 1.4;
   word-wrap: break-word;
   word-wrap: break-word;
Line 323: Line 270:
   padding: 9px 10px;
   padding: 9px 10px;
   border-radius: 16px;
   border-radius: 16px;
   border: 1px solid rgba(255,255,255,0.06);
   border: 1px solid;
  background: rgba(255,255,255,0.03);
}
}


Line 333: Line 279:
   height: 28px;
   height: 28px;
   border-radius: 10px;
   border-radius: 10px;
   border: 1px solid rgba(255,255,255,0.06);
   border: 1px solid;
  background: rgba(0,0,0,0.10);
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
Line 356: Line 301:
.sv-skill-card .sv-meta-text {
.sv-skill-card .sv-meta-text {
   font-weight: 900;
   font-weight: 900;
  color: rgba(235,244,255,0.92);
   font-size: 15px;
   font-size: 15px;
   line-height: 1.10;
   line-height: 1.10;
Line 370: Line 314:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   REQUIREMENTS / USERS ROW (layout stays here; component styling is global)
   REQUIREMENTS / USERS ROW (layout only; disclosure component is global)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 386: Line 330:
   min-width: 220px;
   min-width: 220px;
}
}
/* NOTE:
  .sv-disclose*, .sv-disclose-btn, .sv-disclose-pop*, etc. now come from Common.css
*/


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


Line 399: Line 339:
   padding: 10px 12px;
   padding: 10px 12px;
   border-radius: 16px;
   border-radius: 16px;
   border: 1px solid rgba(255,255,255,0.06);
   border: 1px solid;
  background: rgba(255,255,255,0.03);
}
}


Line 413: Line 352:


.sv-gi-card .sv-level-label,
.sv-gi-card .sv-level-label,
.sv-skill-card .sv-level-label {
.sv-skill-card .sv-level-label,
  font-weight: 900;
  color: rgba(235,244,255,0.90);
}
 
.sv-gi-card .sv-level-num,
.sv-gi-card .sv-level-num,
.sv-skill-card .sv-level-num {
.sv-skill-card .sv-level-num {
   font-weight: 900;
   font-weight: 900;
  color: rgba(245,250,255,0.98);
}
}


Line 441: Line 375:
   height: 26px;
   height: 26px;
   border-radius: 999px;
   border-radius: 999px;
   border: 1px solid rgba(255,255,255,0.07);
   border: 1px solid;
  background: rgba(0,0,0,0.16);
   cursor: pointer;
   cursor: pointer;
}
}
Line 455: Line 388:
   height: 8px;
   height: 8px;
   border-radius: 999px;
   border-radius: 999px;
  background: rgba(255,255,255,0.06);
   overflow: hidden;
   overflow: hidden;
}
}
Line 465: Line 397:
   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));
}
}


Line 478: Line 409:
   height: 18px;
   height: 18px;
   border-radius: 999px;
   border-radius: 999px;
   border: 2px solid rgba(255,255,255,0.16);
   border: 2px solid;
  background: rgba(245,250,255,0.92);
   box-shadow: 0 10px 18px rgba(0,0,0,0.35);
   box-shadow: 0 10px 18px rgba(0,0,0,0.45);
}
}


.sv-gi-card .sv-level-range--custom:focus,
.sv-gi-card .sv-level-range--custom:focus,
.sv-skill-card .sv-level-range--custom:focus {
.sv-skill-card .sv-level-range--custom:focus {
   outline: 2px solid rgba(170, 220, 255, 0.55);
   outline: 2px solid;
   outline-offset: 2px;
   outline-offset: 2px;
}
}
Line 497: Line 427:
   font-weight: 900;
   font-weight: 900;
   font-size: 12px;
   font-size: 12px;
  color: rgba(210,224,245,0.70);
   line-height: 1.1;
   line-height: 1.1;
   min-height: 12px;
   min-height: 12px;
Line 514: Line 443:
   padding: 10px 12px;
   padding: 10px 12px;
   border-radius: 16px;
   border-radius: 16px;
   border: 1px solid rgba(255,255,255,0.06);
   border: 1px solid;
  background: rgba(255,255,255,0.03);
}
}


Line 536: Line 464:
   font-size: 18px;
   font-size: 18px;
   line-height: 1.10;
   line-height: 1.10;
  color: rgba(245,250,255,0.98);
   word-wrap: break-word;
   word-wrap: break-word;
}
}
Line 546: Line 473:
   font-weight: 900;
   font-weight: 900;
   letter-spacing: 0.25px;
   letter-spacing: 0.25px;
  color: rgba(210,224,245,0.65);
   text-transform: uppercase;
   text-transform: uppercase;
}
}
Line 561: Line 487:
   padding: 8px 10px;
   padding: 8px 10px;
   border-radius: 14px;
   border-radius: 14px;
   border: 1px solid rgba(255,255,255,0.05);
   border: 1px solid;
  background: rgba(0,0,0,0.12);
  color: rgba(225,235,250,0.88);
   font-weight: 800;
   font-weight: 800;
   font-size: 13px;
   font-size: 13px;
Line 580: Line 504:
   padding: 10px 12px;
   padding: 10px 12px;
   border-radius: 16px;
   border-radius: 16px;
   border: 1px solid rgba(255,255,255,0.06);
   border: 1px solid;
  background: rgba(255,255,255,0.03);
}
}


Line 595: Line 518:
   padding: 10px 10px 9px;
   padding: 10px 10px 9px;
   border-radius: 14px;
   border-radius: 14px;
   border: 1px solid rgba(255,255,255,0.05);
   border: 1px solid;
  background: rgba(0,0,0,0.12);
   min-width: 0;
   min-width: 0;
}
}
Line 613: Line 535:
   font-size: 17px;
   font-size: 17px;
   line-height: 1.10;
   line-height: 1.10;
  color: rgba(245,250,255,0.98);
   min-width: 0;
   min-width: 0;
   word-wrap: break-word;
   word-wrap: break-word;
Line 622: Line 543:
   font-weight: 900;
   font-weight: 900;
   font-size: 12px;
   font-size: 12px;
  color: rgba(210,224,245,0.70);
}
}


Line 632: Line 552:
   letter-spacing: 0.25px;
   letter-spacing: 0.25px;
   text-transform: uppercase;
   text-transform: uppercase;
  color: rgba(210,224,245,0.65);
}
}


Line 641: Line 560:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   TABS — now global (Common.css). Keep only module wrapper spacing.
   TABS WRAPPER (tabs component is global)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 660: Line 579:
   padding: 10px 10px 9px;
   padding: 10px 10px 9px;
   border-radius: 14px;
   border-radius: 14px;
   border: 1px solid rgba(255,255,255,0.05);
   border: 1px solid;
  background: rgba(0,0,0,0.12);
}
}


Line 670: Line 588:
   letter-spacing: 0.25px;
   letter-spacing: 0.25px;
   text-transform: uppercase;
   text-transform: uppercase;
  color: rgba(210,224,245,0.65);
}
}


Line 678: Line 595:
   font-size: 15px;
   font-size: 15px;
   font-weight: 900;
   font-weight: 900;
  color: rgba(245,250,255,0.96);
   word-wrap: break-word;
   word-wrap: break-word;
}
}
Line 708: Line 624:
   padding: 10px 10px;
   padding: 10px 10px;
   border-radius: 16px;
   border-radius: 16px;
   border: 1px solid rgba(255,255,255,0.06);
   border: 1px solid;
  background: rgba(0,0,0,0.12);
  color: rgba(235,244,255,0.90);
   min-width: 0;
   min-width: 0;
}
}
Line 720: Line 634:
   height: 52px;
   height: 52px;
   border-radius: 16px;
   border-radius: 16px;
   border: 1px solid rgba(255,255,255,0.06);
   border: 1px solid;
  background: rgba(255,255,255,0.03);
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
Line 745: Line 658:
   font-size: 15px;
   font-size: 15px;
   line-height: 1.15;
   line-height: 1.15;
  color: rgba(245,250,255,0.98);
   word-wrap: break-word;
   word-wrap: break-word;
}
}
Line 763: Line 675:
   padding: 3px 8px;
   padding: 3px 8px;
   border-radius: 999px;
   border-radius: 999px;
   border: 1px solid rgba(255,255,255,0.05);
   border: 1px solid;
  background: rgba(255,255,255,0.04);
   font-weight: 900;
   font-weight: 900;
   font-size: 12px;
   font-size: 12px;
  color: rgba(225,235,250,0.88);
}
}


Line 775: Line 685:
   font-weight: 900;
   font-weight: 900;
   font-size: 13px;
   font-size: 13px;
  color: rgba(210,224,245,0.75);
}
}


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   RESPONSIVE (keep popover repositioning, since it is card-layout specific)
   THEME: Citizen NIGHT (matches exported token palette)
---------------------------------------------------------------------------- */
 
:root.skin-theme-clientpref-night .sv-gi-card,
:root.skin-theme-clientpref-night .sv-skill-card {
  background-color: #071225;
  background-image: linear-gradient(180deg, #10264b, #071225);
  border-color: #203e6f;
  color: #eaf2ff;
}
 
:root.skin-theme-clientpref-night .sv-gi-card a,
:root.skin-theme-clientpref-night .sv-skill-card a {
  color: #5aa6ff;
}
 
:root.skin-theme-clientpref-night .sv-gi-error {
  border-color: #203e6f;
  background: #10264b;
  color: #eaf2ff;
}
 
:root.skin-theme-clientpref-night .sv-gi-bottom,
:root.skin-theme-clientpref-night .sv-skill-bottom {
  border-top-color: #203e6f;
  background-color: #071225;
}
 
:root.skin-theme-clientpref-night .sv-skill-icon,
:root.skin-theme-clientpref-night .sv-gi-card .sv-meta-card,
:root.skin-theme-clientpref-night .sv-skill-card .sv-meta-card,
:root.skin-theme-clientpref-night .sv-skill-level,
:root.skin-theme-clientpref-night .sv-gi-card .sv-scaling-row,
:root.skin-theme-clientpref-night .sv-skill-card .sv-scaling-row,
:root.skin-theme-clientpref-night .sv-gi-card .sv-core-row,
:root.skin-theme-clientpref-night .sv-skill-card .sv-core-row,
:root.skin-theme-clientpref-night .sv-gi-card .sv-ref-card,
:root.skin-theme-clientpref-night .sv-skill-card .sv-ref-card,
:root.skin-theme-clientpref-night .sv-gi-card .sv-tabpanel,
:root.skin-theme-clientpref-night .sv-skill-card .sv-tabpanel {
  background-color: #0b1a33;
  border-color: #203e6f;
}
 
:root.skin-theme-clientpref-night .sv-gi-card .sv-meta-icon,
:root.skin-theme-clientpref-night .sv-skill-card .sv-meta-icon,
:root.skin-theme-clientpref-night .sv-gi-card .sv-ref-ico,
:root.skin-theme-clientpref-night .sv-skill-card .sv-ref-ico {
  background-color: #071225;
  border-color: #203e6f;
}
 
:root.skin-theme-clientpref-night .sv-skill-title {
  color: #eaf2ff;
}
 
:root.skin-theme-clientpref-night .sv-skill-desc {
  color: #c9d8f2;
}
 
:root.skin-theme-clientpref-night .sv-gi-card .sv-meta-text,
:root.skin-theme-clientpref-night .sv-skill-card .sv-meta-text,
:root.skin-theme-clientpref-night .sv-gi-card .sv-ref-title,
:root.skin-theme-clientpref-night .sv-skill-card .sv-ref-title,
:root.skin-theme-clientpref-night .sv-gi-card .sv-scaling-value,
:root.skin-theme-clientpref-night .sv-skill-card .sv-scaling-value,
:root.skin-theme-clientpref-night .sv-gi-card .sv-core-num,
:root.skin-theme-clientpref-night .sv-skill-card .sv-core-num,
:root.skin-theme-clientpref-night .sv-gi-card .sv-kw-value,
:root.skin-theme-clientpref-night .sv-skill-card .sv-kw-value {
  color: #eaf2ff;
}
 
:root.skin-theme-clientpref-night .sv-gi-card .sv-core-unit,
:root.skin-theme-clientpref-night .sv-skill-card .sv-core-unit,
:root.skin-theme-clientpref-night .sv-gi-card .sv-ref-sub,
:root.skin-theme-clientpref-night .sv-skill-card .sv-ref-sub {
  color: #9fb3d8;
}
 
:root.skin-theme-clientpref-night .sv-gi-card .sv-core-label,
:root.skin-theme-clientpref-night .sv-skill-card .sv-core-label,
:root.skin-theme-clientpref-night .sv-gi-card .sv-scaling-label,
:root.skin-theme-clientpref-night .sv-skill-card .sv-scaling-label,
:root.skin-theme-clientpref-night .sv-gi-card .sv-kw-label,
:root.skin-theme-clientpref-night .sv-skill-card .sv-kw-label {
  color: #9fb3d8;
}
 
:root.skin-theme-clientpref-night .sv-gi-card .sv-level-range--custom,
:root.skin-theme-clientpref-night .sv-skill-card .sv-level-range--custom,
:root.skin-theme-clientpref-night .sv-gi-card .sv-level-track,
:root.skin-theme-clientpref-night .sv-skill-card .sv-level-track {
  background-color: #071225;
  border-color: #203e6f;
}
 
:root.skin-theme-clientpref-night .sv-gi-card .sv-level-fill,
:root.skin-theme-clientpref-night .sv-skill-card .sv-level-fill {
  background-color: #5aa6ff;
}
 
:root.skin-theme-clientpref-night .sv-gi-card .sv-level-thumb,
:root.skin-theme-clientpref-night .sv-skill-card .sv-level-thumb {
  background-color: #eaf2ff;
  border-color: #2b5596;
}
 
:root.skin-theme-clientpref-night .sv-gi-card .sv-tip-btn,
:root.skin-theme-clientpref-night .sv-skill-card .sv-tip-btn,
:root.skin-theme-clientpref-night .sv-gi-card .sv-ico,
:root.skin-theme-clientpref-night .sv-skill-card .sv-ico {
  background-color: #0b1a33;
  border-color: #203e6f;
  color: #eaf2ff;
}
 
:root.skin-theme-clientpref-night .sv-gi-card .sv-tip-pop,
:root.skin-theme-clientpref-night .sv-skill-card .sv-tip-pop {
  background-color: #071225;
  border-color: #203e6f;
  color: #eaf2ff;
}
 
:root.skin-theme-clientpref-night .sv-gi-card .sv-tip-pop-head,
:root.skin-theme-clientpref-night .sv-skill-card .sv-tip-pop-head {
  background-color: #0b1a33;
  border-bottom-color: #203e6f;
}
 
:root.skin-theme-clientpref-night .sv-gi-card .sv-tip-pop-hint,
:root.skin-theme-clientpref-night .sv-skill-card .sv-tip-pop-hint {
  color: #9fb3d8;
}
 
:root.skin-theme-clientpref-night .sv-gi-card .sv-ref-stat,
:root.skin-theme-clientpref-night .sv-skill-card .sv-ref-stat,
:root.skin-theme-clientpref-night .sv-gi-card .sv-scaling-item,
:root.skin-theme-clientpref-night .sv-skill-card .sv-scaling-item,
:root.skin-theme-clientpref-night .sv-gi-card .sv-core-cell,
:root.skin-theme-clientpref-night .sv-skill-card .sv-core-cell,
:root.skin-theme-clientpref-night .sv-gi-card .sv-kw-cell,
:root.skin-theme-clientpref-night .sv-skill-card .sv-kw-cell {
  background-color: #071225;
  border-color: #203e6f;
  color: #c9d8f2;
}
 
:root.skin-theme-clientpref-night .sv-gi-card .sv-level-ticklabels,
:root.skin-theme-clientpref-night .sv-skill-card .sv-level-ticklabels {
  color: #9fb3d8;
}
 
:root.skin-theme-clientpref-night .sv-gi-card .sv-tab:focus,
:root.skin-theme-clientpref-night .sv-skill-card .sv-tab:focus,
:root.skin-theme-clientpref-night .sv-gi-card .sv-disclose-btn:focus,
:root.skin-theme-clientpref-night .sv-skill-card .sv-disclose-btn:focus,
:root.skin-theme-clientpref-night .sv-gi-card .sv-tip-btn:focus,
:root.skin-theme-clientpref-night .sv-skill-card .sv-tip-btn:focus,
:root.skin-theme-clientpref-night .sv-gi-card .sv-level-range--custom:focus,
:root.skin-theme-clientpref-night .sv-skill-card .sv-level-range--custom:focus {
  outline-color: #7bb8ff;
}
 
/* ----------------------------------------------------------------------------
  THEME: Citizen DAY (matches exported token palette)
---------------------------------------------------------------------------- */
 
:root.skin-theme-clientpref-day .sv-gi-card,
:root.skin-theme-clientpref-day .sv-skill-card {
  background-color: #e8f2ff;
  background-image: linear-gradient(180deg, #cfe3ff, #f3f8ff);
  border-color: #bdd7ff;
  color: #0b1a33;
  box-shadow: 0 16px 38px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.85);
}
 
:root.skin-theme-clientpref-day .sv-gi-card a,
:root.skin-theme-clientpref-day .sv-skill-card a {
  color: #0b63f0;
}
 
:root.skin-theme-clientpref-day .sv-gi-error {
  border-color: #bdd7ff;
  background: #f3f8ff;
  color: #0b1a33;
}
 
:root.skin-theme-clientpref-day .sv-gi-bottom,
:root.skin-theme-clientpref-day .sv-skill-bottom {
  border-top-color: #bdd7ff;
  background-color: #f3f8ff;
}
 
:root.skin-theme-clientpref-day .sv-skill-icon,
:root.skin-theme-clientpref-day .sv-gi-card .sv-meta-card,
:root.skin-theme-clientpref-day .sv-skill-card .sv-meta-card,
:root.skin-theme-clientpref-day .sv-skill-level,
:root.skin-theme-clientpref-day .sv-gi-card .sv-scaling-row,
:root.skin-theme-clientpref-day .sv-skill-card .sv-scaling-row,
:root.skin-theme-clientpref-day .sv-gi-card .sv-core-row,
:root.skin-theme-clientpref-day .sv-skill-card .sv-core-row,
:root.skin-theme-clientpref-day .sv-gi-card .sv-ref-card,
:root.skin-theme-clientpref-day .sv-skill-card .sv-ref-card,
:root.skin-theme-clientpref-day .sv-gi-card .sv-tabpanel,
:root.skin-theme-clientpref-day .sv-skill-card .sv-tabpanel {
  background-color: #f3f8ff;
  border-color: #bdd7ff;
}
 
:root.skin-theme-clientpref-day .sv-gi-card .sv-meta-icon,
:root.skin-theme-clientpref-day .sv-skill-card .sv-meta-icon,
:root.skin-theme-clientpref-day .sv-gi-card .sv-ref-ico,
:root.skin-theme-clientpref-day .sv-skill-card .sv-ref-ico {
  background-color: #cfe3ff;
  border-color: #bdd7ff;
}
 
:root.skin-theme-clientpref-day .sv-skill-title {
  color: #0b1a33;
}
 
:root.skin-theme-clientpref-day .sv-skill-desc {
  color: #1f3556;
}
 
:root.skin-theme-clientpref-day .sv-gi-card .sv-meta-text,
:root.skin-theme-clientpref-day .sv-skill-card .sv-meta-text,
:root.skin-theme-clientpref-day .sv-gi-card .sv-ref-title,
:root.skin-theme-clientpref-day .sv-skill-card .sv-ref-title,
:root.skin-theme-clientpref-day .sv-gi-card .sv-scaling-value,
:root.skin-theme-clientpref-day .sv-skill-card .sv-scaling-value,
:root.skin-theme-clientpref-day .sv-gi-card .sv-core-num,
:root.skin-theme-clientpref-day .sv-skill-card .sv-core-num,
:root.skin-theme-clientpref-day .sv-gi-card .sv-kw-value,
:root.skin-theme-clientpref-day .sv-skill-card .sv-kw-value {
  color: #0b1a33;
}
 
:root.skin-theme-clientpref-day .sv-gi-card .sv-core-unit,
:root.skin-theme-clientpref-day .sv-skill-card .sv-core-unit,
:root.skin-theme-clientpref-day .sv-gi-card .sv-ref-sub,
:root.skin-theme-clientpref-day .sv-skill-card .sv-ref-sub,
:root.skin-theme-clientpref-day .sv-gi-card .sv-core-label,
:root.skin-theme-clientpref-day .sv-skill-card .sv-core-label,
:root.skin-theme-clientpref-day .sv-gi-card .sv-scaling-label,
:root.skin-theme-clientpref-day .sv-skill-card .sv-scaling-label,
:root.skin-theme-clientpref-day .sv-gi-card .sv-kw-label,
:root.skin-theme-clientpref-day .sv-skill-card .sv-kw-label {
  color: #456083;
}
 
:root.skin-theme-clientpref-day .sv-gi-card .sv-level-range--custom,
:root.skin-theme-clientpref-day .sv-skill-card .sv-level-range--custom,
:root.skin-theme-clientpref-day .sv-gi-card .sv-level-track,
:root.skin-theme-clientpref-day .sv-skill-card .sv-level-track {
  background-color: #e8f2ff;
  border-color: #bdd7ff;
}
 
:root.skin-theme-clientpref-day .sv-gi-card .sv-level-fill,
:root.skin-theme-clientpref-day .sv-skill-card .sv-level-fill {
  background-color: #0b63f0;
}
 
:root.skin-theme-clientpref-day .sv-gi-card .sv-level-thumb,
:root.skin-theme-clientpref-day .sv-skill-card .sv-level-thumb {
  background-color: #0b1a33;
  border-color: #9fc4ff;
}
 
:root.skin-theme-clientpref-day .sv-gi-card .sv-tip-btn,
:root.skin-theme-clientpref-day .sv-skill-card .sv-tip-btn,
:root.skin-theme-clientpref-day .sv-gi-card .sv-ico,
:root.skin-theme-clientpref-day .sv-skill-card .sv-ico {
  background-color: #cfe3ff;
  border-color: #bdd7ff;
  color: #0b1a33;
}
 
:root.skin-theme-clientpref-day .sv-gi-card .sv-tip-pop,
:root.skin-theme-clientpref-day .sv-skill-card .sv-tip-pop {
  background-color: #f3f8ff;
  border-color: #bdd7ff;
  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-color: #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;
}
 
:root.skin-theme-clientpref-day .sv-gi-card .sv-ref-stat,
:root.skin-theme-clientpref-day .sv-skill-card .sv-ref-stat,
:root.skin-theme-clientpref-day .sv-gi-card .sv-scaling-item,
:root.skin-theme-clientpref-day .sv-skill-card .sv-scaling-item,
:root.skin-theme-clientpref-day .sv-gi-card .sv-core-cell,
:root.skin-theme-clientpref-day .sv-skill-card .sv-core-cell,
:root.skin-theme-clientpref-day .sv-gi-card .sv-kw-cell,
:root.skin-theme-clientpref-day .sv-skill-card .sv-kw-cell {
  background-color: #e8f2ff;
  border-color: #bdd7ff;
  color: #1f3556;
}
 
:root.skin-theme-clientpref-day .sv-gi-card .sv-level-ticklabels,
:root.skin-theme-clientpref-day .sv-skill-card .sv-level-ticklabels {
  color: #456083;
}
 
:root.skin-theme-clientpref-day .sv-gi-card .sv-tab:focus,
:root.skin-theme-clientpref-day .sv-skill-card .sv-tab:focus,
:root.skin-theme-clientpref-day .sv-gi-card .sv-disclose-btn:focus,
:root.skin-theme-clientpref-day .sv-skill-card .sv-disclose-btn:focus,
:root.skin-theme-clientpref-day .sv-gi-card .sv-tip-btn:focus,
:root.skin-theme-clientpref-day .sv-skill-card .sv-tip-btn:focus,
:root.skin-theme-clientpref-day .sv-gi-card .sv-level-range--custom:focus,
:root.skin-theme-clientpref-day .sv-skill-card .sv-level-range--custom:focus {
  outline-color: #0b63f0;
}
 
/* ----------------------------------------------------------------------------
  THEME: Citizen OS (match via prefers-color-scheme)
---------------------------------------------------------------------------- */
 
@media (prefers-color-scheme: light) {
  :root.skin-theme-clientpref-os .sv-gi-card,
  :root.skin-theme-clientpref-os .sv-skill-card { background-color: #e8f2ff; background-image: linear-gradient(180deg, #cfe3ff, #f3f8ff); border-color: #bdd7ff; color: #0b1a33; box-shadow: 0 16px 38px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.85); }
  :root.skin-theme-clientpref-os .sv-gi-card a,
  :root.skin-theme-clientpref-os .sv-skill-card a { color: #0b63f0; }
}
 
@media (prefers-color-scheme: dark) {
  :root.skin-theme-clientpref-os .sv-gi-card,
  :root.skin-theme-clientpref-os .sv-skill-card { background-color: #071225; background-image: linear-gradient(180deg, #10264b, #071225); border-color: #203e6f; color: #eaf2ff; }
  :root.skin-theme-clientpref-os .sv-gi-card a,
  :root.skin-theme-clientpref-os .sv-skill-card a { color: #5aa6ff; }
}
 
/* ----------------------------------------------------------------------------
  RESPONSIVE
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 802: Line 1,057:
   }
   }


   .sv-skill-title {
   .sv-skill-title { font-size: 20px; }
    font-size: 20px;
  }


   .sv-skill-meta {
   .sv-skill-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


   .sv-gi-card .sv-core-grid,
   .sv-gi-card .sv-core-grid,
   .sv-skill-card .sv-core-grid {
   .sv-skill-card .sv-core-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


   .sv-gi-card .sv-ref-grid,
   .sv-gi-card .sv-ref-grid,
   .sv-skill-card .sv-ref-grid {
   .sv-skill-card .sv-ref-grid { grid-template-columns: 1fr; }
    grid-template-columns: 1fr;
  }


   .sv-gi-card .sv-tip-pop,
   .sv-gi-card .sv-tip-pop,
Line 833: Line 1,080:
/* Mobile */
/* Mobile */
@media (max-width: 520px) {
@media (max-width: 520px) {
   .sv-skill-head {
   .sv-skill-head { gap: 10px; }
    gap: 10px;
  }


   .sv-skill-icon {
   .sv-skill-icon {
Line 843: Line 1,088:
   }
   }


   .sv-skill-title {
   .sv-skill-title { font-size: 18px; }
    font-size: 18px;
   .sv-skill-desc { font-size: 13px; }
  }
 
   .sv-skill-desc {
    font-size: 13px;
  }


   .sv-gi-card .sv-scaling-grid,
   .sv-gi-card .sv-scaling-grid,
   .sv-skill-card .sv-scaling-grid {
   .sv-skill-card .sv-scaling-grid { grid-template-columns: 1fr; }
    grid-template-columns: 1fr;
  }


   .sv-gi-card .sv-kw-grid,
   .sv-gi-card .sv-kw-grid,
   .sv-skill-card .sv-kw-grid {
   .sv-skill-card .sv-kw-grid { grid-template-columns: 1fr; }
    grid-template-columns: 1fr;
  }


   .sv-gi-card .sv-disclose,
   .sv-gi-card .sv-disclose,
Retrieved from "https://spiritvale.info/wiki/Module:GameInfo/styles.css"