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:
/* NOTE (ownership):
   - Citizen theme overrides (day/night/os) are now in Citizen.css (sitewide).
   - Common.css owns shared components (slider/tabs/tips/discloses/popups) + tokens.
  - Level slider component styling (track/fill/thumb/ticks/bubble) is now sitewide
  - This file owns only GameInfo-family layout/presentation (card + sections).
    in Common.css + Citizen.css. This file keeps only the wrapper/layout + module-only tweaks.
  - Transitional fallbacks are guarded with :not([data-...]) so Common can take over
    as Lua/JS emit neutral attributes over time.
*/
*/


Line 77: Line 78:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   2) ICON-TEXT HARDENING (prevents clipped link/text inside icon squares)
   2) ICON-TEXT HARDENING
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 169: Line 170:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   5) META ROW
   4) META ROW
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 304: Line 305:


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


Line 322: Line 323:
}
}


/* Requirements / Users: keep the shared disclose component,
/* Transitional: until Lua emits .sv-disclose-btn--compact everywhere,
   but apply a pill-shaped layout in this row for a compact UI. */
   keep the compact pill look in this row only. */
.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{
Line 332: Line 333:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   7) LEVEL SELECTOR (wrapper/layout; slider component is sitewide)
   6) LEVEL SELECTOR SECTION (module wrapper; slider anatomy lives in Common.css)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 344: Line 345:
   box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
   box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);


  /* Place slider first, helper text under it */
   display:flex;
   display:flex;
   flex-direction:column;
   flex-direction:column;
Line 350: Line 350:
}
}


/* Remove numbered tick labels entirely (end-value replaces them) */
/* Default policy for Skills: hide tick labels (end-value replaces them).
.sv-skill-level .sv-level-ticklabels{
  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{
   display:none;
   display:none;
}
}


/* Slider row: FORCE normal LTR order even if any global CSS interferes */
/* Transitional helper label:
.sv-skill-level .sv-level-slider{
  - If Lua adds data-sv-helper-text, Common.css owns the label content.
  display:flex;
  - Otherwise, fall back to the old “Slide to set level” helper. */
  flex-direction:row !important;
.sv-gi-card .sv-level-label:not([data-sv-helper-text]),
  direction:ltr;
.sv-skill-card .sv-level-label:not([data-sv-helper-text]){
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}
 
/* Bar must be left and flexible */
.sv-skill-level .sv-level-slider input.sv-level-range[type="range"],
.sv-skill-level .sv-level-slider .sv-level-range--custom,
.sv-skill-level .sv-level-slider .sv-level-range[data-sv-slider="1"]{
  flex:1 1 auto;
  min-width:0;
  order:1;
}
 
/* End-of-bar value (appended by Common.js): pinned to the right */
.sv-skill-level .sv-level-endvalue{
  flex:0 0 auto;
  order:2;
  min-width:30px;
  padding:2px 8px;
  border-radius:999px;
 
  font-weight:900;
  font-size:13px;
  line-height:1.25;
  letter-spacing:0.15px;
 
  text-align:center;
  white-space:nowrap;
}
 
/* Helper row (text + overcap pill) */
.sv-skill-level .sv-level-ui{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
 
  text-align:center;
  margin:0;
}
 
/* Replace “Level X / Y” with helper text (keep markup for JS parsing) */
.sv-gi-card .sv-level-label,
.sv-skill-card .sv-level-label{
   font-size:0;
   font-size:0;
   line-height:0;
   line-height:0;
   margin:0;
   margin:0;
   padding:0;
   padding:0;
   display:inline-block;
   display:inline-block;
  /* HARDEN: keep it in normal flow even if any global CSS touched it */
   position:static;
   position:static;
   left:auto;
   left:auto;
Line 422: Line 374:
}
}


.sv-gi-card .sv-level-label:after,
.sv-gi-card .sv-level-label:not([data-sv-helper-text])::after,
.sv-skill-card .sv-level-label:after{
.sv-skill-card .sv-level-label:not([data-sv-helper-text])::after{
   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-height:1.25;
   line-height:1.25;
   letter-spacing:0.15px;
   letter-spacing:0.15px;
   color:rgba(245,249,255,0.94);
   color:rgba(245,249,255,0.94);
}
/* Overcap pill wrapper */
.sv-skill-level .sv-overcap-tip{
  display:inline-flex;
  align-items:center;
  position:static;
}
/* Overcap button: pill reset (tone comes from shared pill rule below) */
.sv-skill-level .sv-overcap-btn{
  position:static;
  /* Override any global .sv-tip-btn "icon button" sizing */
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:13px;
  line-height:1.25;
  letter-spacing:0.15px;
  padding:1px 8px !important;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
}
/* Kill any pseudo content from global tip button styling */
.sv-skill-level .sv-overcap-btn:before,
.sv-skill-level .sv-overcap-btn:after{
  content:none !important;
  display:none !important;
}
/* Hover/active tint (keeps the same “scaling pill” family) */
.sv-skill-level .sv-overcap-btn:hover{
  background:#2e3f59;
}
.sv-skill-level .sv-overcap-btn:active{
  background:#314463;
  transform:translateY(1px);
}
@media (max-width:500px){
  .sv-skill-level{
    padding:9px 10px;
  }
  .sv-skill-level .sv-level-slider{
    gap:8px;
  }
  .sv-skill-level .sv-level-endvalue{
    padding:1px 7px;
    font-size:12px;
    line-height:1.25;
    min-width:28px;
  }
  .sv-skill-level .sv-level-label:after{
    font-size:12px;
  }
  .sv-skill-level .sv-overcap-btn{
    padding:1px 7px !important;
    font-size:12px;
    line-height:1.25;
    min-height:0 !important;
  }
}
}


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   8) SCALING TOP
   7) SCALING TOP (module-owned presentation)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 571: Line 442:
}
}


/* Shared pill tone:
  - scaling items
  - level end-value
  - overcap pill
*/
.sv-gi-card .sv-scaling-item,
.sv-gi-card .sv-scaling-item,
.sv-skill-card .sv-scaling-item,
.sv-skill-card .sv-scaling-item{
.sv-skill-level .sv-level-endvalue,
.sv-skill-level .sv-overcap-btn{
   border:1px solid rgba(59,75,99,0.85);
   border:1px solid rgba(59,75,99,0.85);
   background:#273449;
   background:#273449;
Line 585: Line 449:
   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);
   color:rgba(215,226,244,0.92);
}
.sv-gi-card .sv-scaling-item,
.sv-skill-card .sv-scaling-item{
   padding:8px 10px;
   padding:8px 10px;
   border-radius:14px;
   border-radius:14px;
Line 596: Line 456:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   9) CORE STATS GRID
   8) CORE STATS GRID (module-owned presentation)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 672: Line 532:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   10) TABS + PANELS (tabs component is global; content layouts are module-owned)
   9) TABS + PANELS CONTENT (tabs component is global; content layouts are module-owned)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 724: Line 584:


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


Line 810: Line 670:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   13) RESPONSIVE (layout tightening)
   11) RESPONSIVE (layout tightening)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 839: Line 699:
   .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; }
  .sv-gi-card .sv-tip-pop,
  .sv-skill-card .sv-tip-pop{
    right:0;
    left:auto;
    width:92vw;
    max-width:520px;
  }
}
}


Line 914: Line 766:
     font-size:9px;
     font-size:9px;
     margin-top:1px;
     margin-top:1px;
  }
  .sv-skill-level{
    padding:9px 10px;
  }
  .sv-gi-card .sv-level-label:not([data-sv-helper-text])::after,
  .sv-skill-card .sv-level-label:not([data-sv-helper-text])::after{
    font-size:12px;
   }
   }


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