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 952: Line 952:
@media (max-width: 500px) {
@media (max-width: 500px) {


   /* ------------------------------------------------------------------------
   /* ========================================================================
     MOBILE CONTRAST + VISIBILITY (NO change to main card background)
     MOBILE BRIGHTNESS OVERRIDE (Citizen + MobileFrontend friendly)
     - Standardize + brighten EVERY bubble/panel surface
     Goal:
    - Stronger borders/dividers so sections don’t blend together
      - Card background lighter
  ------------------------------------------------------------------------ */
      - ALL bubbles/panels standardized + brighter
      - Dividers/borders more visible
      - Tabs more visible
    ======================================================================== */


   /* One standard mobile surface for ALL “bubble-like” components */
   /* 1) LIGHTEN THE CARD ITSELF (this is the biggest difference vs desktop) */
  .sv-skill-card,
  .sv-gi-card {
    background-color: #162a4e !important;
    background-image:
      radial-gradient(1100px 520px at 50% -20%, rgba(120,190,255,0.34), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05)),
      radial-gradient(900px 360px at 50% 0, rgba(255,255,255,0.10), transparent 58%),
      linear-gradient(180deg, #162a4e, #122444) !important;
 
    border-color: rgba(255,255,255,0.16) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06) !important;
 
    color: rgba(245,250,255,0.95) !important;
  }
 
  /* 2) STANDARD MOBILE SURFACE FOR ALL “BUBBLES” */
   .sv-skill-level,
   .sv-skill-level,
   .sv-scaling-row,
   .sv-scaling-row,
Line 968: Line 987:
   .sv-disclose > summary,
   .sv-disclose > summary,
   .sv-disclose-btn,
   .sv-disclose-btn,
   .sv-meta-icon {
   .sv-meta-icon,
     background: rgba(255,255,255,0.22) !important;
  .sv-meta-card {
     border-color: rgba(255,255,255,0.26) !important;
     background: rgba(255,255,255,0.30) !important;
     border-color: rgba(255,255,255,0.24) !important;
     box-shadow:
     box-shadow:
       inset 0 1px 0 rgba(255,255,255,0.14),
       inset 0 1px 0 rgba(255,255,255,0.14),
       0 10px 18px rgba(0,0,0,0.14) !important;
       0 10px 18px rgba(0,0,0,0.16) !important;
   }
   }


   /* Meta strip containers read as segmented boxes */
   /* 3) DIVIDERS / GRIDLINES (make separation obvious) */
   .sv-skill-meta,
   .sv-skill-meta,
  .sv-meta-card {
    border-color: rgba(255,255,255,0.22) !important;
  }
  /* Stronger separators inside segmented rows */
   .sv-scaling-col + .sv-scaling-col,
   .sv-scaling-col + .sv-scaling-col,
   .sv-core-cell + .sv-core-cell,
   .sv-core-cell + .sv-core-cell,
   .sv-tabs-list,
   .sv-tabs-list,
   .sv-tab + .sv-tab,
   .sv-tab + .sv-tab,
  .sv-meta-card,
   .sv-core-cell,
   .sv-core-cell,
   .sv-scaling-col,
   .sv-scaling-col {
  .sv-meta-card {
     border-color: rgba(255,255,255,0.18) !important;
     border-color: rgba(255,255,255,0.20) !important;
   }
   }


   /* Tabs: more visible by default + stronger selected state */
   /* 4) TABS: more “button” by default + stronger selected */
   .sv-tab {
   .sv-tab {
     background: rgba(255,255,255,0.22) !important;
     background: rgba(255,255,255,0.28) !important;
     color: rgba(255,255,255,0.94) !important;
     color: rgba(250,252,255,0.95) !important;
   }
   }


   .sv-tab[aria-selected="true"] {
   .sv-tab[aria-selected="true"] {
     background: rgba(255,255,255,0.30) !important;
     background: rgba(255,255,255,0.38) !important;
     color: rgba(248,252,255,0.99) !important;
     color: rgba(255,255,255,0.99) !important;
     box-shadow:
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.16) !important;
      inset 0 1px 0 rgba(255,255,255,0.16),
      0 10px 18px rgba(0,0,0,0.14) !important;
   }
   }


   /* Icons inside cards: lift a touch so they don’t sink */
   /* 5) LABELS: a touch brighter so the “second line” reads */
   .sv-ref-ico,
   .sv-scaling-label,
   .sv-meta-icon {
   .sv-core-label,
    background: rgba(255,255,255,0.24) !important;
  .sv-kw-label,
     border-color: rgba(255,255,255,0.26) !important;
  .sv-tip-pop-title,
  .sv-disclose-pop-title {
     color: rgba(255,255,255,0.78) !important;
   }
   }


   /* Level slider: keep shell flush, but make TRACK bright and readable */
   /* 6) LEVEL SLIDER: brighten the track and ticks (your screenshot shows this too dark) */
   .sv-level-range--custom {
   .sv-level-range--custom {
     background: transparent !important;
     background: transparent !important;
Line 1,021: Line 1,036:


   .sv-level-track {
   .sv-level-track {
     border: 1px solid rgba(255,255,255,0.26) !important;
     border: 1px solid rgba(255,255,255,0.22) !important;
     background:
     background:
       linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.22)),
       linear-gradient(180deg, rgba(255,255,255,0.38), rgba(255,255,255,0.26)),
       repeating-linear-gradient(
       repeating-linear-gradient(
         to right,
         to right,
         transparent 0,
         transparent 0,
         transparent 10.8%,
         transparent 10.8%,
         rgba(255,255,255,0.62) 10.8%,
         rgba(255,255,255,0.68) 10.8%,
         rgba(255,255,255,0.62) 11.11%
         rgba(255,255,255,0.68) 11.11%
       ) !important;
       ) !important;
   }
   }


  /* ------------------------------------------------------------------------
   .sv-level-fill {
    MOBILE LAYOUT (your existing mobile adjustments)
     background: linear-gradient(90deg, rgba(190,235,255,0.55), rgba(255,255,255,0.22)) !important;
  ------------------------------------------------------------------------ */
 
  /* Header: phone proportions */
   .sv-skill-head {
     grid-template-columns: 68px 1fr;
    gap: 10px;
  }
 
  .sv-skill-icon {
    width: 68px;
    height: 68px;
    border-radius: 12px;
   }
   }


  /* 7) Keep your existing mobile layout rules (unchanged structure) */
  .sv-skill-head { grid-template-columns: 68px 1fr; gap: 10px; }
  .sv-skill-icon { width: 68px; height: 68px; border-radius: 12px; }
   .sv-skill-title { font-size: 18px; }
   .sv-skill-title { font-size: 18px; }
 
   .sv-skill-desc { font-size: 15px; line-height: 1.28; }
   .sv-skill-desc {
    font-size: 15px;
    line-height: 1.28;
  }


   .sv-skill-title-row {
   .sv-skill-title-row {
Line 1,064: Line 1,066:
   }
   }


  /* Meta: tighten vertical space */
   .sv-meta-card { min-height: 44px; padding: 4px 6px; }
   .sv-meta-card {
   .sv-meta-icon { width: 28px; height: 28px; border-radius: 9px; }
    min-height: 44px;
  .sv-meta-text { font-size: 12px; line-height: 1.10; }
    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 > * { flex: 0 1 120px; max-width: 120px; }
   .sv-reqrow > * {
   .sv-reqrow > *:only-child { flex: 0 1 240px; max-width: 240px; }
    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; }
   .sv-level-label { font-size: 13px; }
  /* Slider: keep flush, but keep thumb inside track */
   .sv-level-range--custom { height: 22px; }
   .sv-level-range--custom { height: 22px; }


   .sv-level-track {
   .sv-level-track { left: 8px; right: 8px; }
    left: 8px;
    right: 8px;
  }


   .sv-level-thumb {
   .sv-level-thumb {
Line 1,114: Line 1,088:
   }
   }


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


Line 1,120: Line 1,093:
     grid-column: 1;
     grid-column: 1;
     grid-row: 1;
     grid-row: 1;
     border-right: 1px solid rgba(255,255,255,0.20);
     border-right: 1px solid rgba(255,255,255,0.18);
   }
   }


Line 1,126: Line 1,099:
     grid-column: 1;
     grid-column: 1;
     grid-row: 2;
     grid-row: 2;
     border-top: 1px solid rgba(255,255,255,0.20);
     border-top: 1px solid rgba(255,255,255,0.18);
     border-right: 1px solid rgba(255,255,255,0.20);
     border-right: 1px solid rgba(255,255,255,0.18);
   }
   }


Line 1,138: Line 1,111:
   }
   }


  /* Core becomes 3x2 */
   .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.18); }
   .sv-core-cell { border-left: 0; border-top: 1px solid rgba(255,255,255,0.20); }
   .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.20); }
   .sv-core-cell:nth-child(3n+3) { border-left: 1px solid rgba(255,255,255,0.18); }


  /* Tabs become 2x2 segmented */
   .sv-tabs-list { grid-template-columns: repeat(2, 1fr); }
   .sv-tabs-list { grid-template-columns: repeat(2, 1fr); }
   .sv-tab { padding: 9px 6px; }
   .sv-tab { padding: 9px 6px; }
   .sv-tab + .sv-tab { border-left: 1px solid rgba(255,255,255,0.20); }
   .sv-tab + .sv-tab { border-left: 1px solid rgba(255,255,255,0.18); }
   .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.20); }
   .sv-tab:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.18); }


  /* Mechanics grid becomes 2-col */
   .sv-kw-grid { grid-template-columns: repeat(2, 1fr); }
   .sv-kw-grid { grid-template-columns: repeat(2, 1fr); }
  /* 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; }


  /* 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; }
Line 1,167: Line 1,132:


   .sv-level-range--custom,
   .sv-level-range--custom,
   .sv-level-ticklabels {
   .sv-level-ticklabels { max-width: 100%; }
    max-width: 100%;
  }
}
}


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