Template:OOOInfoBoxTabber/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
-/* OOO Infobox — Tabber wrapper styles
+/* Template:OOOInfoBoxTabber/styles.css
-    Modes:
+    Only layout/sizing that TemplateStyles accepts. No CSS custom prop definitions here. */
-   - default: wrap (tight-pack flex)
-   - opt-in: add class .ooo-infobox-tabwrap--scroll for horizontal scroll
-*/
 /* Wrapper (default right) */
@@ Line 9: / Line 6: @@
    float: right;
    clear: right;
-   width: 300px;                 /* keep in sync with .ooo-infobox default */
+   width: 300px;                 /* keep in sync with {{OOOInfoBox}} default if needed */
    margin: 0 0 1em 1em;
 }
@@ Line 18: / Line 15: @@
 .ooo-infobox-tabwrap--center { float: none; display: block; margin: 0 auto 1em; }
-/* =========================
+/* ===== Wrap mode (default) ===== */
-   WRAP MODE (default)
-   ========================= */
 .ooo-infobox-tabwrap .tabber__tabs {
    display: flex;
    flex-wrap: wrap;
-   gap: .35rem;                  /* both column + row gap */
+   gap: .35rem;
-   justify-content: flex-start;  /* pack left, no stretching */
+   justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-end;
@@ Line 34: / Line 29: @@
    background: none;
 }
 .ooo-infobox-tabwrap .tabber__tabs::after { content: none; }
-/* Pills (shared base styles) */
 .ooo-infobox-tabwrap .tabber__tab {
-   flex: 0 0 auto;               /* natural width; don't shrink */
+   flex: 0 0 auto;
-   min-width: 3.5ch;             /* floor so tiny labels don't collapse */
+   min-width: 3.5ch;
    white-space: nowrap;
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    font-size: 90%;
    padding: .3rem .55rem;
    text-decoration: none;
    background: var(--background-color-neutral, #f5f5f5);
    color: var(--color-base, #202122);
@@ Line 57: / Line 48: @@
 }
-/* Hover + focus */
 .ooo-infobox-tabwrap .tabber__tab:hover { background: rgba(255,255,255,.06); }
 .ooo-infobox-tabwrap .tabber__tab:focus {
@@ Line 65: / Line 55: @@
 }
-/* Active tab sits flush with the panel */
 .ooo-infobox-tabwrap .tabber__tab--active {
    cursor: default;
@@ Line 74: / Line 63: @@
 }
-/* Panels */
 .ooo-infobox-tabwrap .tabber__panel {
    padding: 0;
@@ Line 81: / Line 69: @@
 }
-/* =========================
+/* ===== Scroll mode (opt-in) ===== */
-   SCROLL MODE (opt-in)
-   Add .ooo-infobox-tabwrap--scroll via |mode=scroll
-   ========================= */
 .ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll { position: relative; }
-/* Make the tab row horizontally scrollable */
 .ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tabs {
    display: flex;
@@ Line 94: / Line 78: @@
    overflow-x: auto;
    overflow-y: hidden;
-   padding: 0 .75rem;            /* room for edge fades / arrows */
+   padding: 0 .75rem;
    margin: 0 0 .25rem 0;
    border: 0;
@@ Line 100: / Line 84: @@
 }
-/* Simple edge fades using overlays (TemplateStyles-safe) */
+/* Simple edge fades (keep colors neutral; skins may override via vars) */
 .ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::before,
 .ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::after {
    content: "";
    position: absolute;
-   top: -2px;                    /* align with top of pills */
+   top: -2px;
-   height: 28px;                 /* approximate pill height */
+   height: 28px;
    width: 10px;
 }
@@ Line 118: / Line 102: @@
 }
-/* Tabs inside the scroller */
+.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tab { flex: 0 0 auto; }
-.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tab {
-  flex: 0 0 auto;               /* fixed-size items; no snapping props */
-}
 /* Mobile */