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 953: Line 953:


   /* --------------------------------------------------------------------------
   /* --------------------------------------------------------------------------
     MOBILE THEME (REVERSED CONTRAST + BRIGHTER OVERALL)
     MOBILE THEME v2 (MUCH BRIGHTER)
     - Card/background: darker (but not crushed)
     - Card background: +50%+ brightness
     - Bubbles/panels: lighter (more separation)
     - Bubbles/panels: even lighter
     - Tabs: stronger visibility + clearer selected state
    - Dividers: more visible
     - Tabs: stronger contrast + clearer selected state
   -------------------------------------------------------------------------- */
   -------------------------------------------------------------------------- */


   .sv-gi-card,
   .sv-gi-card,
   .sv-skill-card {
   .sv-skill-card {
    /* darker than bubbles, but overall brighter than prior version */
     border: 1px solid rgba(255,255,255,0.22);
     border: 1px solid rgba(255,255,255,0.16);


     background-color: #0e1a36;
    /* Much brighter overall than prior */
     background-color: #1a2a54;
     background-image:
     background-image:
       radial-gradient(980px 460px at 50% -22%, rgba(125,190,255,0.26), transparent 60%),
       radial-gradient(980px 460px at 50% -22%, rgba(150,210,255,0.34), transparent 62%),
       linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
       linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
       radial-gradient(760px 300px at 50% 0, rgba(255,255,255,0.06), transparent 62%),
       radial-gradient(760px 300px at 50% 0, rgba(255,255,255,0.09), transparent 64%),
       linear-gradient(180deg, #0e1a36, #0a132a);
       linear-gradient(180deg, #1a2a54, #121f43);


     box-shadow: 0 18px 42px rgba(0,0,0,0.60), inset 0 1px 0 rgba(255,255,255,0.06);
     box-shadow: 0 18px 42px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.08);


    /* brighten text on mobile */
     color: rgba(248,252,255,0.96);
     color: rgba(240,247,255,0.94);
   }
   }


   /* Lighter “bubbles” (panels) */
   /* Shared “panel surface” — MUCH lighter bubbles */
   .sv-skill-level,
   .sv-skill-level,
   .sv-scaling-row,
   .sv-scaling-row,
   .sv-core-row,
   .sv-core-row,
   .sv-tabs {
   .sv-tabs {
     border: 1px solid rgba(255,255,255,0.14);
     border: 1px solid rgba(255,255,255,0.22);
     background: rgba(255,255,255,0.08);
     background: rgba(255,255,255,0.14);
     box-shadow:
     box-shadow:
       inset 0 1px 0 rgba(255,255,255,0.06),
       inset 0 1px 0 rgba(255,255,255,0.10),
       0 10px 20px rgba(0,0,0,0.18);
       0 12px 22px rgba(0,0,0,0.16);
   }
   }


   /* Stronger internal dividers */
   /* Brighter internal dividers (separation) */
   .sv-scaling-col + .sv-scaling-col,
   .sv-scaling-col + .sv-scaling-col,
   .sv-core-cell + .sv-core-cell,
   .sv-core-cell + .sv-core-cell,
Line 995: Line 995:
   .sv-skill-meta,
   .sv-skill-meta,
   .sv-meta-card,
   .sv-meta-card,
   .sv-tab + .sv-tab {
   .sv-tab + .sv-tab,
     border-color: rgba(255,255,255,0.12);
  .sv-core-cell,
  .sv-scaling-col {
     border-color: rgba(255,255,255,0.18);
   }
   }


Line 1,009: Line 1,011:
     height: 68px;
     height: 68px;
     border-radius: 12px;
     border-radius: 12px;
 
     border: 1px solid rgba(255,255,255,0.18);
    /* lift icon tile a bit too */
     background: rgba(255,255,255,0.14);
     border: 1px solid rgba(255,255,255,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
     background: rgba(255,255,255,0.08);
   }
   }


Line 1,020: Line 1,021:
     font-size: 15px;
     font-size: 15px;
     line-height: 1.28;
     line-height: 1.28;
     color: rgba(230,241,255,0.90);
     color: rgba(242,248,255,0.94);
   }
   }


  /* Title row snaps info button right */
   .sv-skill-title-row {
   .sv-skill-title-row {
     display: grid;
     display: grid;
Line 1,042: Line 1,042:
     height: 28px;
     height: 28px;
     border-radius: 9px;
     border-radius: 9px;
 
     border: 1px solid rgba(255,255,255,0.18);
     border: 1px solid rgba(255,255,255,0.10);
     background: rgba(255,255,255,0.14);
     background: rgba(255,255,255,0.08);
   }
   }


Line 1,050: Line 1,049:
     font-size: 12px;
     font-size: 12px;
     line-height: 1.10;
     line-height: 1.10;
     color: rgba(240,247,255,0.94);
     color: rgba(248,252,255,0.96);
   }
   }


Line 1,066: Line 1,065:
   }
   }


  /* Req/Users buttons: lighter pill surface */
   .sv-disclose > summary,
   .sv-disclose > summary,
   .sv-disclose-btn {
   .sv-disclose-btn {
     border: 1px solid rgba(255,255,255,0.14);
     border: 1px solid rgba(255,255,255,0.22);
     background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
     background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.12));
     color: rgba(245,250,255,0.96);
     color: rgba(248,252,255,0.97);
   }
   }


   .sv-disclose-count { color: rgba(255,255,255,0.78); }
   .sv-disclose-count { color: rgba(255,255,255,0.86); }


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


   /* Level label slightly smaller on phone */
   /* Level label */
   .sv-level-label {
   .sv-level-label {
     font-size: 13px;
     font-size: 13px;
     color: rgba(245,250,255,0.96);
     color: rgba(248,252,255,0.97);
   }
   }


   /* Slider: brighter track + clearer ticks */
   /* Slider: brighter track/ticks */
   .sv-level-range--custom { height: 22px; }
   .sv-level-range--custom { height: 22px; }


Line 1,091: Line 1,088:
     left: 8px;
     left: 8px;
     right: 8px;
     right: 8px;
     border: 1px solid rgba(255,255,255,0.14);
     border: 1px solid rgba(255,255,255,0.22);
     background:
     background:
       linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.10)),
       linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.14)),
       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.44) 10.8%,
         rgba(255,255,255,0.58) 10.8%,
         rgba(255,255,255,0.44) 11.11%
         rgba(255,255,255,0.58) 11.11%
       );
       );
   }
   }


   .sv-level-fill {
   .sv-level-fill {
     background: linear-gradient(90deg, rgba(170,220,255,0.55), rgba(255,255,255,0.22));
     background: linear-gradient(90deg, rgba(170,220,255,0.70), rgba(255,255,255,0.28));
   }
   }


Line 1,112: Line 1,109:
     margin-top: -8px;
     margin-top: -8px;
     margin-left: -8px;
     margin-left: -8px;
     background: rgba(255,255,255,0.96);
     background: rgba(255,255,255,0.98);
     border: 1px solid rgba(0,0,0,0.28);
     border: 1px solid rgba(0,0,0,0.22);
     box-shadow: 0 7px 16px rgba(0,0,0,0.35);
     box-shadow: 0 7px 16px rgba(0,0,0,0.30);
   }
   }


   /* Optional +/- buttons: lighter surface */
   /* Optional +/- buttons (if present) */
   .sv-level-step {
   .sv-level-step {
     border: 1px solid rgba(255,255,255,0.14);
     border: 1px solid rgba(255,255,255,0.22);
     background: rgba(255,255,255,0.10);
     background: rgba(255,255,255,0.18);
     color: rgba(245,250,255,0.96);
     color: rgba(248,252,255,0.97);
   }
   }
   .sv-level-step:hover { background: rgba(255,255,255,0.14); }
   .sv-level-step:hover { background: rgba(255,255,255,0.22); }


  /* Tick labels brighter */
   .sv-level-ticklabels {
   .sv-level-ticklabels {
     color: rgba(255,255,255,0.78);
     color: rgba(255,255,255,0.86);
   }
   }


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


Line 1,136: Line 1,132:
     grid-column: 1;
     grid-column: 1;
     grid-row: 1;
     grid-row: 1;
     border-right: 1px solid rgba(255,255,255,0.12);
     border-right: 1px solid rgba(255,255,255,0.18);
   }
   }


Line 1,142: Line 1,138:
     grid-column: 1;
     grid-column: 1;
     grid-row: 2;
     grid-row: 2;
     border-top: 1px solid rgba(255,255,255,0.12);
     border-top: 1px solid rgba(255,255,255,0.18);
     border-right: 1px solid rgba(255,255,255,0.12);
     border-right: 1px solid rgba(255,255,255,0.18);
   }
   }


Line 1,154: Line 1,150:
   }
   }


   .sv-scaling-value { color: rgba(245,250,255,0.96); }
   .sv-scaling-value { color: rgba(248,252,255,0.97); }
   .sv-scaling-item  { color: rgba(235,244,255,0.90); }
   .sv-scaling-item  { color: rgba(242,248,255,0.94); }
   .sv-scaling-label { color: rgba(255,255,255,0.70); }
   .sv-scaling-label { color: rgba(255,255,255,0.80); }


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


   .sv-core-num  { color: rgba(245,250,255,0.96); }
   .sv-core-num  { color: rgba(248,252,255,0.97); }
   .sv-core-unit { color: rgba(255,255,255,0.82); }
   .sv-core-unit { color: rgba(255,255,255,0.90); }
   .sv-core-label{ color: rgba(255,255,255,0.70); }
   .sv-core-label{ color: rgba(255,255,255,0.82); }


   /* Tabs become 2x2 segmented */
   /* Tabs: much more visible base + selected state */
   .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 {
   .sv-tab {
     /* more visible tabs in general */
     padding: 9px 6px;
     color: rgba(255,255,255,0.86);
     color: rgba(255,255,255,0.92);
     background: rgba(255,255,255,0.06);
     background: rgba(255,255,255,0.14);
   }
   }


   .sv-tab + .sv-tab { border-left: 1px solid rgba(255,255,255,0.12); }
   .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.12); }
   .sv-tab:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.18); }


  /* Selected tab: unmistakable */
   .sv-tab[aria-selected="true"] {
   .sv-tab[aria-selected="true"] {
     color: rgba(245,250,255,0.98);
     color: rgba(248,252,255,0.99);
     background:
     background:
       radial-gradient(620px 230px at 50% 0, rgba(125,190,255,0.26), transparent 62%),
       radial-gradient(620px 230px at 50% 0, rgba(170,220,255,0.34), transparent 66%),
       linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08));
       linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.16));
     box-shadow:
     box-shadow:
       inset 0 1px 0 rgba(255,255,255,0.08),
       inset 0 1px 0 rgba(255,255,255,0.12),
       0 8px 18px rgba(0,0,0,0.18);
       0 10px 22px rgba(0,0,0,0.16);
   }
   }


   /* Mechanics grid becomes 2-col */
   /* Mechanics */
   .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-kw-cell {
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.14);
  }
 
  .sv-kw-value { color: rgba(248,252,255,0.97); }
  .sv-kw-label { color: rgba(255,255,255,0.82); }
 
   /* Keywords */
   .sv-tab-pills { grid-template-columns: repeat(2, 1fr); }
   .sv-tab-pills { grid-template-columns: repeat(2, 1fr); }


   .sv-pill {
   .sv-pill {
     font-size: 14px;
     font-size: 14px;
     border: 1px solid rgba(255,255,255,0.14);
     border: 1px solid rgba(255,255,255,0.22);
     background: rgba(255,255,255,0.10);
     background: rgba(255,255,255,0.16);
     color: rgba(245,250,255,0.96);
     color: rgba(248,252,255,0.97);
   }
   }


  .sv-kw-cell {
   /* Effects/Events */
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.10);
  }
 
  .sv-kw-value { color: rgba(245,250,255,0.96); }
  .sv-kw-label { color: rgba(255,255,255,0.70); }
 
   /* Effects/Events become 1-col */
   .sv-ref-grid { grid-template-columns: 1fr; }
   .sv-ref-grid { grid-template-columns: 1fr; }


   .sv-ref-card {
   .sv-ref-card {
     grid-template-columns: 52px 1fr;
     grid-template-columns: 52px 1fr;
     border: 1px solid rgba(255,255,255,0.14);
     border: 1px solid rgba(255,255,255,0.22);
     background: rgba(255,255,255,0.10);
     background: rgba(255,255,255,0.14);
   }
   }


Line 1,230: Line 1,223:
     height: 52px;
     height: 52px;
     border-radius: 13px;
     border-radius: 13px;
     border: 1px solid rgba(255,255,255,0.12);
     border: 1px solid rgba(255,255,255,0.18);
     background: rgba(255,255,255,0.10);
     background: rgba(255,255,255,0.16);
   }
   }


   /* Level slider uses full available width on mobile */
   /* Level slider width */
   .sv-level-range--custom,
   .sv-level-range--custom,
   .sv-level-ticklabels {
   .sv-level-ticklabels {
Line 1,240: Line 1,233:
   }
   }
}
}
/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   PATCH: Level selector final lockdown (wins even if markup uses spans/inline)
   PATCH: Level selector final lockdown (wins even if markup uses spans/inline)
Retrieved from "https://spiritvale.info/wiki/Module:GameInfo/styles.css"