MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 301: / Line 301: @@
      }
 }
+/* ============================================================
+   SpiritVale: Passives (single source of truth)
+   ========================================================== */
+:root { --sv-passive-width: 360px; }
+table.spiritvale-passive-infobox {
+    width: var(--sv-passive-width);
+    max-width: 100%;
+    margin: 1em auto;
+    table-layout: fixed;
+}
+/* Hero row: ensure left cell is wide enough for icon + title */
+table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th {
+    width: 42%;
+    white-space: normal;
+}
+table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
+    width: 58%;
+}
+/* Center + wrap all NON-hero rows */
+table.spiritvale-passive-infobox tbody tr:not(.spiritvale-infobox-main) th,
+table.spiritvale-passive-infobox tbody tr:not(.spiritvale-infobox-main) td {
+    text-align: center;
+    vertical-align: middle;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+}
+/* Center section headers (passives only) */
+table.spiritvale-passive-infobox .spiritvale-infobox-section-header {
+    text-align: center;
+}
+.spiritvale-passive-list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.25em;
+}
+/* Remove wrapper outline inside passive lists */
+.spiritvale-passive-list .mw-table-wrapper,
+.spiritvale-passive-list .table-overflow,
+.spiritvale-passive-list .table-scroll,
+.spiritvale-passive-list .citizen-table {
+    border: none !important;
+    box-shadow: none !important;
+    background: transparent !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+/* Mobile: stack hero row so nothing can go off-screen */
+@media (max-width: 480px) {
+    table.spiritvale-passive-infobox {
+        width: 100%;
+        max-width: 100%;
+    }
+    table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th,
+    table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
+        display: block;
+        width: 100%;
+        box-sizing: border-box;
+        text-align: center;
+    }
+    table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th .image img {
+        width: 64px !important;
+        height: auto !important;
+    }
+}
 /* ============================================================