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 bump: lighter card, darker/stronger panels + borders */
   /* --------------------------------------------------------------------------
    MOBILE THEME (REVERSED CONTRAST + BRIGHTER OVERALL)
    - Card/background: darker (but not crushed)
    - Bubbles/panels: lighter (more separation)
    - Tabs: stronger visibility + clearer selected state
  -------------------------------------------------------------------------- */
 
   .sv-gi-card,
   .sv-gi-card,
   .sv-skill-card {
   .sv-skill-card {
     border: 1px solid rgba(255,255,255,0.14);
    /* darker than bubbles, but overall brighter than prior version */
     background-color: #142448;
     border: 1px solid rgba(255,255,255,0.16);
 
     background-color: #0e1a36;
     background-image:
     background-image:
       radial-gradient(1000px 480px at 50% -25%, rgba(96,165,250,0.28), transparent 58%),
       radial-gradient(980px 460px at 50% -22%, rgba(125,190,255,0.26), transparent 60%),
       linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)),
       linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
       radial-gradient(800px 320px at 50% 0, rgba(255,255,255,0.08), transparent 58%),
       radial-gradient(760px 300px at 50% 0, rgba(255,255,255,0.06), transparent 62%),
       linear-gradient(180deg, #142448, #0f1c39);
       linear-gradient(180deg, #0e1a36, #0a132a);
     box-shadow: 0 18px 42px rgba(0,0,0,0.60), inset 0 1px 0 rgba(255,255,255,0.05);
 
     box-shadow: 0 18px 42px rgba(0,0,0,0.60), inset 0 1px 0 rgba(255,255,255,0.06);
 
    /* brighten text on mobile */
    color: rgba(240,247,255,0.94);
   }
   }


   /* Make “bubbles” stand out more */
   /* Lighter “bubbles” (panels) */
   .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.12);
     border: 1px solid rgba(255,255,255,0.14);
     background: rgba(0,0,0,0.22);
     background: rgba(255,255,255,0.08);
     box-shadow:
     box-shadow:
       inset 0 1px 0 rgba(255,255,255,0.04),
       inset 0 1px 0 rgba(255,255,255,0.06),
       0 10px 20px rgba(0,0,0,0.22);
       0 10px 20px rgba(0,0,0,0.18);
   }
   }


   /* Strengthen internal dividers */
   /* Stronger internal dividers */
   .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 984: Line 996:
   .sv-meta-card,
   .sv-meta-card,
   .sv-tab + .sv-tab {
   .sv-tab + .sv-tab {
     border-color: rgba(255,255,255,0.10);
     border-color: rgba(255,255,255,0.12);
   }
   }


Line 997: Line 1,009:
     height: 68px;
     height: 68px;
     border-radius: 12px;
     border-radius: 12px;
    /* lift icon tile a bit too */
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.08);
   }
   }


Line 1,004: Line 1,020:
     font-size: 15px;
     font-size: 15px;
     line-height: 1.28;
     line-height: 1.28;
     color: rgba(225,236,255,0.88);
     color: rgba(230,241,255,0.90);
   }
   }


Line 1,026: Line 1,042:
     height: 28px;
     height: 28px;
     border-radius: 9px;
     border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.08);
   }
   }


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


Line 1,046: Line 1,066:
   }
   }


   /* Make req/users buttons read stronger on mobile */
   /* 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.10);
     border: 1px solid rgba(255,255,255,0.14);
     background: linear-gradient(180deg, rgba(0,0,0,0.20), rgba(0,0,0,0.08));
     background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
    color: rgba(245,250,255,0.96);
   }
   }
  .sv-disclose-count { color: rgba(255,255,255,0.78); }


   /* Disclose pop aligns right on mobile */
   /* Disclose pop aligns right on mobile */
Line 1,057: Line 1,080:


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


   /* Slider: keep flush, but keep thumb inside track */
   /* Slider: brighter track + clearer ticks */
   .sv-level-range--custom { height: 22px; }
   .sv-level-range--custom { height: 22px; }


Line 1,065: Line 1,091:
     left: 8px;
     left: 8px;
     right: 8px;
     right: 8px;
     border: 1px solid rgba(255,255,255,0.10);
     border: 1px solid rgba(255,255,255,0.14);
     background:
     background:
       linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05)),
       linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.10)),
       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.34) 10.8%,
         rgba(255,255,255,0.44) 10.8%,
         rgba(255,255,255,0.34) 11.11%
         rgba(255,255,255,0.44) 11.11%
       );
       );
  }
  .sv-level-fill {
    background: linear-gradient(90deg, rgba(170,220,255,0.55), rgba(255,255,255,0.22));
   }
   }


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


   /* Optional +/- buttons: keep them compact and high contrast */
   /* Optional +/- buttons: lighter surface */
   .sv-level-step {
   .sv-level-step {
     border: 1px solid rgba(255,255,255,0.12);
     border: 1px solid rgba(255,255,255,0.14);
     background: rgba(0,0,0,0.20);
     background: rgba(255,255,255,0.10);
    color: rgba(245,250,255,0.96);
  }
  .sv-level-step:hover { background: rgba(255,255,255,0.14); }
 
  /* Tick labels brighter */
  .sv-level-ticklabels {
    color: rgba(255,255,255,0.78);
   }
   }


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


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


Line 1,113: Line 1,153:
     justify-content: center;
     justify-content: center;
   }
   }
  .sv-scaling-value { color: rgba(245,250,255,0.96); }
  .sv-scaling-item  { color: rgba(235,244,255,0.90); }
  .sv-scaling-label { color: rgba(255,255,255,0.70); }


   /* 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.10); }
   .sv-core-cell { border-left: 0; border-top: 1px solid rgba(255,255,255,0.12); }
   .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.10); }
   .sv-core-cell:nth-child(3n+3) { border-left: 1px solid rgba(255,255,255,0.12); }
 
  .sv-core-num  { color: rgba(245,250,255,0.96); }
  .sv-core-unit { color: rgba(255,255,255,0.82); }
  .sv-core-label{ color: rgba(255,255,255,0.70); }


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


   .sv-tab { padding: 9px 6px; }
   .sv-tab { padding: 9px 6px; }
   .sv-tab + .sv-tab { border-left: 1px solid rgba(255,255,255,0.10); }
 
  .sv-tab {
    /* more visible tabs in general */
    color: rgba(255,255,255,0.86);
    background: rgba(255,255,255,0.06);
  }
 
   .sv-tab + .sv-tab { border-left: 1px solid rgba(255,255,255,0.12); }
   .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.10); }
   .sv-tab:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.12); }


   /* Selected tab: stronger contrast on mobile */
   /* Selected tab: unmistakable */
   .sv-tab[aria-selected="true"] {
   .sv-tab[aria-selected="true"] {
    color: rgba(245,250,255,0.98);
     background:
     background:
       radial-gradient(600px 220px at 50% 0, rgba(96,165,250,0.18), transparent 60%),
       radial-gradient(620px 230px at 50% 0, rgba(125,190,255,0.26), transparent 62%),
       linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.06));
       linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08));
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
     box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 8px 18px rgba(0,0,0,0.18);
   }
   }


Line 1,143: Line 1,201:
   /* 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 {
   .sv-pill {
     font-size: 14px;
     font-size: 14px;
     border: 1px solid rgba(255,255,255,0.10);
     border: 1px solid rgba(255,255,255,0.14);
     background: rgba(0,0,0,0.18);
     background: rgba(255,255,255,0.10);
    color: rgba(245,250,255,0.96);
   }
   }
   .sv-kw-cell {
   .sv-kw-cell {
     border: 1px solid rgba(255,255,255,0.10);
     border: 1px solid rgba(255,255,255,0.14);
     background: rgba(0,0,0,0.18);
     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 */
   /* 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.10);
     border: 1px solid rgba(255,255,255,0.14);
     background: rgba(0,0,0,0.18);
     background: rgba(255,255,255,0.10);
  }
 
  .sv-ref-ico {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.10);
   }
   }
  .sv-ref-ico { width: 52px; height: 52px; border-radius: 13px; }


   /* Level slider uses full available width on mobile */
   /* Level slider uses full available width on mobile */
Retrieved from "https://spiritvale.info/wiki/Module:GameInfo/styles.css"