MediaWiki:Common.css: Difference between revisions

← Older edit

@@ Line 141: / Line 141: @@
 }
-/* Hero band background (supports old main row + new split rows) */
+/* Hero band background (supports old main row + new split rows for BOTH) */
 table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > th,
 table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > td,
@@ Line 147: / Line 147: @@
 table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td,
 table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th,
-table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td {
+table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td,
+table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th,
+table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td {
    background: linear-gradient(135deg, #7a6fb0, #372b54);
    color: #fff;
@@ Line 259: / Line 261: @@
 }
-table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th {
+/* Passive split hero rows (match Skills) */
-   width: 42%;
+table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row {
-  white-space: normal;
+   border-bottom: none !important;
 }
-table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
+table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th {
-   width: 58%;
+  padding-bottom: 0.55em;
+}
+table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td {
+   padding-top: 0.55em;
+  padding-bottom: 0.55em;
 }
+/* Center + wrap passive body rows */
 table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > th,
 table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > td {
@@ Line 276: / Line 283: @@
 }
+/* Passive section headers centered */
 table.spiritvale-passive-infobox .spiritvale-infobox-section-header {
    text-align: center;
 }
+/* Passive list layout */
 .spiritvale-passive-list {
    display: flex;
@@ Line 287: / Line 296: @@
 }
+/* Remove Citizen wrapper borders/spacing around passive tables in lists */
 .spiritvale-passive-list .mw-table-wrapper,
 .spiritvale-passive-list .table-overflow,
@@ Line 296: / Line 306: @@
    padding: 0 !important;
    margin: 0 !important;
-}
-/* Mobile/portrait: keep passive hero row side-by-side */
-@media (max-width: 768px) {
-  body.skin-citizen table.spiritvale-passive-infobox {
-    width: 100%;
-    max-width: 100%;
-    display: table !important;
-  }
-  body.skin-citizen table.spiritvale-passive-infobox > tbody {
-    display: table-row-group !important;
-  }
-  body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main {
-    display: table-row !important;
-  }
-  body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th,
-  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;
-  }
 }
@@ Line 352: / Line 336: @@
 }
+/* Neutralize Citizen wrappers inside the skill collection */
 .sv-skill-collection .mw-table-wrapper,
 .sv-skill-collection .table-overflow,
@@ Line 363: / Line 348: @@
 }
+/* In list mode, each skill becomes a “row” inside the wrapper */
 .sv-skill-collection table.spiritvale-skill-infobox {
    width: 100%;
@@ Line 373: / Line 359: @@
 }
+/* Divider between skills */
 .sv-skill-collection > * + * {
    border-top: 1px solid rgba(148, 163, 184, 0.25);
 }
-/* Top band (nested-table) */
+/* ============================================================
+   Skills top band (nested-table)
+   ========================================================== */
 table.spiritvale-skill-infobox .sv-topband-cell {
    padding: 0 !important;
@@ Line 525: / Line 516: @@
      border-top: none;
    }
+}
+/* ============================================================
+   Light mode tuning (keeps your dark-mode look intact)
+   - 1) Lighter top band panels (Level Select + Type)
+   - 2) Stronger borders in top band + type grid
+   - 3) More apparent zebra striping
+   ========================================================== */
+/* Prefer MW theme classes, with a safe fallback to prefers-color-scheme */
+.mw-theme-light table.spiritvale-skill-infobox .sv-topband-cell,
+@media (prefers-color-scheme: light) {
+  table.spiritvale-skill-infobox .sv-topband-cell {
+    background: linear-gradient(
+deg,
+      rgba(255, 255, 255, 0.92),
+      rgba(226, 232, 240, 0.92)
+    ) !important;
+  }
+}
+/* Text + contrast tweaks inside the top band for light mode */
+.mw-theme-light table.spiritvale-skill-infobox .sv-level-title,
+.mw-theme-light table.spiritvale-skill-infobox .sv-level-label,
+.mw-theme-light table.spiritvale-skill-infobox .sv-type-value,
+.mw-theme-light table.spiritvale-skill-infobox .sv-type-label {
+  color: #111827;
+}
+/* Stronger divider between Level + Type panes (light mode) */
+.mw-theme-light table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td:first-child {
+  border-right: 1px solid rgba(55, 43, 84, 0.28);
+}
+/* Stronger type-grid cell borders (light mode) */
+.mw-theme-light table.spiritvale-skill-infobox .sv-type-chunk {
+  border-top: 1px solid rgba(55, 43, 84, 0.20);
+  border-left: 1px solid rgba(55, 43, 84, 0.20);
+}
+/* Slightly lighter label pill background in light mode (so it reads cleaner) */
+.mw-theme-light table.spiritvale-skill-infobox .sv-type-label {
+  background: linear-gradient(
+deg,
+    rgba(122, 111, 176, 0.22),
+    rgba(90, 78, 124, 0.12)
+  );
+}
+/* Mobile separator between stacked panes (light mode) */
+@media (max-width: 560px) {
+  .mw-theme-light table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td:first-child {
+    border-bottom: 1px solid rgba(55, 43, 84, 0.28);
+  }
+}
+/* More apparent zebra striping in light mode */
+.mw-theme-light table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > td,
+.mw-theme-light table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header),
+.mw-theme-light table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > td,
+.mw-theme-light table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header) {
+  background-color: rgba(148, 163, 184, 0.12);
+}
+/* Optional: slightly stronger row separators in light mode (keeps structure crisp) */
+.mw-theme-light table.spiritvale-skill-infobox > tbody > tr,
+.mw-theme-light table.spiritvale-passive-infobox > tbody > tr {
+  border-bottom: 1px solid rgba(55, 43, 84, 0.18);
 }