MediaWiki:Common.css

/* CSS placed here will be applied to all skins */
/* ===== OOO Tab Scroll — minimal, production-safe ===== */

/* Theme tokens (tweak freely) */
:root {
  --ooo-tab-arrow-size: 22px;
  --ooo-tab-arrow-offset: -0.1rem;
  --ooo-tab-arrow-color: #2a4b8d;                 /* light mode icon color */
  --ooo-tab-arrow-bg: #fff;
  --ooo-tab-arrow-bg-hover: #f5f5f5;
  --ooo-tab-arrow-border: #a2a9b1;
  --ooo-tab-arrow-shadow: 0 1px 2px rgba(0,0,0,.1);
  --ooo-tab-arrow-focus: 0 0 0 2px rgba(51,102,204,.35);
}

/* Wrapper must be positioned (JS also enforces if needed) */
.ooo-infobox-tabwrap--scroll { position: relative; }

/* Our injected arrow buttons (use currentColor for icon) */
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow {
  position: absolute;
  top: var(--ooo-tab-arrow-offset);
  inline-size: var(--ooo-tab-arrow-size);
  block-size: var(--ooo-tab-arrow-size);
  border-radius: 999px;
  border: 1px solid var(--ooo-tab-arrow-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-sizing: border-box;
  appearance: none;
  font: inherit;
  text-shadow: none;
  box-shadow: var(--ooo-tab-arrow-shadow);
  padding: 0;
  margin: 0;
  background: var(--ooo-tab-arrow-bg);

  /* drives SVG stroke="currentColor" */
  color: var(--ooo-tab-arrow-color);
}
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow::before { content:""; position:absolute; inset:-6px; } /* bigger hit area */
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow--prev { inset-inline-start: 2px; }
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow--next { inset-inline-end: 2px; }
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow:hover { background: var(--ooo-tab-arrow-bg-hover); }
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow:disabled { opacity:.4; cursor: default; box-shadow: none; }
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow.is-hidden { display: none; }
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow__icon { display: block; }
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow:focus-visible { outline: none; box-shadow: var(--ooo-tab-arrow-focus); }

/* Dark theme — explicit client preference */
html.skin-theme-clientpref-night .ooo-infobox-tabwrap--scroll {
  --ooo-tab-arrow-color: var(--color-base, #eaecf0);
}
html.skin-theme-clientpref-night .ooo-infobox-tabwrap--scroll .ooo-tab-arrow {
  border-color: #3a3a3a;
  background: var(--background-color-neutral, #2a2b2e);
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
html.skin-theme-clientpref-night .ooo-infobox-tabwrap--scroll .ooo-tab-arrow:hover {
  background: var(--background-color-neutral-subtle, #222325);
}

/* Dark theme — follow OS */
@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .ooo-infobox-tabwrap--scroll {
    --ooo-tab-arrow-color: var(--color-base, #eaecf0);
  }
  html.skin-theme-clientpref-os .ooo-infobox-tabwrap--scroll .ooo-tab-arrow {
    border-color: #3a3a3a;
    background: var(--background-color-neutral, #2a2b2e);
    box-shadow: 0 1px 2px rgba(0,0,0,.35);
  }
  html.skin-theme-clientpref-os .ooo-infobox-tabwrap--scroll .ooo-tab-arrow:hover {
    background: var(--background-color-neutral-subtle, #222325);
  }
}

/* ===== TabberNeue header arrows — use currentColor via mask ===== */
.tabber__header__next:after,
.tabber__header__prev:after {
  content: "";
  display: inline-block;
  width: 20px; height: 20px;

  /* color comes from .tabber__header { color: ... } */
  background-color: currentColor !important;
  background: none !important;

  /* right chevron default (left overrides below) */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='currentColor' d='M7 1L5.6 2.5 13 10l-7.4 7.5L7 19l9-9z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='currentColor' d='M7 1L5.6 2.5 13 10l-7.4 7.5L7 19l9-9z'/></svg>") no-repeat center / contain;
}
.tabber__header__prev:after {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='currentColor' d='M13 1l1.4 1.5L7 10l7.4 7.5L13 19l-9-9z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='currentColor' d='M13 1l1.4 1.5L7 10l7.4 7.5L13 19l-9-9z'/></svg>") no-repeat center / contain;
}

/* Make header inherit the same color token as the buttons */
.ooo-infobox-tabwrap--scroll .tabber__header { color: var(--ooo-tab-arrow-color); }

/* Mobile helper (safe in Common.css; move to TemplateStyles if you prefer) */
@media (max-width: 640px) {
  .ooo-infobox-tabwrap,
  .ooo-infobox-tabwrap--left,
  .ooo-infobox-tabwrap--none,
  .ooo-infobox-tabwrap--center {
    float: none;
    width: 100%;
    margin: 0 0 1em 0;
  }
}

/* Remove the header separator line under the tab row */
.ooo-infobox-tabwrap .tabber__header {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Some TabberNeue builds draw the line as a pseudo-element */
.ooo-infobox-tabwrap .tabber__tabs::after {
  content: none !important;
}

/* Optional: if you see a faint seam from the active tab “inset” shadow */
.ooo-infobox-tabwrap .tabber__tab--active {
  box-shadow: none !important;   /* remove the 1px inset line */
  margin-bottom: 0 !important;   /* avoid creating a gap */
}

/* Pull the tab row closer to the infobox panel */
.ooo-infobox-tabwrap .tabber__tabs {
  margin-bottom: 0px !important;   /* tweak: try -1px, -2px, or -3px to taste */
}