Toggle menu
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
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 (TemplateStyles-safe refactor)
   7) SKILL SCALING DASHBOARD
   --------------------------------------------------------------------------
   --------------------------------------------------------------------------
   Row 1: [cluster][side]
   Layout:
    - cluster = ONE UNIT (damage + 2×3 stat chips)
  - One cohesive scaling surface (level selector visually absorbed).
    - side    = reserved future block (empty for now)
  - Row 1: [cluster][side]
   Row 2: core spans full width (for now)
      cluster = damage + 2×3 attribute chips as ONE unit
      side    = reserved future block (empty for now)
   - Row 2: core pills across the full width (for now)


   REQUIRES:
   Markup:
     .sv_skill_scaling__cluster wrapper around primary+stats
     .sv_skill_scaling__body
      .sv_skill_scaling__cluster (contains primary + stats)
      .sv_skill_scaling__side    (optional/empty)
      .sv_skill_scaling__column--core
   ========================================================================== */
   ========================================================================== */


Line 429: Line 434:
.sv_skill_scaling__body {
.sv_skill_scaling__body {
     display: grid;
     display: grid;
     grid-template-columns: auto minmax(0, 1fr);
     grid-template-columns: max-content minmax(0, 1fr);
     grid-template-rows: auto auto;
     grid-template-rows: auto auto;
     column-gap: 16px;
     column-gap: 16px;
Line 436: Line 441:
}
}


/* Cluster is ONE grid item (contains primary + stats side-by-side) */
/* Cluster is ONE grid item (damage + chips) */
.sv_skill_scaling__cluster {
.sv_skill_scaling__cluster {
     grid-column: 1;
     grid-column: 1;
Line 443: Line 448:
     align-items: center;
     align-items: center;
     justify-content: flex-start;
     justify-content: flex-start;
     gap: 14px;
     gap: 12px;
     min-width: 0;
     min-width: 0;
}
}
Line 458: Line 463:
     grid-column: 1 / -1;
     grid-column: 1 / -1;
     grid-row: 2;
     grid-row: 2;
    padding: 0;
}
}


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


/* PRIMARY (Damage Mod) */
/* Primary output (Damage Mod) */
.sv_skill_scaling__column--primary {
.sv_skill_scaling__column--primary {
     display: flex;
     display: flex;
Line 483: Line 489:
     word-wrap: break-word;
     word-wrap: break-word;
     font-weight: 900;
     font-weight: 900;
     font-size: 54px;
     font-size: 50px;
     line-height: 0.92;
     line-height: 0.92;
     letter-spacing: -0.70px;
     letter-spacing: -0.65px;
     color: rgba(245,249,255,0.99);
     color: rgba(245,249,255,0.99);
}
}
Line 505: Line 511:
.sv_skill_scaling__stats-grid {
.sv_skill_scaling__stats-grid {
     display: grid;
     display: grid;
    /* Keep compact; does NOT stretch */
     grid-template-columns: repeat(2, max-content);
     grid-template-columns: repeat(2, max-content);
     justify-content: start;
     justify-content: start;
     justify-items: start;
     justify-items: start;
     row-gap: 8px;
     row-gap: 8px;
     column-gap: 12px;
     column-gap: 10px;
    /* Hard ordering */
     grid-template-areas:
     grid-template-areas:
         "str agi"
         "str agi"
Line 540: Line 548:
}
}


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


/* Stat chip sizing (fixed; shrinks in media queries) */
/* Stat chips: compact micro pills */
.sv_skill_scaling__stat-pill {
.sv_skill_scaling__stat-pill {
     border-radius: 999px;
     border-radius: 999px;
     width: 92px;
     width: 88px;
     min-height: 24px;
     min-height: 22px;
     padding: 4px 10px;
     padding: 4px 9px;
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
Line 563: Line 571:
}
}


/* Flatten inner structure */
/* Flatten inner structure into one row */
.sv_skill_scaling__stat-main {
.sv_skill_scaling__stat-main {
     min-width: 0;
     min-width: 0;
Line 576: Line 584:
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
     gap: 8px;
     gap: 7px;
}
}


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


/* Icon sizing */
/* Icon sizing (force FILE render down to true micro size) */
.sv_skill_scaling__stat-icon {
.sv_skill_scaling__stat-icon {
     width: 14px;
     width: 13px;
     height: 14px;
     height: 13px;
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
Line 599: Line 608:


     .sv_skill_scaling__stat-icon .sv-img img {
     .sv_skill_scaling__stat-icon .sv-img img {
         width: 14px;
         width: 13px;
         height: 14px;
         height: 13px;
         box-shadow: none;
         box-shadow: none;
     }
     }
Line 614: Line 623:
.sv_skill_scaling__stat-value {
.sv_skill_scaling__stat-value {
     font-weight: 900;
     font-weight: 900;
     font-size: 15px;
     font-size: 14px;
     line-height: 1;
     line-height: 1;
     letter-spacing: -0.12px;
     letter-spacing: -0.12px;
Line 620: Line 629:
}
}


/* Full-pill Definitions hit overlay */
/* Full-pill Definitions hit overlay (active pills) */
.sv_skill_scaling__stat-hit {
.sv_skill_scaling__stat-hit {
     position: absolute;
     position: absolute;
Line 653: Line 662:
         content: "—";
         content: "—";
         font-weight: 900;
         font-weight: 900;
         font-size: 15px;
         font-size: 14px;
         line-height: 1;
         line-height: 1;
         color: rgba(140,156,184,0.78);
         color: rgba(140,156,184,0.78);
Line 725: Line 734:


/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   7B) CORE PILLS (deduped)
   7B) CORE PILLS
-------------------------------------------------------------------------- */
-------------------------------------------------------------------------- */


Line 791: Line 800:


/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   RESPONSIVE — keep cluster as one unit; shrink on smaller screens
   7C) RESPONSIVE
-------------------------------------------------------------------------- */
-------------------------------------------------------------------------- */


@media (max-width:850px) {
@media (max-width:850px) {
     .sv_skill_scaling__primary-value {
     .sv_skill_scaling__primary-value {
         font-size: 46px;
         font-size: 44px;
         letter-spacing: -0.55px;
         letter-spacing: -0.55px;
     }
     }


     .sv_skill_scaling__stat-pill {
     .sv_skill_scaling__stat-pill {
         width: 88px;
         width: 84px;
        min-height: 24px;
    }
         padding: 4px 9px;
 
    .sv_skill_scaling__stat-value {
         font-size: 13px;
     }
     }


Line 817: Line 828:


@media (max-width:500px) {
@media (max-width:500px) {
    .sv_skill_scaling {
        padding: 9px 10px 10px;
    }
        .sv_skill_scaling .sv-skill-level,
        .sv_skill_scaling__level {
            padding: 0 0 9px;
        }
     /* Collapse outer layout so nothing can overflow */
     /* Collapse outer layout so nothing can overflow */
     .sv_skill_scaling__body {
     .sv_skill_scaling__body {
Line 826: Line 846:
         grid-column: 1;
         grid-column: 1;
         grid-row: 1;
         grid-row: 1;
         gap: 12px;
         gap: 10px;
     }
     }


Line 840: Line 860:


     .sv_skill_scaling__primary-value {
     .sv_skill_scaling__primary-value {
         font-size: 40px;
         font-size: 36px;
         letter-spacing: -0.45px;
         letter-spacing: -0.45px;
     }
     }
Line 849: Line 869:


     .sv_skill_scaling__stat-pill {
     .sv_skill_scaling__stat-pill {
         width: 82px;
         width: 78px;
         min-height: 22px;
         min-height: 22px;
         padding: 4px 8px;
         padding: 4px 8px;
Line 855: Line 875:


     .sv_skill_scaling__stat-icon {
     .sv_skill_scaling__stat-icon {
         width: 13px;
         width: 12px;
         height: 13px;
         height: 12px;
     }
     }


         .sv_skill_scaling__stat-icon .sv-img img {
         .sv_skill_scaling__stat-icon .sv-img img {
             width: 13px;
             width: 12px;
             height: 13px;
             height: 12px;
         }
         }


     .sv_skill_scaling__stat-value {
     .sv_skill_scaling__stat-value {
         font-size: 14px;
         font-size: 13px;
     }
     }


     .sv_skill_scaling__stat-pill.is-inactive::before {
     .sv_skill_scaling__stat-pill.is-inactive::before {
         font-size: 14px;
         font-size: 13px;
     }
     }


Line 878: Line 898:


@media (max-width:360px) {
@media (max-width:360px) {
    .sv_skill_scaling__cluster {
        gap: 10px;
    }
     .sv_skill_scaling__primary-value {
     .sv_skill_scaling__primary-value {
         font-size: 34px;
         font-size: 32px;
     }
     }


     .sv_skill_scaling__stat-pill {
     .sv_skill_scaling__stat-pill {
         width: 76px;
         width: 72px;
     }
     }


Line 894: Line 910:
     }
     }
}
}


/* ==========================================================================
/* ==========================================================================