MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 196: / Line 196: @@
      max-width: 32em;
      margin: 0 auto;
+}
+/* ============================================================
+   SpiritVale: Passives (tooltip-sized, wrapped, centered)
+   Put this at the BOTTOM so it overrides the generic infobox rules.
+   ========================================================== */
+/* Adjust this one value until it matches your “Wand Mastery” feel */
+:root {
+    --sv-passive-max-width: 520px;
+}
+/* Lock passive box footprint (but still mobile-friendly) */
+table.spiritvale-passive-infobox {
+    width: min(var(--sv-passive-max-width), 100%);
+    max-width: var(--sv-passive-max-width);
+    margin: 1em auto;
+    /* Helps it feel like a tooltip instead of a full-width panel */
+    display: inline-table;
+}
+/* Center + wrap ALL non-hero rows (hero row stays “perfect”) */
+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;          /* overrides your nowrap label rule */
+    overflow-wrap: anywhere;
+    word-break: break-word;
+}
+/* Ensure label column can wrap too (your generic CSS forces nowrap) */
+table.spiritvale-passive-infobox tbody tr:not(.spiritvale-infobox-main)
+th:not(.spiritvale-infobox-section-header) {
+    white-space: normal;
+}
+/* Center section headers for passives */
+table.spiritvale-passive-infobox .spiritvale-infobox-section-header {
+    text-align: center;
+}
+/* Extra safety for long descriptions/effects */
+table.spiritvale-passive-infobox .spiritvale-infobox-description {
+    overflow-wrap: anywhere;
+    word-break: break-word;
+}
+/* Make auto-lists stack nicely */
+.spiritvale-passive-list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.25em;
+}
+/* Mobile: full width */
+@media (max-width: 480px) {
+    table.spiritvale-passive-infobox {
+        width: 100%;
+        max-width: 100%;
+    }
 }