Template:OOOInfoBoxTabber/styles.css: Difference between revisions

← Older edit

@@ Line 1: / Line 1: @@
 /* Template:OOOInfoBoxTabber/styles.css
-    Only layout/sizing that TemplateStyles accepts. No CSS custom prop definitions here. */
+    Layout-only styles safe for TemplateStyles. */
 /* Wrapper (default right) */
@@ Line 6: / Line 6: @@
    float: right;
    clear: right;
-   width: 300px;                 /* keep in sync with {{OOOInfoBox}} default if needed */
+   width: 300px;                 /* match {{OOOInfoBox}} default if needed */
    margin: 0 0 1em 1em;
 }
@@ Line 23: / Line 23: @@
    align-content: flex-start;
    align-items: flex-end;
-   margin: 0 0 .25rem 0;
+   margin: 0;                    /* snug against the panel */
    width: 100%;
    box-sizing: border-box;
@@ Line 29: / Line 29: @@
    background: none;
 }
+/* Remove TabberNeue's default separator pseudo-element */
 .ooo-infobox-tabwrap .tabber__tabs::after { content: none; }
+/* Pills */
 .ooo-infobox-tabwrap .tabber__tab {
    flex: 0 0 auto;
@@ Line 41: / Line 44: @@
    padding: .3rem .55rem;
    text-decoration: none;
    background: var(--background-color-neutral, #f5f5f5);
    color: var(--color-base, #202122);
@@ Line 55: / Line 59: @@
 }
+/* Active tab (no inset line, no negative margin) */
 .ooo-infobox-tabwrap .tabber__tab--active {
    cursor: default;
    background: var(--background-color-base, #ffffff);
    color: var(--color-base, #202122);
-  margin-bottom: -1px;
+   box-shadow: none;             /* no seam */
-   box-shadow: inset 0 -1px 0 var(--background-color-base, #ffffff);
 }
+/* Panels */
 .ooo-infobox-tabwrap .tabber__panel {
    padding: 0;
@@ Line 69: / Line 74: @@
 }
-/* ===== Scroll mode (opt-in) ===== */
+/* ===== Scroll mode (opt-in via .ooo-infobox-tabwrap--scroll) ===== */
 .ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll { position: relative; }
@@ Line 78: / Line 83: @@
    overflow-x: auto;
    overflow-y: hidden;
-   padding: 0 .75rem;
+   padding: 0 .75rem;            /* room for arrows/edge fades */
-   margin: 0 0 .25rem 0;
+   margin: 0;
    border: 0;
    background: none;
 }
-/* Simple edge fades (keep colors neutral; skins may override via vars) */
+/* Optional edge fades (comment out if you don't want them) */
 .ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::before,
 .ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::after {
@@ Line 90: / Line 95: @@
    position: absolute;
    top: -2px;
-   height: 28px;
+   height: 28px;                 /* approx pill height */
    width: 10px;
 }
@@ Line 102: / Line 107: @@
 }
+/* Tabs inside scroller stay fixed-size */
 .ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tab { flex: 0 0 auto; }