Template:OOOInfoBoxTabber/styles.css: Difference between revisions

Line 1:

/* OOO Infobox — Tabber wrapper (full-width lines, neat wrap) */

/* OOO Infobox — Tabber wrapper (full-width lines, neat wrap)

Version: tight-pack flex (TemplateStyles-safe) */

/* Wrapper (default right) */

Line 10:

Line 11:

/* Alignment overrides */

.ooo-infobox-tabwrap--left { float:left; clear:left; margin:0 1em 1em 0; }

.ooo-infobox-tabwrap--left { float: left; clear: left; margin: 0 1em 1em 0; }

.ooo-infobox-tabwrap--none { float:none; margin:0 0 1em 0; }

.ooo-infobox-tabwrap--none { float: none; margin: 0 0 1em 0; }

.ooo-infobox-tabwrap--center { float:none; display:block; margin:0 auto 1em; }

.ooo-infobox-tabwrap--center { float: none; display: block; margin: 0 auto 1em; }

/* Tabs row: ~~full-width per line, tidy~~ wrap, no ~~baseline~~ */

/* Tabs row: wrap naturally with even gaps (no row stretching) */

.ooo-infobox-tabwrap .tabber__tabs {

display: flex;

flex-wrap: wrap;

~~column-~~gap: .~~25rem~~; /* ~~spacing between pills~~ */

gap: .35rem; /* both column + row gap */

~~row-gap: .25rem;~~

justify-content: flex-start; /* keep items packed left */

justify-content: ~~space~~-~~between~~; /* ~~stretch each line to full width~~ */

align-content: flex-start;

margin: 0 0 .25rem 0; ~~/* tighter spacing above the box */~~

margin: 0 0 .25rem 0;

width: 100%;

box-sizing: border-box;

border: 0;

background~~-image~~: none;

background: none;

}

/* ~~Filler flex item so~~ the ~~LAST line stays left-aligned (no awkward stretch)~~ */

/* Remove filler used by the old layout */

.ooo-infobox-tabwrap .tabber__tabs::after {

.ooo-infobox-tabwrap .tabber__tabs::after { content: none; }

content: ~~"";~~

~~flex: 999 0 0~~;

}

/* Pills */

.ooo-infobox-tabwrap .tabber__tab {

flex: 0 1 auto; /* natural width; ~~can~~ shrink ~~a bit if needed~~ */

flex: 0 0 auto; /* natural width; don't shrink */

min-width: 4ch; /* ~~was 6ch; smaller~~ so ~~5 short tabs fit a row~~ */

min-width: 4ch; /* small floor so tiny labels don't collapse */

white-space: ~~normal~~; /* ~~allow wrapping~~ on ~~long labels~~ */

white-space: nowrap; /* keep short labels on one line */

text-align: center;

line-height: 1.2;

Line 44:

Line 42:

font-weight: 700;

font-size: 90%;

padding: .25rem .~~5rem~~;

padding: .25rem .6rem; /* TemplateStyles-safe padding */

text-decoration: none;

Line 58:

Line 56:

background: var(--background-color-base, #ffffff);

color: var(--color-base, #202122);

margin-bottom: -1px;

margin-bottom: -1px; /* prevents 1px jump on activation */

}

@@ Line 1: / Line 1: @@
-/* OOO Infobox — Tabber wrapper (full-width lines, neat wrap) */
+/* OOO Infobox — Tabber wrapper (full-width lines, neat wrap)
+   Version: tight-pack flex (TemplateStyles-safe) */
 /* Wrapper (default right) */
@@ Line 10: / Line 11: @@
 /* Alignment overrides */
-.ooo-infobox-tabwrap--left   { float:left;  clear:left;  margin:0 1em 1em 0; }
+.ooo-infobox-tabwrap--left   { float: left;  clear: left;  margin: 0 1em 1em 0; }
-.ooo-infobox-tabwrap--none   { float:none;                margin:0 0 1em 0; }
+.ooo-infobox-tabwrap--none   { float: none;                margin: 0 0 1em 0; }
-.ooo-infobox-tabwrap--center { float:none; display:block; margin:0 auto 1em; }
+.ooo-infobox-tabwrap--center { float: none; display: block; margin: 0 auto 1em; }
-/* Tabs row: full-width per line, tidy wrap, no baseline */
+/* Tabs row: wrap naturally with even gaps (no row stretching) */
 .ooo-infobox-tabwrap .tabber__tabs {
    display: flex;
    flex-wrap: wrap;
-   column-gap: .25rem;           /* spacing between pills */
+   gap: .35rem;                  /* both column + row gap */
-  row-gap: .25rem;
+   justify-content: flex-start;  /* keep items packed left */
-   justify-content: space-between;  /* stretch each line to full width */
+  align-content: flex-start;
-   margin: 0 0 .25rem 0;         /* tighter spacing above the box */
+   margin: 0 0 .25rem 0;
    width: 100%;
    box-sizing: border-box;
    border: 0;
-   background-image: none;
+   background: none;
 }
-/* Filler flex item so the LAST line stays left-aligned (no awkward stretch) */
+/* Remove filler used by the old layout */
-.ooo-infobox-tabwrap .tabber__tabs::after {
+.ooo-infobox-tabwrap .tabber__tabs::after { content: none; }
-  content: "";
-  flex: 999 0 0;
-}
 /* Pills */
 .ooo-infobox-tabwrap .tabber__tab {
-   flex: 0 1 auto;               /* natural width; can shrink a bit if needed */
+   flex: 0 0 auto;               /* natural width; don't shrink */
-   min-width: 4ch;               /* was 6ch; smaller so 5 short tabs fit a row */
+   min-width: 4ch;               /* small floor so tiny labels don't collapse */
-   white-space: normal;          /* allow wrapping on long labels */
+   white-space: nowrap;          /* keep short labels on one line */
    text-align: center;
    line-height: 1.2;
@@ Line 44: / Line 42: @@
    font-weight: 700;
    font-size: 90%;
-   padding: .25rem .5rem;
+   padding: .25rem .6rem;        /* TemplateStyles-safe padding */
    text-decoration: none;
@@ Line 58: / Line 56: @@
    background: var(--background-color-base, #ffffff);
    color: var(--color-base, #202122);
-   margin-bottom: -1px;
+   margin-bottom: -1px;          /* prevents 1px jump on activation */
 }