Template:OOOInfoBoxTabber/styles.css

Revision as of 19:41, 12 October 2025 by T-Bone (talk | contribs) (Created page with "Keep the tab set where the infobox belongs (right, fixed width): .ooo-infobox-tabwrap { float:right; clear:right; width:340px; margin:0 0 1em 1em; } Compact tab headers; inherit skin tokens for night mode: .ooo-infobox-tabwrap .tabber__tabs { margin-bottom:.5rem; } .ooo-infobox-tabwrap .tabber__tab { font: 700 90%/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--background-color-neutral,#f5f5f5); color: var(--color-base,#2021...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
/* Keep the tab set where the infobox belongs (right, fixed width) */
.ooo-infobox-tabwrap { float:right; clear:right; width:340px; margin:0 0 1em 1em; }

/* Compact tab headers; inherit skin tokens for night mode */
.ooo-infobox-tabwrap .tabber__tabs { margin-bottom:.5rem; }
.ooo-infobox-tabwrap .tabber__tab {
  font: 700 90%/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--background-color-neutral,#f5f5f5);
  color: var(--color-base,#202122);
  border:1px solid #a2a9b1; border-bottom:none; border-radius:6px 6px 0 0;
  padding:.25rem .5rem; margin-right:.25rem;
}
.ooo-infobox-tabwrap .tabber__tab--active {
  background: var(--background-color-base,#fff);
  color: var(--color-base,#202122);
}

/* Make the panel blend into the infobox (our infobox already has borders) */
.ooo-infobox-tabwrap .tabber__panel { padding:0; border:none; }

/* Mobile: unfloat + full width */
@media (max-width:640px) {
  .ooo-infobox-tabwrap { float:none; width:100%; margin:0 0 1em 0; }
}