Template:OOOInfoBoxTabber/styles.css: Difference between revisions

← Older edit

@@ Line 1: / Line 1: @@
-/* OOO Infobox – Tabber wrapper (TemplateStyles safe)
+/* Template:OOOInfoBoxTabber/styles.css
-    - Default width matches .ooo-infobox (300px)
+    Layout-only styles safe for TemplateStyles. */
-   - Right-aligned by default; left/none/center overrides
-   - Removes tab-strip separator line in all implementations
-*/
 /* Wrapper (default right) */
@@ Line 9: / Line 6: @@
    float: right;
    clear: right;
-   width: 300px;                 /* keep in sync with .ooo-infobox */
+   width: 300px;                 /* match {{OOOInfoBox}} default if needed */
    margin: 0 0 1em 1em;
 }
-/* Alignment overrides (added by module) */
+/* Alignment overrides */
 .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; }
-/* Tab strip */
+/* ===== Wrap mode (default) ===== */
 .ooo-infobox-tabwrap .tabber__tabs {
-   display: block;
+   display: flex;
-   margin: 0 0 .5rem 0;
+  flex-wrap: wrap;
+  gap: .35rem;
+  justify-content: flex-start;
+  align-content: flex-start;
+  align-items: flex-end;
+   margin: 0;                    /* snug against the panel */
    width: 100%;
    box-sizing: border-box;
-  /* kill the baseline */
    border: 0;
-   background-image: none;
+   background: none;
 }
-/* Some skins/extensions draw the separator via pseudo-elements */
+/* Remove TabberNeue's default separator pseudo-element */
-.ooo-infobox-tabwrap .tabber__tabs::before,
+.ooo-infobox-tabwrap .tabber__tabs::after { content: none; }
-.ooo-infobox-tabwrap .tabber__tabs::after {
-  content: none;
-  display: none;
-  border: 0;
-  height: 0;
-}
-/* Some draw an actual <hr> as a separator */
+/* Pills */
-.ooo-infobox-tabwrap hr {
-  display: none;
-  border: 0;
-  height: 0;
-  margin: 0;
-  padding: 0;
-}
-/* Individual tabs */
 .ooo-infobox-tabwrap .tabber__tab {
-   display: inline-block;
+   flex: 0 0 auto;
+  min-width: 3.5ch;
+  white-space: nowrap;
+  text-align: center;
+  line-height: 1.2;
    font-weight: 700;
    font-size: 90%;
-  line-height: 1.2;
+   padding: .3rem .55rem;
-  white-space: normal;          /* wrap long labels */
-   padding: .25rem .5rem;
-  margin-right: .25rem;
    text-decoration: none;
    background: var(--background-color-neutral, #f5f5f5);
    color: var(--color-base, #202122);
-   border: 1px solid #a2a9b1;    /* literal to avoid TemplateStyles color warnings */
+   border: 1px solid #a2a9b1;
-   border-bottom: none;          /* blend into panel */
+   border-bottom: none;
-   border-radius: 12px 12px 0 0; /* match infobox radius if rounded */
+   border-radius: 12px 12px 0 0;
+}
+.ooo-infobox-tabwrap .tabber__tab:hover { background: rgba(255,255,255,.06); }
+.ooo-infobox-tabwrap .tabber__tab:focus {
+  outline: 2px solid #cea141;
+  outline-offset: 2px;
+  border-radius: 12px;
 }
-/* Active tab sits flush with content below (hides any seam) */
+/* 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 */
 }
-/* Panels: flush with infobox; no borders/padding */
+/* Panels */
 .ooo-infobox-tabwrap .tabber__panel {
    padding: 0;
@@ Line 80: / Line 74: @@
 }
-/* Mobile: unfloat, full width */
+/* ===== Scroll mode (opt-in via .ooo-infobox-tabwrap--scroll) ===== */
+.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll { position: relative; }
+.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tabs {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: .35rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 0 .75rem;            /* room for arrows/edge fades */
+  margin: 0;
+  border: 0;
+  background: none;
+}
+/* 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 {
+  content: "";
+  position: absolute;
+  top: -2px;
+  height: 28px;                 /* approx pill height */
+  width: 10px;
+}
+.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::before {
+  left: 0;
+  background: linear-gradient(to right, var(--background-color-base, #1f1f1f), transparent);
+}
+.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::after {
+  right: 0;
+  background: linear-gradient(to left, var(--background-color-base, #1f1f1f), transparent);
+}
+/* Tabs inside scroller stay fixed-size */
+.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tab { flex: 0 0 auto; }
+/* Mobile */
 @media (max-width: 640px) {
    .ooo-infobox-tabwrap,