sideberry styles

sideberry.css

#root,
#root[data-style="auto"] {
  --accent: #15e;
  --container-dot: 6px;
  --nav-btn-size: 32px;

  --tabs-fg: #fff;
  --tabs-fg-hover: #eee;
  --tabs-bg-hover: rgba(255,255,255,0.1);
  --tabs-selected-bg: var(--accent);
  --favicons-placeholder-bg: rgba(255,255,255,0.9);

  --tabs-activated-bg: var(--accent);
  --tabs-activated-fg: var(--tabs-fg);

  --tabs-indent: 16px;

  --nav-btn-activated-bg: var(--accent);
  --nav-btn-width: var(--nav-btn-size);
  --nav-btn-height: var(--nav-btn-size);
  --tabs-pinned-width: var(--nav-btn-size);
  --tabs-pinned-height: var(--nav-btn-size);
}

.Tab .ctx {
  width: var(--container-dot);
  height: var(--container-dot);
  border-radius: 10px;
  box-shadow: none;
  top: 50%;
  transform: translate(-50%, -50%);
  right: unset;
  left: 0;
}

.Tab:hover:before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--container-fg);
  opacity: .1;
  z-index: -1;
}

.PinnedTab,
.NavigationBar .panel-btn {
/*  border-radius: 1e3px;*/
  overflow: visible;
}

.Tab .audio {
  --title-fg: var(--tabs-fg);
}

.Tab .close {
  width: var(--tabs-height);
  height: var(--tabs-height);
  background: #111;
  clip-path: circle(40% at 50% 50%);
}

.Tab .close > svg {
  fill: #FF0000;
}