Module:GameInfo/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 837: / Line 837: @@
     Mechanics tab
     - mirrors skill_scaling structure
-    - left: 3x3 mod pill grid
+    - left: compact 3x3 mod pill grid
     - right: single-column keyword rail
     -------------------------------------------------------------------------- */
@@ Line 859: / Line 859: @@
 .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-section:last-child{
    grid-column:2;
+  margin-top:0;
 }
-/* Mods: 3x3 pill matrix */
+/* Mods: compact 3x3 pill matrix */
 .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-grid{
    display:grid;
-   grid-template-columns:repeat(3, minmax(0, 1fr));
+   grid-template-columns:repeat(3, fit-content(110px));
-   gap:8px;
+   justify-content:start;
-   justify-items:center;
+   justify-items:start;
+  gap:8px 10px;
 }
 .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-cell{
-   width:100%;
+   width:auto;
-   min-width:70px;
+   min-width:92px;
-   min-height:25px;
+   min-height:0;
-   padding:8px 6px;
+   padding:7px 10px 6px;
    display:flex;
@@ Line 891: / Line 893: @@
    font-weight:900;
    font-size:10px;
-   line-height:1.10;
+   line-height:1.05;
-   letter-spacing:0.14px;
+   letter-spacing:0.12px;
    text-transform:uppercase;
    color:rgba(182,198,224,0.95);
@@ Line 898: / Line 900: @@
 .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-value{
-   margin-top:5px;
+   margin-top:4px;
    word-wrap:break-word;
    overflow-wrap:anywhere;
    font-weight:900;
-   font-size:14px;
+   font-size:13px;
    line-height:1.02;
    color:rgba(245,249,255,0.98);
@@ Line 920: / Line 922: @@
    padding:10px 12px;
+  display:flex;
+  align-items:center;
    justify-content:flex-start;
    text-align:left;
@@ Line 938: / Line 942: @@
 .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-pills.sv-tab-pills--xl .sv-pill,
 .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-pill.sv-pill--xl{
-   min-height:40px;
+   min-height:58px;
-  max-width: 60px;
    padding:14px 14px;
    border-radius:16px;
@@ Line 1,072: / Line 1,075: @@
    .sv-skill-card .sv-ref-grid{
      grid-template-columns:1fr;
+  }
+  .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"]{
+    grid-template-columns:minmax(0, 1fr) minmax(0, 228px);
+    column-gap:14px;
+  }
+  .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-grid{
+    grid-template-columns:repeat(3, fit-content(102px));
+    gap:8px 8px;
+  }
+  .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-cell{
+    min-width:86px;
+    padding:6px 9px 5px;
+  }
+  .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-value{
+    font-size:12px;
+  }
+  .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-pill{
+    min-height:42px;
+    padding:9px 11px;
+    font-size:13px;
+  }
+  .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-pills.sv-tab-pills--xl .sv-pill,
+  .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-pill.sv-pill--xl{
+    min-height:52px;
+    padding:12px 13px;
+    font-size:14px;
    }
 }
@@ Line 1,110: / Line 1,145: @@
    }
-   /* Keep mods as a 3-column matrix on normal mobile */
+  .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-section:last-child{
+    margin-top:0;
+  }
+   /* Keep mods compact in a 3-column matrix on normal mobile */
    .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-grid{
-     grid-template-columns:repeat(3, minmax(0, 1fr));
+     grid-template-columns:repeat(3, fit-content(96px));
+    gap:8px 8px;
+  }
+  .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-cell{
+    min-width:80px;
+    padding:6px 8px 5px;
+    border-radius:11px;
+  }
+  .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-label{
+    font-size:9px;
+    line-height:1.04;
+  }
+  .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-value{
+    margin-top:3px;
+    font-size:12px;
+  }
+  .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-pills{
+    gap:8px;
+  }
+  .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-pill{
+    min-height:40px;
+    padding:9px 11px;
+    border-radius:13px;
+    font-size:13px;
+    line-height:1.12;
+  }
+  .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-pills.sv-tab-pills--xl .sv-pill,
+  .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-pill.sv-pill--xl{
+    min-height:48px;
+    padding:11px 12px;
+    border-radius:15px;
+    font-size:14px;
    }
@@ Line 1,190: / Line 1,266: @@
    /* Mechanics tab: reduce mods grid to 2 columns on very small screens */
    .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-grid{
-     grid-template-columns:repeat(2, minmax(0, 1fr));
+     grid-template-columns:repeat(2, fit-content(96px));
+    gap:8px 8px;
+  }
+  .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-cell{
+    min-width:78px;
+    padding:6px 8px 5px;
+  }
+  .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-pill{
+    min-height:38px;
+    padding:8px 10px;
+    font-size:12px;
+  }
+  .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-pills.sv-tab-pills--xl .sv-pill,
+  .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-pill.sv-pill--xl{
+    min-height:44px;
+    padding:10px 11px;
+    font-size:13px;
    }
 }