Module:GameInfo/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 431: / Line 431: @@
     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 {
      display: grid;
-     grid-template-columns: max-content minmax(0, 1fr);
+     grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
      grid-template-rows: auto auto;
      column-gap: 16px;
@@ Line 449: / Line 451: @@
      justify-content: flex-start;
      gap: 12px;
+    /* Allows the cluster to reflow instead of forcing the column wider */
+    flex-wrap: wrap;
      min-width: 0;
+    max-width: 100%;
 }
@@ Line 489: / Line 494: @@
      word-wrap: break-word;
      font-weight: 900;
-     font-size: 50px;
+     font-size: 44px;
      line-height: 0.92;
-     letter-spacing: -0.65px;
+     letter-spacing: -0.60px;
      color: rgba(245,249,255,0.99);
 }
@@ Line 498: / Line 503: @@
      margin-top: 6px;
      font-weight: 900;
-     font-size: 12px;
+     font-size: 11px;
      line-height: 1.05;
      letter-spacing: 0.22px;
@@ Line 562: / Line 567: @@
 .sv_skill_scaling__stat-pill {
      border-radius: 999px;
-     width: 88px;
+     width: 82px;
      min-height: 22px;
-     padding: 4px 9px;
+     padding: 4px 8px;
      display: flex;
      align-items: center;
@@ Line 594: / Line 599: @@
 /* Icon sizing (force FILE render down to true micro size) */
 .sv_skill_scaling__stat-icon {
-     width: 13px;
+     width: 12px;
-     height: 13px;
+     height: 12px;
      display: flex;
      align-items: center;
@@ Line 608: / Line 613: @@
      .sv_skill_scaling__stat-icon .sv-img img {
-         width: 13px;
+         width: 12px;
-         height: 13px;
+         height: 12px;
          box-shadow: none;
      }
@@ Line 623: / Line 628: @@
 .sv_skill_scaling__stat-value {
      font-weight: 900;
-     font-size: 14px;
+     font-size: 13px;
      line-height: 1;
      letter-spacing: -0.12px;
@@ Line 662: / Line 667: @@
          content: "—";
          font-weight: 900;
-         font-size: 14px;
+         font-size: 13px;
          line-height: 1;
          color: rgba(140,156,184,0.78);
@@ Line 804: / Line 809: @@
 @media (max-width:850px) {
+    /* Slightly smaller cap so the reserved column always exists */
+    .sv_skill_scaling__body {
+        grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
+    }
      .sv_skill_scaling__primary-value {
-         font-size: 44px;
+         font-size: 40px;
          letter-spacing: -0.55px;
      }
      .sv_skill_scaling__stat-pill {
-         width: 84px;
+         width: 78px;
      }
      .sv_skill_scaling__stat-value {
-         font-size: 13px;
+         font-size: 12px;
-    }
-    .sv_skill_scaling__stats-grid {
-        column-gap: 10px;
-        row-gap: 8px;
      }
@@ Line 860: / Line 865: @@
      .sv_skill_scaling__primary-value {
-         font-size: 36px;
+         font-size: 34px;
          letter-spacing: -0.45px;
      }
@@ Line 869: / Line 874: @@
      .sv_skill_scaling__stat-pill {
-         width: 78px;
+         width: 72px;
          min-height: 22px;
          padding: 4px 8px;
@@ Line 885: / Line 890: @@
      .sv_skill_scaling__stat-value {
-         font-size: 13px;
+         font-size: 12px;
      }
      .sv_skill_scaling__stat-pill.is-inactive::before {
-         font-size: 13px;
+         font-size: 12px;
      }
@@ Line 899: / Line 904: @@
 @media (max-width:360px) {
      .sv_skill_scaling__primary-value {
-         font-size: 32px;
+         font-size: 30px;
      }
      .sv_skill_scaling__stat-pill {
-         width: 72px;
+         width: 68px;
      }
@@ Line 910: / Line 915: @@
      }
 }
 /* ==========================================================================