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


/* ==========================================================================
/* ==========================================================================
   7) SCHEMA 2 SKILL SCALING DASHBOARD
   7) SCHEMA 2 — SKILL SCALING DASHBOARD (TemplateStyles-safe refactor)
   Layout goal:
   --------------------------------------------------------------------------
  - Outer scaling card is one cohesive surface.
   Row 1: [cluster][side]
   - Row 1 is a 2-column layout:
    - cluster = ONE UNIT (damage + 2×3 stat chips)
      col 1: LEFT CLUSTER (damage + 2×3 attribute chips) as ONE UNIT
    - side    = reserved future block (empty for now)
      col 2: RIGHT SIDE (reserved / future block; later core can move here)
   Row 2: core spans full width (for now)
   - Row 2: Core pills span full width (for now).


   NOTE (structure):
   REQUIRES:
  - This expects the DOM to provide a wrapper that groups damage+stats:
    .sv_skill_scaling__cluster wrapper around primary+stats
      .sv_skill_scaling__cluster
    and (optionally) a right-side placeholder:
      .sv_skill_scaling__side
   ========================================================================== */
   ========================================================================== */


Line 427: Line 423:
     }
     }


/* Row 1: [cluster][side]  |  Row 2: core spans both */
/* OUTER GRID:
  Row 1: cluster + side
  Row 2: core spans both
*/
.sv_skill_scaling__body {
.sv_skill_scaling__body {
     display: grid;
     display: grid;
     grid-template-columns: max-content minmax(0, 1fr);
     grid-template-columns: auto minmax(0, 1fr);
     grid-template-rows: auto auto;
     grid-template-rows: auto auto;
     column-gap: 16px;
     column-gap: 16px;
Line 437: Line 436:
}
}


/* Cluster = ONE UNIT containing primary + stats */
/* Cluster is ONE grid item (contains primary + stats side-by-side) */
.sv_skill_scaling__cluster {
.sv_skill_scaling__cluster {
     grid-column: 1;
     grid-column: 1;
Line 448: Line 447:
}
}


/* Right-side reserved area (optional, may be empty for now) */
/* Reserved right column */
.sv_skill_scaling__side {
.sv_skill_scaling__side {
     grid-column: 2;
     grid-column: 2;
Line 455: Line 454:
}
}


/* Core spans full width below (current placement) */
/* Core remains row 2 spanning full width (for now) */
.sv_skill_scaling__column--core {
.sv_skill_scaling__column--core {
     grid-column: 1 / -1;
     grid-column: 1 / -1;
     grid-row: 2;
     grid-row: 2;
    padding: 0;
}
}


/* Section wrappers are intentionally visual no-ops */
/* Section wrappers: visual no-ops */
.sv_skill_scaling__column {
.sv_skill_scaling__column {
     min-width: 0;
     min-width: 0;
Line 473: Line 471:
}
}


/* Primary output (Damage Mod) */
/* PRIMARY (Damage Mod) */
.sv_skill_scaling__column--primary {
.sv_skill_scaling__column--primary {
    min-height: 0;
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
Line 483: Line 480:
}
}


/* Damage typography */
.sv_skill_scaling__primary-value {
.sv_skill_scaling__primary-value {
     word-wrap: break-word;
     word-wrap: break-word;
     font-weight: 900;
     font-weight: 900;
     font-size: 58px;
     font-size: 54px;
     line-height: 0.90;
     line-height: 0.92;
     letter-spacing: -0.85px;
     letter-spacing: -0.70px;
     color: rgba(245,249,255,0.99);
     color: rgba(245,249,255,0.99);
}
}
Line 509: Line 505:
.sv_skill_scaling__stats-grid {
.sv_skill_scaling__stats-grid {
     display: grid;
     display: grid;
    /* Compact grid; does NOT stretch */
     grid-template-columns: repeat(2, max-content);
     grid-template-columns: repeat(2, max-content);
     justify-content: start;
     justify-content: start;
Line 515: Line 510:
     row-gap: 8px;
     row-gap: 8px;
     column-gap: 12px;
     column-gap: 12px;
    /* Hard ordering */
     grid-template-areas:
     grid-template-areas:
         "str agi"
         "str agi"
Line 546: Line 540:
}
}


/* Shared pill shell (core uses this; stat chips override size below) */
/* Shared pill shell (core uses this too) */
.sv_skill_scaling__pill {
.sv_skill_scaling__pill {
     position: relative;
     position: relative;
Line 557: Line 551:
}
}


/* Stat chips: compact “micro pills” */
/* Stat chip sizing (fixed; shrinks in media queries) */
.sv_skill_scaling__stat-pill {
.sv_skill_scaling__stat-pill {
     border-radius: 999px;
     border-radius: 999px;
     width: 96px; /* prevents stretched bars */
     width: 92px;
     min-height: 24px;
     min-height: 24px;
     padding: 4px 10px;
     padding: 4px 10px;
Line 566: Line 560:
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
    text-align: left;
     white-space: nowrap;
     white-space: nowrap;
}
}


/* Flatten inner structure into one row */
/* Flatten inner structure */
.sv_skill_scaling__stat-main {
.sv_skill_scaling__stat-main {
    width: auto;
     min-width: 0;
     min-width: 0;
     display: flex;
     display: flex;
Line 582: Line 574:
     min-width: 0;
     min-width: 0;
     display: flex;
     display: flex;
    flex-direction: row;
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
Line 588: Line 579:
}
}


/* No stat label in chip mode */
.sv_skill_scaling__stat-label {
.sv_skill_scaling__stat-label {
     display: none;
     display: none;
Line 630: Line 620:
}
}


/* Full-pill Definitions interaction overlay (active pills) */
/* Full-pill Definitions hit overlay */
.sv_skill_scaling__stat-hit {
.sv_skill_scaling__stat-hit {
     position: absolute;
     position: absolute;
Line 735: Line 725:


/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   7B) CORE PILLS (current placement: row 2)
   7B) CORE PILLS (deduped)
-------------------------------------------------------------------------- */
-------------------------------------------------------------------------- */


Line 801: Line 791:


/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   7B) CORE PILLS (current placement: row 2)
   RESPONSIVE — keep cluster as one unit; shrink on smaller screens
-------------------------------------------------------------------------- */
-------------------------------------------------------------------------- */


.sv_skill_scaling__core-grid {
@media (max-width:850px) {
     display: grid;
    .sv_skill_scaling__primary-value {
     grid-template-columns: repeat(6, minmax(0, 1fr));
        font-size: 46px;
     gap: 8px;
        letter-spacing: -0.55px;
    }
 
     .sv_skill_scaling__stat-pill {
        width: 88px;
        min-height: 24px;
        padding: 4px 9px;
    }
 
    .sv_skill_scaling__stats-grid {
        column-gap: 10px;
        row-gap: 8px;
    }
 
     .sv_skill_scaling__core-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
     }
}
}


.sv_skill_scaling__core-pill {
@media (max-width:500px) {
     min-height: 88px;
    /* Collapse outer layout so nothing can overflow */
     padding: 10px 8px;
    .sv_skill_scaling__body {
     display: flex;
        grid-template-columns: 1fr;
     flex-direction: column;
        grid-template-rows: auto auto auto;
     justify-content: center;
    }
     align-items: center;
 
     text-align: center;
    .sv_skill_scaling__cluster {
}
        grid-column: 1;
        grid-row: 1;
        gap: 12px;
    }
 
    .sv_skill_scaling__side {
        grid-column: 1;
        grid-row: 2;
     }
 
    .sv_skill_scaling__column--core {
        grid-column: 1;
        grid-row: 3;
     }
 
    .sv_skill_scaling__primary-value {
        font-size: 40px;
        letter-spacing: -0.45px;
     }
 
    .sv_skill_scaling__primary-label {
        font-size: 11px;
     }
 
    .sv_skill_scaling__stat-pill {
        width: 82px;
        min-height: 22px;
        padding: 4px 8px;
     }
 
    .sv_skill_scaling__stat-icon {
        width: 13px;
        height: 13px;
     }
 
        .sv_skill_scaling__stat-icon .sv-img img {
            width: 13px;
            height: 13px;
        }
 
     .sv_skill_scaling__stat-value {
        font-size: 14px;
    }


.sv_skill_scaling__core-main {
    .sv_skill_scaling__stat-pill.is-inactive::before {
    min-width: 0;
        font-size: 14px;
    display: flex;
     }
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
     gap: 6px;
}


.sv_skill_scaling__core-value {
    .sv_skill_scaling__core-grid {
    min-width: 0;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    word-wrap: break-word;
    }
    font-weight: 900;
    font-size: 17px;
    line-height: 1.02;
    color: rgba(245,249,255,0.98);
}
}


.sv_skill_scaling__core-unit {
@media (max-width:360px) {
     font-weight: 900;
     .sv_skill_scaling__cluster {
    font-size: 11px;
        gap: 10px;
     line-height: 1.05;
     }
    color: rgba(182,198,224,0.95);
}


.sv_skill_scaling__core-label {
    .sv_skill_scaling__primary-value {
    margin-top: 6px;
        font-size: 34px;
    font-weight: 900;
     }
    font-size: 11px;
    line-height: 1.12;
     letter-spacing: 0.16px;
    text-transform: uppercase;
    color: rgba(182,198,224,0.95);
}


.sv_skill_scaling__core-pill.is-inactive {
    .sv_skill_scaling__stat-pill {
    border-color: rgba(59,75,99,0.72);
        width: 76px;
     background: #182130;
     }
}


     .sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-value,
     .sv_skill_scaling__core-grid {
    .sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-unit,
        grid-template-columns: repeat(2, minmax(0, 1fr));
    .sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-label {
        color: rgba(140,156,184,0.78);
     }
     }
}


/* ==========================================================================
/* ==========================================================================
   10) TAB PANELS AND CONTENT BLOCKS
   8) TAB PANELS AND CONTENT BLOCKS
   Tabs themselves are global; these are module-owned content layouts
   Tabs themselves are global; these are module-owned content layouts
   ========================================================================== */
   ========================================================================== */
Line 920: Line 949:


/* ==========================================================================
/* ==========================================================================
   11) EFFECT / EVENT CARDS
   9) EFFECT / EVENT CARDS
   ========================================================================== */
   ========================================================================== */


Line 1,006: Line 1,035:


/* ==========================================================================
/* ==========================================================================
   12) RESPONSIVE
   10) RESPONSIVE
   Breakpoints:
   Breakpoints:
   - 850px: tablet / compact desktop transition
   - 850px: tablet / compact desktop transition
Retrieved from "https://spiritvale.info/wiki/Module:GameInfo/styles.css"