Template:OOOInfoBoxTabber/styles.css: Difference between revisions

← Older edit

@@ Line 1: / Line 1: @@
-/* Keep the tab set where the infobox belongs (right, fixed width) */
+/* Template:OOOInfoBoxTabber/styles.css
-.ooo-infobox-tabwrap { float:right; clear:right; margin:0 0 1em 1em; }
+   Layout-only styles safe for TemplateStyles. */
-/* Compact tab headers; inherit skin tokens for night mode */
+/* Wrapper (default right) */
-.ooo-infobox-tabwrap .tabber__tabs { margin-bottom:.5rem; }
+.ooo-infobox-tabwrap {
+  float: right;
+  clear: right;
+  width: 300px;                 /* match {{OOOInfoBox}} default if needed */
+  margin: 0 0 1em 1em;
+}
+/* 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--center { float: none; display: block; margin: 0 auto 1em; }
+/* ===== Wrap mode (default) ===== */
+.ooo-infobox-tabwrap .tabber__tabs {
+  display: flex;
+  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;
+  border: 0;
+  background: none;
+}
+/* Remove TabberNeue's default separator pseudo-element */
+.ooo-infobox-tabwrap .tabber__tabs::after { content: none; }
+/* Pills */
 .ooo-infobox-tabwrap .tabber__tab {
-   font: 700 90%/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+  flex: 0 0 auto;
-   background: var(--background-color-neutral,#f5f5f5);
+  min-width: 3.5ch;
-   color: var(--color-base,#202122);
+  white-space: nowrap;
-   border:1px solid #a2a9b1; border-bottom:none; border-radius:6px 6px 0 0;
+  text-align: center;
-  padding:.25rem .5rem; margin-right:.25rem;
+  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);
+   border: 1px solid #a2a9b1;
+  border-bottom: none;
+  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 (no inset line, no negative margin) */
 .ooo-infobox-tabwrap .tabber__tab--active {
-   background: var(--background-color-base,#fff);
+  cursor: default;
-   color: var(--color-base,#202122);
+   background: var(--background-color-base, #ffffff);
+   color: var(--color-base, #202122);
+  box-shadow: none;             /* no seam */
+}
+/* Panels */
+.ooo-infobox-tabwrap .tabber__panel {
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+/* ===== 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);
 }
-/* Make the panel blend into the infobox (our infobox already has borders) */
+/* Tabs inside scroller stay fixed-size */
-.ooo-infobox-tabwrap .tabber__panel { padding:0; border:none; }
+.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tab { flex: 0 0 auto; }
-/* Mobile: unfloat + full width */
+/* Mobile */
-@media (max-width:640px) {
+@media (max-width: 640px) {
-   .ooo-infobox-tabwrap { float:none; width:100%; margin:0 0 1em 0; }
+   .ooo-infobox-tabwrap,
+  .ooo-infobox-tabwrap--left,
+  .ooo-infobox-tabwrap--none,
+  .ooo-infobox-tabwrap--center {
+    float: none;
+    width: 100%;
+    margin: 0 0 1em 0;
+  }
 }