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 1: Line 1:
/* Module:GameInfo/styles.css */
/* Module:GameInfo/styles.css */
/* GameInfo Box v1 — TemplateStyles-safe (no CSS vars / no var()) */
/* Phase 4.1 — Unified + Reusable (Layout restored, scoped) */
/* NOTE (ownership)
/* NOTE (ownership)
   --------------------------------------------------------------------------
   --------------------------------------------------------------------------
Line 389: Line 386:
     }
     }


/* Skill scaling dashboard (2-column layout; mobile stacks) */
/* ==========================================================================
  7) SKILL SCALING
  ========================================================================== */


.sv_skill_scaling {
.sv_skill_scaling {
Line 413: Line 412:
     }
     }


/* Desktop/tablet: two columns (left cluster, right core grid) */
/* Two columns (left cluster, right core); mobile stacks */
.sv_skill_scaling__body {
.sv_skill_scaling__body {
     display: grid;
     display: grid;
Line 427: Line 426:
}
}


/* Left cluster (damage + attributes) centered as a unit */
.sv_skill_scaling__cluster {
.sv_skill_scaling__cluster {
     grid-column: 1;
     grid-column: 1;
Line 432: Line 432:
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     justify-content: flex-start;
     justify-content: center;
     gap: 12px;
    align-content: center;
     gap: 14px;
     flex-wrap: wrap;
     flex-wrap: wrap;
    width: 100%;
     min-width: 0;
     min-width: 0;
}
}
Line 460: Line 462:
     flex-direction: column;
     flex-direction: column;
     justify-content: center;
     justify-content: center;
     align-items: flex-start;
     align-items: center;
     text-align: left;
     text-align: center;
}
}


Line 468: Line 470:
     overflow-wrap: anywhere;
     overflow-wrap: anywhere;
     font-weight: 900;
     font-weight: 900;
     font-size: 34px; /* ↓ smaller */
     font-size: 34px;
     line-height: 0.95;
     line-height: 0.95;
     letter-spacing: -0.50px;
     letter-spacing: -0.50px;
Line 484: Line 486:
}
}


/* Attribute chips (2×3) */
/* Attributes (2×3) */
.sv_skill_scaling__stats-grid {
.sv_skill_scaling__stats-grid {
     display: grid;
     display: grid;
Line 533: Line 535:
}
}


/* Stat chips: content-fit (same size on desktop + mobile) */
/* Stat chips (fixed size across all viewports) */
.sv_skill_scaling__stat-pill {
.sv_skill_scaling__stat-pill {
     border-radius: 999px;
     border-radius: 999px;
Line 539: Line 541:
     min-width: 50px;
     min-width: 50px;
     min-height: 22px;
     min-height: 22px;
     padding: 4px 6px; /* ↓ tighter padding */
     padding: 4px 6px;
 
     display: inline-flex;
     display: inline-flex; /* content-wrapped chip */
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
Line 559: Line 560:
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
     gap: 6px; /* ↓ tighter icon/value gap */
     gap: 6px;
}
}


Line 774: Line 775:
     }
     }


/* Responsive */
/* Scaling responsive (no stat pill size changes) */
@media (max-width:850px) {
@media (max-width:850px) {
     .sv_skill_scaling__body {
     .sv_skill_scaling__body {
Line 782: Line 783:
     .sv_skill_scaling__primary-value {
     .sv_skill_scaling__primary-value {
         font-size: 32px;
         font-size: 32px;
    }
    /* Keep pills content-fit; just tighten a touch */
    .sv_skill_scaling__stat-pill {
        width: 50px;
        min-width: 50px;
        padding: 4px 6px;
    }
    .sv_skill_scaling__stat-visual {
        gap: 6px;
    }
    .sv_skill_scaling__stat-value {
        font-size: 12px;
    }
    .sv_skill_scaling__stat-pill.is-inactive::before {
        font-size: 12px;
     }
     }


Line 844: Line 826:
     .sv_skill_scaling__primary-value {
     .sv_skill_scaling__primary-value {
         font-size: 30px;
         font-size: 30px;
    }
    /* Same pill sizing behavior on mobile (content-fit) */
    .sv_skill_scaling__stat-pill {
        width: 50px;
        min-width: 50px;
        padding: 4px 6px;
    }
    .sv_skill_scaling__stat-visual {
        gap: 6px;
    }
    .sv_skill_scaling__stat-value {
        font-size: 12px;
    }
    .sv_skill_scaling__stat-pill.is-inactive::before {
        font-size: 12px;
     }
     }


Line 886: Line 849:
     .sv_skill_scaling__primary-value {
     .sv_skill_scaling__primary-value {
         font-size: 28px;
         font-size: 28px;
    }
    /* Ultra-tight pills, still content-fit */
    .sv_skill_scaling__stat-pill {
        width: 50px;
        min-width: 50px;
        padding: 4px 6px;
    }
    .sv_skill_scaling__stat-visual {
        gap: 5px;
    }
    .sv_skill_scaling__stat-value {
        font-size: 12px;
    }
    .sv_skill_scaling__stat-pill.is-inactive::before {
        font-size: 12px;
     }
     }


Line 911: Line 855:
     }
     }
}
}


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


Line 1,092: Line 1,036:
     .sv-skill-card .sv-ref-grid {
     .sv-skill-card .sv-ref-grid {
         grid-template-columns: 1fr;
         grid-template-columns: 1fr;
    }
    /* Keep the damage+chips cluster intact; tighten sizes */
    .sv_skill_scaling__primary-value {
        font-size: 48px;
        letter-spacing: -0.70px;
    }
    .sv_skill_scaling__stat-pill {
        width: 50px;
        min-height: 26px;
        padding: 6px 10px;
    }
    .sv_skill_scaling__stats-grid {
        row-gap: 9px;
        column-gap: 10px;
    }
    .sv_skill_scaling__core-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
     }
     }
}
}
Line 1,145: Line 1,068:
     }
     }


    /* Requirements / Users edge padding */
     .sv-gi-card .sv-reqrow,
     .sv-gi-card .sv-reqrow,
     .sv-skill-card .sv-reqrow {
     .sv-skill-card .sv-reqrow {
Line 1,158: Line 1,080:
     }
     }


    /* Tight mobile meta row */
     .sv-skill-card .sv-skill-meta,
     .sv-skill-card .sv-skill-meta,
     .sv-gi-card .sv-skill-meta {
     .sv-gi-card .sv-skill-meta {
Line 1,203: Line 1,124:
     }
     }


    .sv_skill_scaling {
        padding: 9px 10px 10px;
    }
        .sv_skill_scaling .sv-skill-level,
        .sv_skill_scaling__level {
            padding: 0 0 9px;
        }
    /* Keep the cluster intact; scale down */
    .sv_skill_scaling__primary-value {
        font-size: 42px;
        letter-spacing: -0.60px;
    }
    .sv_skill_scaling__primary-label {
        font-size: 11px;
    }
    .sv_skill_scaling__stat-pill {
        width: 50px;
        min-height: 24px;
        padding: 5px 9px;
    }
    .sv_skill_scaling__stat-icon {
        width: 13px;
        height: 13px;
    }
    .sv_skill_scaling__stat-value {
        font-size: 14px;
    }
    .sv_skill_scaling__stat-pill.is-inactive::before {
        font-size: 14px;
    }
    .sv_skill_scaling__stats-grid {
        row-gap: 8px;
        column-gap: 10px;
    }
    .sv_skill_scaling__core-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    /* Fallback if meta row renders global .sv-pill */
     .sv-skill-card .sv-skill-meta .sv-pill,
     .sv-skill-card .sv-skill-meta .sv-pill,
     .sv-gi-card .sv-skill-meta .sv-pill {
     .sv-gi-card .sv-skill-meta .sv-pill {
Line 1,266: Line 1,139:
         flex: 1 1 100%;
         flex: 1 1 100%;
         max-width: 100%;
         max-width: 100%;
    }
    /* Ultra-tight: preserve side-by-side cluster without overflow */
    .sv_skill_scaling__primary-value {
        font-size: 36px;
        letter-spacing: -0.50px;
    }
    .sv_skill_scaling__body {
        column-gap: 10px;
    }
    .sv_skill_scaling__stat-pill {
        width: 25px;
        min-height: 22px;
        padding: 4px 8px;
    }
    .sv_skill_scaling__stat-value {
        font-size: 13px;
    }
    .sv_skill_scaling__stat-pill.is-inactive::before {
        font-size: 13px;
    }
    .sv_skill_scaling__core-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
     }
     }
}
}
Retrieved from "https://spiritvale.info/wiki/Module:GameInfo/styles.css"