sidebery-WinUI.css

:root {
  color-scheme: light dark !important;
  background: light-dark(#aaa, #222) !important;
  --frameBG: light-dark(rgba(255,255,255,.7), rgba(255,255,255,.0605)) !important;
  --accentLight: color-mix(in srgb, accentColor 90%, black) !important; /* Main */
  --accentLight2: color-mix(in srgb, var(--accentLight) 90%, transparent) !important; /* Hover */
  --accentLight3: color-mix(in srgb, var(--accentLight) 80%, transparent) !important; /* Pressed */
  --accentLight4: color-mix(in srgb, accentColor 100%, transparent) !important; /* Full saturation */

  --accentDark: color-mix(in srgb, accentColor 60%, white) !important; /* Main */
  --accentDark2: color-mix(in srgb, var(--accentDark) 90%, transparent) !important; /* Hover */
  --accentDark3: color-mix(in srgb, var(--accentDark) 80%, transparent) !important; /* Pressed */
  --accentDark4: color-mix(in srgb, accentColor 40%, white) !important; /* Extra */

  --accentAuto: light-dark(var(--accentLight), var(--accentDark)) !important;
  --textButtonHover: light-dark(rgba(0,0,0,.0373), rgba(255,255,255,.0605)) !important;
  --textButtonPressed: light-dark(rgba(0,0,0,.0241), rgba(255,255,255,.0419)) !important;
  --textPressed: light-dark(rgba(0,0,0,.6), rgba(255,255,255,.786)) !important;

  --textColor: light-dark(rgba(0,0,0,.89), rgb(255,255,255)) !important;
  --textInverse: light-dark(#fff,#000) !important;
  --textPressed: light-dark(rgba(0,0,0,.6), rgba(255,255,255,.786)) !important;

  --buttonShadowLight: 0 0 0 1px rgba(0,0,0,.06), 0 1px 0 rgba(0,0,0,.1) !important;
  --buttonShadowDark: 0 0 0 1px rgba(255,255,255,.07), 0 -1px 0 rgba(255,255,255,.02) !important;
}

/* On macOS, ensure that text is rendered correctly. */
body {
  -moz-osx-font-smoothing: auto !important;
}

/* Default theme colors */
/* macOS light mode. */
body[style*="--s-frame-fg: rgba(0, 0, 0, 0.847)"],
/* macOS dark mode. */
body[style*="--s-frame-fg: rgba(255, 255, 255, 0.847)"],
/* Windows light mode. */
body[style*="--s-frame-bg: rgb(240, 240, 240)"],
/* Windows dark mode. */
body[style*="--s-frame-bg: rgb(35, 34, 43)"],
/* No theme enabled. */
body:not([style*="--s-frame-bg"]) {
  --s-frame-bg: light-dark(#cecece, #1C1C1C) !important;
  --s-frame-fg: light-dark(#000, #FFF) !important;
  --s-toolbar-bg: light-dark(#f7f7f7, #3B3B3B) !important;
  --s-toolbar-fg: light-dark(#252525, #fff) !important;
  --s-act-el-bg: light-dark(#fff, #4D4D4D) !important;
  --s-act-el-fg: light-dark(#000, #fff) !important;
  --s-act-el-border: transparent !important;
  --s-popup-bg: light-dark(#fff, #4A4A4A) !important;
  --s-popup-fg: light-dark(#1c1c1c, #fff) !important;
  --s-popup-border: light-dark(#dadada, #636363) !important;
  --s-accent: light-dark(#0078D4, #63ADE5) !important;
}

/* Linux/GTK support, side effect: Firefox themes do not work. */
@media (-moz-gtk-csd-available) {
  body:not([style*="--s-frame-bg"]) {
    --s-frame-bg: light-dark(color-mix(in srgb, ActiveCaption 90%, black), ActiveCaption) !important;
    --s-frame-fg: CaptionText !important;
    --s-toolbar-bg: light-dark(-moz-dialog, color-mix(in srgb, -moz-dialog 92%, white)) !important;
    --s-toolbar-fg: -moz-dialogtext !important;
    --s-act-el-bg: light-dark(-moz-dialog, color-mix(in srgb, -moz-dialog 80%, white)) !important;
    --s-act-el-fg: -moz-dialogtext !important;
    --s-act-el-border: transparent !important;
    --s-popup-bg: Field !important;
    --s-popup-fg: FieldText !important;
    --s-popup-border: light-dark(transparent, color-mix(in srgb, currentColor 17%, Field)) !important;
    --s-accent: AccentColor !important;
  }
}

#root.root {
  --frame-bg: var(--s-toolbar-bg) !important;
  --frame-fg: var(--s-toolbar-fg) !important;
  --general-margin: 4px !important;
  --tabs-font: 12px system-ui !important;
  --tabs-height: 34px !important;
  --tabs-pinned-width: 34px !important;
  --tabs-pinned-height: 34px !important;
  --tabs-close-btn-margin: 8px !important;
  --ntb-btn-height: 32px !important;
  --tabs-inner-gap: 12px !important;
  --tabs-border-radius: 7px !important;
  --general-border-radius: 4px !important;
  --tabs-activated-shadow: 0 0 0 1px rgba(0,0,0,.0578) !important;
  --tabs-normal-fg: var(--textColor) !important;
  --nav-btn-height: 32px !important;
  --nav-btn-width: 32px !important;
  --separator-color: color-mix(in srgb, currentColor 06%, transparent) !important;
  --nav-btn-active-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.086), inset 0 1px 3px 0 rgb(0 0 0 / 0.086) !important;

  /* Light mode adjustments. */
  &[data-frame-color-scheme="light"] {
    color-scheme: light !important;
    --tabs-normal-fg: var(--textColor) !important;
    .Tab[data-active="true"] .body {
      box-shadow: var(--buttonShadowLight) !important;
    }
  }

  /* Dark mode adjustments. */
  &[data-frame-color-scheme="dark"] {
    color-scheme: dark !important;
    --tabs-activated-shadow: 0 0 0 1px rgba(0,0,0,.1) !important;
    --nav-btn-active-shadow: unset !important;

    .Tab[data-active="true"] .body {
      box-shadow: var(--buttonShadowDark) !important;
    }
  }
}

/* Background transparency */
:root,
#root,
.TabsPanel .bottom-space,
.TabsPanel .new-tab-btns:after,
.new-tab-btns,
#search_bar,
.PinnedTabsBar {
  background: transparent !important;
  --toolbar-bg: transparent !important;
}

/* Top bar margins, padding & radius */
.top-horizontal-box {
  margin-bottom: var(--general-margin) !important;
  & .NavigationBar.-top {
    border-radius: 8px !important;
    padding-block-end: var(--nav-btn-margin) !important;
  }
}

/* Tabs */
.Tab[data-active="true"]::before {
  content: '';
  width: 3px;
  height: 16px;
  background-color: var(--accentAuto);
  display: block;
  position: absolute;
  z-index: 1;
  margin-top: 9px;
  border-radius: 99px;
  animation: selectorBar 187ms forwards;
  margin-left: -1px !important;
}
@keyframes selectorBar {
  0% {
    opacity: 0;
    transform: scale(100%, 0%);
  }
  100% {
    opacity: 1;
    transform: scale(100%, 100%);
  }
}

.Tab {
  /* Active tab border. */
  &[data-active="true"] .body {
    outline: none !important;
    background-color: var(--frameBG) !important; /* Ensure tabs use the right color */
  }

  /* Close button border radius. */
  & .close {
    border-radius: 4px !important;
    width: 30px;
    height: 22px !important;
    top: 6px !important;
    margin-right: -2px !important;
  }

  /* Make sure that tab icons use full opacity. */
  & .fav svg {
    opacity: 1 !important;
  }

  /* Adjust spacing between tab icons and labels. */
  & .title {
    padding-inline: 0 !important;
  }

  /* Colourised tab shadow and outline. */
  &[data-colorized="true"] {
    --tabs-activated-shadow: unset !important;
    --s-act-el-border: light-dark(rgb(0 0 0 / 0.35), rgb(255 255 255 / 0.25)) !important;
  }

  & .ctx {
    box-shadow: none !important;
    border-radius: 2px !important;
    --uc-margin: 8px !important;
    --uc-width: 2px !important;
    --uc-offset: 1px !important;
  }

  &[data-active="true"] .ctx {
    --uc-margin: 6px !important;
  }

  &[data-pin="false"] {
    /* Inner spacing for tabs. */
    & .fav {
      margin: 0 8px 0 12px !important;
    }

    /* Tab container indicator. */
    & .ctx {
      inset-block: 0 !important;
      margin-block: auto !important;
      left: var(--uc-offset) !important;
      width: var(--uc-width) !important;
      height: calc(100% - var(--uc-margin) * 2) !important;
    }
  }

  #root[data-pinned-tabs-position="panel"] &[data-pin="true"] {
    /* Tab container indicator. */
    & .ctx {
      inset-inline: 0 !important;
      margin-inline: auto !important;
      bottom: var(--uc-offset) !important;
      height: var(--uc-width) !important;
      width: calc(100% - var(--uc-margin) * 2) !important;
    }
  }
}

.Notifications + .main-box .central-box {
  height: 100% !important;
  margin-top: 0 !important;
}

/* Add space to the top of the tabs to allow shadows to be visible. */
.AnimatedTabList,
.PinnedTabsBar {
  padding-top: var(--tabs-margin) !important;
}

/* Remove space between the tabs and horizontal navigation bar, as tabs have
* their own space applied for the shadows. */
.top-horizontal-box {
  margin-bottom: 0 !important;

  & .NavigationBar.-top {
    padding-block-end: 0 !important;
  }
}

/* Pinned tabs separator. */
.PinnedTabsBar {
  /* Pinned tab grid. */
  #root[data-pinned-tabs-position="panel"] & {
    padding-bottom: calc(var(--tabs-margin) + 1px) !important;
  }

  /* Pinned tab list. */
  #root[data-pinned-tabs-position="panel"][data-pinned-tabs-list="true"] & {
    padding-bottom: 1px !important;
  }

  /* Separator element. */
  &::after {
    display: unset !important;
    bottom: 0 !important;
    height: auto !important;
    border-bottom: 1px solid var(--separator-color) !important;
    background: transparent !important;
    opacity: 1 !important;
  }
}

/* New tab button */
.TabsPanel .new-tab-btns {
  /* Add space for the separator. */
  padding-top: calc(var(--tabs-margin) + 1px) !important;

  /* Add separator before new tab button. */
  &::before {
    width: calc(100% - var(--tabs-margin)*2) !important;
    inset-inline: auto !important;
    top: 0 !important;
    border-top: 1px solid var(--separator-color) !important;
    box-shadow: none !important;
  }

  /* Make sure the separator is hidden when there are only pinned tabs. */
  &[data-new-tab-bar-position="after_tabs"]:first-child {
    padding-top: 0 !important;

    &::before {
      display: none !important;
    }
  }

  /* Hide unnecessary pseudo element. */
  &::after {
    content: initial !important;
  }

  /* New tab button. */
  & .new-tab-btn {
    justify-content: start !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    border-radius: var(--tabs-border-radius) !important;

    /* Make sure images do not shrink when collapsed. */
    & > svg,
    & > img {
      position: static !important;
      margin: 0 calc(var(--tabs-inner-gap) + 2px) 0 var(--tabs-inner-gap) !important;
      flex-shrink: 0 !important;
    }

    /* Fix new tab icon when badge is placed above it (open in container). */
    & > .-badge {
      position: static !important;
      margin-top: 10px !important;
      margin-inline-start: calc(-1 * (14px + var(--tabs-inner-gap) / 2)) !important;
      margin-inline-end: calc(var(--tabs-inner-gap) - 1px) !important;
    }

    /* Add new tab label. */
    &::after {
      content: "New Tab" !important;
      font: var(--tabs-font) !important;
      color: var(--frame-fg) !important;
    }
  }
}

/* Hide shadows at the top and bottom when scrolling. */
.ScrollBox > .top-shadow[data-show="true"],
.ScrollBox > .bottom-shadow[data-show="true"] {
  display: none !important;
}

/* Icons */
/* New tab page icon. */
#icon_ff path {
  d: path("M3 1h10a2 2 0 01 2 2v10a2 2 0 01-2 2H3a2 2 0 01-2-2V3a2 2 0 01 2-2zm3 1H3a1 1 0 00-1 1v10a1 1 0 00 1 1h10a1 1 0 00 1-1V5H7.5A1.5 1.5 0 01 6 3.5zm1 0v1.5a.5.5 0 00 .5.5H14V3a1 1 0 00-1-1zM5 8a1 1 0 01 0 2 1 1 0 01 0-2zm3 0a1 1 0 01 0 2 1 1 0 01 0-2zm3 0a1 1 0 01 0 2 1 1 0 01 0-2z") !important;
}

/* Plus icon. */
#icon_plus path {
  d: path("M7 1a.5.5 0 01 1 0v6h6a.5.5 0 01 0 1H8v6a.5.5 0 01-1 0V8H1a.5.5 0 01 0-1h6z") !important;
}