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 389: Line 389:
     }
     }


/* ==========================================================================
/* Skill scaling dashboard (2-column layout; mobile stacks) */
  7) SKILL SCALING DASHBOARD
  --------------------------------------------------------------------------
  Layout:
  - One cohesive scaling surface (level selector visually absorbed).
  - Row 1: [cluster][side]
      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)
 
  Markup:
    .sv_skill_scaling__body
      .sv_skill_scaling__cluster  (contains primary + stats)
      .sv_skill_scaling__side    (optional/empty)
      .sv_skill_scaling__column--core
  ========================================================================== */


.sv_skill_scaling {
.sv_skill_scaling {
Line 416: Line 401:
}
}


     /* Absorb the level selector visually into the scaling card */
     /* Absorb the level selector into the scaling surface */
     .sv_skill_scaling .sv-skill-level,
     .sv_skill_scaling .sv-skill-level,
     .sv_skill_scaling__level {
     .sv_skill_scaling__level {
Line 428: Line 413:
     }
     }


/* OUTER GRID:
/* Desktop/tablet: two columns (left cluster, right core grid) */
  Row 1: cluster + side
  Row 2: core spans both
  IMPORTANT:
  - Left column is capped so the cluster cannot consume the full row on desktop.
*/
.sv_skill_scaling__body {
.sv_skill_scaling__body {
     display: grid;
     display: grid;
     grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
     grid-template-columns: minmax(0, 1fr) minmax(0, 252px);
    grid-template-rows: auto auto;
     column-gap: 16px;
     column-gap: 16px;
     row-gap: 12px;
     row-gap: 12px;
     align-items: center;
     align-items: start;
}
 
/* Keep the placeholder out of the way (core is now column 2) */
.sv_skill_scaling__side {
    display: none;
}
}


/* Cluster is ONE grid item (damage + chips) */
.sv_skill_scaling__cluster {
.sv_skill_scaling__cluster {
     grid-column: 1;
     grid-column: 1;
Line 451: Line 434:
     justify-content: flex-start;
     justify-content: flex-start;
     gap: 12px;
     gap: 12px;
     /* Allows the cluster to reflow instead of forcing the column wider */
     /* allows cluster to reflow if left column gets tight */
     flex-wrap: wrap;
     flex-wrap: wrap;
     min-width: 0;
     min-width: 0;
    max-width: 100%;
}
}


/* Reserved right column */
.sv_skill_scaling__column--core {
.sv_skill_scaling__side {
     grid-column: 2;
     grid-column: 2;
     grid-row: 1;
     grid-row: 1;
Line 464: Line 445:
}
}


/* Core remains row 2 spanning full width (for now) */
/* Neutral wrappers */
.sv_skill_scaling__column--core {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0;
}
 
/* Section wrappers are intentionally visual no-ops */
.sv_skill_scaling__column {
.sv_skill_scaling__column {
     min-width: 0;
     min-width: 0;
Line 482: Line 456:
}
}


/* Primary output (Damage Mod) */
/* Damage */
.sv_skill_scaling__column--primary {
.sv_skill_scaling__column--primary {
     display: flex;
     display: flex;
Line 493: Line 467:
.sv_skill_scaling__primary-value {
.sv_skill_scaling__primary-value {
     word-wrap: break-word;
     word-wrap: break-word;
    overflow-wrap: anywhere;
     font-weight: 900;
     font-weight: 900;
     font-size: 44px;
     font-size: 40px;
     line-height: 0.92;
     line-height: 0.94;
     letter-spacing: -0.60px;
     letter-spacing: -0.55px;
     color: rgba(245,249,255,0.99);
     color: rgba(245,249,255,0.99);
}
}
Line 503: Line 478:
     margin-top: 6px;
     margin-top: 6px;
     font-weight: 900;
     font-weight: 900;
     font-size: 11px;
     font-size: 10px;
     line-height: 1.05;
     line-height: 1.05;
     letter-spacing: 0.22px;
     letter-spacing: 0.22px;
Line 510: Line 485:
}
}


/* --------------------------------------------------------------------------
/* Attribute chips (2×3) */
  7A) ATTRIBUTE CHIPS (2 columns x 3 rows)
-------------------------------------------------------------------------- */
 
.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;
Line 522: Line 493:
     row-gap: 8px;
     row-gap: 8px;
     column-gap: 10px;
     column-gap: 10px;
    /* Hard ordering */
     grid-template-areas:
     grid-template-areas:
         "str agi"
         "str agi"
Line 553: Line 523:
}
}


/* Shared pill shell (core uses this; stat chips override size below) */
/* Shared shell (stat chips still use this) */
.sv_skill_scaling__pill {
.sv_skill_scaling__pill {
     position: relative;
     position: relative;
Line 564: Line 534:
}
}


/* Stat chips: compact micro pills */
.sv_skill_scaling__stat-pill {
.sv_skill_scaling__stat-pill {
     border-radius: 999px;
     border-radius: 999px;
     width: 82px;
     width: 80px;
     min-height: 22px;
     min-height: 22px;
     padding: 4px 8px;
     padding: 4px 8px;
Line 576: Line 545:
}
}


/* Flatten inner structure into one row */
.sv_skill_scaling__stat-main {
.sv_skill_scaling__stat-main {
     min-width: 0;
     min-width: 0;
Line 592: Line 560:
}
}


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


/* Icon sizing (force FILE render down to true micro size) */
.sv_skill_scaling__stat-icon {
.sv_skill_scaling__stat-icon {
     width: 12px;
     width: 12px;
Line 625: Line 591:
     }
     }


/* Value sizing */
.sv_skill_scaling__stat-value {
.sv_skill_scaling__stat-value {
     font-weight: 900;
     font-weight: 900;
     font-size: 13px;
     font-size: 12px;
     line-height: 1;
     line-height: 1;
     letter-spacing: -0.12px;
     letter-spacing: -0.10px;
     color: rgba(245,249,255,0.98);
     color: rgba(245,249,255,0.98);
}
}


/* Full-pill Definitions hit overlay (active pills) */
.sv_skill_scaling__stat-hit {
.sv_skill_scaling__stat-hit {
     position: absolute;
     position: absolute;
Line 651: Line 615:
     }
     }


/* Inactive chips: dash only */
.sv_skill_scaling__stat-pill.is-inactive {
.sv_skill_scaling__stat-pill.is-inactive {
     border-color: rgba(59,75,99,0.72);
     border-color: rgba(59,75,99,0.72);
Line 667: Line 630:
         content: "—";
         content: "—";
         font-weight: 900;
         font-weight: 900;
         font-size: 13px;
         font-size: 12px;
         line-height: 1;
         line-height: 1;
         color: rgba(140,156,184,0.78);
         color: rgba(140,156,184,0.78);
     }
     }


/* Active baseline */
.sv_skill_scaling__stat-pill.is-active {
.sv_skill_scaling__stat-pill.is-active {
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(255,255,255,0.01);
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(255,255,255,0.01);
}
}


/* Per-stat color treatments */
/* Per-stat colors */
.sv_skill_scaling__stat-pill--str.is-active {
.sv_skill_scaling__stat-pill--str.is-active {
     border-color: rgba(145,63,82,0.96);
     border-color: rgba(145,63,82,0.96);
Line 738: Line 700:
     }
     }


/* --------------------------------------------------------------------------
/* Core (3×2 grid; no pill/bubble look) */
  7B) CORE PILLS
-------------------------------------------------------------------------- */
 
.sv_skill_scaling__core-grid {
.sv_skill_scaling__core-grid {
     display: grid;
     display: grid;
     grid-template-columns: repeat(6, minmax(0, 1fr));
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 8px;
     gap: 8px;
}
}


/* Override the shared shell so core reads as a tight grid, not pills */
.sv_skill_scaling__core-pill {
.sv_skill_scaling__core-pill {
     min-height: 88px;
    border-radius: 12px;
     padding: 10px 8px;
     min-height: 54px;
     padding: 8px 6px;
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
Line 756: Line 717:
     align-items: center;
     align-items: center;
     text-align: center;
     text-align: center;
    border: 1px solid rgba(59,75,99,0.85);
    background: #182130;
    background-image: none;
    box-shadow: none;
}
}
    .sv_skill_scaling__core-pill.is-active {
        background: #1a2434;
    }


.sv_skill_scaling__core-main {
.sv_skill_scaling__core-main {
Line 764: Line 733:
     justify-content: center;
     justify-content: center;
     flex-wrap: wrap;
     flex-wrap: wrap;
     gap: 6px;
     gap: 4px;
}
}


Line 771: Line 740:
     word-wrap: break-word;
     word-wrap: break-word;
     font-weight: 900;
     font-weight: 900;
     font-size: 17px;
     font-size: 14px;
     line-height: 1.02;
     line-height: 1.02;
     color: rgba(245,249,255,0.98);
     color: rgba(245,249,255,0.98);
Line 778: Line 747:
.sv_skill_scaling__core-unit {
.sv_skill_scaling__core-unit {
     font-weight: 900;
     font-weight: 900;
     font-size: 11px;
     font-size: 10px;
     line-height: 1.05;
     line-height: 1.05;
     color: rgba(182,198,224,0.95);
     color: rgba(182,198,224,0.95);
Line 784: Line 753:


.sv_skill_scaling__core-label {
.sv_skill_scaling__core-label {
     margin-top: 6px;
     margin-top: 5px;
     font-weight: 900;
     font-weight: 900;
     font-size: 11px;
     font-size: 10px;
     line-height: 1.12;
     line-height: 1.10;
     letter-spacing: 0.16px;
     letter-spacing: 0.14px;
     text-transform: uppercase;
     text-transform: uppercase;
     color: rgba(182,198,224,0.95);
     color: rgba(182,198,224,0.95);
Line 804: Line 773:
     }
     }


/* --------------------------------------------------------------------------
/* Responsive */
  7C) RESPONSIVE
-------------------------------------------------------------------------- */
 
@media (max-width:850px) {
@media (max-width:850px) {
    /* Slightly smaller cap so the reserved column always exists */
     .sv_skill_scaling__body {
     .sv_skill_scaling__body {
         grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
         grid-template-columns: minmax(0, 1fr) minmax(0, 236px);
     }
     }


     .sv_skill_scaling__primary-value {
     .sv_skill_scaling__primary-value {
         font-size: 40px;
         font-size: 36px;
        letter-spacing: -0.55px;
     }
     }


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


Line 827: Line 791:
     }
     }


     .sv_skill_scaling__core-grid {
     .sv_skill_scaling__core-pill {
         grid-template-columns: repeat(3, minmax(0, 1fr));
         min-height: 52px;
    }
 
    .sv_skill_scaling__core-value {
        font-size: 13px;
    }
 
    .sv_skill_scaling__core-label {
        font-size: 9px;
     }
     }
}
}


@media (max-width:500px) {
@media (max-width:500px) {
    /* Stack: cluster on top, core below (no second row concept) */
     .sv_skill_scaling {
     .sv_skill_scaling {
         padding: 9px 10px 10px;
         padding: 9px 10px 10px;
Line 842: Line 815:
         }
         }


    /* Collapse outer layout so nothing can overflow */
     .sv_skill_scaling__body {
     .sv_skill_scaling__body {
         grid-template-columns: 1fr;
         grid-template-columns: 1fr;
         grid-template-rows: auto auto auto;
         row-gap: 12px;
     }
     }


Line 854: Line 826:
     }
     }


     .sv_skill_scaling__side {
     .sv_skill_scaling__column--core {
         grid-column: 1;
         grid-column: 1;
         grid-row: 2;
         grid-row: 2;
    }
    .sv_skill_scaling__column--core {
        grid-column: 1;
        grid-row: 3;
     }
     }


     .sv_skill_scaling__primary-value {
     .sv_skill_scaling__primary-value {
         font-size: 34px;
         font-size: 32px;
        letter-spacing: -0.45px;
     }
     }


     .sv_skill_scaling__primary-label {
     .sv_skill_scaling__primary-label {
         font-size: 11px;
         font-size: 10px;
     }
     }


     .sv_skill_scaling__stat-pill {
     .sv_skill_scaling__stat-pill {
         width: 72px;
         width: 70px;
        min-height: 22px;
        padding: 4px 8px;
     }
     }


     .sv_skill_scaling__stat-icon {
     .sv_skill_scaling__stat-value {
         width: 12px;
         font-size: 12px;
         height: 12px;
    }
 
    .sv_skill_scaling__core-grid {
         grid-template-columns: repeat(3, minmax(0, 1fr));
     }
     }


        .sv_skill_scaling__stat-icon .sv-img img {
    .sv_skill_scaling__core-pill {
            width: 12px;
        min-height: 50px;
            height: 12px;
        padding: 7px 6px;
        }
    }


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


     .sv_skill_scaling__stat-pill.is-inactive::before {
     .sv_skill_scaling__core-unit {
         font-size: 12px;
         font-size: 10px;
     }
     }


     .sv_skill_scaling__core-grid {
     .sv_skill_scaling__core-label {
         grid-template-columns: repeat(3, minmax(0, 1fr));
         font-size: 9px;
     }
     }
}
}
Line 904: Line 871:
@media (max-width:360px) {
@media (max-width:360px) {
     .sv_skill_scaling__primary-value {
     .sv_skill_scaling__primary-value {
         font-size: 30px;
         font-size: 28px;
     }
     }


     .sv_skill_scaling__stat-pill {
     .sv_skill_scaling__stat-pill {
         width: 68px;
         width: 66px;
     }
     }


Retrieved from "https://spiritvale.info/wiki/Module:GameInfo/styles.css"