MediaWiki:Mobile.css: Difference between revisions

← Older edit Newer edit →

@@ Line 223: / Line 223: @@
 }
-/* Meta row: keep 2 columns and center the group away from edges */
+/* ------------------------------------------------------------------------
+SV GameInfo / GameSkills (mobile): META PILL COMPRESSION (50% scale target)
+- Much smaller pills (size, padding, icon, text)
+- Keep 2 columns, centered away from edges
+- Second line text shrunk so it fits cleanly
+------------------------------------------------------------------------ */
+/* Meta row: 2 columns + centered group */
 .sv-skill-card .sv-skill-meta,
 .sv-gi-card .sv-skill-meta{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
-   max-width:360px;
+  gap:4px !important;             /* was larger; tighter between pills */
-   margin-left:auto;
+   max-width:300px;                /* keeps pills away from screen edges */
-   margin-right:auto;
+   margin-left:auto !important;
+   margin-right:auto !important;
    justify-content:center;
+}
+/* Meta pills (card form) */
+.sv-skill-card .sv-meta-card,
+.sv-gi-card .sv-meta-card{
+  padding:2px 6px !important;     /* remove most of the internal padding */
+  border-radius:999px !important; /* more pill-like */
+  gap:6px !important;
+  justify-content:center !important; /* center icon + text in the pill */
+}
+/* Meta pills (pill form fallback, if ever used) */
+.sv-skill-card .sv-skill-meta .sv-pill,
+.sv-gi-card .sv-skill-meta .sv-pill{
+  padding:2px 6px !important;
+  border-radius:999px !important;
+  gap:6px !important;
+  justify-content:center !important;
+  font-size:10px !important;
+  line-height:1.05 !important;
+}
+/* Smaller circular icon on mobile */
+.sv-skill-card .sv-meta-icon,
+.sv-gi-card .sv-meta-icon{
+  width:16px !important;
+  height:16px !important;
+  border-radius:999px !important;
+}
+/* Smaller label text on mobile */
+.sv-skill-card .sv-meta-text,
+.sv-gi-card .sv-meta-text{
+  font-size:10px !important;
+  line-height:1.05 !important;
+  letter-spacing:0 !important;
+  text-align:center !important;
+}
+/* Second line (qualifier) even smaller */
+.sv-skill-card .sv-meta-text .sv-meta-lines span + span,
+.sv-gi-card .sv-meta-text .sv-meta-lines span + span{
+  margin-top:1px !important;
+  font-size:9px !important;
+  line-height:1.05 !important;
+  opacity:0.92;
 }
 }