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 THEME v2 (MUCH BRIGHTER)
     MOBILE CONTRAST + VISIBILITY (NO change to main card background)
     - Card background: +50%+ brightness
     - Standardize + brighten EVERY bubble/panel surface
     - Bubbles/panels: even lighter
     - Stronger borders/dividers so sections don’t blend together
    - Dividers: more visible
   ------------------------------------------------------------------------ */
    - Tabs: stronger contrast + clearer selected state
   -------------------------------------------------------------------------- */


   .sv-gi-card,
   /* One standard mobile surface for ALL “bubble-like” components */
  .sv-skill-card {
    border: 1px solid rgba(255,255,255,0.22);
 
    /* Much brighter overall than prior */
    background-color: #1a2a54;
    background-image:
      radial-gradient(980px 460px at 50% -22%, rgba(150,210,255,0.34), transparent 62%),
      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.09), transparent 64%),
      linear-gradient(180deg, #1a2a54, #121f43);
 
    box-shadow: 0 18px 42px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.08);
 
    color: rgba(248,252,255,0.96);
  }
 
  /* 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.22);
  .sv-kw-cell,
     background: rgba(255,255,255,0.14);
  .sv-pill,
  .sv-ref-card,
  .sv-disclose > summary,
  .sv-disclose-btn,
  .sv-meta-icon {
     background: rgba(255,255,255,0.22) !important;
     border-color: rgba(255,255,255,0.26) !important;
     box-shadow:
     box-shadow:
       inset 0 1px 0 rgba(255,255,255,0.10),
       inset 0 1px 0 rgba(255,255,255,0.14),
       0 12px 22px rgba(0,0,0,0.16);
       0 10px 18px rgba(0,0,0,0.14) !important;
  }
 
  /* Meta strip containers read as segmented boxes */
  .sv-skill-meta,
  .sv-meta-card {
    border-color: rgba(255,255,255,0.22) !important;
   }
   }


   /* Brighter internal dividers (separation) */
   /* 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-skill-meta,
  .sv-meta-card,
   .sv-tab + .sv-tab,
   .sv-tab + .sv-tab,
   .sv-core-cell,
   .sv-core-cell,
   .sv-scaling-col {
   .sv-scaling-col,
     border-color: rgba(255,255,255,0.18);
  .sv-meta-card {
    border-color: rgba(255,255,255,0.20) !important;
  }
 
  /* Tabs: more visible by default + stronger selected state */
  .sv-tab {
    background: rgba(255,255,255,0.22) !important;
    color: rgba(255,255,255,0.94) !important;
  }
 
  .sv-tab[aria-selected="true"] {
    background: rgba(255,255,255,0.30) !important;
    color: rgba(248,252,255,0.99) !important;
    box-shadow:
      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 */
  .sv-ref-ico,
  .sv-meta-icon {
    background: rgba(255,255,255,0.24) !important;
     border-color: rgba(255,255,255,0.26) !important;
  }
 
  /* Level slider: keep shell flush, but make TRACK bright and readable */
  .sv-level-range--custom {
    background: transparent !important;
    border: 0 !important;
  }
 
  .sv-level-track {
    border: 1px solid rgba(255,255,255,0.26) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.22)),
      repeating-linear-gradient(
        to right,
        transparent 0,
        transparent 10.8%,
        rgba(255,255,255,0.62) 10.8%,
        rgba(255,255,255,0.62) 11.11%
      ) !important;
   }
   }
  /* ------------------------------------------------------------------------
    MOBILE LAYOUT (your existing mobile adjustments)
  ------------------------------------------------------------------------ */


   /* Header: phone proportions */
   /* Header: phone proportions */
Line 1,011: Line 1,047:
     height: 68px;
     height: 68px;
     border-radius: 12px;
     border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
   }
   }


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


Line 1,042: Line 1,074:
     height: 28px;
     height: 28px;
     border-radius: 9px;
     border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.14);
   }
   }


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


Line 1,064: Line 1,093:
     max-width: 240px;
     max-width: 240px;
   }
   }
  .sv-disclose > summary,
  .sv-disclose-btn {
    border: 1px solid rgba(255,255,255,0.22);
    background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.12));
    color: rgba(248,252,255,0.97);
  }
  .sv-disclose-count { color: rgba(255,255,255,0.86); }


   .sv-disclose-pop { left: auto; right: 0; max-width: 92%; }
   .sv-disclose-pop { left: auto; right: 0; max-width: 92%; }


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


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


Line 1,088: Line 1,105:
     left: 8px;
     left: 8px;
     right: 8px;
     right: 8px;
    border: 1px solid rgba(255,255,255,0.22);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.14)),
      repeating-linear-gradient(
        to right,
        transparent 0,
        transparent 10.8%,
        rgba(255,255,255,0.58) 10.8%,
        rgba(255,255,255,0.58) 11.11%
      );
  }
  .sv-level-fill {
    background: linear-gradient(90deg, rgba(170,220,255,0.70), rgba(255,255,255,0.28));
   }
   }


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


   /* Optional +/- buttons (if present) */
   /* Scaling becomes “stacked-left + tall-right” */
  .sv-level-step {
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.18);
    color: rgba(248,252,255,0.97);
  }
  .sv-level-step:hover { background: rgba(255,255,255,0.22); }
 
  .sv-level-ticklabels {
    color: rgba(255,255,255,0.86);
  }
 
  /* Scaling layout */
   .sv-scaling-grid { grid-template-columns: 1fr 1fr; }
   .sv-scaling-grid { grid-template-columns: 1fr 1fr; }


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


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


Line 1,149: Line 1,137:
     justify-content: center;
     justify-content: center;
   }
   }
  .sv-scaling-value { color: rgba(248,252,255,0.97); }
  .sv-scaling-item  { color: rgba(242,248,255,0.94); }
  .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.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.18); }
   .sv-core-cell:nth-child(3n+3) { border-left: 1px solid rgba(255,255,255,0.20); }
 
  .sv-core-num  { color: rgba(248,252,255,0.97); }
  .sv-core-unit { color: rgba(255,255,255,0.90); }
  .sv-core-label{ color: rgba(255,255,255,0.82); }


   /* Tabs: much more visible base + selected state */
   /* Tabs become 2x2 segmented */
   .sv-tabs-list { grid-template-columns: repeat(2, 1fr); }
   .sv-tabs-list { grid-template-columns: repeat(2, 1fr); }


   .sv-tab {
   .sv-tab { padding: 9px 6px; }
    padding: 9px 6px;
   .sv-tab + .sv-tab { border-left: 1px solid rgba(255,255,255,0.20); }
    color: rgba(255,255,255,0.92);
    background: rgba(255,255,255,0.14);
  }
 
   .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.18); }
   .sv-tab:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.20); }


  .sv-tab[aria-selected="true"] {
   /* Mechanics grid becomes 2-col */
    color: rgba(248,252,255,0.99);
    background:
      radial-gradient(620px 230px at 50% 0, rgba(170,220,255,0.34), transparent 66%),
      linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.16));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      0 10px 22px rgba(0,0,0,0.16);
  }
 
   /* Mechanics */
   .sv-kw-grid { grid-template-columns: repeat(2, 1fr); }
   .sv-kw-grid { grid-template-columns: repeat(2, 1fr); }


  .sv-kw-cell {
   /* Keywords grid follows mechanics on mobile */
    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 { font-size: 14px; }


  .sv-pill {
   /* Effects/Events become 1-col */
    font-size: 14px;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.16);
    color: rgba(248,252,255,0.97);
  }
 
   /* Effects/Events */
   .sv-ref-grid { grid-template-columns: 1fr; }
   .sv-ref-grid { grid-template-columns: 1fr; }
  .sv-ref-card { grid-template-columns: 52px 1fr; }
  .sv-ref-ico { width: 52px; height: 52px; border-radius: 13px; }


  .sv-ref-card {
    grid-template-columns: 52px 1fr;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.14);
  }
  .sv-ref-ico {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.16);
  }
  /* Level slider width */
   .sv-level-range--custom,
   .sv-level-range--custom,
   .sv-level-ticklabels {
   .sv-level-ticklabels {
Line 1,233: Line 1,171:
   }
   }
}
}
/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   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"