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 3: Line 3:
/* Phase 4.1 — Unified + Reusable (Layout restored, scoped) */
/* Phase 4.1 — Unified + Reusable (Layout restored, scoped) */


/* NOTE (ownership):
/* NOTE (ownership)
   - Common.css owns shared components (slider/tabs/tips/discloses/popups) + tokens.
   --------------------------------------------------------------------------
   - This file owns only GameInfo-family layout/presentation (card + sections).
  Common.css owns shared components and tokens:
   - Transitional fallbacks are guarded with :not([data-...]) so Common can take over
  - slider anatomy
    as Lua/JS emit neutral attributes over time.
  - tabs
  - tips / discloses / popups
 
   This file owns GameInfo-family presentation only:
  - card shell
  - section layout
   - skill-specific display blocks
 
  Transitional fallbacks remain in place so Common.css can take over as
  Lua / JS progressively emit more neutral attributes and hooks.
*/
*/


/* ----------------------------------------------------------------------------
/* ==========================================================================
   1) BASE CARD + SAFETY
   1) BASE CARD + SAFETY
---------------------------------------------------------------------------- */
  ========================================================================== */


.sv-gi-card,
.sv-gi-card,
Line 36: Line 45:
}
}


/* Locked split zones */
/* Fixed top / bottom content zones */
.sv-gi-top,
.sv-gi-top,
.sv-skill-top{
.sv-skill-top{
Line 47: Line 56:
}
}


/* Predictable sizing */
/* Predictable sizing inside the card */
.sv-gi-card,
.sv-gi-card,
.sv-gi-card *,
.sv-gi-card *,
Line 55: Line 64:
}
}


/* Inline error shell */
.sv-gi-error{
.sv-gi-error{
   max-width:600px;
   max-width:600px;
Line 65: Line 75:
}
}


/* Ensure source popup nodes are hidden even without sitewide .sv-hidden */
/* Hide source popup payload nodes even if sitewide .sv-hidden is unavailable */
.sv-gi-card .sv-hidden,
.sv-gi-card .sv-hidden,
.sv-skill-card .sv-hidden{
.sv-skill-card .sv-hidden{
Line 71: Line 81:
}
}


/* Remove default details marker */
/* Remove default browser marker from summary elements */
.sv-gi-card summary,
.sv-gi-card summary,
.sv-skill-card summary{
.sv-skill-card summary{
Line 77: Line 87:
}
}


/* ----------------------------------------------------------------------------
/* ==========================================================================
   2) ICON-TEXT HARDENING
   2) ICONS, IMAGES, AND FALLBACK BADGES
---------------------------------------------------------------------------- */
  ========================================================================== */


.sv-skill-icon,
.sv-skill-icon,
Line 94: Line 104:
}
}


/* Size bumps for “?” badge inside icon boxes */
/* Fallback “?” badge sizing inside icon boxes */
.sv-skill-icon .sv-miss{
.sv-skill-icon .sv-miss{
   width:22px;
   width:22px;
Line 110: Line 120:
}
}


/* Card image enhancement (global .sv-img handles rounding) */
/* Image enhancement; global .sv-img still owns rounding behavior */
.sv-gi-card .sv-img img,
.sv-gi-card .sv-img img,
.sv-skill-card .sv-img img{
.sv-skill-card .sv-img img{
Line 116: Line 126:
}
}


/* ----------------------------------------------------------------------------
/* ==========================================================================
   3) SKILL HEADER (ICON + TITLE + NOTES + DESCRIPTION)
   3) SKILL HEADER
---------------------------------------------------------------------------- */
  ========================================================================== */


.sv-skill-head{
.sv-skill-head{
Line 152: Line 162:


.sv-skill-title{
.sv-skill-title{
  min-width:0;
  word-wrap:break-word;
   font-weight:900;
   font-weight:900;
  letter-spacing:0.2px;
   font-size:22px;
   font-size:22px;
   line-height:1.10;
   line-height:1.10;
  letter-spacing:0.2px;
   color:rgba(245,249,255,0.98);
   color:rgba(245,249,255,0.98);
  min-width:0;
  word-wrap:break-word;
}
}


.sv-skill-desc{
.sv-skill-desc{
   margin-top:6px;
   margin-top:6px;
   color:rgba(215,226,244,0.92);
   word-wrap:break-word;
 
   font-size:14px;
   font-size:14px;
   line-height:1.35;
   line-height:1.35;
   word-wrap:break-word;
   color:rgba(215,226,244,0.92);
}
}


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


.sv-skill-meta{
.sv-skill-meta{
Line 180: Line 192:
}
}


/* If meta row uses global .sv-pill */
/* Meta row fallback if global .sv-pill is used */
.sv-skill-card .sv-skill-meta .sv-pill,
.sv-skill-card .sv-skill-meta .sv-pill,
.sv-gi-card .sv-skill-meta .sv-pill{
.sv-gi-card .sv-skill-meta .sv-pill{
   width:100%;
   width:100%;
  min-height:34px;
  padding:0;
  display:flex;
  align-items:center;
   justify-content:center;
   justify-content:center;
   gap:6px;
   gap:6px;
  padding:0;
  min-height:34px;
  align-items:center;
   text-align:center;
   text-align:center;
   border-radius:999px;
   border-radius:999px;
   border:1px solid rgba(59,75,99,0.85);
   border:1px solid rgba(59,75,99,0.85);
Line 199: Line 214:
   font-size:12px;
   font-size:12px;
   line-height:1.02;
   line-height:1.02;
  letter-spacing:0.08px;
   text-transform:none;
   text-transform:none;
  letter-spacing:0.08px;
   color:rgba(245,249,255,0.96);
   color:rgba(245,249,255,0.96);
}
}


/* If meta row uses .sv-meta-card */
/* Preferred meta-card rendering */
.sv-gi-card .sv-meta-card,
.sv-gi-card .sv-meta-card,
.sv-skill-card .sv-meta-card{
.sv-skill-card .sv-meta-card{
   position:relative;
   position:relative;
   display:flex;
   display:flex;
   align-items:center;
   align-items:center;
  justify-content:center;
   gap:6px;
   gap:6px;
  min-height:34px;
   padding:0;
   padding:0;
  min-height:34px;
 
  justify-content:center;
   border-radius:999px;
   border-radius:999px;
   border:1px solid rgba(59,75,99,0.85);
   border:1px solid rgba(59,75,99,0.85);
Line 231: Line 249:
   width:20px;
   width:20px;
   height:20px;
   height:20px;
  border-radius:999px;
 
  border:1px solid rgba(75,99,136,0.55);
  background:#0f172a;
   display:flex;
   display:flex;
   align-items:center;
   align-items:center;
   justify-content:center;
   justify-content:center;
   overflow:hidden;
   overflow:hidden;
  border-radius:999px;
  border:1px solid rgba(75,99,136,0.55);
  background:#0f172a;
}
}


Line 248: Line 268:
.sv-gi-card .sv-meta-text,
.sv-gi-card .sv-meta-text,
.sv-skill-card .sv-meta-text{
.sv-skill-card .sv-meta-text{
  min-width:0;
  word-wrap:break-word;
  text-align:center;
   font-weight:900;
   font-weight:900;
  color:rgba(245,249,255,0.96);
   font-size:12px;
   font-size:12px;
   line-height:1.02;
   line-height:1.02;
   letter-spacing:0.08px;
   letter-spacing:0.08px;
   min-width:0;
   color:rgba(245,249,255,0.96);
  word-wrap:break-word;
  text-align:center;
}
}


Line 263: Line 284:
}
}


/* Visible meta text should look like plain label text (interaction is on pill hitbox) */
/* Visible text should appear static; interaction is handled by the pill overlay */
.sv-gi-card .sv-meta-text .sv-def,
.sv-gi-card .sv-meta-text .sv-def,
.sv-skill-card .sv-meta-text .sv-def{
.sv-skill-card .sv-meta-text .sv-def{
Line 275: Line 296:
}
}


/* Second line (qualifier) smaller + softer */
/* Secondary line styling */
.sv-gi-card .sv-meta-text .sv-meta-lines span + span,
.sv-gi-card .sv-meta-text .sv-meta-lines span + span,
.sv-skill-card .sv-meta-text .sv-meta-lines span + span{
.sv-skill-card .sv-meta-text .sv-meta-lines span + span{
   margin-top:1px;
   margin-top:1px;
  opacity:0.90;
   font-size:10px;
   font-size:10px;
   font-weight:800;
   font-weight:800;
  opacity:0.90;
   letter-spacing:0.12px;
   letter-spacing:0.12px;
}
}


/* Full-pill Definitions interaction overlay (rendered by Skills.lua) */
/* Full-pill Definitions interaction overlay */
.sv-gi-card .sv-meta-hit,
.sv-gi-card .sv-meta-hit,
.sv-skill-card .sv-meta-hit{
.sv-skill-card .sv-meta-hit{
Line 304: Line 326:
}
}


/* ----------------------------------------------------------------------------
/* ==========================================================================
   5) REQUIREMENTS / USERS ROW (layout only; component styling lives in Common.css)
   5) REQUIREMENTS / USERS ROW
---------------------------------------------------------------------------- */
  Layout only; disclose component styling lives in Common.css
  ========================================================================== */


.sv-gi-card .sv-reqrow,
.sv-gi-card .sv-reqrow,
Line 312: Line 335:
   display:flex;
   display:flex;
   justify-content:center;
   justify-content:center;
  flex-wrap:wrap;
   gap:8px;
   gap:8px;
  flex-wrap:wrap;
   margin:6px 0 10px;
   margin:6px 0 10px;
}
}
Line 323: Line 346:
}
}


/* Transitional: until Lua emits .sv-disclose-btn--compact everywhere,
/* Transitional compact pill styling until all disclose buttons emit
   keep the compact pill look in this row only. */
   the compact modifier class from Lua */
.sv-gi-card .sv-reqrow .sv-disclose-btn,
.sv-gi-card .sv-reqrow .sv-disclose-btn,
.sv-skill-card .sv-reqrow .sv-disclose-btn{
.sv-skill-card .sv-reqrow .sv-disclose-btn{
  border-radius:999px;
   min-height:36px;
   min-height:36px;
   padding:0 12px;
   padding:0 12px;
  border-radius:999px;
}
}


/* ----------------------------------------------------------------------------
/* ==========================================================================
   6) LEVEL SELECTOR SECTION (module wrapper; slider anatomy lives in Common.css)
   6) LEVEL SELECTOR WRAPPER
---------------------------------------------------------------------------- */
  Slider anatomy is owned by Common.css
  ========================================================================== */


.sv-skill-level{
.sv-skill-level{
   margin:8px 0 10px;
   margin:8px 0 10px;
   padding:10px 12px;
   padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
   border-radius:16px;
   border-radius:16px;
   border:1px solid rgba(59,75,99,0.85);
   border:1px solid rgba(59,75,99,0.85);
Line 344: Line 373:
   background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
   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);
   box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  display:flex;
  flex-direction:column;
  gap:8px;
}
}


/* Default policy for Skills: hide tick labels (end-value replaces them).
/* Skills default to hiding tick labels because the end-value replaces them */
  Future modules can opt out by setting data-sv-level-hide-ticks="0". */
.sv-skill-level:not([data-sv-level-hide-ticks="0"]) .sv-level-ticklabels{
.sv-skill-level:not([data-sv-level-hide-ticks="0"]) .sv-level-ticklabels{
   display:none;
   display:none;
Line 357: Line 381:


/* Transitional helper label:
/* Transitional helper label:
   - If Lua adds data-sv-helper-text, Common.css owns the label content.
   - if Lua provides data-sv-helper-text, Common.css can own the copy
   - Otherwise, fall back to the old “Slide to set level” helper. */
   - otherwise, keep the legacy fallback helper text here
*/
.sv-gi-card .sv-level-label:not([data-sv-helper-text]),
.sv-gi-card .sv-level-label:not([data-sv-helper-text]),
.sv-skill-card .sv-level-label:not([data-sv-helper-text]){
.sv-skill-card .sv-level-label:not([data-sv-helper-text]){
  font-size:0;
  line-height:0;
  margin:0;
  padding:0;
  display:inline-block;
   position:static;
   position:static;
   left:auto;
   top:auto;
   right:auto;
   right:auto;
  top:auto;
   bottom:auto;
   bottom:auto;
  left:auto;
   transform:none;
   transform:none;
  display:inline-block;
  margin:0;
  padding:0;
  font-size:0;
  line-height:0;
}
}


Line 378: Line 405:
   content:"Slide to set level";
   content:"Slide to set level";
   display:inline-block;
   display:inline-block;
   font-weight:900;
   font-weight:900;
   font-size:13px;
   font-size:13px;
Line 385: Line 413:
}
}


/* ----------------------------------------------------------------------------
/* ==========================================================================
   7) SCHEMA 2 SKILL SCALING DASHBOARD (REWORKED TWO-ROW SYSTEM)
   7) SCHEMA 2 SKILL SCALING DASHBOARD
---------------------------------------------------------------------------- */
  Two-row layout:
  - row 1: primary output + six stat pills
  - row 2: full-width core pills
 
  Important:
  - the outer scaling card remains visible
  - inner section wrappers are intentionally transparent so the block reads
    as one cohesive card rather than nested sub-cards
  ========================================================================== */


.sv_skill_scaling{
.sv_skill_scaling{
   margin:8px 0 10px;
   margin:8px 0 10px;
   padding:10px 12px 12px;
   padding:10px 12px 12px;
   border-radius:18px;
   border-radius:18px;
   border:1px solid rgba(59,75,99,0.85);
   border:1px solid rgba(59,75,99,0.85);
Line 399: Line 436:
}
}


/* The level selector is visually absorbed into the dashboard card */
/* Absorb the level selector visually into the scaling card */
.sv_skill_scaling .sv-skill-level,
.sv_skill_scaling .sv-skill-level,
.sv_skill_scaling__level{
.sv_skill_scaling__level{
   margin:0 0 10px;
   margin:0 0 10px;
   padding:0 0 10px;
   padding:0 0 10px;
   border:0;
   border:0;
   border-radius:0;
   border-radius:0;
Line 411: Line 449:
}
}


/* Two-row desktop system:
  Row 1 = primary damage mod + six stat pills
  Row 2 = core across full width
*/
.sv_skill_scaling__body{
.sv_skill_scaling__body{
   display:grid;
   display:grid;
Line 422: Line 456:
}
}


/* Section wrappers are intentionally visual no-ops */
.sv_skill_scaling__column{
.sv_skill_scaling__column{
   min-width:0;
   min-width:0;
   border-radius:16px;
   border:0;
   border:1px solid rgba(59,75,99,0.85);
   border-radius:0;
   background:#273449;
   background:transparent;
   background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
   background-image:none;
   box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
   box-shadow:none;
}
}


/* Primary block: compact damage mod on top-left */
/* Primary output block */
.sv_skill_scaling__column--primary{
.sv_skill_scaling__column--primary{
   grid-column:1;
   grid-column:1;
   grid-row:1;
   grid-row:1;
  padding:12px 10px;
 
   min-height:0;
   min-height:0;
  padding:6px 0;
   display:flex;
   display:flex;
   flex-direction:column;
   flex-direction:column;
Line 444: Line 481:
}
}


/* Fallback if Lua does not emit modifier classes yet */
/* Fallback order if Lua does not emit section modifier classes */
.sv_skill_scaling__body > .sv_skill_scaling__column:nth-child(1){
.sv_skill_scaling__body > .sv_skill_scaling__column:nth-child(1){
   grid-column:1;
   grid-column:1;
Line 450: Line 487:
}
}


/* Stats wrapper occupies the rest of row 1 */
/* Stats occupy the rest of row 1 */
.sv_skill_scaling__column--stats{
.sv_skill_scaling__column--stats{
   grid-column:2 / -1;
   grid-column:2 / -1;
Line 461: Line 498:
}
}


/* Core spans full second row */
/* Core spans the full second row */
.sv_skill_scaling__column--core{
.sv_skill_scaling__column--core{
   grid-column:1 / -1;
   grid-column:1 / -1;
Line 473: Line 510:


.sv_skill_scaling__primary-value{
.sv_skill_scaling__primary-value{
  word-wrap:break-word;
   font-weight:900;
   font-weight:900;
   font-size:30px;
   font-size:30px;
Line 478: Line 517:
   letter-spacing:-0.35px;
   letter-spacing:-0.35px;
   color:rgba(245,249,255,0.99);
   color:rgba(245,249,255,0.99);
  word-wrap:break-word;
}
}


.sv_skill_scaling__primary-label{
.sv_skill_scaling__primary-label{
   margin-top:7px;
   margin-top:7px;
  font-weight:900;
   font-size:11px;
   font-size:11px;
  font-weight:900;
   line-height:1.15;
   line-height:1.15;
   letter-spacing:0.24px;
   letter-spacing:0.24px;
Line 491: Line 530:
}
}


/* Shared container rules */
/* Light-touch internal padding only */
.sv_skill_scaling__stats,
.sv_skill_scaling__stats,
.sv_skill_scaling__core{
.sv_skill_scaling__core{
   padding:8px;
   padding:0;
}
}


/* Desktop: all six attributes across */
/* Desktop layout: six stat pills across, six core pills across */
.sv_skill_scaling__stats-grid{
.sv_skill_scaling__stats-grid{
   display:grid;
   display:grid;
Line 504: Line 543:
}
}


/* Desktop core uses full row width */
.sv_skill_scaling__core-grid{
.sv_skill_scaling__core-grid{
   display:grid;
   display:grid;
Line 511: Line 549:
}
}


/* Shared pill shell */
.sv_skill_scaling__pill{
.sv_skill_scaling__pill{
   position:relative;
   position:relative;
   min-width:0;
   min-width:0;
   padding:10px 8px;
   padding:10px 8px;
   border-radius:14px;
   border-radius:14px;
   border:1px solid rgba(59,75,99,0.92);
   border:1px solid rgba(59,75,99,0.92);
Line 522: Line 562:
}
}


/* -------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   7A) STAT PILLS
   7A) Schema 2: stat pills
------------------------------------------------------------------------- */
  Three-line layout inside each pill:
  - icon
  - short stat label
  - value
  -------------------------------------------------------------------------- */


.sv_skill_scaling__stat-pill{
.sv_skill_scaling__stat-pill{
   min-height:106px;
   min-height:106px;
   display:flex;
   display:flex;
   flex-direction:column;
   flex-direction:column;
Line 540: Line 585:
   flex:0 0 auto;
   flex:0 0 auto;
   width:100%;
   width:100%;
   display:flex;
   display:flex;
   align-items:center;
   align-items:center;
Line 547: Line 593:
.sv_skill_scaling__stat-visual{
.sv_skill_scaling__stat-visual{
   min-width:0;
   min-width:0;
   display:flex;
   display:flex;
   flex-direction:column;
   flex-direction:column;
Line 558: Line 605:
   width:22px;
   width:22px;
   height:22px;
   height:22px;
   display:flex;
   display:flex;
   align-items:center;
   align-items:center;
   justify-content:center;
   justify-content:center;
   font-size:0;
   font-size:0;
   line-height:0;
   line-height:0;
Line 591: Line 640:
.sv_skill_scaling__stat-value{
.sv_skill_scaling__stat-value{
   flex:0 0 auto;
   flex:0 0 auto;
  word-wrap:break-word;
  text-align:center;
   font-weight:900;
   font-weight:900;
   font-size:18px;
   font-size:18px;
   line-height:1.05;
   line-height:1.05;
   color:rgba(245,249,255,0.98);
   color:rgba(245,249,255,0.98);
  text-align:center;
  word-wrap:break-word;
}
}


/* Full-pill definitions overlay for active pills */
/* Full-pill Definitions interaction overlay */
.sv_skill_scaling__stat-hit{
.sv_skill_scaling__stat-hit{
   position:absolute;
   position:absolute;
Line 618: Line 668:
/* Inactive state */
/* Inactive state */
.sv_skill_scaling__stat-pill.is-inactive{
.sv_skill_scaling__stat-pill.is-inactive{
  border-color:rgba(59,75,99,0.72);
   background:#182130;
   background:#182130;
   border-color:rgba(59,75,99,0.72);
}
 
.sv_skill_scaling__stat-pill.is-inactive .sv_skill_scaling__stat-label{
   color:rgba(140,156,184,0.82);
}
}


Line 626: Line 680:
}
}


.sv_skill_scaling__stat-pill.is-inactive .sv_skill_scaling__stat-label{
/* Active baseline */
  color:rgba(140,156,184,0.82);
}
 
/* Active state baseline */
.sv_skill_scaling__stat-pill.is-active{
.sv_skill_scaling__stat-pill.is-active{
   box-shadow:
   box-shadow:
Line 642: Line 692:
}
}


/* Darker per-stat colors based on icon families */
/* Per-stat color treatments */
.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 709: Line 759:
}
}


/* -------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   7B) CORE PILLS
   7B) Schema 2: core pills
------------------------------------------------------------------------- */
  -------------------------------------------------------------------------- */


.sv_skill_scaling__core-pill{
.sv_skill_scaling__core-pill{
   min-height:88px;
   min-height:88px;
   display:flex;
   display:flex;
   flex-direction:column;
   flex-direction:column;
Line 723: Line 774:


.sv_skill_scaling__core-main{
.sv_skill_scaling__core-main{
  min-width:0;
   display:flex;
   display:flex;
   align-items:baseline;
   align-items:baseline;
   justify-content:center;
   justify-content:center;
  flex-wrap:wrap;
   gap:6px;
   gap:6px;
  min-width:0;
  flex-wrap:wrap;
}
}


.sv_skill_scaling__core-value{
.sv_skill_scaling__core-value{
  min-width:0;
  word-wrap:break-word;
   font-weight:900;
   font-weight:900;
   font-size:17px;
   font-size:17px;
   line-height:1.02;
   line-height:1.02;
   color:rgba(245,249,255,0.98);
   color:rgba(245,249,255,0.98);
  min-width:0;
  word-wrap:break-word;
}
}


Line 749: Line 801:
.sv_skill_scaling__core-label{
.sv_skill_scaling__core-label{
   margin-top:6px;
   margin-top:6px;
  font-weight:900;
   font-size:11px;
   font-size:11px;
  font-weight:900;
   line-height:1.12;
   line-height:1.12;
   letter-spacing:0.16px;
   letter-spacing:0.16px;
Line 758: Line 811:


.sv_skill_scaling__core-pill.is-inactive{
.sv_skill_scaling__core-pill.is-inactive{
  border-color:rgba(59,75,99,0.72);
   background:#182130;
   background:#182130;
  border-color:rgba(59,75,99,0.72);
}
}


Line 768: Line 821:
}
}


/* ----------------------------------------------------------------------------
/* ==========================================================================
   8) LEGACY SCHEMA 1 — SCALING TOP
   8) LEGACY SCHEMA 1: SCALING TOP
---------------------------------------------------------------------------- */
  ========================================================================== */


.sv-skill-scaling{
.sv-skill-scaling{
   margin:10px 0 10px;
   margin:10px 0;
}
}


Line 779: Line 832:
.sv-skill-card .sv-scaling-row{
.sv-skill-card .sv-scaling-row{
   padding:10px 12px;
   padding:10px 12px;
   border-radius:16px;
   border-radius:16px;
   border:1px solid rgba(59,75,99,0.85);
   border:1px solid rgba(59,75,99,0.85);
Line 801: Line 855:
.sv-gi-card .sv-scaling-value,
.sv-gi-card .sv-scaling-value,
.sv-skill-card .sv-scaling-value{
.sv-skill-card .sv-scaling-value{
  word-wrap:break-word;
   font-weight:900;
   font-weight:900;
   font-size:18px;
   font-size:18px;
   line-height:1.10;
   line-height:1.10;
   color:rgba(245,249,255,0.98);
   color:rgba(245,249,255,0.98);
  word-wrap:break-word;
}
}


Line 811: Line 866:
.sv-skill-card .sv-scaling-label{
.sv-skill-card .sv-scaling-label{
   margin-top:3px;
   margin-top:3px;
  font-weight:900;
   font-size:12px;
   font-size:12px;
  font-weight:900;
   letter-spacing:0.25px;
   letter-spacing:0.25px;
   text-transform:uppercase;
   text-transform:uppercase;
Line 827: Line 883:
.sv-gi-card .sv-scaling-item,
.sv-gi-card .sv-scaling-item,
.sv-skill-card .sv-scaling-item{
.sv-skill-card .sv-scaling-item{
  padding:8px 10px;
  border-radius:14px;
   border:1px solid rgba(59,75,99,0.85);
   border:1px solid rgba(59,75,99,0.85);
   background:#273449;
   background:#273449;
   background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
   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);
   box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  color:rgba(215,226,244,0.92);
 
  padding:8px 10px;
  border-radius:14px;
   font-weight:800;
   font-weight:800;
   font-size:13px;
   font-size:13px;
  color:rgba(215,226,244,0.92);
}
}


/* ----------------------------------------------------------------------------
/* ==========================================================================
   9) LEGACY SCHEMA 1 — CORE STATS GRID
   9) LEGACY SCHEMA 1: CORE GRID
---------------------------------------------------------------------------- */
  ========================================================================== */


.sv-skill-core{
.sv-skill-core{
   margin:10px 0 10px;
   margin:10px 0;
}
}


Line 849: Line 907:
.sv-skill-card .sv-core-row{
.sv-skill-card .sv-core-row{
   padding:10px 12px;
   padding:10px 12px;
   border-radius:16px;
   border-radius:16px;
   border:1px solid rgba(59,75,99,0.85);
   border:1px solid rgba(59,75,99,0.85);
Line 865: Line 924:
.sv-gi-card .sv-core-cell,
.sv-gi-card .sv-core-cell,
.sv-skill-card .sv-core-cell{
.sv-skill-card .sv-core-cell{
  min-width:0;
   padding:10px 10px 9px;
   padding:10px 10px 9px;
   border-radius:14px;
   border-radius:14px;
   border:1px solid rgba(59,75,99,0.85);
   border:1px solid rgba(59,75,99,0.85);
Line 871: Line 932:
   background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
   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);
   box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  min-width:0;
}
}


.sv-gi-card .sv-core-top,
.sv-gi-card .sv-core-top,
.sv-skill-card .sv-core-top{
.sv-skill-card .sv-core-top{
  min-width:0;
   display:flex;
   display:flex;
   align-items:baseline;
   align-items:baseline;
   gap:6px;
   gap:6px;
  min-width:0;
}
}


.sv-gi-card .sv-core-num,
.sv-gi-card .sv-core-num,
.sv-skill-card .sv-core-num{
.sv-skill-card .sv-core-num{
  min-width:0;
  word-wrap:break-word;
   font-weight:900;
   font-weight:900;
   font-size:17px;
   font-size:17px;
   line-height:1.10;
   line-height:1.10;
   color:rgba(245,249,255,0.98);
   color:rgba(245,249,255,0.98);
  min-width:0;
  word-wrap:break-word;
}
}


Line 902: Line 963:
.sv-skill-card .sv-core-label{
.sv-skill-card .sv-core-label{
   margin-top:6px;
   margin-top:6px;
  font-weight:900;
   font-size:12px;
   font-size:12px;
  font-weight:900;
   letter-spacing:0.25px;
   letter-spacing:0.25px;
   text-transform:uppercase;
   text-transform:uppercase;
Line 914: Line 976:
}
}


/* ----------------------------------------------------------------------------
/* ==========================================================================
   10) TABS + PANELS CONTENT (tabs component is global; content layouts are module-owned)
   10) TAB PANELS AND CONTENT BLOCKS
---------------------------------------------------------------------------- */
  Tabs themselves are global; these are module-owned content layouts
  ========================================================================== */


.sv-skill-tabs{
.sv-skill-tabs{
Line 922: Line 985:
}
}


/* Mechanics grid (tabpanel content) */
/* 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 933: Line 996:
.sv-skill-card .sv-kw-cell{
.sv-skill-card .sv-kw-cell{
   padding:10px 10px 9px;
   padding:10px 10px 9px;
   border-radius:14px;
   border-radius:14px;
   border:1px solid rgba(59,75,99,0.85);
   border:1px solid rgba(59,75,99,0.85);
Line 942: Line 1,006:
.sv-gi-card .sv-kw-label,
.sv-gi-card .sv-kw-label,
.sv-skill-card .sv-kw-label{
.sv-skill-card .sv-kw-label{
  font-weight:900;
   font-size:12px;
   font-size:12px;
  font-weight:900;
   letter-spacing:0.25px;
   letter-spacing:0.25px;
   text-transform:uppercase;
   text-transform:uppercase;
Line 952: Line 1,016:
.sv-skill-card .sv-kw-value{
.sv-skill-card .sv-kw-value{
   margin-top:6px;
   margin-top:6px;
  word-wrap:break-word;
  font-weight:900;
   font-size:15px;
   font-size:15px;
  font-weight:900;
   color:rgba(245,249,255,0.96);
   color:rgba(245,249,255,0.96);
  word-wrap:break-word;
}
}


Line 966: Line 1,031:
}
}


/* ----------------------------------------------------------------------------
/* ==========================================================================
   11) EFFECT / EVENT CARDS (module-owned presentation)
   11) EFFECT / EVENT CARDS
---------------------------------------------------------------------------- */
  ========================================================================== */


.sv-gi-card .sv-ref-grid,
.sv-gi-card .sv-ref-grid,
Line 979: Line 1,044:
.sv-gi-card .sv-ref-card,
.sv-gi-card .sv-ref-card,
.sv-skill-card .sv-ref-card{
.sv-skill-card .sv-ref-card{
  min-width:0;
   display:flex;
   display:flex;
  align-items:flex-start;
   gap:10px;
   gap:10px;
  align-items:flex-start;
   padding:10px 10px;
   padding:10px 10px;
   border-radius:16px;
   border-radius:16px;
   border:1px solid rgba(59,75,99,0.85);
   border:1px solid rgba(59,75,99,0.85);
Line 988: Line 1,055:
   background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
   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);
   box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
   color:rgba(245,249,255,0.94);
   color:rgba(245,249,255,0.94);
  min-width:0;
}
}


Line 997: Line 1,064:
   width:52px;
   width:52px;
   height:52px;
   height:52px;
  border-radius:16px;
 
  border:1px solid rgba(75,99,136,0.55);
  background:#273449;
   display:flex;
   display:flex;
   align-items:center;
   align-items:center;
   justify-content:center;
   justify-content:center;
   overflow:hidden;
   overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(75,99,136,0.55);
  background:#273449;
}
}


Line 1,014: Line 1,083:
.sv-gi-card .sv-ref-title,
.sv-gi-card .sv-ref-title,
.sv-skill-card .sv-ref-title{
.sv-skill-card .sv-ref-title{
  word-wrap:break-word;
   font-weight:900;
   font-weight:900;
   font-size:15px;
   font-size:15px;
   line-height:1.15;
   line-height:1.15;
   color:rgba(245,249,255,0.98);
   color:rgba(245,249,255,0.98);
  word-wrap:break-word;
}
}


Line 1,024: Line 1,094:
.sv-skill-card .sv-ref-stats{
.sv-skill-card .sv-ref-stats{
   display:flex;
   display:flex;
  flex-wrap:wrap;
   gap:8px;
   gap:8px;
   margin-top:8px;
   margin-top:8px;
  flex-wrap:wrap;
}
}


Line 1,034: Line 1,104:
   align-items:center;
   align-items:center;
   padding:3px 8px;
   padding:3px 8px;
   border-radius:999px;
   border-radius:999px;
   border:1px solid rgba(59,75,99,0.85);
   border:1px solid rgba(59,75,99,0.85);
Line 1,039: Line 1,110:
   background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
   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);
   box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
   font-weight:900;
   font-weight:900;
   font-size:12px;
   font-size:12px;
Line 1,047: Line 1,119:
.sv-skill-card .sv-ref-sub{
.sv-skill-card .sv-ref-sub{
   margin-top:6px;
   margin-top:6px;
   font-weight:900;
   font-weight:900;
   font-size:13px;
   font-size:13px;
Line 1,052: Line 1,125:
}
}


/* ----------------------------------------------------------------------------
/* ==========================================================================
   12) RESPONSIVE (layout tightening)
   12) RESPONSIVE
---------------------------------------------------------------------------- */
  Breakpoints:
  - 850px: tablet / compact desktop transition
  - 500px: mobile
  - 360px: very narrow screens
  ========================================================================== */


@media (max-width:850px){
@media (max-width:850px){
Line 1,073: Line 1,150:
   }
   }


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


   .sv-skill-meta{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
   .sv-skill-meta{
    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{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
   .sv-skill-card .sv-core-grid{
    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{ grid-template-columns:1fr; }
   .sv-skill-card .sv-ref-grid{
    grid-template-columns:1fr;
  }


   /* Schema 2 scaling: stack primary, then stats, then full-width core */
   /* Schema 2 scaling collapses into a vertical stack */
   .sv_skill_scaling__body{
   .sv_skill_scaling__body{
     grid-template-columns:1fr;
     grid-template-columns:1fr;
Line 1,116: Line 1,201:


@media (max-width:500px){
@media (max-width:500px){
   .sv-skill-head{ gap:10px; }
   .sv-skill-head{
    gap:10px;
  }


   .sv-skill-icon{
   .sv-skill-icon{
Line 1,124: Line 1,211:
   }
   }


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


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


   .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 */
   /* Requirements / Users edge padding */
   .sv-gi-card .sv-reqrow,
   .sv-gi-card .sv-reqrow,
   .sv-skill-card .sv-reqrow{
   .sv-skill-card .sv-reqrow{
Line 1,146: Line 1,242:
   }
   }


   /* META ROW (mobile-tight) */
   /* Tight mobile meta row */
   .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,178: Line 1,274:
   .sv-skill-card .sv-meta-text .sv-meta-lines span + span,
   .sv-skill-card .sv-meta-text .sv-meta-lines span + span,
   .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;
     font-size:9px;
     font-size:9px;
    margin-top:1px;
   }
   }


Line 1,201: Line 1,297:


   .sv_skill_scaling__column--primary{
   .sv_skill_scaling__column--primary{
     padding:11px 10px;
     padding:8px 0 4px;
   }
   }


Line 1,218: Line 1,314:
   }
   }


   /* Mobile: three across, then three across */
   /* Mobile stats remain three across */
   .sv_skill_scaling__stats-grid{
   .sv_skill_scaling__stats-grid{
     grid-template-columns:repeat(3, minmax(0, 1fr));
     grid-template-columns:repeat(3, minmax(0, 1fr));
Line 1,264: Line 1,360:
   }
   }


   /* If meta row ever renders the global .sv-pill variant */
   /* Fallback if meta row renders global .sv-pill */
   .sv-skill-card .sv-skill-meta .sv-pill,
   .sv-skill-card .sv-skill-meta .sv-pill,
   .sv-gi-card .sv-skill-meta .sv-pill{
   .sv-gi-card .sv-skill-meta .sv-pill{
     min-height:24px;
     min-height:24px;
    gap:5px;
     font-size:10px;
     font-size:10px;
     line-height:1.05;
     line-height:1.05;
     letter-spacing:0;
     letter-spacing:0;
    gap:5px;
   }
   }
}
}


@media (max-width:500px){
@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"