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
No edit summary
Line 1: Line 1:
/* Module:GameInfo/styles.css */
/* Module:GameInfo/styles.css */
/* GameInfo Box v1 — TemplateStyles-safe (no CSS vars / no var()) */
/* Phase 4.1 — Mockup Match + TemplateStyles-safe (NO var(), NO vendor pseudos) */


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
Line 12: Line 12:


   border-radius: 22px;
   border-radius: 22px;
   border: 1px solid rgba(255, 255, 255, 0.085);
   border: 1px solid rgba(255,255,255,0.085);


   background-color: #0f1b33;
   background-color: #0f1b33;
   background-image:
   background-image:
    radial-gradient(1200px 520px at 50% -20%, rgba(96,165,250,0.22), transparent 55%),
     linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
     linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    radial-gradient(900px 360px at 50% 0%, rgba(255,255,255,0.06), transparent 55%),
     linear-gradient(180deg, #0f1b33, #0c162b);
     linear-gradient(180deg, #0f1b33, #0c162b);


Line 22: Line 24:
   overflow: visible;
   overflow: visible;


   color: rgba(235, 244, 255, 0.92);
   color: rgba(235,244,255,0.92);
   font-size: 15px;
   font-size: 12px;
   line-height: 1.35;
   line-height: 1.35;
}
}


/* Locked split zones */
.sv-gi-top,
.sv-gi-top,
.sv-skill-top {
.sv-skill-top {
Line 38: Line 39:
.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 rgba(255,255,255,0.050);
   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));
   background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.08));
}
}


/* Predictable sizing */
.sv-gi-card,
.sv-gi-card,
.sv-gi-card *,
.sv-gi-card *,
Line 53: Line 53:
.sv-gi-card a,
.sv-gi-card a,
.sv-skill-card a {
.sv-skill-card a {
   color: rgba(170, 220, 255, 0.95);
   color: rgba(170,220,255,0.95);
   text-decoration: none;
   text-decoration: none;
}
}
Line 61: Line 61:
}
}


/* Shared micro-utilities */
/* Hide contract */
.sv-gi-error {
  max-width: 600px;
  margin: 18px auto;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  background: rgba(0,0,0,0.20);
}
 
/* IMPORTANT: Phase 4.1 hiding contract */
.sv-hidden { display: none !important; }
.sv-hidden { display: none !important; }
[hidden]   { display: none !important; }
[hidden] { display: none !important; }


/* Remove default details marker (safe even if no <details> used) */
/* Safe details reset (NO ::marker / NO vendor marker pseudos) */
.sv-gi-card summary,
.sv-gi-card summary,
.sv-skill-card summary {
.sv-skill-card summary {
Line 81: Line 71:
}
}


/* Focus */
.sv-tip-btn:focus,
.sv-disclose-btn:focus,
.sv-tab:focus,
.sv-level-range--custom:focus {
  outline: 2px solid rgba(170,220,255,0.55);
  outline-offset: 2px;
}
/* Missing icon badge */
.sv-miss {
.sv-miss {
   display: inline-flex;
   display: inline-block;
  align-items: center;
  justify-content: center;
   width: 18px;
   width: 18px;
   height: 18px;
   height: 18px;
   border-radius: 999px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.050);
   border: 1px solid rgba(255,255,255,0.050);
   background: rgba(255,255,255,0.05);
   background: rgba(255,255,255,0.05);
   font-weight: 800;
   font-weight: 900;
   font-size: 12px;
   font-size: 12px;
   line-height: 1;
   line-height: 18px;
}
   text-align: center;
 
.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;
}
}


/* Image wrapper produced by Lua */
/* Image wrapper produced by Lua */
.sv-img {
.sv-img { display: inline-block; }
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sv-img img {
.sv-img img {
   display: block;
   display: block;
Line 117: Line 102:
}
}


/* Accessible focus for span-buttons */
/* Shared “panel surface” */
.sv-tip-btn:focus,
.sv-skill-level,
.sv-disclose-btn:focus,
.sv-scaling-row,
.sv-tab:focus {
.sv-core-row,
   outline: 2px solid rgba(170, 220, 255, 0.55);
.sv-tabs {
   outline-offset: 2px;
  border-radius: 12px;
   border: 1px solid rgba(255,255,255,0.050);
   background: rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
}


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


.sv-skill-head {
.sv-skill-head {
   display: flex;
   display: grid;
   align-items: flex-start;
   grid-template-columns: 124px 1fr;
   gap: 12px;
   gap: 14px;
  align-items: start;
   padding: 2px 0 10px;
   padding: 2px 0 10px;
}
}


.sv-skill-icon {
.sv-skill-icon {
  flex: 0 0 auto;
   width: 124px;
   width: 64px;
   height: 124px;
   height: 64px;
   border-radius: 14px;
   border-radius: 16px;
   border: 1px solid rgba(255,255,255,0.050);
   border: 1px solid rgba(255,255,255,0.06);
   background: rgba(255,255,255,0.04);
   background: rgba(255,255,255,0.03);
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
   display: flex;
  align-items: center;
  justify-content: center;
   overflow: hidden;
   overflow: hidden;
}
}


.sv-skill-icon .sv-miss {
.sv-skill-headtext { min-width: 0; }
  width: 22px;
  height: 22px;
  font-size: 13px;
}
 
.sv-skill-headtext {
  min-width: 0;
  flex: 1 1 auto;
}


.sv-skill-title-row {
.sv-skill-title-row {
Line 164: Line 141:
   align-items: center;
   align-items: center;
   gap: 10px;
   gap: 10px;
  min-width: 0;
}
}


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


.sv-skill-desc {
.sv-skill-desc {
   margin-top: 6px;
   margin-top: 8px;
   color: rgba(210, 224, 245, 0.86);
   max-width: 56ch;
   font-size: 14px;
   font-size: 12px;
   line-height: 1.35;
   line-height: 1.35;
   word-wrap: break-word;
  color: rgba(210,224,245,0.86);
   word-wrap: break-word; /* no line-clamp (TemplateStyles-safe) */
}
}


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   NOTES TIP (PHASE 4.1: span button + div popover)
   NOTES TIP (works with <details> OR span-button markup)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-tip {
.sv-tip { position: relative; display: inline-block; }
  position: relative;
.sv-tip > summary { cursor: pointer; }
  flex: 0 0 auto;
}


.sv-tip-btn {
.sv-tip-btn {
   display: inline-flex;
   display: inline-block;
  align-items: center;
   width: 30px;
  justify-content: center;
   height: 30px;
   width: 28px;
   height: 28px;
 
   border-radius: 999px;
   border-radius: 999px;
   border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.10);
   background: rgba(255,255,255,0.04);
   border: 1px solid rgba(255,255,255,0.050);
 
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  text-align: center;
  line-height: 30px;
  user-select: none;
   cursor: pointer;
   cursor: pointer;
}
}
.sv-tip-btn:hover { background: rgba(255,255,255,0.06); }


/* Optional “active” feel */
.sv-tip-btn:hover { background: rgba(255,255,255,0.13); }
.sv-tip-btn[aria-expanded="true"],
.sv-disclose-btn[aria-expanded="true"] {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.10);
}
 
.sv-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
 
  width: 18px;
  height: 18px;
  border-radius: 999px;


.sv-ico,
.sv-ico--info {
   font-weight: 900;
   font-weight: 900;
   font-size: 12px;
   font-size: 12px;
   line-height: 1;
   line-height: 1;
   color: rgba(245,250,255,0.95);
   color: rgba(245,250,255,0.95);
  background: rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.08);
}
}


/* IMPORTANT: do NOT use display:none here; JS controls visibility via .sv-hidden + [hidden] */
/* Popovers (fixed width + percent max-width; NO min()/calc()/vw) */
.sv-tip-pop {
.sv-tip-pop,
  display: block;
.sv-disclose-pop {
   position: absolute;
   position: absolute;
   z-index: 50;
   z-index: 200;
  padding: 10px 10px 8px;


   top: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.050);
  background:
    radial-gradient(700px 260px at 40% 0%, rgba(96,165,250,0.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)),
    linear-gradient(180deg, #0b1428, #0a1326);
  box-shadow: 0 16px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
 
  width: 380px;
  max-width: 92%;
}
 
.sv-tip-pop {
   top: 40px;
   right: 0;
   right: 0;
}


   width: 360px;
.sv-disclose-pop {
   max-width: 92vw;
   top: 46px;
   left: 0;
}


   border-radius: 16px;
/* Arrow (TemplateStyles-safe pseudo-element) */
   border: 1px solid rgba(255,255,255,0.08);
.sv-tip-pop:before,
   background:
.sv-disclose-pop:before {
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
  content: "";
    rgba(10, 14, 24, 0.92);
  position: absolute;
 
   top: -6px;
   box-shadow: 0 18px 40px rgba(0,0,0,0.60);
  width: 11px;
  overflow: hidden;
  height: 11px;
   transform: rotate(45deg);
   background: rgba(18,28,52,0.98);
  border-left: 1px solid rgba(255,255,255,0.050);
   border-top: 1px solid rgba(255,255,255,0.050);
}
}
.sv-tip-pop:before { right: 14px; }
.sv-disclose-pop:before { left: 20px; }


.sv-tip-pop-head {
.sv-tip-pop-head,
.sv-disclose-pop-head {
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   justify-content: space-between;
   justify-content: space-between;
 
   gap: 10px;
   padding: 10px 12px;
   margin-bottom: 6px;
   border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
 
  cursor: pointer;
}
}


.sv-tip-pop-title {
.sv-tip-pop-title,
.sv-disclose-pop-title {
   font-weight: 900;
   font-weight: 900;
   font-size: 13px;
   font-size: 12px;
   letter-spacing: 0.2px;
   letter-spacing: 0.10em;
   color: rgba(245,250,255,0.96);
  text-transform: uppercase;
   color: rgba(255,255,255,0.62);
}
}


.sv-tip-pop-hint {
.sv-tip-pop-hint,
.sv-disclose-pop-hint {
   font-size: 12px;
   font-size: 12px;
   color: rgba(210,224,245,0.65);
   color: rgba(255,255,255,0.50);
}
}


.sv-tip-pop-body {
.sv-tip-pop-body {
  padding: 10px 12px;
   color: rgba(255,255,255,0.82);
  font-size: 13px;
   font-size: 12px;
   color: rgba(225,235,250,0.88);
   line-height: 1.35;
   line-height: 1.4;
   word-wrap: break-word;
}
}
.sv-tip-pop-body ul { margin: 8px 0 0; padding-left: 18px; }
.sv-tip-pop-body li { margin: 6px 0; }


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   META ROW (4 CARDS)
   META (SEGMENTED STRIP)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-skill-meta {
.sv-skill-meta {
  margin-top: 10px;
   display: grid;
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
   gap: 0;
   margin: 8px 0 10px;
  border-top: 1px solid rgba(255,255,255,0.050);
   border-bottom: 1px solid rgba(255,255,255,0.050);
}
}


.sv-meta-card {
.sv-meta-card {
   display: flex;
  min-height: 52px;
   display: grid;
  grid-template-columns: 40px 1fr;
   align-items: center;
   align-items: center;
  gap: 10px;
   padding: 5px 6px;
 
   border-right: 1px solid rgba(255,255,255,0.050);
   padding: 9px 10px;
   border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}
}
.sv-meta-card:nth-child(4) { border-right: none; }


.sv-meta-icon {
.sv-meta-icon {
  flex: 0 0 auto;
   width: 34px;
   width: 28px;
   height: 34px;
   height: 28px;
   border-radius: 10px;
   border-radius: 10px;
   border: 1px solid rgba(255,255,255,0.06);
   background: rgba(255,255,255,0.04);
   background: rgba(0,0,0,0.10);
   border: 1px solid rgba(255,255,255,0.050);
   display: flex;
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  align-items: center;
  justify-content: center;
   overflow: hidden;
   overflow: hidden;
}
.sv-meta-icon img {
  border-radius: 8px;
  box-shadow: none;
}
}


.sv-meta-textwrap {
.sv-meta-textwrap {
  display: flex;
  align-items: center;
  justify-content: center;
   min-width: 0;
   min-width: 0;
  flex: 1 1 auto;
}
}


.sv-meta-text {
.sv-meta-text {
   font-weight: 900;
   font-weight: 700;
  font-size: 12px;
  line-height: 1.12;
  letter-spacing: 0.14px;
   color: rgba(235,244,255,0.92);
   color: rgba(235,244,255,0.92);
   font-size: 15px;
   text-align: center;
  line-height: 1.10;
  letter-spacing: 0.2px;
  min-width: 0;
   word-wrap: break-word;
   word-wrap: break-word;
}
}
Line 344: Line 325:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   REQUIREMENTS / USERS ROW (PHASE 4.1: span button + div popover)
   REQUIREMENTS / USERS (GRID, CENTERED BUTTONS)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-reqrow {
.sv-reqrow {
   display: flex;
   margin: 5px 0;
   gap: 10px;
   display: grid;
   flex-wrap: wrap;
   grid-template-columns: 1fr 1fr;
   margin: 6px 0 8px;
   gap: 5px;
}
}
.sv-reqrow > *:only-child { grid-column: 1 / -1; }


.sv-disclose {
.sv-disclose { position: relative; }
  position: relative;
.sv-disclose > summary { cursor: pointer; }
  flex: 1 1 220px;
  min-width: 220px;
}


.sv-disclose > summary,
.sv-disclose-btn {
.sv-disclose-btn {
  width: 100%;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.050);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   justify-content: space-between;
   justify-content: center;
 
   gap: 6px;
   padding: 10px 12px;
   text-align: center;
   border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
 
  cursor: pointer;
 
  font-weight: 900;
   color: rgba(235,244,255,0.92);
   color: rgba(235,244,255,0.92);
}
  font-weight: 700;
.sv-disclose-btn:hover { background: rgba(255,255,255,0.05); }
   font-size: 12px;
 
   letter-spacing: 0.2px;
.sv-disclose-label {
   min-width: 0;
   word-wrap: break-word;
}
}


.sv-disclose-count {
.sv-disclose-count {
  font-weight: 800;
   color: rgba(255,255,255,0.70);
  font-size: 13px;
   color: rgba(210,224,245,0.70);
  margin-left: 10px;
  white-space: nowrap;
}
 
/* IMPORTANT: do NOT use display:none here; JS controls visibility via .sv-hidden + [hidden] */
.sv-disclose-pop {
  display: block;
  position: absolute;
  z-index: 50;
 
  top: 46px;
  left: 0;
 
  width: 420px;
  max-width: 92vw;
 
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    rgba(10, 14, 24, 0.92);
 
  box-shadow: 0 18px 40px rgba(0,0,0,0.60);
  overflow: hidden;
}
 
.sv-disclose-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
 
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
 
  cursor: pointer;
}
 
.sv-disclose-pop-title {
   font-weight: 900;
   font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.2px;
  color: rgba(245,250,255,0.96);
}
.sv-disclose-pop-hint {
   font-size: 12px;
   font-size: 12px;
  color: rgba(210,224,245,0.65);
}
}


/* Requirements/Users list */
.sv-disclose-list {
.sv-disclose-list {
   margin: 0;
   margin: 0;
   padding: 10px 12px 12px;
   padding-left: 18px;
  list-style: none;
   color: rgba(255,255,255,0.82);
}
   font-size: 12px;
 
   line-height: 1.35;
.sv-disclose-list li {
   padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,0.05);
  color: rgba(225,235,250,0.90);
   font-size: 13px;
}
.sv-disclose-list li:first-child {
   border-top: none;
  padding-top: 0;
}
 
.sv-disclose-group-title {
  font-weight: 900;
  letter-spacing: 0.2px;
  color: rgba(210,224,245,0.78);
  padding-top: 10px;
}
}
.sv-disclose-list li { margin: 6px 0; }


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   LEVEL SELECTOR
   LEVEL SELECTOR (TemplateStyles-safe: use CUSTOM slider; no range vendor pseudos)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-skill-level {
.sv-skill-level { padding: 8px 10px; }
  margin: 8px 0 10px;
  padding: 10px 12px;
 
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}


.sv-level-ui {
.sv-level-ui {
  width: 100%;
   display: flex;
   display: flex;
   align-items: baseline;
   flex-direction: column;
  justify-content: center;
   gap: 6px;
   gap: 6px;
   margin-bottom: 8px;
   align-items: center;
}
}


.sv-level-label {
.sv-level-label {
   font-weight: 900;
  text-align: center;
   color: rgba(235,244,255,0.90);
   font-weight: 800;
   opacity: 0.95;
  font-size: 12px;
}
}


.sv-level-num {
.sv-level-num { font-variant-numeric: tabular-nums; }
  font-weight: 900;
  color: rgba(245,250,255,0.98);
}


.sv-level-slider { position: relative; }
.sv-level-slider {
 
/* Shared base */
.sv-level-range {
   width: 100%;
   width: 100%;
   margin: 0;
   display: flex;
  justify-content: center;
}
}


/* Phase 4.1 custom slider (span-based) */
/* Custom slider shell */
.sv-level-range--custom {
.sv-level-range--custom {
  display: block;
   position: relative;
   position: relative;
 
  width: 95%;
   height: 26px;
   height: 26px;
   border-radius: 999px;
   border-radius: 999px;
 
   border: 1px solid rgba(255,255,255,0.050);
   border: 1px solid rgba(255,255,255,0.07);
   background: rgba(0,0,0,0.12);
   background: rgba(0,0,0,0.16);
 
   cursor: pointer;
   cursor: pointer;
}
}


/* Track with ticks baked in (replaces ::-webkit-slider-* styling) */
.sv-level-track {
.sv-level-track {
   position: absolute;
   position: absolute;
   left: 8px;
   left: 8px;
   right: 8px;
   right: 8px;
   top: 50%;
   top: 50%;
   margin-top: -4px;
   margin-top: -5px;
 
   height: 10px;
   height: 8px;
   border-radius: 999px;
   border-radius: 999px;
   background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.050);
   background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)),
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent 10.8%,
      rgba(255,255,255,0.28) 10.8%,
      rgba(255,255,255,0.28) 11.11%
    );
   overflow: hidden;
   overflow: hidden;
}
}


/* Fill (optional; JS can set width) */
.sv-level-fill {
.sv-level-fill {
   display: block;
   display: block;
   height: 100%;
   height: 100%;
   width: 0%;
   width: 0%;
   border-radius: 999px;
   border-radius: 999px;
   background: linear-gradient(
   background: linear-gradient(90deg, rgba(170,220,255,0.35), rgba(255,255,255,0.12));
    90deg,
    rgba(170,220,255,0.60),
    rgba(255,255,255,0.22)
  );
}
}


/* Thumb (optional; JS positions with left:%) */
.sv-level-thumb {
.sv-level-thumb {
   position: absolute;
   position: absolute;
   left: 0%;
   left: 0%;
   top: 50%;
   top: 50%;
   margin-top: -9px;
   margin-top: -9px;
   margin-left: -9px;
   margin-left: -9px;
   width: 18px;
   width: 18px;
   height: 18px;
   height: 18px;
   border-radius: 999px;
   border-radius: 999px;
 
   background: rgba(255,255,255,0.92);
   border: 2px solid rgba(255,255,255,0.16);
   border: 1px solid rgba(0,0,0,0.35);
   background: rgba(245,250,255,0.92);
   box-shadow: 0 6px 14px rgba(0,0,0,0.35);
   box-shadow: 0 10px 18px rgba(0,0,0,0.45);
}
}


.sv-level-range--custom:focus {
/* Tick labels */
  outline: 2px solid rgba(170, 220, 255, 0.55);
  outline-offset: 2px;
}
 
/* Optional tick label row (Lua emits empty container; keep stable spacing) */
.sv-level-ticklabels {
.sv-level-ticklabels {
  width: 95%;
   display: flex;
   display: flex;
   justify-content: space-between;
   justify-content: space-between;
  gap: 10px;
   margin-top: 4px;
   margin-top: 7px;
 
  font-weight: 900;
   font-size: 12px;
   font-size: 12px;
   color: rgba(210,224,245,0.70);
   color: rgba(255,255,255,0.65);
   line-height: 1.1;
   font-weight: 800;
 
  font-variant-numeric: tabular-nums;
   min-height: 12px;
   user-select: none;
  padding: 0 2px;
}
}
.sv-level-ticklabels span { min-width: 1ch; text-align: center; }


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   SCALING TOP
   SKILL SCALING (DESKTOP/TABLET: 3 COL)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-skill-scaling { margin: 10px 0 10px; }
.sv-skill-scaling { margin-top: 10px; }
 
.sv-scaling-row { overflow: hidden; }
.sv-scaling-row {
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}


.sv-scaling-grid {
.sv-scaling-grid {
   display: grid;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-columns: 1fr 1fr 1.35fr;
   gap: 10px;
   gap: 0;
  align-items: start;
}
}


.sv-scaling-col--scaling { grid-column: 1 / -1; }
.sv-scaling-col {
  padding: 10px 10px 8px;
  min-width: 0;
}
.sv-scaling-col + .sv-scaling-col {
  border-left: 1px solid rgba(255,255,255,0.050);
}


.sv-scaling-value {
.sv-scaling-value {
   font-weight: 900;
   font-weight: 900;
   font-size: 18px;
   font-size: 16px;
   line-height: 1.10;
   line-height: 1.05;
   color: rgba(245,250,255,0.98);
   color: rgba(235,244,255,0.92);
  text-align: center;
   word-wrap: break-word;
   word-wrap: break-word;
}
}


.sv-scaling-label {
.sv-scaling-label {
   margin-top: 3px;
   margin-top: 4px;
  font-weight: 800;
   font-size: 12px;
   font-size: 12px;
  font-weight: 900;
   letter-spacing: 0.12em;
   letter-spacing: 0.25px;
  color: rgba(210,224,245,0.65);
   text-transform: uppercase;
   text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  text-align: center;
}
}


.sv-scaling-list {
.sv-scaling-list { display: grid; gap: 4px; }
  display: grid;
  gap: 6px;
  margin-top: 2px;
}
 
.sv-scaling-item {
.sv-scaling-item {
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.05);
  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: 12px;
  line-height: 1.15;
  color: rgba(255,255,255,0.82);
  text-align: center;
  word-wrap: break-word;
}
}


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   CORE STATS GRID
   CORE STATS (DESKTOP/TABLET: 6 COL STRIP)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-skill-core { margin: 10px 0 10px; }
.sv-skill-core { margin-top: 10px; }
 
.sv-core-row { overflow: hidden; }
.sv-core-row {
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}


.sv-core-grid {
.sv-core-grid {
   display: grid;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   grid-template-columns: 1fr 1.25fr 1.25fr 1fr 1fr 1.25fr;
   gap: 10px;
   gap: 0;
}
}


.sv-core-cell {
.sv-core-cell {
   padding: 10px 10px 9px;
   padding: 5px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.12);
   min-width: 0;
   min-width: 0;
  overflow: hidden;
}
.sv-core-cell + .sv-core-cell {
  border-left: 1px solid rgba(255,255,255,0.050);
}
}


Line 662: Line 549:
   display: flex;
   display: flex;
   align-items: baseline;
   align-items: baseline;
  justify-content: center;
   gap: 6px;
   gap: 6px;
  min-width: 0;
}
}


.sv-core-num {
.sv-core-num {
   font-weight: 900;
   font-weight: 900;
   font-size: 17px;
   font-size: 16px;
   line-height: 1.10;
   line-height: 1.05;
   color: rgba(245,250,255,0.98);
   color: rgba(235,244,255,0.92);
  min-width: 0;
   word-wrap: break-word;
   word-wrap: break-word;
}
}


.sv-core-unit {
.sv-core-unit {
   font-weight: 900;
   font-weight: 800;
   font-size: 12px;
   font-size: 12px;
   color: rgba(210,224,245,0.70);
   color: rgba(255,255,255,0.75);
  letter-spacing: 0.02em;
}
}


.sv-core-label {
.sv-core-label {
   margin-top: 6px;
   margin-top: 4px;
  font-weight: 800;
   font-size: 12px;
   font-size: 12px;
  font-weight: 900;
   letter-spacing: 0.06em;
   letter-spacing: 0.25px;
   text-transform: uppercase;
   text-transform: uppercase;
   color: rgba(210,224,245,0.65);
   color: rgba(255,255,255,0.62);
  text-align: center;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
}
}
.sv-core-label--tight { letter-spacing: 0.12px; }
.sv-core-label--tight { letter-spacing: 0.03em; }


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   TABS
   TABS (SEGMENTED BAR)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-skill-tabs { margin: 10px 0 0; }
.sv-skill-tabs { margin-top: 10px; }
.sv-tabs { overflow: hidden; }


.sv-tabs-list {
.sv-tabs-list {
   display: flex;
   display: grid;
   gap: 8px;
   grid-template-columns: repeat(4, 1fr);
   flex-wrap: wrap;
   gap: 0;
   margin-bottom: 10px;
   border-bottom: 1px solid rgba(255,255,255,0.050);
}
}


.sv-tab {
.sv-tab {
   border: 1px solid rgba(255,255,255,0.06);
   border: 0;
   background: rgba(255,255,255,0.03);
  margin: 0;
   color: rgba(225,235,250,0.90);
  padding: 10px 8px;
 
   background: transparent;
   color: rgba(255,255,255,0.78);


   border-radius: 999px;
   font-weight: 800;
   padding: 7px 10px;
   font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;


  font-weight: 900;
  font-size: 13px;
   cursor: pointer;
   cursor: pointer;
  line-height: 1.05;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
}


.sv-tab:hover { background: rgba(255,255,255,0.05); }
.sv-tab + .sv-tab { border-left: 1px solid rgba(255,255,255,0.050); }


.sv-tab[aria-selected="true"] {
.sv-tab[aria-selected="true"] {
   background: rgba(255,255,255,0.08);
   color: rgba(235,244,255,0.92);
   border-color: rgba(255,255,255,0.10);
   background:
   color: rgba(245,250,255,0.98);
    radial-gradient(600px 220px at 50% 0%, rgba(96,165,250,0.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
 
.sv-tabs-panels { padding: 10px 10px 12px; }
.sv-tabpanel { display: none; }
.sv-tabpanel[data-active="1"] { display: block; }
 
/* Keyword pills */
.sv-tab-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
}


.sv-tabpanel {
.sv-pill {
   padding: 10px 12px;
  display: inline-block;
   border-radius: 16px;
   padding: 6px 10px;
   border: 1px solid rgba(255,255,255,0.06);
   border-radius: 999px;
   border: 1px solid rgba(255,255,255,0.050);
   background: rgba(255,255,255,0.03);
   background: rgba(255,255,255,0.03);
  color: rgba(235,244,255,0.92);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.05;
  white-space: nowrap;
}
}


/* Mechanics grid */
/* Mechanics/Keywords grid */
.sv-kw-root { display: grid; gap: 10px; }
 
.sv-kw-grid {
.sv-kw-grid {
   display: grid;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   gap: 8px;
}
}


.sv-kw-cell {
.sv-kw-cell {
  padding: 10px 10px 9px;
   border-radius: 12px;
   border-radius: 14px;
   border: 1px solid rgba(255,255,255,0.050);
   border: 1px solid rgba(255,255,255,0.05);
   background: rgba(255,255,255,0.03);
   background: rgba(0,0,0,0.12);
  padding: 8px 8px 7px;
  min-width: 0;
}
}


.sv-kw-label {
.sv-kw-label {
  font-weight: 800;
   font-size: 12px;
   font-size: 12px;
  font-weight: 900;
   letter-spacing: 0.08em;
   letter-spacing: 0.25px;
   text-transform: uppercase;
   text-transform: uppercase;
   color: rgba(210,224,245,0.65);
   color: rgba(255,255,255,0.62);
  text-align: center;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
}
}


.sv-kw-value {
.sv-kw-value {
   margin-top: 6px;
   margin-top: 6px;
  font-size: 15px;
   font-weight: 900;
   font-weight: 900;
   color: rgba(245,250,255,0.96);
  font-size: 12px;
   color: rgba(235,244,255,0.92);
  text-align: center;
   word-wrap: break-word;
   word-wrap: break-word;
}
/* Keyword pills panel */
.sv-tab-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
}


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   EFFECT / EVENT CARDS
   EFFECTS / EVENTS (CARD GRID)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-ref-grid {
.sv-ref-grid {
   display: grid;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   grid-template-columns: repeat(2, 1fr);
   gap: 10px;
   gap: 10px;
}
}


.sv-ref-card {
.sv-ref-card {
   display: flex;
  position: relative;
   gap: 10px;
   display: grid;
   align-items: flex-start;
  grid-template-columns: 56px 1fr;
   gap: 12px;
   align-items: center;


   padding: 10px 10px;
   padding: 12px 12px 11px;
   border-radius: 16px;
   border-radius: 14px;
   border: 1px solid rgba(255,255,255,0.06);
   border: 1px solid rgba(255,255,255,0.050);
   background: rgba(0,0,0,0.12);
   background: rgba(255,255,255,0.03);
   color: rgba(235,244,255,0.90);
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);


   min-width: 0;
   min-height: 86px;
  color: rgba(235,244,255,0.92);
  text-decoration: none;
}
}
.sv-ref-card:hover { background: rgba(255,255,255,0.045); }


.sv-ref-ico {
.sv-ref-ico {
  flex: 0 0 auto;
   width: 56px;
   width: 52px;
   height: 56px;
   height: 52px;
   border-radius: 14px;
   border-radius: 16px;
   background: rgba(255,255,255,0.04);
   border: 1px solid rgba(255,255,255,0.06);
   border: 1px solid rgba(255,255,255,0.050);
   background: rgba(255,255,255,0.03);
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
   display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
}


.sv-ref-ico img {
.sv-ref-text { min-width: 0; }
  border-radius: 14px;
  box-shadow: none;
}


.sv-ref-text {
.sv-ref-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
   min-width: 0;
   min-width: 0;
  flex: 1 1 auto;
}
}


.sv-ref-title {
.sv-ref-title {
   font-weight: 900;
   font-weight: 900;
   font-size: 15px;
   font-size: 12px;
   line-height: 1.15;
   line-height: 1.05;
  color: rgba(245,250,255,0.98);
   word-wrap: break-word;
   word-wrap: break-word;
}
}


.sv-ref-stats {
.sv-ref-inline {
   display: flex;
   font-weight: 900;
   gap: 8px;
   font-size: 12px;
   margin-top: 8px;
   line-height: 1.05;
   flex-wrap: wrap;
  color: rgba(235,244,255,0.92);
   white-space: nowrap;
}
}


.sv-ref-stat {
/* Events stacked layout */
   display: inline-flex;
.sv-ref-title-row--stacked {
   align-items: center;
   flex-direction: column;
   padding: 3px 8px;
   align-items: flex-start;
   border-radius: 999px;
   justify-content: flex-start;
  border: 1px solid rgba(255,255,255,0.05);
   gap: 6px;
  background: rgba(255,255,255,0.04);
}
  font-weight: 900;
.sv-ref-title-row--stacked .sv-ref-inline {
   font-size: 12px;
   font-size: 12px;
   color: rgba(225,235,250,0.88);
  font-weight: 800;
   color: rgba(255,255,255,0.78);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
}


.sv-ref-sub {
.sv-ref-stats {
   margin-top: 6px;
   margin-top: 6px;
  display: flex;
  justify-content: space-evenly;
  gap: 14px;
   font-weight: 900;
   font-weight: 900;
   font-size: 13px;
   font-size: 12px;
   color: rgba(210,224,245,0.75);
   color: rgba(235,244,255,0.92);
}
}
.sv-ref-stat { white-space: nowrap; }
/* Optional hover pop (NO transition/transform/:focus-within) */
.sv-ref-pop { display: none; }
.sv-ref-card:hover .sv-ref-pop { display: block; }


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   RESPONSIVE
   RESPONSIVE (Project Standard)
  Desktop: > 720
  Tablet:  720–521
  Mobile:  <= 520
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


/* Tablet / compact desktop */
/* Tablet */
@media (max-width: 720px) {
@media (max-width: 720px) {
   .sv-gi-card,
   .sv-gi-card,
Line 874: Line 812:
   }
   }


   .sv-skill-title { font-size: 20px; }
  /* Meta becomes 2x2 segmented */
   .sv-skill-meta { grid-template-columns: repeat(2, 1fr); }


   .sv-skill-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .sv-meta-card {
    border-right: 1px solid rgba(255,255,255,0.050);
    border-bottom: 1px solid rgba(255,255,255,0.050);
  }
  .sv-meta-card:nth-child(2),
  .sv-meta-card:nth-child(4) { border-right: none; }
  .sv-meta-card:nth-child(3),
  .sv-meta-card:nth-child(4) { border-bottom: none; }


   .sv-core-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .sv-tab { padding: 8px 6px; }
  .sv-tabs-panels { padding: 9px 9px 10px; }


   .sv-ref-grid { grid-template-columns: 1fr; }
   .sv-pill { padding: 5px 9px; }


   .sv-tip-pop,
   .sv-kw-grid { gap: 7px; }
   .sv-disclose-pop {
   .sv-kw-cell { padding: 7px 7px 6px; }
    right: 0;
    left: auto;
    width: 92vw;
    max-width: 520px;
  }
}
}


/* Mobile */
/* Mobile */
@media (max-width: 520px) {
@media (max-width: 520px) {
   .sv-skill-head { gap: 10px; }
   .sv-skill-head {
    grid-template-columns: 92px 1fr;
    gap: 12px;
  }


   .sv-skill-icon {
   .sv-skill-icon {
     width: 56px;
     width: 92px;
     height: 56px;
     height: 92px;
     border-radius: 14px;
     border-radius: 12px;
  }
 
  /* Title row snaps info button right */
  .sv-skill-title-row {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    row-gap: 6px;
    align-items: start;
   }
   }


   .sv-skill-title { font-size: 18px; }
  /* Requirements / Users stack */
   .sv-reqrow { grid-template-columns: 1fr; }
 
  /* Disclose pop aligns right on mobile */
  .sv-disclose-pop { left: auto; right: 0; max-width: 92%; }


   .sv-skill-desc { font-size: 13px; }
  /* Scaling becomes “stacked-left + tall-right” */
   .sv-scaling-grid { grid-template-columns: 1fr 1fr; }


   .sv-scaling-grid { grid-template-columns: 1fr; }
   .sv-scaling-col--damage {
    grid-column: 1;
    grid-row: 1;
    border-right: 1px solid rgba(255,255,255,0.050);
  }


   .sv-kw-grid { grid-template-columns: 1fr; }
   .sv-scaling-col--modifier {
    grid-column: 1;
    grid-row: 2;
    border-top: 1px solid rgba(255,255,255,0.050);
    border-right: 1px solid rgba(255,255,255,0.050);
  }


   .sv-disclose {
   .sv-scaling-col--scaling {
     min-width: 0;
     grid-column: 2;
     flex: 1 1 100%;
     grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
   }
   }
  /* Core becomes 3x2 */
  .sv-core-grid { grid-template-columns: repeat(3, 1fr); }
  .sv-core-cell { border-left: 0; border-top: 1px solid rgba(255,255,255,0.050); }
  .sv-core-cell:nth-child(-n+3) { border-top: 0; }
  .sv-core-cell:nth-child(3n+2),
  .sv-core-cell:nth-child(3n+3) { border-left: 1px solid rgba(255,255,255,0.050); }
  /* Tabs become 2x2 segmented */
  .sv-tabs-list { grid-template-columns: repeat(2, 1fr); }
  .sv-tab { padding: 9px 6px; }
  .sv-tab + .sv-tab { border-left: 1px solid rgba(255,255,255,0.050); }
  .sv-tab:nth-child(2n+1) { border-left: 0; }
  .sv-tab:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.050); }
  /* Mechanics grid becomes 2-col */
  .sv-kw-grid { grid-template-columns: repeat(2, 1fr); }
  /* Effects/Events become 1-col */
  .sv-ref-grid { grid-template-columns: 1fr; }
  .sv-ref-card { grid-template-columns: 52px 1fr; }
  .sv-ref-ico { width: 52px; height: 52px; border-radius: 13px; }
}
}
Retrieved from "https://spiritvale.info/wiki/Module:GameInfo/styles.css"