MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 539: / Line 539: @@
    font-weight: 650;
    opacity: 0.95;
+  text-align: center;
 }
+/* Layout grid (desktop rules) */
 table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout {
    width: 100%;
    display: grid;
-   grid-template-columns: 1fr; /* becomes 2 cols when flags exist */
+   gap: 0.55em;
-   gap: 0.5em;
+  align-items: start;        /* top-align columns */
-  align-items: start;
+   justify-items: center;     /* center each column */
 }
-table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-has-flags {
+table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-1 {
-   grid-template-columns: auto 1fr;
+   grid-template-columns: 1fr;     /* centered single group */
 }
-table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-flags {
+table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2 {
-   display: flex;
+   grid-template-columns: 1fr 1fr; /* two centered columns */
-  flex-direction: column;
+}
-  gap: 0.35em;
-   align-items: stretch;
+table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-3 {
+   grid-template-columns: 1fr 1fr 1fr; /* flags | mechanics | combo */
 }
-table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-items {
+/* Column containers */
+table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col {
+  min-width: 0;
+  width: 100%;
    display: flex;
-   flex-wrap: wrap;
+   flex-direction: column;
-   gap: 0.45em;
+   align-items: center;       /* center inside each column */
-   justify-content: center;
+   justify-content: flex-start;
-   align-items: stretch;
+  text-align: center;
+   gap: 0.40em;
 }
-table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-item {
+/* Mechanics + combo items (stacked blocks) */
-   flex: 1 1 9.5em;
+table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-mech {
-  min-width: 9.0em;
+   width: 100%;
    display: flex;
    flex-direction: column;
-  gap: 0.5em;
    align-items: center;
-   justify-content: center;
+   justify-content: flex-start;
    text-align: center;
-   padding: 0.15em 0.25em;
+   gap: 0.50em;
 }
@@ Line 589: / Line 595: @@
    overflow-wrap: anywhere;
    word-break: break-word;
+}
+/* Pills: shrink-to-text (desktop + mobile) */
+table.spiritvale-skill-infobox .module-special-mechanics :where(.sv-sm-label, .sv-sm-flag) {
+  width: auto !important;
+  display: inline-block !important;
+  max-width: 100%;
+  white-space: nowrap;
 }
@@ Line 611: / Line 625: @@
      padding: 0.22em 0.45em;
    }
+  /* Special Mechanics: mobile rules
+     - If 1 or 2 groups: single centered column (stacked)
+     - If all 3: two columns (flags | mechanics+combo), with combo below mechanics
+  */
+  table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2 {
+    grid-template-columns: 1fr;
+  }
+  table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-3 {
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+      "flags mech"
+      "flags combo";
+    align-items: start;
+    justify-items: center;
+  }
+  table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-3 .sv-sm-col-flags { grid-area: flags; }
+  table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-3 .sv-sm-col-mech  { grid-area: mech;  }
+  table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-3 .sv-sm-col-combo { grid-area: combo; }
    /* Hero Bar Slot 2: spread/flatten compactable module grids */