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 45: Line 45:
/* Predictable sizing */
/* Predictable sizing */
.sv-gi-card,
.sv-gi-card,
.sv-gi-card * ,
.sv-gi-card *,
.sv-skill-card,
.sv-skill-card,
.sv-skill-card * {
.sv-skill-card * {
Line 72: Line 72:


/* IMPORTANT: Phase 4.1 hiding contract */
/* IMPORTANT: Phase 4.1 hiding contract */
.sv-hidden {
.sv-hidden { display: none !important; }
   display: none !important;
[hidden]   { display: none !important; }
}
 
/* Most MW skins also hide [hidden], but make it explicit */
/* Remove default details marker (safe even if no <details> used) */
[hidden] {
.sv-gi-card summary,
   display: none !important;
.sv-skill-card summary {
   list-style: none;
}
}


Line 205: Line 206:
   cursor: pointer;
   cursor: pointer;
}
}
.sv-tip-btn:hover { background: rgba(255,255,255,0.06); }


.sv-tip-btn:hover {
/* Optional “active” feel */
   background: rgba(255,255,255,0.06);
.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);
}
}


Line 227: Line 232:
}
}


/* IMPORTANT: do NOT use display:none here; JS controls visibility via .sv-hidden + [hidden] */
.sv-tip-pop {
.sv-tip-pop {
  display: block;
   position: absolute;
   position: absolute;
   z-index: 50;
   z-index: 50;
Line 256: Line 263:
   background: rgba(255,255,255,0.03);
   background: rgba(255,255,255,0.03);


   cursor: pointer; /* JS: click head to close */
   cursor: pointer;
}
}


Line 334: Line 341:
}
}


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


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
Line 370: Line 375:
   color: rgba(235,244,255,0.92);
   color: rgba(235,244,255,0.92);
}
}
 
.sv-disclose-btn:hover { background: rgba(255,255,255,0.05); }
.sv-disclose-btn:hover {
  background: rgba(255,255,255,0.05);
}


.sv-disclose-label {
.sv-disclose-label {
Line 388: Line 390:
}
}


/* IMPORTANT: do NOT use display:none here; JS controls visibility via .sv-hidden + [hidden] */
.sv-disclose-pop {
.sv-disclose-pop {
  display: block;
   position: absolute;
   position: absolute;
   z-index: 50;
   z-index: 50;
Line 417: Line 421:
   background: rgba(255,255,255,0.03);
   background: rgba(255,255,255,0.03);


   cursor: pointer; /* JS: click head to close */
   cursor: pointer;
}
}


Line 487: Line 491:
}
}


.sv-level-slider {
.sv-level-slider { position: relative; }
  position: relative;
}


.sv-level-range {
.sv-level-range {
Line 495: Line 497:
   margin: 0;
   margin: 0;
}
}
/* Custom slider (no <input>) */
.sv-level-range--custom {
  display: block;
  position: relative;
  width: 100%;
  height: 28px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.12);
}
.sv-level-track {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 8px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  overflow: hidden;
}
.sv-level-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(170,220,255,0.55);
}
.sv-level-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(245,250,255,0.95);
  box-shadow: 0 10px 18px rgba(0,0,0,0.35);
}


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
Line 548: Line 502:
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-skill-scaling {
.sv-skill-scaling { margin: 10px 0 10px; }
  margin: 10px 0 10px;
}


.sv-scaling-row {
.sv-scaling-row {
Line 566: Line 518:
}
}


.sv-scaling-col--scaling {
.sv-scaling-col--scaling { grid-column: 1 / -1; }
  grid-column: 1 / -1;
}


.sv-scaling-value {
.sv-scaling-value {
Line 607: Line 557:
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-skill-core {
.sv-skill-core { margin: 10px 0 10px; }
  margin: 10px 0 10px;
}


.sv-core-row {
.sv-core-row {
Line 662: Line 610:
   color: rgba(210,224,245,0.65);
   color: rgba(210,224,245,0.65);
}
}
.sv-core-label--tight {
.sv-core-label--tight { letter-spacing: 0.12px; }
  letter-spacing: 0.12px;
}


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
Line 670: Line 616:
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


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


.sv-tabs-list {
.sv-tabs-list {
Line 694: Line 638:
}
}


.sv-tab:hover {
.sv-tab:hover { background: rgba(255,255,255,0.05); }
  background: rgba(255,255,255,0.05);
}


.sv-tab[aria-selected="true"] {
.sv-tab[aria-selected="true"] {
Line 770: Line 712:


   min-width: 0;
   min-width: 0;
}
.sv-ref-card--link:hover {
  background: rgba(0,0,0,0.16);
  text-decoration: none;
}
}


Line 805: Line 742:
   line-height: 1.15;
   line-height: 1.15;
   color: rgba(245,250,255,0.98);
   color: rgba(245,250,255,0.98);
  word-wrap: break-word;
}
.sv-ref-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.sv-ref-title-row--stacked {
  flex-direction: column;
  align-items: flex-start;
}
.sv-ref-inline {
  font-weight: 900;
  font-size: 14px;
  color: rgba(210,224,245,0.80);
  text-align: right;
   word-wrap: break-word;
   word-wrap: break-word;
}
}
Line 878: Line 795:
   }
   }


   .sv-skill-title {
   .sv-skill-title { font-size: 20px; }
    font-size: 20px;
  }


   .sv-skill-meta {
   .sv-skill-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


   .sv-core-grid {
   .sv-core-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


   .sv-ref-grid {
   .sv-ref-grid { grid-template-columns: 1fr; }
    grid-template-columns: 1fr;
  }


   .sv-tip-pop,
   .sv-tip-pop,
Line 905: Line 814:
/* Mobile */
/* Mobile */
@media (max-width: 520px) {
@media (max-width: 520px) {
   .sv-skill-head {
   .sv-skill-head { gap: 10px; }
    gap: 10px;
  }


   .sv-skill-icon {
   .sv-skill-icon {
Line 915: Line 822:
   }
   }


   .sv-skill-title {
   .sv-skill-title { font-size: 18px; }
    font-size: 18px;
  }


   .sv-skill-desc {
   .sv-skill-desc { font-size: 13px; }
    font-size: 13px;
  }


   .sv-scaling-grid {
   .sv-scaling-grid { grid-template-columns: 1fr; }
    grid-template-columns: 1fr;
  }


   .sv-kw-grid {
   .sv-kw-grid { grid-template-columns: 1fr; }
    grid-template-columns: 1fr;
  }


   .sv-disclose {
   .sv-disclose {
Retrieved from "https://spiritvale.info/wiki/Module:GameInfo/styles.css"