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 978: Line 978:
   display: inline !important;
   display: inline !important;
   white-space: nowrap !important;
   white-space: nowrap !important;
}
/* --------------------------------------------------------------------------
  PATCH: Remove click highlight on the level scale
  - kills the focus outline that appears on mouse/touch click
  - prevents text-selection highlight while dragging
--------------------------------------------------------------------------- */
.sv-level-range--custom:focus {
  outline: none;
}
.sv-level-range--custom,
.sv-level-track,
.sv-level-fill,
.sv-level-thumb,
.sv-level-ticklabels {
  user-select: none;
}
}

Revision as of 02:36, 20 February 2026

/* Module:GameInfo/styles.css */
/* Phase 4.1 — Mockup Match + TemplateStyles-safe (NO var(), NO vendor pseudos) */

/* ----------------------------------------------------------------------------
   BASE CARD + SAFETY
---------------------------------------------------------------------------- */

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

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

  background-color: #0f1b33;
  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)),
    radial-gradient(900px 360px at 50% 0, rgba(255,255,255,0.06), transparent 55%),
    linear-gradient(180deg, #0f1b33, #0c162b);

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

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

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

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

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

.sv-gi-card a,
.sv-skill-card a {
  color: rgba(170,220,255,0.95);
  text-decoration: none;
}
.sv-gi-card a:hover,
.sv-skill-card a:hover {
  text-decoration: underline;
}

/* Hide contract */
.sv-hidden { display: none !important; }
[hidden] { display: none !important; }

/* Safe details reset (NO ::marker / NO vendor marker pseudos) */
.sv-gi-card summary,
.sv-skill-card summary {
  list-style: none;
}

/* 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 {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.050);
  background: rgba(255,255,255,0.05);
  font-weight: 900;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

/* Image wrapper produced by Lua */
.sv-img { display: inline-block; }
.sv-img img {
  display: block;
  border-radius: 10px;
  box-shadow: 0 10px 18px rgba(0,0,0,0.35);
}

/* Shared “panel surface” */
.sv-skill-level,
.sv-scaling-row,
.sv-core-row,
.sv-tabs {
  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);
}

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

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

.sv-skill-icon {
  width: 124px;
  height: 124px;
  border-radius: 14px;
  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.04);
  overflow: hidden;
}

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

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

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

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

/* ----------------------------------------------------------------------------
   NOTES TIP (works with <details> OR span-button markup)
---------------------------------------------------------------------------- */

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

.sv-tip-btn {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  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;
  cursor: pointer;
}

.sv-tip-btn:hover { background: rgba(255,255,255,0.13); }

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

/* Popovers (fixed width + percent max-width; NO min()/calc()/vw) */
.sv-tip-pop,
.sv-disclose-pop {
  position: absolute;
  z-index: 200;
  padding: 10px 10px 8px;

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

.sv-disclose-pop {
  top: 46px;
  left: 0;
}

/* Arrow (TemplateStyles-safe pseudo-element) */
.sv-tip-pop:before,
.sv-disclose-pop:before {
  content: "";
  position: absolute;
  top: -6px;
  width: 11px;
  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-disclose-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

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

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

.sv-tip-pop-body {
  color: rgba(255,255,255,0.82);
  font-size: 12px;
  line-height: 1.35;
}
.sv-tip-pop-body ul { margin: 8px 0 0; padding-left: 18px; }
.sv-tip-pop-body li { margin: 6px 0; }

/* ----------------------------------------------------------------------------
   META (SEGMENTED STRIP)
---------------------------------------------------------------------------- */

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

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

.sv-meta-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  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);
  overflow: hidden;
}

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

.sv-meta-text {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.12;
  letter-spacing: 0.14px;
  color: rgba(235,244,255,0.92);
  text-align: center;
  word-wrap: break-word;
}

.sv-meta-lines span { display: block; }

/* ----------------------------------------------------------------------------
   REQUIREMENTS / USERS (GRID, CENTERED BUTTONS)
---------------------------------------------------------------------------- */

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

.sv-disclose { position: relative; }
.sv-disclose > summary { cursor: pointer; }

.sv-disclose > summary,
.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;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  color: rgba(235,244,255,0.92);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2px;
}

.sv-disclose-count {
  color: rgba(255,255,255,0.70);
  font-weight: 900;
  font-size: 12px;
}

/* Requirements/Users list */
.sv-disclose-list {
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,0.82);
  font-size: 12px;
  line-height: 1.35;
}
.sv-disclose-list li { margin: 6px 0; }

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

.sv-skill-level { padding: 8px 10px; }

.sv-level-ui {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.sv-level-label {
  width: 100%;
  text-align: center;
  font-weight: 800;
  opacity: 0.95;
  font-size: 12px;
  white-space: nowrap; /* keep "Level X / Y" on one line */
}

/* If Lua ever emits a <br> inside the label, suppress it */
.sv-level-label br { display: none; }

/* If Lua/JS wraps pieces in spans, keep them inline */
.sv-level-label span,
.sv-level-label b,
.sv-level-label strong,
.sv-level-label em,
.sv-level-label i {
  display: inline;
  white-space: nowrap;
}

.sv-level-slider {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Custom slider shell */
.sv-level-range--custom {
  display: block;            /* critical if this is emitted as a <span> */
  position: relative;
  width: 100%;               /* do NOT shrink */
  max-width: 560px;          /* matches the mockup feel inside 600px card */
  margin: 0 auto;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.050);
  background: rgba(0,0,0,0.12);
  cursor: pointer;
}

/* Track with ticks baked in (replaces ::-webkit-slider-* styling) */
.sv-level-track {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  margin-top: -5px;
  height: 10px;
  border-radius: 999px;
  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;
}

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

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

/* Tick labels */
.sv-level-ticklabels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  padding: 0 2px;

  width: 100%;               /* do NOT shrink */
  max-width: 560px;          /* align with slider width */
  margin-left: auto;
  margin-right: auto;

  font-size: 12px;
  color: rgba(255,255,255,0.65);
  font-weight: 800;
  line-height: 1.1;
}
.sv-level-ticklabels span { min-width: 1ch; text-align: center; }

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

.sv-skill-scaling { margin-top: 10px; }
.sv-scaling-row { overflow: hidden; }

.sv-scaling-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr;
  gap: 0;
}

.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 {
  font-weight: 900;
  font-size: 16px;
  line-height: 1.05;
  color: rgba(235,244,255,0.92);
  text-align: center;
  word-wrap: break-word;
}

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

.sv-scaling-list { display: grid; gap: 4px; }
.sv-scaling-item {
  font-weight: 800;
  font-size: 12px;
  line-height: 1.15;
  color: rgba(255,255,255,0.82);
  text-align: center;
  word-wrap: break-word;
}

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

.sv-skill-core { margin-top: 10px; }
.sv-core-row { overflow: hidden; }

.sv-core-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1.25fr 1fr 1fr 1.25fr;
  gap: 0;
}

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

.sv-core-top {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.sv-core-num {
  font-weight: 900;
  font-size: 16px;
  line-height: 1.05;
  color: rgba(235,244,255,0.92);
  word-wrap: break-word;
}

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

.sv-core-label {
  margin-top: 4px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  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.03em; }

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

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

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

.sv-tab {
  border: 0;
  margin: 0;
  padding: 10px 8px;

  background: transparent;
  color: rgba(255,255,255,0.78);

  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  cursor: pointer;
  line-height: 1.05;

  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

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

.sv-tab[aria-selected="true"] {
  color: rgba(235,244,255,0.92);
  background:
    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-pill {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.050);
  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/Keywords grid */
.sv-kw-root { display: grid; gap: 10px; }

.sv-kw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

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

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

.sv-kw-value {
  margin-top: 6px;
  font-weight: 900;
  font-size: 12px;
  color: rgba(235,244,255,0.92);
  text-align: center;
  word-wrap: break-word;
}

/* ----------------------------------------------------------------------------
   EFFECTS / EVENTS (CARD GRID)
---------------------------------------------------------------------------- */

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

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

  padding: 12px 12px 11px;
  border-radius: 14px;
  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.03);

  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 {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  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);
}

.sv-ref-text { min-width: 0; }

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

.sv-ref-title {
  font-weight: 900;
  font-size: 12px;
  line-height: 1.05;
  word-wrap: break-word;
}

.sv-ref-inline {
  font-weight: 900;
  font-size: 12px;
  line-height: 1.05;
  color: rgba(235,244,255,0.92);
  white-space: nowrap;
}

/* Events stacked layout */
.sv-ref-title-row--stacked {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
}
.sv-ref-title-row--stacked .sv-ref-inline {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sv-ref-stats {
  margin-top: 6px;
  display: flex;
  justify-content: space-evenly;
  gap: 14px;
  font-weight: 900;
  font-size: 12px;
  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 (Project Standard)
   Desktop: > 720
   Tablet:  720–521
   Mobile:  <= 520
---------------------------------------------------------------------------- */

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

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

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

  /* Meta becomes 2x2 segmented */
  .sv-skill-meta { grid-template-columns: repeat(2, 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-tab { padding: 8px 6px; }
  .sv-tabs-panels { padding: 9px 9px 10px; }

  .sv-pill { padding: 5px 9px; }

  .sv-kw-grid { gap: 7px; }
  .sv-kw-cell { padding: 7px 7px 6px; }

  /* Keep level slider full-width even on tablet */
  .sv-level-range--custom,
  .sv-level-ticklabels {
    max-width: 520px;
  }
}

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

  .sv-skill-icon {
    width: 92px;
    height: 92px;
    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;
  }

  /* 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%; }

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

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

  .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-scaling-col--scaling {
    grid-column: 2;
    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; }

  /* Level slider uses full available width on mobile */
  .sv-level-range--custom,
  .sv-level-ticklabels {
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   PATCH: Level selector final lockdown (wins even if markup uses spans/inline)
--------------------------------------------------------------------------- */

.sv-skill-card .sv-skill-level,
.sv-skill-card .sv-level-ui,
.sv-skill-card .sv-level-slider,
.sv-skill-card .sv-level-range--custom,
.sv-skill-card .sv-level-ticklabels {
  width: 100% !important;
}

.sv-skill-card .sv-level-slider {
  display: block !important;
}

.sv-skill-card .sv-level-range--custom {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.sv-skill-card .sv-level-label {
  white-space: nowrap !important;
}

.sv-skill-card .sv-level-label br {
  display: none !important;
}

.sv-skill-card .sv-level-label span,
.sv-skill-card .sv-level-label b,
.sv-skill-card .sv-level-label strong,
.sv-skill-card .sv-level-label em,
.sv-skill-card .sv-level-label i {
  display: inline !important;
  white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   PATCH: Remove click highlight on the level scale
   - kills the focus outline that appears on mouse/touch click
   - prevents text-selection highlight while dragging
--------------------------------------------------------------------------- */

.sv-level-range--custom:focus {
  outline: none;
}

.sv-level-range--custom,
.sv-level-track,
.sv-level-fill,
.sv-level-thumb,
.sv-level-ticklabels {
  user-select: none;
}
Retrieved from "https://spiritvale.info/wiki/index.php?title=Module:GameInfo/styles.css&oldid=2360"
Last modified
This page was last edited on 20 February 2026, at 02:36.