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
Tags: Mobile edit Mobile web edit
Line 121: Line 121:
.sv-skill-head {
.sv-skill-head {
   display: grid;
   display: grid;
   grid-template-columns: 92px 1fr; /* was 124px */
   grid-template-columns: 92px 1fr;
   gap: 12px;
   gap: 12px;
   align-items: start;
   align-items: start;
Line 128: Line 128:


.sv-skill-icon {
.sv-skill-icon {
   width: 92px;   /* was 124px */
   width: 92px;
   height: 92px; /* was 124px */
   height: 92px;
   border-radius: 12px;
   border-radius: 12px;
   border: 1px solid rgba(255,255,255,0.050);
   border: 1px solid rgba(255,255,255,0.050);
Line 159: Line 159:
.sv-skill-desc {
.sv-skill-desc {
   margin-top: 8px;
   margin-top: 8px;
  /* Was: max-width: 56ch; font-size: 12px; */
   max-width: none;
   max-width: none;
   width: 100%;
   width: 100%;
   font-size: 18px;
   font-size: 18px;
   line-height: 1.30;
   line-height: 1.30;
   color: rgba(210,224,245,0.86);
   color: rgba(210,224,245,0.86);
   word-wrap: break-word; /* no line-clamp (TemplateStyles-safe) */
   word-wrap: break-word;
}
}


Line 219: Line 216:
}
}


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


.sv-disclose-pop {
  top: 46px;
  left: 0;
}
/* Arrow (TemplateStyles-safe pseudo-element) */
.sv-tip-pop:before,
.sv-tip-pop:before,
.sv-disclose-pop:before {
.sv-disclose-pop:before {
Line 331: Line 320:
/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   REQUIREMENTS / USERS (COMPACT, CENTERED, SHRINK-TO-FIT)
   REQUIREMENTS / USERS (COMPACT, CENTERED, SHRINK-TO-FIT)
  - No full-width bars
   - Desktop: narrow pills
   - Desktop: ~50% narrower + centered
   - Mobile: still side-by-side, but even tighter
   - Mobile: stay side-by-side; shrink instead of stacking
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 344: Line 332:
}
}


/* Two buttons: narrower + no grow (prevents stretching) */
.sv-reqrow > * {
.sv-reqrow > * {
   flex: 0 1 140px;   /* shrink-to-fit, no expansion */
   flex: 0 1 140px;
   max-width: 140px; /* ~50% narrower than prior 280px */
   max-width: 140px;
   min-width: 0;
   min-width: 0;
}
}


/* Single button: still compact (not full row) */
.sv-reqrow > *:only-child {
.sv-reqrow > *:only-child {
   flex: 0 1 280px;
   flex: 0 1 280px;
Line 396: Line 382:
/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   LEVEL + SCALING + CORE (ONE GROUPED BUBBLE)
   LEVEL + SCALING + CORE (ONE GROUPED BUBBLE)
  - Remove separate “cards” feeling by fusing borders/radii and killing gaps
  - Level bar flush (no extra tray); Level label slightly bigger
  - Slightly de-emphasize top values (less bold / a touch smaller)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


/* Make the whole block start here, then fuse the following panels */
.sv-skill-level {
.sv-skill-level {
   margin-top: 10px;               /* spacing from req row */
   margin-top: 10px;
   padding: 6px 10px 6px;         /* tighter */
   padding: 6px 10px 6px;
   border-radius: 12px 12px 0 0;
   border-radius: 12px 12px 0 0;
   border-bottom: 0;
   border-bottom: 0;
}
}


/* Remove the extra gaps between fused rows */
.sv-skill-scaling { margin-top: 0; }
.sv-skill-scaling { margin-top: 0; }
.sv-skill-core { margin-top: 0; }
.sv-skill-core { margin-top: 0; }


/* Middle fused row: no outer rounding, no top/bottom borders (seams) */
.sv-scaling-row {
.sv-scaling-row {
   border-radius: 0;
   border-radius: 0;
Line 420: Line 400:
}
}


/* Bottom fused row: only bottom rounding, no top border seam */
.sv-core-row {
.sv-core-row {
   border-radius: 0 0 12px 12px;
   border-radius: 0 0 12px 12px;
Line 426: Line 405:
}
}


/* Level UI tightening */
.sv-level-ui {
.sv-level-ui {
   width: 100%;
   width: 100%;
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
   gap: 4px;         /* was 6px */
   gap: 4px;
   align-items: center;
   align-items: center;
}
}
Line 440: Line 418:
   font-weight: 800;
   font-weight: 800;
   opacity: 0.95;
   opacity: 0.95;
   font-size: 14px;   /* was 12px */
   font-size: 14px;
   white-space: nowrap;
   white-space: nowrap;
}
}


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


/* If Lua/JS wraps pieces in spans, keep them inline */
.sv-level-label span,
.sv-level-label span,
.sv-level-label b,
.sv-level-label b,
Line 463: Line 439:
}
}


/* Custom slider shell: visually flush (no extra tray) */
.sv-level-range--custom {
.sv-level-range--custom {
   display: block;
   display: block;
Line 471: Line 446:
   margin: 0 auto;
   margin: 0 auto;


   height: 22px;                 /* was 26px */
   height: 22px;
   border-radius: 999px;
   border-radius: 999px;


   border: 0;                   /* was 1px */
   border: 0;
   background: transparent;     /* was rgba tray */
   background: transparent;
   cursor: pointer;
   cursor: pointer;
}
}


/* Track with ticks baked in */
.sv-level-track {
.sv-level-track {
   position: absolute;
   position: absolute;
   left: 0;                     /* was 10px */
   left: 0;
   right: 0;                     /* was 10px */
   right: 0;
   top: 50%;
   top: 50%;
   margin-top: -5px;
   margin-top: -5px;
Line 501: Line 475:
}
}


/* Fill (optional; JS can set width) */
.sv-level-fill {
.sv-level-fill {
   display: block;
   display: block;
Line 510: Line 483:
}
}


/* Thumb (optional; JS positions with left:%) */
.sv-level-thumb {
.sv-level-thumb {
   position: absolute;
   position: absolute;
Line 525: Line 497:
}
}


/* Tick labels */
.sv-level-ticklabels {
.sv-level-ticklabels {
   display: flex;
   display: flex;
Line 545: Line 516:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   SKILL SCALING (DESKTOP/TABLET: 3 COL)
   SKILL SCALING
  - Slightly de-emphasize top values
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-skill-scaling { }
.sv-scaling-row { overflow: hidden; }
.sv-scaling-row { overflow: hidden; }


Line 567: Line 536:


.sv-scaling-value {
.sv-scaling-value {
   font-weight: 800;   /* was 900 */
   font-weight: 800;
   font-size: 15px;   /* was 16px */
   font-size: 15px;
   line-height: 1.05;
   line-height: 1.05;
   color: rgba(235,244,255,0.92);
   color: rgba(235,244,255,0.92);
Line 596: Line 565:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   CORE STATS (DESKTOP/TABLET: 6 COL STRIP)
   CORE STATS
  - Slightly de-emphasize top values
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-skill-core { }
.sv-core-row { overflow: hidden; }
.sv-core-row { overflow: hidden; }


Line 626: Line 593:


.sv-core-num {
.sv-core-num {
   font-weight: 800; /* was 900 */
   font-weight: 800;
   font-size: 15px;   /* was 16px */
   font-size: 15px;
   line-height: 1.05;
   line-height: 1.05;
   color: rgba(235,244,255,0.92);
   color: rgba(235,244,255,0.92);
Line 655: Line 622:


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


Line 705: Line 672:


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   KEYWORDS TAB (use Mechanics-style bubbles + 3-column layout)
   KEYWORDS TAB (Mechanics-style bubbles + 3-col)
  - Keywords as large as scaling values
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-tab-pills {
.sv-tab-pills {
   display: grid; /* was flex */
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
   gap: 8px;
Line 722: Line 688:
   gap: 8px;
   gap: 8px;


   padding: 6px 8px; /* slightly tighter */
   padding: 6px 8px;
   border-radius: 12px; /* was 999px */
   border-radius: 12px;
   border: 1px solid rgba(255,255,255,0.050);
   border: 1px solid rgba(255,255,255,0.050);
   background: rgba(255,255,255,0.03);
   background: rgba(255,255,255,0.03);
Line 729: Line 695:
   color: rgba(235,244,255,0.92);
   color: rgba(235,244,255,0.92);
   font-weight: 800;
   font-weight: 800;
   font-size: 15px; /* match scaling value feel */
   font-size: 15px;
   line-height: 1.05;
   line-height: 1.05;


   text-align: center;
   text-align: center;
   white-space: normal; /* allow wrap inside tile */
   white-space: normal;
   word-wrap: break-word;
   word-wrap: break-word;
}
}
Line 739: Line 705:
/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   MECHANICS GRID (value-on-top like Core) + ~20% shorter tiles
   MECHANICS GRID (value-on-top like Core) + ~20% shorter tiles
  - Also used by Keywords grid if/when Lua emits it
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 754: Line 719:
   border: 1px solid rgba(255,255,255,0.050);
   border: 1px solid rgba(255,255,255,0.050);
   background: rgba(255,255,255,0.03);
   background: rgba(255,255,255,0.03);
 
   padding: 6px 8px 6px;
  /* ~20% shorter vertically */
   padding: 6px 8px 6px; /* was 8px 8px 7px */
   min-width: 0;
   min-width: 0;


  /* Allow re-order to value-first */
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
Line 766: Line 728:
}
}


/* Label becomes the bottom line (Core-like) */
.sv-kw-label {
.sv-kw-label {
   order: 2;
   order: 2;
Line 772: Line 733:
   font-weight: 800;
   font-weight: 800;
   font-size: 12px;
   font-size: 12px;
   letter-spacing: 0.06em; /* closer to Core */
   letter-spacing: 0.06em;
   text-transform: uppercase;
   text-transform: uppercase;
   color: rgba(255,255,255,0.62);
   color: rgba(255,255,255,0.62);
Line 782: Line 743:
}
}


/* Value becomes the top line (Core-like) */
.sv-kw-value {
.sv-kw-value {
   order: 1;
   order: 1;


   margin-top: 0;     /* was 6px */
   margin-top: 0;
   font-weight: 800;   /* was 900 */
   font-weight: 800;
   font-size: 15px;   /* match Core/Scaling top values */
   font-size: 15px;
   line-height: 1.05;
   line-height: 1.05;


Line 860: Line 820:
}
}


/* Events stacked layout */
.sv-ref-title-row--stacked {
.sv-ref-title-row--stacked {
   flex-direction: column;
   flex-direction: column;
Line 886: Line 845:
.sv-ref-stat { white-space: nowrap; }
.sv-ref-stat { white-space: nowrap; }


/* Optional hover pop (NO transition/transform/:focus-within) */
.sv-ref-pop { display: none; }
.sv-ref-pop { display: none; }
.sv-ref-card:hover .sv-ref-pop { display: block; }
.sv-ref-card:hover .sv-ref-pop { display: block; }
Line 917: Line 875:
   }
   }


  /* Header icon shrinks slightly for tablet */
   .sv-skill-head {
   .sv-skill-head {
     grid-template-columns: 84px 1fr;
     grid-template-columns: 84px 1fr;
Line 931: Line 888:
   }
   }


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


Line 946: Line 902:
   .sv-tabs-panels { padding: 9px 9px 10px; }
   .sv-tabs-panels { padding: 9px 9px 10px; }


  /* Keep level slider full-width even on tablet */
   .sv-level-range--custom,
   .sv-level-range--custom,
   .sv-level-ticklabels {
   .sv-level-ticklabels {
Line 955: Line 910:
/* Mobile */
/* Mobile */
@media (max-width: 520px) {
@media (max-width: 520px) {
  /* Header: phone proportions */
   .sv-skill-head {
   .sv-skill-head {
     grid-template-columns: 76px 1fr;
     grid-template-columns: 68px 1fr;
     gap: 10px;
     gap: 10px;
   }
   }


   .sv-skill-icon {
   .sv-skill-icon {
     width: 76px;
     width: 68px;
     height: 76px;
     height: 68px;
     border-radius: 12px;
     border-radius: 12px;
   }
   }
  .sv-skill-title { font-size: 18px; }


   .sv-skill-desc {
   .sv-skill-desc {
     font-size: 16px;
     font-size: 15px;
     line-height: 1.28;
     line-height: 1.28;
   }
   }


  /* Title row snaps info button right */
   .sv-skill-title-row {
   .sv-skill-title-row {
     display: grid;
     display: grid;
Line 980: Line 938:
   }
   }


   /* Requirements / Users: stay inline, just shrink */
  /* Meta: tighten vertical space */
  .sv-meta-card {
    min-height: 44px;
    padding: 4px 6px;
  }
 
  .sv-meta-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }
 
  .sv-meta-text {
    font-size: 12px;
    line-height: 1.10;
  }
 
   /* Requirements/Users: compact pills, still side-by-side */
   .sv-reqrow { gap: 8px; }
   .sv-reqrow { gap: 8px; }
  .sv-reqrow > * { max-width: 240px; }


   /* Disclose pop aligns right on mobile */
   .sv-reqrow > * {
    flex: 0 1 120px;
    max-width: 120px;
  }
 
  .sv-reqrow > *:only-child {
    flex: 0 1 240px;
    max-width: 240px;
  }
 
   .sv-disclose-pop { left: auto; right: 0; max-width: 92%; }
   .sv-disclose-pop { left: auto; right: 0; max-width: 92%; }
  /* Level label slightly smaller on phone */
  .sv-level-label { font-size: 13px; }
  /* Slider: keep flush, but keep thumb inside track */
  .sv-level-range--custom { height: 22px; }
  .sv-level-track {
    left: 8px;
    right: 8px;
  }
  .sv-level-thumb {
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
  }


   /* Scaling becomes “stacked-left + tall-right” */
   /* Scaling becomes “stacked-left + tall-right” */
Line 1,039: Line 1,040:
   .sv-ref-ico { width: 52px; height: 52px; border-radius: 13px; }
   .sv-ref-ico { width: 52px; height: 52px; border-radius: 13px; }


  /* Level slider uses full available width on mobile */
   .sv-level-range--custom,
   .sv-level-range--custom,
   .sv-level-ticklabels {
   .sv-level-ticklabels {
Line 1,087: Line 1,087:
/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   PATCH: Remove click highlight on the level scale
   PATCH: Remove click highlight on the level scale
  - kills the focus outline that appears on mouse/touch click
  - prevents text-selection highlight while dragging
--------------------------------------------------------------------------- */
--------------------------------------------------------------------------- */


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