MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 316: / Line 316: @@
 /* ============================================================
     SpiritVale: Skills
-    - Fixed max width (desktop) + centered
+    - Fixed max width (no min width)
-    - Better spacing between skill cards in lists
+    - List-mode uses ONE wrapper panel (table-like)
-    - Top band layout (Level Select + Type side-by-side)
+    - Top band (Level Select + Type) centered + balanced
     ========================================================== */
-/* Desktop width knob for skills (slightly larger than passives) */
+/* Desktop width knob for skills */
-:root { --sv-skill-max-width: 640px; }
+:root { --sv-skill-width: 660px; } /* tweak as desired */
-/* Lock max width (no min width), centered */
+/* Single-skill (normal) */
 table.spiritvale-skill-infobox {
      width: 100%;
-     max-width: var(--sv-skill-max-width);
+     max-width: var(--sv-skill-width);
-     margin: 1.5em auto;
+     margin: 1.25em auto;
+    table-layout: fixed;
 }
-/* Skill list layout: more separation between cards */
+/* =========================
-.spiritvale-skill-list {
+   List-mode wrapper (ONE panel)
-     display: flex;
+   ========================= */
-     flex-direction: column;
-     align-items: center;
+.sv-skill-collection {
-     gap: 1.75em; /* spacing between skill cards */
+     width: 100%;
-     margin: 0 auto;
+     max-width: var(--sv-skill-width);
-}
+    margin: 1.25em auto;
+     border-radius: 12px;
+     overflow: hidden;
+    border: 1px solid rgba(55, 43, 84, 0.65);
+     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
-/* In lists, let the container gap control spacing */
+    /* in case something set this to flex elsewhere */
-.spiritvale-skill-list table.spiritvale-skill-infobox {
+     display: block !important;
-     margin: 0 auto;
 }
-/* Citizen/table wrappers: remove outlines/extra padding in lists */
+/* Neutralize Citizen/table wrappers so everything aligns flush */
-.spiritvale-skill-list .mw-table-wrapper,
+.sv-skill-collection .mw-table-wrapper,
-.spiritvale-skill-list .table-overflow,
+.sv-skill-collection .table-overflow,
-.spiritvale-skill-list .table-scroll,
+.sv-skill-collection .table-scroll,
-.spiritvale-skill-list .citizen-table {
+.sv-skill-collection .citizen-table {
      border: none !important;
      box-shadow: none !important;
@@ Line 357: / Line 362: @@
 }
-/* ------------------------------------------------------------
+/* Every skill table inside the wrapper becomes "row-like" */
-   Skill top band (Level Select + Type)
+.sv-skill-collection table.spiritvale-skill-infobox {
-   Matches current GameSkills markup:
+    width: 100%;
-   - td.sv-topband-cell > div.sv-skill-topband
+    max-width: 100%;
-     - div.sv-topband-left  (Level UI)
+    margin: 0 !important;
-     - div.sv-topband-right (Type list)
-    ------------------------------------------------------------ */
+    border: none !important;
+    box-shadow: none !important;
+    border-radius: 0 !important;
+}
+/* Divider between skills (works even if Citizen wraps each table) */
+.sv-skill-collection > * + * {
+    border-top: 1px solid rgba(148, 163, 184, 0.25);
+}
+/* =========================
+   Skill top band (Level + Type)
+    ========================= */
 table.spiritvale-skill-infobox .sv-topband-cell {
-     padding: 0 !important; /* inner grid handles spacing */
+     padding: 0 !important;
      background: linear-gradient(
 deg,
          rgba(90, 78, 124, 0.55),
          rgba(55, 43, 84, 0.55)
-     ) !important; /* override zebra striping */
+     ) !important; /* beat zebra */
 }
@@ Line 378: / Line 395: @@
      display: grid;
      grid-template-columns: 1fr 1fr;
-     gap: 0;
+     align-items: stretch;
 }
-/* Left + right padding + divider */
+/* Left/right panels */
 table.spiritvale-skill-infobox .sv-topband-left,
 table.spiritvale-skill-infobox .sv-topband-right {
      padding: 0.75em 0.9em;
-     vertical-align: top;
+     display: flex;
+    align-items: center;
+    justify-content: center;
 }
@@ Line 392: / Line 411: @@
 }
-/* Level UI */
+/* Level UI: center the whole block so it doesn't hug the left edge */
 table.spiritvale-skill-infobox .sv-level-ui {
+    width: 100%;
+    max-width: 280px;      /* keeps it centered + avoids wide empty right space */
+    margin: 0 auto;
      display: flex;
      flex-direction: column;
@@ Line 411: / Line 433: @@
 }
-/* Slider sizing (your JS inserts the <input type="range"> here) */
 table.spiritvale-skill-infobox .sv-level-slider input[type="range"] {
      width: 100%;
 }
-/* Type list (label left, value right) */
+/* Type list: center the list block within the right half */
 table.spiritvale-skill-infobox .sv-type-box {
+    width: 100%;
+    max-width: 320px;      /* centers it; reduces “dead space” on the right */
+    margin: 0 auto;
      display: flex;
      flex-direction: column;
-     gap: 0.25em;
+     gap: 0.55em;
 }
 table.spiritvale-skill-infobox .sv-type-row {
      display: grid;
-     grid-template-columns: max-content 1fr;
+     grid-template-columns: auto 1fr;
-     column-gap: 0.6em;
+     column-gap: 0.9em;
      align-items: baseline;
 }
 table.spiritvale-skill-infobox .sv-type-key {
-    text-align: left;
      font-weight: 700;
      white-space: nowrap;
@@ Line 437: / Line 461: @@
 table.spiritvale-skill-infobox .sv-type-val {
-    text-align: left;
      overflow-wrap: anywhere;
      word-break: break-word;
 }
-/* Small screens: stack Level + Type */
+/* Mobile: stack Level + Type */
 @media (max-width: 560px) {
      table.spiritvale-skill-infobox .sv-skill-topband {
@@ Line 451: / Line 474: @@
          border-right: none;
          border-bottom: 1px solid rgba(148, 163, 184, 0.25);
+    }
+    table.spiritvale-skill-infobox .sv-level-ui,
+    table.spiritvale-skill-infobox .sv-type-box {
+        max-width: 100%;
      }
 }