MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 111: / Line 111: @@
 /* Body rows (labels + values) */
-table.spiritvale-skill-infobox tbody tr,
+table.spiritvale-skill-infobox > tbody > tr,
-table.spiritvale-passive-infobox tbody tr {
+table.spiritvale-passive-infobox > tbody > tr {
      border-bottom: 1px solid rgba(148, 163, 184, 0.4);
 }
-table.spiritvale-skill-infobox tbody tr:last-child,
+table.spiritvale-skill-infobox > tbody > tr:last-child,
-table.spiritvale-passive-infobox tbody tr:last-child {
+table.spiritvale-passive-infobox > tbody > tr:last-child {
      border-bottom: none;
 }
 /* Default label cells (exclude hero row so names never clip) */
-table.spiritvale-skill-infobox tbody tr:not(.spiritvale-infobox-main) th:not(.spiritvale-infobox-section-header),
+/* NOTE: direct-child selectors prevent nested tables (top-band/type tables) from inheriting these rules */
-table.spiritvale-passive-infobox tbody tr:not(.spiritvale-infobox-main) 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:not(.spiritvale-infobox-main) > th:not(.spiritvale-infobox-section-header) {
      width: 26%;
      padding: 0.45em 0.85em;
@@ Line 131: / Line 132: @@
 }
-/* Default value cells */
+/* Default value cells (direct children only) */
-table.spiritvale-skill-infobox tbody tr td,
+table.spiritvale-skill-infobox > tbody > tr > td,
-table.spiritvale-passive-infobox tbody tr td {
+table.spiritvale-passive-infobox > tbody > tr > td {
      padding: 0.45em 0.85em;
      text-align: left;
 }
-/* Zebra striping for readability */
+/* Zebra striping for readability (direct children only) */
-table.spiritvale-skill-infobox tbody tr:nth-child(odd) td,
+table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > td,
-table.spiritvale-skill-infobox tbody tr:nth-child(odd) th:not(.spiritvale-infobox-section-header),
+table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header),
-table.spiritvale-passive-infobox tbody tr:nth-child(odd) td,
+table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > td,
-table.spiritvale-passive-infobox tbody tr:nth-child(odd) th:not(.spiritvale-infobox-section-header) {
+table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header) {
      background-color: rgba(148, 163, 184, 0.05);
 }
@@ Line 184: / Line 185: @@
      max-width: 32em;
      margin: 0 auto;
+}
+/* ============================================================
+   SpiritVale: Skill top band (Level Select + Type side-by-side)
+   (Used by the new 2-column header row markup/classes in GameSkills)
+   ========================================================== */
+table.spiritvale-skill-infobox .sv-topband-cell {
+    padding: 0 !important; /* inner table handles spacing */
+    background: linear-gradient(135deg, rgba(90, 78, 124, 0.55), rgba(55, 43, 84, 0.55)) !important; /* beat zebra */
+}
+table.spiritvale-skill-infobox .sv-topband-table {
+    width: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td {
+    width: 50%;
+    vertical-align: top;
+    padding: 0.75em 0.9em;
+}
+table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td:first-child {
+    border-right: 1px solid rgba(148, 163, 184, 0.25);
+}
+/* Level UI */
+table.spiritvale-skill-infobox .sv-level-ui {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35em;
+}
+table.spiritvale-skill-infobox .sv-level-title {
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-size: 0.85em;
+    opacity: 0.95;
+}
+table.spiritvale-skill-infobox .sv-level-label {
+    font-weight: 600;
+}
+table.spiritvale-skill-infobox .sv-level-slider input[type="range"] {
+    width: 100%;
+}
+/* Type list mini-table */
+table.spiritvale-skill-infobox .sv-type-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+table.spiritvale-skill-infobox .sv-type-table th,
+table.spiritvale-skill-infobox .sv-type-table td {
+    padding: 0.2em 0;
+    background: transparent !important; /* ensure zebra never leaks in */
+}
+table.spiritvale-skill-infobox .sv-type-table th {
+    text-align: left;
+    font-weight: 700;
+    white-space: nowrap;
+    padding-right: 0.6em;
+}
+table.spiritvale-skill-infobox .sv-type-table td {
+    text-align: left;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+}
+/* Optional: on small screens, stack Level + Type */
+@media (max-width: 560px) {
+    table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td {
+        display: block;
+        width: 100%;
+        border-right: none !important;
+    }
 }
@@ Line 199: / Line 283: @@
 table.spiritvale-passive-infobox {
      width: var(--sv-passive-width);
-     max-width: var(--sv-passive-width); /* <-- important: makes desktop actually widen */
+     max-width: var(--sv-passive-width);
      margin: 1em auto;
      table-layout: fixed;
@@ Line 214: / Line 298: @@
 /* 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) > th,
-table.spiritvale-passive-infobox tbody tr:not(.spiritvale-infobox-main) td {
+table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > td {
      text-align: center;
      vertical-align: middle;
@@ Line 224: / Line 308: @@
 /* Allow label column to wrap (generic CSS defaults it to nowrap) */
-table.spiritvale-passive-infobox tbody tr:not(.spiritvale-infobox-main)
+table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main)
-th:not(.spiritvale-infobox-section-header) {
+> th:not(.spiritvale-infobox-section-header) {
      white-space: normal;
 }