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 2 (restore surfaces + match site palette) */
/* Phase 4.1 — Unified + Reusable (Layout restored, scoped, mobile-safe) */


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   BASE CARD + SAFETY (fallback dark palette)
   0) PALETTE (fallback, non-Citizen / non-token contexts)
  - Uses the same “Blue System” values as Common.css fallback tokens.
---------------------------------------------------------------------------- */
 
/* ----------------------------------------------------------------------------
  1) BASE CARD + SAFETY
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-gi-card,
.sv-gi-card,
.sv-skill-card {
.sv-skill-card{
   max-width: 600px;
   max-width:600px;
   margin: 18px auto;
   margin:18px auto;


   border-radius: 22px;
   border-radius:22px;
   border: 1px solid rgba(75, 99, 136, 0.55);
   border:1px solid rgba(75,99,136,0.55);


   background-color: #0f172a;
   background-color:#0f172a;
   background-image:
   background-image:
     radial-gradient(900px 360px at 40% -10%, rgba(106,166,255,0.18), rgba(0,0,0,0) 60%),
     radial-gradient(900px 360px at 40% -10%, rgba(106,166,255,0.18), rgba(0,0,0,0) 60%),
Line 21: Line 26:
     linear-gradient(180deg, #0f172a, #0b1324);
     linear-gradient(180deg, #0f172a, #0b1324);


   box-shadow: 0 16px 38px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
   box-shadow:0 16px 38px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
   overflow: visible;
   overflow:visible;


   color: rgba(245, 249, 255, 0.94);
   color:rgba(245,249,255,0.94);
   font-size: 15px;
   font-size:15px;
   line-height: 1.35;
   line-height:1.35;
}
}


/* Locked split zones */
/* Locked split zones */
.sv-gi-top,
.sv-gi-top,
.sv-skill-top {
.sv-skill-top{
   padding: 14px 14px 4px;
   padding:14px 14px 4px;
   border-radius: 22px 22px 0 0;
   border-radius:22px 22px 0 0;
   overflow: visible;
   overflow:visible;
}
}


.sv-gi-bottom,
.sv-gi-bottom,
.sv-skill-bottom {
.sv-skill-bottom{
   padding: 10px 14px 12px;
   padding:10px 14px 12px;
   border-top: 1px solid rgba(59, 75, 99, 0.80);
   border-top:1px solid rgba(59,75,99,0.80);
   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.10));
   background-image:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.10));
}
}


Line 49: Line 54:
.sv-gi-card *,
.sv-gi-card *,
.sv-skill-card,
.sv-skill-card,
.sv-skill-card * {
.sv-skill-card *{
   box-sizing: border-box;
   box-sizing:border-box;
}
}


.sv-gi-card a,
.sv-gi-card a,
.sv-skill-card a {
.sv-skill-card a{
   color: rgba(106,166,255,0.95);
   color:rgba(106,166,255,0.95);
   text-decoration: none;
   text-decoration:none;
}
}


.sv-gi-card a:hover,
.sv-gi-card a:hover,
.sv-skill-card a:hover {
.sv-skill-card a:hover{
   text-decoration: underline;
   text-decoration:underline;
}
}


/* Error capsule */
.sv-gi-error{
.sv-gi-error {
   max-width:600px;
   max-width: 600px;
   margin:18px auto;
   margin: 18px auto;
   padding:10px 12px;
   padding: 10px 12px;
   border-radius:14px;
   border-radius: 14px;
   border:1px solid rgba(75,99,136,0.55);
   border: 1px solid rgba(75, 99, 136, 0.55);
   background:#1f2937;
   background: rgba(31, 41, 55, 0.80);
   color:rgba(245,249,255,0.92);
   color: rgba(245,249,255,0.92);
}
}


/* Remove default details marker */
/* Remove default details marker */
.sv-gi-card summary,
.sv-gi-card summary,
.sv-skill-card summary {
.sv-skill-card summary{
   list-style: none;
   list-style:none;
}
}


/* NOTE:
/* NOTE:
   - .sv-hidden and [hidden] are global in Common.css
   - .sv-hidden + [hidden] are global in Common.css
   - .sv-miss is global in Common.css
   - .sv-miss, .sv-img, .sv-pill, .sv-tabs, .sv-tabpanel, .sv-disclose* are global
  - .sv-img is global in Common.css
  - .sv-pill / .sv-tab / .sv-tabpanel / .sv-disclose* are global in Common.css
*/
*/


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


.sv-skill-icon,
.sv-skill-icon,
.sv-meta-icon,
.sv-meta-icon,
.sv-ref-ico {
.sv-ref-ico{
   font-size: 0;
   font-size:0;
   line-height: 0;
   line-height:0;
}
}


.sv-skill-icon a,
.sv-skill-icon a,
.sv-meta-icon a,
.sv-meta-icon a,
.sv-ref-ico a {
.sv-ref-ico a{
   text-decoration: none;
   text-decoration:none;
}
}


.sv-skill-icon .sv-miss {
/* Size bumps for “?” badge inside icon boxes */
   width: 22px;
.sv-skill-icon .sv-miss{
   height: 22px;
   width:22px;
   font-size: 13px;
   height:22px;
   line-height: 1;
   font-size:13px;
   line-height:1;
}
}


.sv-meta-icon .sv-miss,
.sv-meta-icon .sv-miss,
.sv-ref-ico .sv-miss {
.sv-ref-ico .sv-miss{
   width: 18px;
   width:18px;
   height: 18px;
   height:18px;
   font-size: 12px;
   font-size:12px;
   line-height: 1;
   line-height:1;
}
}


/* Card image enhancement (global .sv-img handles rounding) */
/* Card image enhancement (global .sv-img handles rounding) */
.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.30);
   box-shadow:0 10px 18px rgba(0,0,0,0.30);
}
}


/* Focus outline */
/* Focus outline (no markup changes 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 132: Line 135:
.sv-skill-card .sv-disclose-btn:focus,
.sv-skill-card .sv-disclose-btn:focus,
.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(106,166,255,0.85);
.sv-gi-card .sv-level-range--custom:focus,
   outline-offset: 2px;
.sv-skill-card .sv-level-range--custom:focus{
   outline:2px solid rgba(106,166,255,0.85);
   outline-offset:2px;
}
}


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


.sv-skill-head {
.sv-skill-head{
   display: flex;
   display:flex;
   align-items: flex-start;
   align-items:flex-start;
   gap: 12px;
   gap:12px;
   padding: 2px 0 10px;
   padding:2px 0 10px;
}
}


.sv-skill-icon {
.sv-skill-icon{
   flex: 0 0 auto;
   flex:0 0 auto;
   width: 64px;
   width:64px;
   height: 64px;
   height:64px;
   border-radius: 16px;
   border-radius:16px;
   border: 1px solid rgba(75, 99, 136, 0.55);
   border:1px solid rgba(75,99,136,0.55);
   background: rgba(31,41,55,0.55);
   background:#1f2937;
   display: flex;
   display:flex;
   align-items: center;
   align-items:center;
   justify-content: center;
   justify-content:center;
   overflow: hidden;
   overflow:hidden;
}
}


.sv-skill-headtext {
.sv-skill-headtext{
   min-width: 0;
   min-width:0;
   flex: 1 1 auto;
   flex:1 1 auto;
}
}


.sv-skill-title-row {
.sv-skill-title-row{
   display: flex;
   display:flex;
   align-items: center;
   align-items:center;
   gap: 10px;
   gap:10px;
}
}


.sv-skill-title {
.sv-skill-title{
   font-weight: 900;
   font-weight:900;
   letter-spacing: 0.2px;
   letter-spacing:0.2px;
   font-size: 22px;
   font-size:22px;
   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;
   min-width:0;
   word-wrap: break-word;
   word-wrap:break-word;
}
}


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


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   META ROW (supports either .sv-meta-card OR .sv-pill markup)
   4) NOTES TIP (span button + div popover) — SCOPED
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-skill-meta {
.sv-gi-card .sv-tip,
   display: grid;
.sv-skill-card .sv-tip{
   grid-template-columns: repeat(4, minmax(0, 1fr));
  position:relative;
   gap: 10px;
  flex:0 0 auto;
   margin: 8px 0 10px;
}
 
.sv-gi-card .sv-tip-btn,
.sv-skill-card .sv-tip-btn{
   display:inline-flex;
  align-items:center;
   justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(75,99,136,0.55);
   background:#273449;
  cursor:pointer;
}
 
.sv-gi-card .sv-tip-btn:hover,
.sv-skill-card .sv-tip-btn:hover{
   background:#2e3f59;
}
}


/* If meta row uses .sv-pill */
.sv-gi-card .sv-tip-btn[aria-expanded="true"],
.sv-skill-meta .sv-pill {
.sv-skill-card .sv-tip-btn[aria-expanded="true"]{
   width: 100%;
  background:#2e3f59;
   justify-content: flex-start;
  border-color:rgba(106,166,255,0.70);
   gap: 10px;
}
   padding: 9px 12px;
 
   border-radius: 16px;
.sv-gi-card .sv-ico,
   border-color: rgba(59, 75, 99, 0.85);
.sv-skill-card .sv-ico{
   background: rgba(31,41,55,0.70);
  display:inline-flex;
   background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  align-items:center;
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  line-height:1;
  color:rgba(245,249,255,0.96);
  background:rgba(15,23,42,0.35);
  border:1px solid rgba(75,99,136,0.55);
}
 
/* IMPORTANT: do NOT use display:none here; JS controls via .sv-hidden + [hidden] */
.sv-gi-card .sv-tip-pop,
.sv-skill-card .sv-tip-pop{
  display:block;
  position:absolute;
  z-index:50;
  top:34px;
  right:0;
  width:360px;
  max-width:92vw;
  border-radius:16px;
  border:1px solid rgba(75,99,136,0.55);
  background:#0f172a;
  background-image:radial-gradient(900px 260px at 35% 0, rgba(106,166,255,0.14), rgba(0,0,0,0) 60%);
  box-shadow:0 18px 40px rgba(0,0,0,0.45);
  overflow:hidden;
}
 
.sv-gi-card .sv-tip-pop-head,
.sv-skill-card .sv-tip-pop-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid rgba(59,75,99,0.85);
  background:#1f2937;
  cursor:pointer;
}
 
.sv-gi-card .sv-tip-pop-title,
.sv-skill-card .sv-tip-pop-title{
  font-weight:900;
  font-size:13px;
  letter-spacing:0.2px;
  color:rgba(245,249,255,0.96);
}
 
.sv-gi-card .sv-tip-pop-hint,
.sv-skill-card .sv-tip-pop-hint{
  font-size:12px;
  color:rgba(182,198,224,0.95);
}
 
.sv-gi-card .sv-tip-pop-body,
.sv-skill-card .sv-tip-pop-body{
  padding:10px 12px;
  font-size:13px;
  color:rgba(215,226,244,0.92);
  line-height:1.4;
  word-wrap:break-word;
}
 
/* ----------------------------------------------------------------------------
  5) META ROW
  - Works with either the “meta-card” structure OR “pill” structure
---------------------------------------------------------------------------- */
 
.sv-skill-meta{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  margin:8px 0 10px;
}
 
/* If meta row uses global .sv-pill */
.sv-skill-card .sv-skill-meta .sv-pill,
.sv-gi-card .sv-skill-meta .sv-pill{
   width:100%;
   justify-content:flex-start;
   gap:10px;
   padding:9px 12px;
   border-radius:18px;
   border:1px solid rgba(59,75,99,0.85);
   background:#273449;
   background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
   box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
 
  font-weight:900;
  font-size:15px;
  text-transform:none;
  letter-spacing:0;
  color:rgba(245,249,255,0.96);
}
}


/* If meta row uses .sv-meta-card */
/* If meta row uses .sv-meta-card */
.sv-gi-card .sv-meta-card,
.sv-gi-card .sv-meta-card,
.sv-skill-card .sv-meta-card {
.sv-skill-card .sv-meta-card{
   display: flex;
   display:flex;
   align-items: center;
   align-items:center;
   gap: 10px;
   gap:10px;
   padding: 9px 10px;
   padding:9px 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);
   background: rgba(31,41,55,0.70);
   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);
}
}


.sv-gi-card .sv-meta-icon,
.sv-gi-card .sv-meta-icon,
.sv-skill-card .sv-meta-icon {
.sv-skill-card .sv-meta-icon{
   flex: 0 0 auto;
   flex:0 0 auto;
   width: 28px;
   width:28px;
   height: 28px;
   height:28px;
   border-radius: 10px;
   border-radius:10px;
   border: 1px solid rgba(75, 99, 136, 0.55);
   border:1px solid rgba(75,99,136,0.55);
   background: rgba(15,23,42,0.55);
   background:#0f172a;
   display: flex;
   display:flex;
   align-items: center;
   align-items:center;
   justify-content: center;
   justify-content:center;
   overflow: hidden;
   overflow:hidden;
}
}


.sv-gi-card .sv-meta-textwrap,
.sv-gi-card .sv-meta-textwrap,
.sv-skill-card .sv-meta-textwrap {
.sv-skill-card .sv-meta-textwrap{
   min-width: 0;
   min-width:0;
   flex: 1 1 auto;
   flex:1 1 auto;
}
}


.sv-gi-card .sv-meta-text,
.sv-gi-card .sv-meta-text,
.sv-skill-card .sv-meta-text {
.sv-skill-card .sv-meta-text{
   font-weight: 900;
   font-weight:900;
   color: rgba(245,249,255,0.96);
   color:rgba(245,249,255,0.96);
   font-size: 15px;
   font-size:15px;
   line-height: 1.10;
   line-height:1.10;
   letter-spacing: 0.2px;
   letter-spacing:0.2px;
   min-width: 0;
   min-width:0;
   word-wrap: break-word;
   word-wrap:break-word;
}
 
.sv-gi-card .sv-meta-lines span,
.sv-skill-card .sv-meta-lines span{
  display:block;
}
}


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   NOTES TIP (module-owned)
   6) REQUIREMENTS / USERS ROW
  - Layout only; the disclosure component itself is global in Common.css
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-gi-card .sv-tip,
.sv-gi-card .sv-reqrow,
.sv-skill-card .sv-tip {
.sv-skill-card .sv-reqrow{
   position: relative;
   display:flex;
   flex: 0 0 auto;
  gap:10px;
  flex-wrap:wrap;
  margin:6px 0 8px;
}
 
.sv-gi-card .sv-disclose,
.sv-skill-card .sv-disclose{
  flex:1 1 220px;
  min-width:220px;
}
 
/* ----------------------------------------------------------------------------
  7) LEVEL SELECTOR (module-owned)
---------------------------------------------------------------------------- */
 
.sv-skill-level{
  margin:8px 0 10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(59,75,99,0.85);
  background:#1f2937;
  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);
}
 
.sv-gi-card .sv-level-ui,
.sv-skill-card .sv-level-ui{
   display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  margin-bottom:8px;
}
 
.sv-gi-card .sv-level-label,
.sv-skill-card .sv-level-label{
  font-weight:900;
  color:rgba(245,249,255,0.94);
}
 
.sv-gi-card .sv-level-num,
.sv-skill-card .sv-level-num{
  font-weight:900;
  color:rgba(245,249,255,0.98);
}
 
.sv-gi-card .sv-level-slider,
.sv-skill-card .sv-level-slider{
  position:relative;
}
}


.sv-gi-card .sv-tip-btn,
.sv-gi-card .sv-level-range,
.sv-skill-card .sv-tip-btn {
.sv-skill-card .sv-level-range{
  display: inline-flex;
   width:100%;
  align-items: center;
   margin:0;
  justify-content: center;
   width: 28px;
  height: 28px;
   border-radius: 999px;
  border: 1px solid rgba(75, 99, 136, 0.55);
  background: rgba(31,41,55,0.55);
  cursor: pointer;
}
}


.sv-gi-card .sv-ico,
.sv-gi-card .sv-level-range--custom,
.sv-skill-card .sv-ico {
.sv-skill-card .sv-level-range--custom{
   display: inline-flex;
   display:block;
  align-items: center;
   position:relative;
  justify-content: center;
   height:26px;
   width: 18px;
   border-radius:999px;
   height: 18px;
   border:1px solid rgba(75,99,136,0.55);
   border-radius: 999px;
   background:#0f172a;
   font-weight: 900;
   cursor:pointer;
  font-size: 12px;
  line-height: 1;
  color: rgba(245,249,255,0.96);
   background: rgba(15,23,42,0.35);
   border: 1px solid rgba(75, 99, 136, 0.55);
}
}


/* IMPORTANT: do NOT use display:none; JS controls via .sv-hidden + [hidden] */
.sv-gi-card .sv-level-track,
.sv-gi-card .sv-tip-pop,
.sv-skill-card .sv-level-track{
.sv-skill-card .sv-tip-pop {
   position:absolute;
  display: block;
   left:8px;
   position: absolute;
   right:8px;
   z-index: 50;
   top:50%;
   top: 34px;
   margin-top:-4px;
   right: 0;
   height:8px;
   width: 360px;
   border-radius:999px;
   max-width: 92vw;
   background:#273449;
   border-radius: 16px;
   overflow:hidden;
  border: 1px solid rgba(75, 99, 136, 0.55);
   background: #0f172a;
  background-image: radial-gradient(900px 260px at 35% 0, rgba(106,166,255,0.14), rgba(0,0,0,0) 60%);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
   overflow: hidden;
}
}


.sv-gi-card .sv-tip-pop-head,
.sv-gi-card .sv-level-fill,
.sv-skill-card .sv-tip-pop-head {
.sv-skill-card .sv-level-fill{
   display: flex;
   display:block;
   align-items: center;
   height:100%;
   justify-content: space-between;
   width:0%;
   padding: 10px 12px;
   border-radius:999px;
   border-bottom: 1px solid rgba(59, 75, 99, 0.85);
   background:linear-gradient(90deg, rgba(106,166,255,0.85), rgba(245,249,255,0.22));
  background: rgba(31,41,55,0.70);
  cursor: pointer;
}
}


.sv-gi-card .sv-tip-pop-hint,
.sv-gi-card .sv-level-thumb,
.sv-skill-card .sv-tip-pop-hint {
.sv-skill-card .sv-level-thumb{
   font-size: 12px;
  position:absolute;
   color: rgba(182,198,224,0.95);
  left:0%;
  top:50%;
  margin-top:-9px;
  margin-left:-9px;
  width:18px;
  height:18px;
   border-radius:999px;
  border:2px solid rgba(75,99,136,0.55);
   background:rgba(245,249,255,0.92);
  box-shadow:0 10px 18px rgba(0,0,0,0.35);
}
}


.sv-gi-card .sv-tip-pop-body,
.sv-gi-card .sv-level-ticklabels,
.sv-skill-card .sv-tip-pop-body {
.sv-skill-card .sv-level-ticklabels{
   padding: 10px 12px;
  display:flex;
   font-size: 13px;
  justify-content:space-between;
   color: rgba(215,226,244,0.92);
   gap:10px;
   line-height: 1.4;
  margin-top:7px;
   word-wrap: break-word;
  font-weight:900;
   font-size:12px;
   color:rgba(182,198,224,0.95);
   line-height:1.1;
   min-height:12px;
}
}


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   LEVEL / SCALING / CORE / REF PANELS (bring back “box color”)
   8) SCALING TOP
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-skill-level,
.sv-skill-scaling{
  margin:10px 0 10px;
}
 
.sv-gi-card .sv-scaling-row,
.sv-gi-card .sv-scaling-row,
.sv-skill-card .sv-scaling-row,
.sv-skill-card .sv-scaling-row{
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(59,75,99,0.85);
  background:#1f2937;
  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);
}
 
.sv-gi-card .sv-scaling-grid,
.sv-skill-card .sv-scaling-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:start;
}
 
.sv-gi-card .sv-scaling-col--scaling,
.sv-skill-card .sv-scaling-col--scaling{
  grid-column:1 / -1;
}
 
.sv-gi-card .sv-scaling-value,
.sv-skill-card .sv-scaling-value{
  font-weight:900;
  font-size:18px;
  line-height:1.10;
  color:rgba(245,249,255,0.98);
  word-wrap:break-word;
}
 
.sv-gi-card .sv-scaling-label,
.sv-skill-card .sv-scaling-label{
  margin-top:3px;
  font-size:12px;
  font-weight:900;
  letter-spacing:0.25px;
  text-transform:uppercase;
  color:rgba(182,198,224,0.95);
}
 
.sv-gi-card .sv-scaling-list,
.sv-skill-card .sv-scaling-list{
  display:grid;
  gap:6px;
  margin-top:2px;
}
 
.sv-gi-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);
  background:#273449;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  color:rgba(215,226,244,0.92);
  font-weight:800;
  font-size:13px;
}
 
/* ----------------------------------------------------------------------------
  9) CORE STATS GRID
---------------------------------------------------------------------------- */
 
.sv-skill-core{
  margin:10px 0 10px;
}
 
.sv-gi-card .sv-core-row,
.sv-gi-card .sv-core-row,
.sv-skill-card .sv-core-row,
.sv-skill-card .sv-core-row{
.sv-gi-card .sv-ref-card,
  padding:10px 12px;
.sv-skill-card .sv-ref-card {
  border-radius:16px;
   border: 1px solid rgba(59, 75, 99, 0.85);
   border:1px solid rgba(59,75,99,0.85);
   background: rgba(31,41,55,0.70);
   background:#1f2937;
   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);
}
}


.sv-skill-level {
.sv-gi-card .sv-core-grid,
   margin: 8px 0 10px;
.sv-skill-card .sv-core-grid{
   padding: 10px 12px;
   display:grid;
   border-radius: 16px;
   grid-template-columns:repeat(3, minmax(0, 1fr));
   gap:10px;
}
}


.sv-gi-card .sv-core-cell,
.sv-gi-card .sv-core-cell,
.sv-skill-card .sv-core-cell,
.sv-skill-card .sv-core-cell{
  padding:10px 10px 9px;
  border-radius:14px;
  border:1px solid rgba(59,75,99,0.85);
  background:#273449;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  min-width:0;
}
 
.sv-gi-card .sv-core-top,
.sv-skill-card .sv-core-top{
  display:flex;
  align-items:baseline;
  gap:6px;
  min-width:0;
}
 
.sv-gi-card .sv-core-num,
.sv-skill-card .sv-core-num{
  font-weight:900;
  font-size:17px;
  line-height:1.10;
  color:rgba(245,249,255,0.98);
  min-width:0;
  word-wrap:break-word;
}
 
.sv-gi-card .sv-core-unit,
.sv-skill-card .sv-core-unit{
  font-weight:900;
  font-size:12px;
  color:rgba(182,198,224,0.95);
}
 
.sv-gi-card .sv-core-label,
.sv-skill-card .sv-core-label{
  margin-top:6px;
  font-size:12px;
  font-weight:900;
  letter-spacing:0.25px;
  text-transform:uppercase;
  color:rgba(182,198,224,0.95);
}
 
.sv-gi-card .sv-core-label--tight,
.sv-skill-card .sv-core-label--tight{
  letter-spacing:0.12px;
}
 
/* ----------------------------------------------------------------------------
  10) TABS + PANELS (tabs component is global; content layouts are module-owned)
---------------------------------------------------------------------------- */
 
.sv-skill-tabs{
  margin:10px 0 0;
}
 
/* Mechanics grid (tabpanel content) */
.sv-gi-card .sv-kw-grid,
.sv-skill-card .sv-kw-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
 
.sv-gi-card .sv-kw-cell,
.sv-gi-card .sv-kw-cell,
.sv-skill-card .sv-kw-cell,
.sv-skill-card .sv-kw-cell{
.sv-gi-card .sv-scaling-item,
  padding:10px 10px 9px;
.sv-skill-card .sv-scaling-item,
  border-radius:14px;
  border:1px solid rgba(59,75,99,0.85);
  background:#273449;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
 
.sv-gi-card .sv-kw-label,
.sv-skill-card .sv-kw-label{
  font-size:12px;
  font-weight:900;
  letter-spacing:0.25px;
  text-transform:uppercase;
  color:rgba(182,198,224,0.95);
}
 
.sv-gi-card .sv-kw-value,
.sv-skill-card .sv-kw-value{
  margin-top:6px;
  font-size:15px;
  font-weight:900;
  color:rgba(245,249,255,0.96);
  word-wrap:break-word;
}
 
/* Keyword pills panel */
.sv-gi-card .sv-tab-pills,
.sv-skill-card .sv-tab-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
 
/* ----------------------------------------------------------------------------
  11) EFFECT / EVENT CARDS
---------------------------------------------------------------------------- */
 
.sv-gi-card .sv-ref-grid,
.sv-skill-card .sv-ref-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
 
.sv-gi-card .sv-ref-card,
.sv-skill-card .sv-ref-card{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 10px;
  border-radius:16px;
  border:1px solid rgba(59,75,99,0.85);
  background:#1f2937;
  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);
  color:rgba(245,249,255,0.94);
  min-width:0;
}
 
.sv-gi-card .sv-ref-ico,
.sv-skill-card .sv-ref-ico{
  flex:0 0 auto;
  width:52px;
  height:52px;
  border-radius:16px;
  border:1px solid rgba(75,99,136,0.55);
  background:#273449;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
 
.sv-gi-card .sv-ref-text,
.sv-skill-card .sv-ref-text{
  min-width:0;
  flex:1 1 auto;
}
 
.sv-gi-card .sv-ref-title,
.sv-skill-card .sv-ref-title{
  font-weight:900;
  font-size:15px;
  line-height:1.15;
  color:rgba(245,249,255,0.98);
  word-wrap:break-word;
}
 
.sv-gi-card .sv-ref-stats,
.sv-skill-card .sv-ref-stats{
  display:flex;
  gap:8px;
  margin-top:8px;
  flex-wrap:wrap;
}
 
.sv-gi-card .sv-ref-stat,
.sv-gi-card .sv-ref-stat,
.sv-skill-card .sv-ref-stat {
.sv-skill-card .sv-ref-stat{
   border: 1px solid rgba(59, 75, 99, 0.85);
  display:inline-flex;
   background: rgba(39,52,73,0.70);
  align-items:center;
   background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  padding:3px 8px;
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  border-radius:999px;
   border:1px solid rgba(59,75,99,0.85);
   background:#273449;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  font-weight:900;
  font-size:12px;
  color:rgba(215,226,244,0.92);
}
 
.sv-gi-card .sv-ref-sub,
.sv-skill-card .sv-ref-sub{
  margin-top:6px;
  font-weight:900;
  font-size:13px;
  color:rgba(182,198,224,0.95);
}
 
/* ----------------------------------------------------------------------------
  12) THEME OVERRIDES (Citizen only)
  - Day: switch to light palette for readability.
  - Night: keep base (already dark), but align borders/accents lightly.
---------------------------------------------------------------------------- */
 
:root.skin-theme-clientpref-day .sv-gi-card,
:root.skin-theme-clientpref-day .sv-skill-card{
  border-color:#9fc4ff;
  background-color:#dbeaff;
  background-image:
    radial-gradient(900px 360px at 40% -10%, rgba(11,99,240,0.14), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.20)),
    linear-gradient(180deg, #cfe3ff, #f3f8ff);
  box-shadow:0 16px 38px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.85);
  color:#1f3556;
}
 
: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-bottom,
:root.skin-theme-clientpref-day .sv-skill-bottom{
  border-top-color:#bdd7ff;
}
 
:root.skin-theme-clientpref-day .sv-skill-title{
  color:#0b1a33;
}
 
:root.skin-theme-clientpref-day .sv-skill-desc{
  color:#1f3556;
}
 
/* Light surfaces */
: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{
  border-color:#bdd7ff;
  background-color:#e8f2ff;
   background-image:linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.15));
   color:#1f3556;
}
 
:root.skin-theme-clientpref-day .sv-skill-card .sv-skill-meta .sv-pill,
:root.skin-theme-clientpref-day .sv-gi-card .sv-skill-meta .sv-pill{
  border-color:#bdd7ff;
  background:#f3f8ff;
  color:#0b1a33;
}
 
: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,
: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-ref-stat,
:root.skin-theme-clientpref-day .sv-skill-card .sv-ref-stat{
  border-color:#bdd7ff;
  background:#f3f8ff;
  color:#1f3556;
}
 
: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-scaling-value,
:root.skin-theme-clientpref-day .sv-skill-card .sv-scaling-value,
:root.skin-theme-clientpref-day .sv-gi-card .sv-kw-value,
:root.skin-theme-clientpref-day .sv-skill-card .sv-kw-value,
: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-meta-text,
:root.skin-theme-clientpref-day .sv-skill-card .sv-meta-text{
  color:#0b1a33;
}
 
: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,
:root.skin-theme-clientpref-day .sv-gi-card .sv-ref-sub,
:root.skin-theme-clientpref-day .sv-skill-card .sv-ref-sub{
  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{
  border-color:#bdd7ff;
  background:#e8f2ff;
}
 
:root.skin-theme-clientpref-day .sv-gi-card .sv-level-track,
:root.skin-theme-clientpref-day .sv-skill-card .sv-level-track{
  background:#cfe3ff;
}
 
:root.skin-theme-clientpref-day .sv-gi-card .sv-level-fill,
:root.skin-theme-clientpref-day .sv-skill-card .sv-level-fill{
  background:#0b63f0;
}
 
:root.skin-theme-clientpref-day .sv-gi-card .sv-level-thumb,
:root.skin-theme-clientpref-day .sv-skill-card .sv-level-thumb{
  border-color:#9fc4ff;
  background:#0b1a33;
}
 
: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-tip-btn,
:root.skin-theme-clientpref-day .sv-skill-card .sv-tip-btn{
  border-color:#bdd7ff;
  background:#cfe3ff;
}
 
:root.skin-theme-clientpref-day .sv-gi-card .sv-ico,
:root.skin-theme-clientpref-day .sv-skill-card .sv-ico{
  border-color:#bdd7ff;
  background:#e8f2ff;
  color:#0b1a33;
}
 
:root.skin-theme-clientpref-day .sv-gi-card .sv-tip-pop,
:root.skin-theme-clientpref-day .sv-skill-card .sv-tip-pop{
  border-color:#bdd7ff;
  background:#f3f8ff;
  color:#0b1a33;
}
 
:root.skin-theme-clientpref-day .sv-gi-card .sv-tip-pop-head,
:root.skin-theme-clientpref-day .sv-skill-card .sv-tip-pop-head{
  background:#e8f2ff;
  border-bottom-color:#bdd7ff;
}
 
:root.skin-theme-clientpref-day .sv-gi-card .sv-tip-pop-hint,
:root.skin-theme-clientpref-day .sv-skill-card .sv-tip-pop-hint{
  color:#456083;
}
 
: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;
}
 
/* Citizen OS: follow system */
@media (prefers-color-scheme: light){
  :root.skin-theme-clientpref-os .sv-gi-card,
  :root.skin-theme-clientpref-os .sv-skill-card{
    border-color:#9fc4ff;
    background-color:#dbeaff;
    background-image:
      radial-gradient(900px 360px at 40% -10%, rgba(11,99,240,0.14), rgba(0,0,0,0) 60%),
      linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.20)),
      linear-gradient(180deg, #cfe3ff, #f3f8ff);
    box-shadow:0 16px 38px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.85);
    color:#1f3556;
  }
  :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{
    border-color:rgba(75,99,136,0.55);
    background-color:#0f172a;
    background-image:
      radial-gradient(900px 360px at 40% -10%, rgba(106,166,255,0.18), rgba(0,0,0,0) 60%),
      linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
      linear-gradient(180deg, #0f172a, #0b1324);
    color:rgba(245,249,255,0.94);
  }
  :root.skin-theme-clientpref-os .sv-gi-card a,
  :root.skin-theme-clientpref-os .sv-skill-card a{ color:rgba(106,166,255,0.95); }
}
}


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


@media (max-width: 720px) {
@media (max-width:720px){
   .sv-gi-card,
   .sv-gi-card,
   .sv-skill-card {
   .sv-skill-card{
     margin: 14px 10px;
     margin:14px 10px;
     border-radius: 20px;
     border-radius:20px;
   }
   }


   .sv-gi-top,
   .sv-gi-top,
   .sv-skill-top {
   .sv-skill-top{
     padding: 12px 12px 4px;
     padding:12px 12px 4px;
     border-radius: 20px 20px 0 0;
     border-radius:20px 20px 0 0;
   }
   }


   .sv-gi-bottom,
   .sv-gi-bottom,
   .sv-skill-bottom {
   .sv-skill-bottom{
     padding: 10px 12px 12px;
     padding:10px 12px 12px;
     border-radius: 0 0 20px 20px;
     border-radius:0 0 20px 20px;
   }
   }


   .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; }


   .sv-gi-card .sv-tip-pop,
   .sv-gi-card .sv-tip-pop,
   .sv-skill-card .sv-tip-pop,
   .sv-skill-card .sv-tip-pop,
   .sv-gi-card .sv-disclose-pop,
   .sv-gi-card .sv-disclose-pop,
   .sv-skill-card .sv-disclose-pop {
   .sv-skill-card .sv-disclose-pop{
     right: 0;
     right:0;
     left: auto;
     left:auto;
     width: 92vw;
     width:92vw;
     max-width: 520px;
     max-width:520px;
   }
   }
}
}


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


   .sv-skill-icon {
   .sv-skill-icon{
     width: 56px;
     width:56px;
     height: 56px;
     height:56px;
     border-radius: 14px;
     border-radius:14px;
   }
   }


   .sv-skill-title { font-size: 18px; }
   .sv-skill-title{ 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 { 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; }


   .sv-gi-card .sv-disclose,
   .sv-gi-card .sv-disclose,
   .sv-skill-card .sv-disclose {
   .sv-skill-card .sv-disclose{
     min-width: 0;
     min-width:0;
     flex: 1 1 100%;
     flex:1 1 100%;
   }
   }
}
}
Retrieved from "https://spiritvale.info/wiki/Module:GameInfo/styles.css"