Template:OOOInfoBoxTabber/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
-/* OOO Infobox — Tabber wrapper (full-width wrapping tabs, minimal) */
+/* OOO Infobox — Tabber wrapper (full-width lines, neat wrap) */
 /* Wrapper (default right) */
@@ Line 14: / Line 14: @@
 .ooo-infobox-tabwrap--center { float:none; display:block; margin:0 auto 1em; }
-/* Tab strip: full-width justified rows + wrap; kill baseline */
+/* Tabs row: full-width per line, tidy wrap, no baseline */
 .ooo-infobox-tabwrap .tabber__tabs {
-   display: block;
+   display: flex;
+  flex-wrap: wrap;
+  column-gap: .25rem;           /* spacing between pills */
+  row-gap: .25rem;
+  justify-content: space-between;  /* stretch each line to full width */
+  margin: 0 0 .25rem 0;         /* tighter spacing above the box */
    width: 100%;
    box-sizing: border-box;
-  margin: 0 0 .5rem 0;
    border: 0;
    background-image: none;
-  text-align: justify;          /* stretch each line to full width */
-  text-align-last: left;        /* last line stays left-aligned */
 }
-/* Force justification on each line */
+/* Filler flex item so the LAST line stays left-aligned (no awkward stretch) */
 .ooo-infobox-tabwrap .tabber__tabs::after {
    content: "";
-   display: inline-block;
+   flex: 999 0 0;
-  width: 100%;
-  height: 0;
 }
-/* Tabs: inline pills; allow label wrapping; no explicit margins */
+/* Pills */
 .ooo-infobox-tabwrap .tabber__tab {
-   display: inline-block;
+   flex: 0 1 auto;               /* natural width; can shrink a bit if needed */
-  vertical-align: top;
+   min-width: 4ch;               /* was 6ch; smaller so 5 short tabs fit a row */
-   min-width: 6ch;
+   white-space: normal;          /* allow wrapping on long labels */
-   white-space: normal;
    text-align: center;
    line-height: 1.2;
@@ Line 56: / Line 54: @@
 }
-/* Active tab: sit flush with panel */
+/* Active pill sits flush with the panel */
 .ooo-infobox-tabwrap .tabber__tab--active {
    background: var(--background-color-base, #ffffff);
@@ Line 63: / Line 61: @@
 }
-/* Panels: flush with infobox */
+/* Panels */
 .ooo-infobox-tabwrap .tabber__panel {
    padding: 0;
@@ Line 70: / Line 68: @@
 }
-/* Mobile: unfloat and full width */
+/* Mobile */
 @media (max-width: 640px) {
    .ooo-infobox-tabwrap,