MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 90: / Line 90: @@
      font-size: 0.95em;
 }
-/* Optional: float single infoboxes on wide screens.
-   (Lists of many boxes will still stack nicely.) */
-/*
-@media (min-width: 960px) {
-    table.spiritvale-skill-infobox,
-    table.spiritvale-passive-infobox {
-        float: right;
-        margin: 0 0 1.5em 1.5em;
-    }
-}
-*/
 /* Top "hero" row: icon+name on left, description on right */
@@ Line 133: / Line 121: @@
 }
-/* Default label cells */
+/* Default label cells (exclude hero row so names never clip) */
-table.spiritvale-skill-infobox tbody tr th:not(.spiritvale-infobox-section-header),
+table.spiritvale-skill-infobox tbody tr:not(.spiritvale-infobox-main) th:not(.spiritvale-infobox-section-header),
-table.spiritvale-passive-infobox tbody tr th:not(.spiritvale-infobox-section-header) {
+table.spiritvale-passive-infobox tbody tr:not(.spiritvale-infobox-main) th:not(.spiritvale-infobox-section-header) {
      width: 26%;
      padding: 0.45em 0.85em;
@@ Line 199: / Line 187: @@
 /* ============================================================
-    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 hero stays side-by-side (no stacking)
     ========================================================== */
-/* Adjust this one value until it matches your “Wand Mastery” feel */
+/* Desktop tooltip width knob */
-:root {
+:root { --sv-passive-width: 540px; }
-    --sv-passive-max-width: 520px;
-}
-/* Lock passive box footprint (but still mobile-friendly) */
+/* Consistent tooltip footprint for ALL passives (desktop) */
 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: var(--sv-passive-width); /* <-- important: makes desktop actually widen */
      margin: 1em auto;
+    table-layout: fixed;
+}
-    /* Helps it feel like a tooltip instead of a full-width panel */
+/* Keep hero row healthy: allow wrapping in the hero title area */
-     display: inline-table;
+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 (hero row stays “perfect”) */
+/* 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;
-     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) */
+/* Allow label column to wrap (generic CSS defaults it to nowrap) */
 table.spiritvale-passive-infobox tbody tr:not(.spiritvale-infobox-main)
 th:not(.spiritvale-infobox-section-header) {
@@ Line 240: / Line 234: @@
 }
-/* Extra safety for long descriptions/effects */
+/* Prevent description max-width from pushing weird layout at small widths */
 table.spiritvale-passive-infobox .spiritvale-infobox-description {
+    max-width: 100%;
      overflow-wrap: anywhere;
      word-break: break-word;
 }
-/* Make auto-lists stack nicely */
+/* Passive list layout */
 .spiritvale-passive-list {
      display: flex;
@@ Line 254: / Line 249: @@
 }
-/* Mobile: full width */
+/* Citizen/table wrappers: remove the “mystery 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 261: @@
 }
-/* Keep your “center everything” rule for body rows */
+/* Mobile / portrait / small tablets (Citizen): keep hero row side-by-side */
-table.spiritvale-passive-infobox tbody tr:not(.spiritvale-infobox-main) th,
+@media (max-width: 768px) {
-table.spiritvale-passive-infobox tbody tr:not(.spiritvale-infobox-main) td {
+    body.skin-citizen table.spiritvale-passive-infobox {
-    text-align: center;
+        width: 100%;
-    vertical-align: middle;
+        max-width: 100%;
+        display: table !important;
+    }
-     white-space: normal;
+     body.skin-citizen table.spiritvale-passive-infobox > tbody {
-    overflow-wrap: anywhere;
+        display: table-row-group !important;
-    word-break: break-word;
+    }
-}
-/* Mobile: still consistent (all are full width on small screens) */
+    body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main {
-@media (max-width: 480px) {
+         display: table-row !important;
-    table.spiritvale-passive-infobox {
-         width: 100%;
-        max-width: 100%;
      }
-}
-/* ============================================================
+    body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th,
-   Passives: mobile hero-row tweak (desktop unchanged)
+    body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
-   ========================================================== */
+        display: table-cell !important;
+        float: none !important;
+        box-sizing: border-box;
+        vertical-align: middle;
+        text-align: center;
+        white-space: normal;
+        overflow-wrap: anywhere;
+        word-break: break-word;
+    }
-@media (max-width: 480px) {
+    body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th {
-  /* Give the left (icon+name) cell more space on phones */
+        width: 46% !important;
-  table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th {
+        padding: 0.75em 0.75em;
-    width: 46%;
+    }
-    min-width: 150px;          /* prevents icon/name getting squeezed offscreen */
-  }
-  table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
+    body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
-    width: 54%;
+        width: 54% !important;
-  }
+        padding: 0.75em 0.75em;
+    }
-  /* Slightly smaller icon so it fits comfortably */
+    body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th .image img {
-  table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th .image img {
+        width: 64px !important;
-    width: 64px !important;
+        height: auto !important;
-    height: auto !important;
+    }
-  }
-  /* Ensure the title can wrap instead of forcing horizontal overflow */
+    body.skin-citizen table.spiritvale-passive-infobox .spiritvale-infobox-title,
-  table.spiritvale-passive-infobox .spiritvale-infobox-title {
+    body.skin-citizen table.spiritvale-passive-infobox .spiritvale-infobox-description {
-    white-space: normal;
+        white-space: normal;
-    overflow-wrap: anywhere;
+        overflow-wrap: anywhere;
-    word-break: break-word;
+        word-break: break-word;
-  }
+    }
 }