Module:GameInfo/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 560: / Line 560: @@
 /* --------------------------------------------------------------------------
 A) ATTRIBUTE CHIPS (2 columns x 3 rows)
-    Fixed positions + compact sizing to prevent stretching.
+    Goal: match the original mockup sizing as closely as possible.
+   Rules:
+   - Fixed 2×3 footprint (no stretching, no “full-width bars”)
+   - Active: icon + value (single line), no label
+   - Inactive: en dash only, no icon/value/label
+   - Keep the cleaner icon/value spacing (gap)
 -------------------------------------------------------------------------- */
@@ Line 566: / Line 572: @@
    display:grid;
-   /* Prevent the “fills the whole row” stretch that caused the mismatch */
+   /* Keep the grid compact (do NOT expand to fill the row) */
    grid-template-columns:repeat(2, max-content);
+  justify-content:start;
+  justify-items:start;
-   /* Row gap / column gap tuned for the mockup */
+   /* Mockup-like spacing */
-   row-gap:10px;
+   row-gap:8px;
    column-gap:12px;
@@ Line 587: / Line 595: @@
 .sv_skill_scaling__stat-pill--luk{ grid-area:luk; }
-/* Shared pill shell (core uses this; stat chips override radius/size below) */
+/* Shared pill shell (core uses this; stat chips override size below) */
 .sv_skill_scaling__pill{
    position:relative;
@@ Line 599: / Line 607: @@
 }
-/* Stat chips: compact capsules with a fixed, non-stretchy footprint */
+/* Stat chips: compact “micro pills” (fixed footprint like the mockup) */
 .sv_skill_scaling__stat-pill{
    border-radius:999px;
-   /* Fixed width prevents huge bars */
+   /* Fixed width is the key to avoiding stretched bars */
-   width:132px;
+   width:96px;
-   min-height:28px;
+   min-height:24px;
-   padding:6px 12px;
+   padding:4px 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:left;
+  white-space:nowrap;
 }
@@ Line 633: / Line 643: @@
    justify-content:center;
+  /* Keep the cleaner icon/value spacing */
    gap:8px;
 }
@@ Line 641: / Line 652: @@
 }
-/* Icon sizing */
+/* Icon sizing (force the FILE render down to true micro size) */
 .sv_skill_scaling__stat-icon{
    width:14px;
@@ Line 654: / Line 665: @@
 }
-.sv_skill_scaling__stat-icon a{
+.sv_skill_scaling__stat-icon a{ text-decoration:none; }
-  text-decoration:none;
-}
+/* IMPORTANT:
+   Lua currently renders these icons at ~18px.
+   Force the rendered <img> down so pills stay mockup-sized. */
 .sv_skill_scaling__stat-icon .sv-img img{
+  width:14px;
+  height:14px;
    box-shadow:none;
 }
@@ Line 729: / Line 743: @@
    background-image:linear-gradient(180deg, rgba(190,88,113,0.16), rgba(0,0,0,0.00));
 }
 .sv_skill_scaling__stat-pill--str.is-active .sv_skill_scaling__stat-value{ color:#ffdce5; }
@@ Line 737: / Line 750: @@
    background-image:linear-gradient(180deg, rgba(210,144,18,0.15), rgba(0,0,0,0.00));
 }
 .sv_skill_scaling__stat-pill--vit.is-active .sv_skill_scaling__stat-value{ color:#ffefc9; }
@@ Line 745: / Line 757: @@
    background-image:linear-gradient(180deg, rgba(159,194,27,0.16), rgba(0,0,0,0.00));
 }
 .sv_skill_scaling__stat-pill--dex.is-active .sv_skill_scaling__stat-value{ color:#edf8cc; }
@@ Line 753: / Line 764: @@
    background-image:linear-gradient(180deg, rgba(165,82,198,0.17), rgba(0,0,0,0.00));
 }
 .sv_skill_scaling__stat-pill--agi.is-active .sv_skill_scaling__stat-value{ color:#f0dcff; }
@@ Line 761: / Line 771: @@
    background-image:linear-gradient(180deg, rgba(35,140,230,0.18), rgba(0,0,0,0.00));
 }
 .sv_skill_scaling__stat-pill--int.is-active .sv_skill_scaling__stat-value{ color:#d8eeff; }
@@ Line 769: / Line 778: @@
    background-image:linear-gradient(180deg, rgba(234,194,9,0.16), rgba(0,0,0,0.00));
 }
 .sv_skill_scaling__stat-pill--luk.is-active .sv_skill_scaling__stat-value{ color:#fff2ba; }