MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 199: / Line 199: @@
 /* ============================================================
-    SpiritVale: Passives (tooltip-sized, wrapped, centered)
+    SpiritVale: Passives (single source of truth)
-    Put this at the BOTTOM so it overrides the generic infobox rules.
+   - Fixed, consistent desktop width
+   - Centered body cells
+    - Mobile-safe hero row (stacks)
     ========================================================== */
-/* Adjust this one value until it matches your “Wand Mastery” feel */
 :root {
-     --sv-passive-max-width: 520px;
+    /* One knob: desktop tooltip width for ALL passives */
+     --sv-passive-width: 360px;
 }
-/* Lock passive box footprint (but still mobile-friendly) */
+/* Fixed tooltip footprint on desktop, still safe if container is narrower */
 table.spiritvale-passive-infobox {
-     width: min(var(--sv-passive-max-width), 100%);
+     width: var(--sv-passive-width);
-     max-width: var(--sv-passive-max-width);
+     max-width: 100%;
      margin: 1em auto;
-     /* Helps it feel like a tooltip instead of a full-width panel */
+     /* Reset any earlier experiments */
-     display: inline-table;
+     display: table;
+    table-layout: fixed;
 }
-/* Center + wrap ALL non-hero rows (hero row stays “perfect”) */
+/* Center + wrap all NON-hero rows (hero row stays as your “perfect” styling) */
 table.spiritvale-passive-infobox tbody tr:not(.spiritvale-infobox-main) th,
 table.spiritvale-passive-infobox tbody tr:not(.spiritvale-infobox-main) td {
@@ Line 224: / Line 227: @@
      vertical-align: middle;
-     white-space: normal;          /* overrides your nowrap label rule */
+     white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
 }
-/* Ensure label column can wrap too (your generic CSS forces nowrap) */
+/* Allow labels to wrap too (generic CSS makes labels nowrap) */
 table.spiritvale-passive-infobox tbody tr:not(.spiritvale-infobox-main)
 th:not(.spiritvale-infobox-section-header) {
@@ Line 240: / Line 243: @@
 }
-/* Extra safety for long descriptions/effects */
+/* Prevent description width rules from pushing layout weirdly */
 table.spiritvale-passive-infobox .spiritvale-infobox-description {
+    max-width: 100%;
      overflow-wrap: anywhere;
      word-break: break-word;
@@ Line 254: / Line 258: @@
 }
-/* Mobile: full width */
+/* Remove “mystery wrapper outline” around some passives in lists */
-@media (max-width: 480px) {
-    table.spiritvale-passive-infobox {
-        width: 100%;
-        max-width: 100%;
-    }
-}
-/* ============================================================
-   SpiritVale: Passives – consistent tooltip width + no wrapper outline
-   (Place at VERY BOTTOM so it wins)
-   ========================================================== */
-:root {
-    /* Pick your final tooltip width here */
-    --sv-passive-width: 380px;
-}
-/* Exact same width for every passive box */
-table.spiritvale-passive-infobox {
-    width: var(--sv-passive-width);
-    max-width: 100%;
-    margin: 1em auto;
-    /* Keep layout stable and wrapping predictable */
-    table-layout: fixed;
-}
-/* If the skin wraps tables in a “scroll/overflow” container,
-   remove the container outline ONLY for passive lists. */
 .spiritvale-passive-list .mw-table-wrapper,
 .spiritvale-passive-list .table-overflow,
@@ Line 295: / Line 270: @@
 }
-/* Keep your “center everything” rule for body rows */
+/* Mobile: go full width AND stack the hero row so nothing goes off-screen */
-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;
-}
-/* Mobile: still consistent (all are full width on small screens) */
 @media (max-width: 480px) {
      table.spiritvale-passive-infobox {
@@ Line 312: / Line 276: @@
          max-width: 100%;
      }
-}
-/* ============================================================
+    /* Stack icon+name over description */
-   Passives: mobile hero-row tweak (desktop unchanged)
+    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;
+    }
-@media (max-width: 480px) {
+    /* Slightly smaller icon on phones */
-  /* Give the left (icon+name) cell more space on phones */
+    table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th .image img {
-  table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th {
+        width: 64px !important;
-    width: 46%;
+        height: auto !important;
-    min-width: 150px;          /* prevents icon/name getting squeezed offscreen */
+    }
-  }
-  table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
+     /* Ensure title wraps cleanly */
-    width: 54%;
+    table.spiritvale-passive-infobox .spiritvale-infobox-title {
-  }
+        white-space: normal;
+        overflow-wrap: anywhere;
-  /* Slightly smaller icon so it fits comfortably */
+        word-break: break-word;
-  table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th .image img {
+    }
-    width: 64px !important;
-     height: auto !important;
-  }
-  /* Ensure the title can wrap instead of forcing horizontal overflow */
-  table.spiritvale-passive-infobox .spiritvale-infobox-title {
-    white-space: normal;
-    overflow-wrap: anywhere;
-    word-break: break-word;
-  }
 }