MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 127: / Line 127: @@
    --sv-modules-band-b: var(--sv-module-box-b);
-   /* NEW: pill “navy” treatment */
+   /* Pills */
    --sv-pill-a: rgba(120, 175, 255, 0.92);
    --sv-pill-b: rgba(70, 140, 255, 0.88);
-}
+  /* Text tuning */
    --sv-text-soft: rgba(255, 255, 255, 0.92);
    --sv-text-outline:
@@ Line 138: / Line 138: @@
 px 0 0 rgba(0,0,0,0.55),
      -1px 0 0 rgba(0,0,0,0.55);
+}
 table.spiritvale-skill-infobox,
@@ Line 243: / Line 243: @@
 /* ------------------------------------------------------------
     SKILLS: Hero Bar (2-slot top bar)
-    - Herobar 1: icon + title (left)
+    - Desktop: 2 columns (two real cells)
-    - Herobar 2: reserved (right)
+    - Mobile: 1 column (module 2 stacks under module 1)
     --------------------------------------------------------- */
 table.spiritvale-skill-infobox .hero-bar-grid {
    width: 100%;
-   display: flex;
+   display: grid;
+  grid-template-columns: 1fr 1fr;
    align-items: center;
-  justify-content: space-between;
    gap: 0.9em;
-  text-align: left; /* override table header centering */
 }
 table.spiritvale-skill-infobox .hero-bar-module {
+  min-width: 0;
    display: flex;
    align-items: center;
-}
+   justify-content: center; /* center inside its own herobar cell */
+   text-align: center;
-table.spiritvale-skill-infobox .hero-bar-module-1 {
-  flex: 1 1 auto;
-   justify-content: flex-start;
-}
-table.spiritvale-skill-infobox .hero-bar-module-2 {
-  flex: 0 0 auto;
-  justify-content: flex-end;
-   text-align: right;
 }
@@ Line 274: / Line 265: @@
    display: flex;
    align-items: center;
-   justify-content: flex-start;
+   justify-content: center;
    gap: 0.65em;
 }
-table.spiritvale-skill-infobox .sv-herobar-icon {
+table.spiritvale-skill-infobox .sv-herobar-icon { line-height: 0; }
-  line-height: 0;
+table.spiritvale-skill-infobox .sv-herobar-icon img { vertical-align: middle; }
-}
-table.spiritvale-skill-infobox .sv-herobar-icon img {
-  vertical-align: middle;
-}
 /* ------------------------------------------------------------
@@ Line 362: / Line 348: @@
 /* Desktop grid borders */
-table.spiritvale-skill-infobox .hero-module:nth-child(-n + 2) {
+table.spiritvale-skill-infobox .hero-module:nth-child(-n + 2) { border-top: none; }
-  border-top: none;
+table.spiritvale-skill-infobox .hero-module:nth-child(odd) { border-left: none; }
-}
-table.spiritvale-skill-infobox .hero-module:nth-child(odd) {
-  border-left: none;
-}
 table.spiritvale-skill-infobox .hero-module-empty .hero-module-body {
@@ Line 374: / Line 356: @@
 /* ------------------------------------------------------------
-    Text tuning: soften white + subtle outline (HERO MODULES ONLY)
+    Centering: each tile centers its own contents
     --------------------------------------------------------- */
-:root {
+table.spiritvale-skill-infobox .hero-module .hero-module-body {
-  --sv-text-soft: rgba(255, 255, 255, 0.92);
+  width: 100%;
-   --sv-text-outline: 0 1px 0 rgba(0,0,0,0.55),
+  height: 100%;
--1px 0 rgba(0,0,0,0.55),
+  display: flex;
-px 0 0 rgba(0,0,0,0.55),
+   align-items: center;
-                     -1px 0 0 rgba(0,0,0,0.55);
+  justify-content: center;
+  text-align: center;
 }
-/* Text tuning: soften white + subtle outline (hero tiles + herobar) */
+/* ------------------------------------------------------------
+   Text tuning: soften white + subtle outline (hero tiles + herobar)
+   --------------------------------------------------------- */
 table.spiritvale-skill-infobox .hero-module,
 table.spiritvale-skill-infobox .hero-module *,
@@ Line 393: / Line 378: @@
 }
-/* Optional: also soften/outline hero title + description text */
 table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row,
 table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row {
@@ Line 423: / Line 407: @@
 table.spiritvale-skill-infobox .module-level-selector .sv-level-ui-single .sv-level-slider-single {
    min-height: 0.45em;
-}
-table.spiritvale-skill-infobox .hero-module.module-level-selector {
-  display: flex;
-}
-table.spiritvale-skill-infobox .hero-module.module-level-selector .hero-module-body {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
@@ Line 440: / Line 414: @@
 table.spiritvale-skill-infobox .hero-module.module-skill-type .hero-module-body {
    height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
    width: 100%;
 }
@@ Line 480: / Line 451: @@
    line-height: 1.15;
-  /* NAVY */
    background: linear-gradient(180deg, var(--sv-pill-a), var(--sv-pill-b));
 }
@@ Line 500: / Line 470: @@
 table.spiritvale-skill-infobox .hero-module.skill-source-module .hero-module-body {
    height: 100%;
-   display: flex;
+   width: 100%;
-  align-items: center;
-  justify-content: center;
 }
@@ Line 554: / Line 522: @@
    line-height: 1.15;
-  /* NAVY */
    background: linear-gradient(180deg, var(--sv-pill-a), var(--sv-pill-b));
 }
@@ Line 590: / Line 557: @@
 table.spiritvale-skill-infobox .hero-module.module-quick-stats .hero-module-body {
    height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
    width: 100%;
 }
@@ Line 630: / Line 594: @@
    line-height: 1.15;
-  /* NAVY */
    background: linear-gradient(180deg, var(--sv-pill-a), var(--sv-pill-b));
 }
@@ Line 648: / Line 611: @@
     Mobile behavior
     - KEEP the hero modules as a 2x2 grid (four squares)
-    - Keep padding slightly roomier
+    - Herobar 2 stacks under herobar 1 (above description)
     - Pills shrink in WIDTH (not font size)
     - Module 4 stays 2 columns
     --------------------------------------------------------- */
 @media (max-width: 560px) {
-   /* Hero bar can wrap naturally if herobar2 gains content later */
+   /* Herobar: stack slot 2 under slot 1 (still inside title bar) */
    table.spiritvale-skill-infobox .hero-bar-grid {
-     flex-wrap: wrap;
+     grid-template-columns: 1fr;
+    row-gap: 0.45em;
    }