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 320: Line 320:
/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   REQUIREMENTS / USERS (COMPACT, CENTERED, SHRINK-TO-FIT)
   REQUIREMENTS / USERS (COMPACT, CENTERED, SHRINK-TO-FIT)
  - Desktop: narrow pills
  - Mobile: still side-by-side, but even tighter
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


Line 437: Line 435:
   display: flex;
   display: flex;
   justify-content: center;
   justify-content: center;
}
/* Slider + Optional “additional controls” support:
  - supports a native <input type="range"> if present
  - supports optional +/- buttons if Lua/JS emits them
  - keeps the custom track/thumb version working */
.sv-level-controls {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sv-level-step {
  width: 34px;
  height: 26px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.060);
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  color: rgba(235,244,255,0.92);
  font-weight: 900;
  font-size: 14px;
  line-height: 26px;
  text-align: center;
  cursor: pointer;
}
.sv-level-step:hover { background: rgba(255,255,255,0.09); }
.sv-level-range {
  width: 100%;
  max-width: 560px;
}
.sv-level-range input[type="range"] {
  width: 100%;
  margin: 0;
  background: transparent;
}
}


Line 850: Line 888:
/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   RESPONSIVE (Project Standard)
   RESPONSIVE (Project Standard)
   Desktop: > 720
   Desktop: > 850
   Tablet:  720–521
   Tablet:  849–501
   Mobile:  <= 520
   Mobile:  <= 500
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


/* Tablet */
/* Tablet */
@media (max-width: 720px) {
@media (max-width: 849px) {
   .sv-gi-card,
   .sv-gi-card,
   .sv-skill-card {
   .sv-skill-card {
Line 875: Line 913:
   }
   }


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


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


Line 902: Line 942:
   .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 909: Line 950:


/* Mobile */
/* Mobile */
@media (max-width: 520px) {
@media (max-width: 500px) {
 
  /* Mobile contrast bump: lighter card, darker/stronger panels + borders */
  .sv-gi-card,
  .sv-skill-card {
    border: 1px solid rgba(255,255,255,0.14);
    background-color: #142448;
    background-image:
      radial-gradient(1000px 480px at 50% -25%, rgba(96,165,250,0.28), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)),
      radial-gradient(800px 320px at 50% 0, rgba(255,255,255,0.08), transparent 58%),
      linear-gradient(180deg, #142448, #0f1c39);
    box-shadow: 0 18px 42px rgba(0,0,0,0.60), inset 0 1px 0 rgba(255,255,255,0.05);
  }
 
  /* Make “bubbles” stand out more */
  .sv-skill-level,
  .sv-scaling-row,
  .sv-core-row,
  .sv-tabs {
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.22);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.04),
      0 10px 20px rgba(0,0,0,0.22);
  }
 
  /* Strengthen internal dividers */
  .sv-scaling-col + .sv-scaling-col,
  .sv-core-cell + .sv-core-cell,
  .sv-tabs-list,
  .sv-skill-meta,
  .sv-meta-card,
  .sv-tab + .sv-tab {
    border-color: rgba(255,255,255,0.10);
  }


   /* Header: phone proportions */
   /* Header: phone proportions */
Line 928: Line 1,004:
     font-size: 15px;
     font-size: 15px;
     line-height: 1.28;
     line-height: 1.28;
    color: rgba(225,236,255,0.88);
   }
   }


  /* Title row snaps info button right */
   .sv-skill-title-row {
   .sv-skill-title-row {
     display: grid;
     display: grid;
Line 968: Line 1,046:
   }
   }


  /* Make req/users buttons read stronger on mobile */
  .sv-disclose > summary,
  .sv-disclose-btn {
    border: 1px solid rgba(255,255,255,0.10);
    background: linear-gradient(180deg, rgba(0,0,0,0.20), rgba(0,0,0,0.08));
  }
  /* Disclose pop aligns right on mobile */
   .sv-disclose-pop { left: auto; right: 0; max-width: 92%; }
   .sv-disclose-pop { left: auto; right: 0; max-width: 92%; }


Line 979: Line 1,065:
     left: 8px;
     left: 8px;
     right: 8px;
     right: 8px;
    border: 1px solid rgba(255,255,255,0.10);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05)),
      repeating-linear-gradient(
        to right,
        transparent 0,
        transparent 10.8%,
        rgba(255,255,255,0.34) 10.8%,
        rgba(255,255,255,0.34) 11.11%
      );
   }
   }


Line 986: Line 1,082:
     margin-top: -8px;
     margin-top: -8px;
     margin-left: -8px;
     margin-left: -8px;
  }
  /* Optional +/- buttons: keep them compact and high contrast */
  .sv-level-step {
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.20);
   }
   }


Line 994: Line 1,096:
     grid-column: 1;
     grid-column: 1;
     grid-row: 1;
     grid-row: 1;
     border-right: 1px solid rgba(255,255,255,0.050);
     border-right: 1px solid rgba(255,255,255,0.10);
   }
   }


Line 1,000: Line 1,102:
     grid-column: 1;
     grid-column: 1;
     grid-row: 2;
     grid-row: 2;
     border-top: 1px solid rgba(255,255,255,0.050);
     border-top: 1px solid rgba(255,255,255,0.10);
     border-right: 1px solid rgba(255,255,255,0.050);
     border-right: 1px solid rgba(255,255,255,0.10);
   }
   }


Line 1,015: Line 1,117:
   .sv-core-grid { grid-template-columns: repeat(3, 1fr); }
   .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 { border-left: 0; border-top: 1px solid rgba(255,255,255,0.10); }
   .sv-core-cell:nth-child(-n+3) { border-top: 0; }
   .sv-core-cell:nth-child(-n+3) { border-top: 0; }
   .sv-core-cell:nth-child(3n+2),
   .sv-core-cell:nth-child(3n+2),
   .sv-core-cell:nth-child(3n+3) { border-left: 1px solid rgba(255,255,255,0.050); }
   .sv-core-cell:nth-child(3n+3) { border-left: 1px solid rgba(255,255,255,0.10); }


   /* Tabs become 2x2 segmented */
   /* Tabs become 2x2 segmented */
Line 1,024: Line 1,126:


   .sv-tab { padding: 9px 6px; }
   .sv-tab { padding: 9px 6px; }
   .sv-tab + .sv-tab { border-left: 1px solid rgba(255,255,255,0.050); }
   .sv-tab + .sv-tab { border-left: 1px solid rgba(255,255,255,0.10); }
   .sv-tab:nth-child(2n+1) { border-left: 0; }
   .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); }
   .sv-tab:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.10); }
 
  /* Selected tab: stronger contrast on mobile */
  .sv-tab[aria-selected="true"] {
    background:
      radial-gradient(600px 220px at 50% 0, rgba(96,165,250,0.18), transparent 60%),
      linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.06));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  }


   /* Mechanics grid becomes 2-col */
   /* Mechanics grid becomes 2-col */
Line 1,033: Line 1,143:
   /* Keywords grid follows mechanics on mobile */
   /* Keywords grid follows mechanics on mobile */
   .sv-tab-pills { grid-template-columns: repeat(2, 1fr); }
   .sv-tab-pills { grid-template-columns: repeat(2, 1fr); }
   .sv-pill { font-size: 14px; }
   .sv-pill {
    font-size: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.18);
  }
  .sv-kw-cell {
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.18);
  }


   /* Effects/Events become 1-col */
   /* Effects/Events become 1-col */
   .sv-ref-grid { grid-template-columns: 1fr; }
   .sv-ref-grid { grid-template-columns: 1fr; }
   .sv-ref-card { grid-template-columns: 52px 1fr; }
   .sv-ref-card {
    grid-template-columns: 52px 1fr;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.18);
  }
   .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,052: Line 1,175:
.sv-skill-card .sv-skill-level,
.sv-skill-card .sv-skill-level,
.sv-skill-card .sv-level-ui,
.sv-skill-card .sv-level-ui,
.sv-skill-card .sv-level-controls,
.sv-skill-card .sv-level-range,
.sv-skill-card .sv-level-slider,
.sv-skill-card .sv-level-slider,
.sv-skill-card .sv-level-range--custom,
.sv-skill-card .sv-level-range--custom,
Retrieved from "https://spiritvale.info/wiki/Module:GameInfo/styles.css"