sidebery

#root[data-style="auto"],
#root[data-style="dark"] {
  --notice-fg: #fff !important;
  --progress-fg: #fff !important;
  --tabs-loading-fg: #fff !important;
  --tabs-selected-bg: highlight !important;
  --tabs-update-badge-bg: #4df; !important;
  --nav-btn-opacity: 1 !important;
  --nav-btn-opacity-hover: 1 !important;
  --nav-btn-fg-focus: #f00 !important;
  --jav-btn-update-badge-bg: #f0f !important;
}


/**** BASE TAB STYLING ****/

.Tab {
  background: rgba(255,255,255,0.1);
  border-bottom: 1px solid transparent;
  background-clip: content-box;
  --tabs-activated-shadow: inset 2px 0 highlight;
}
.Tab[data-active],
.Tab[data-selected],
.Tab[data-selected]:hover,
.Tab[data-selected]:active {
  border-bottom: 1px solid transparent;
}

.Tab:hover:not([data-active]) {
  box-shadow: inset 2px 0 rgba(255,255,255,0.25);
}
.PinnedTab {
  background: rgba(255,255,255,0.075);
  --tabs-activated-shadow: inset 0 2px highlight;
  border-right: 1px solid transparent;
  background-clip: content-box;
}
.PinnedTab .audio-badge {
  pointer-events: none;
}

/**** PANEL BUTTONS ****/
.NavigationBar .panel-btn > svg {
  opacity: .5;
}
.NavigationBar .panel-btn:hover:not([data-active]) > svg {
  opacity: .75;
}
.NavigationBar .panel-btn[data-active] > svg {
  opacity: 1;
}


/**** OPACITY RE-WORK ****/

.Tab:hover .fav {
  opacity: 1;
}
.PinnedTab:hover .fav {
  opacity: 1;
}
.Tab[data-discarded] > .lvl-wrapper > .fav,
.Tab[data-discarded] > .lvl-wrapper > .t-box {
  opacity: 1;
}
.Tab[data-discarded] {
  opacity: 0.5;
}

/**** FOLDING FAVICON BEHAVIOR ****/

.Tab[data-parent] .fav:hover > img,
.Tab[data-parent][data-folded] .fav > img {
  opacity: 1;
}
.Tab[data-parent] .fav,
.Tab[data-parent][data-folded] .fav .exp {
  transition: margin-left var(--d-norm);
}
.Tab[data-parent][data-folded] .fav {
  margin-left: 16px;
}
.Tab[data-parent][data-folded] .fav .exp {
  margin-left: -16px;
}
.Tab .fav > .child-count {
  font-weight: bold;
  width: auto;
  padding: 0 3px;
  border-radius: 100px;
  bottom: -3px;
  right: 0;
  left: -22px;
}

/**** CLOSE BUTTON ****/

.Tab .close {
  top: -1px;
}
.Tab .close > svg {
  fill: #fffa;
}
.Tab .close:hover > svg {
  fill: #fff;
}

/**** CORNER INDICATOR ****/

.Tab .fav:after {
  left: -6px;
  bottom: -4px;
  border-width: 3px;
}

/**** AUDIO MORE VISIBLE ****/
.Tab:not([data-active]) .lvl-wrapper .audio svg {
/*
  background: var(--tabs-update-badge-bg);
  box-shadow: 0 0 0 2px var(--tabs-update-badge-bg), inset 0 0 0 20px var(--tabs-update-badge-bg);
  border-radius: 99px;
  fill: black;
*/
  fill: var(--tabs-update-badge-bg);
}

/**** MATCH WIDTH TO TREE LEVEL ****/

/*.Tab:not([data-active]) {
  box-shadow: -1px 0 rgba(0,0,0,.5);
}*/
.Tab[data-lvl="1"] {
  padding-left: 0;
  margin-left: var(--tabs-indent);
  width: calc(100% - var(--tabs-indent));
}
.Tab[data-lvl="2"] {
  padding-left: 0;
  margin-left: calc(var(--tabs-indent) * 2);
  width: calc(100% - var(--tabs-indent) * 2);
}
.Tab[data-lvl="3"] {
  padding-left: 0;
  margin-left: calc(var(--tabs-indent) * 3);
  width: calc(100% - var(--tabs-indent) * 3);
}
.Tab[data-lvl="4"] {
  padding-left: 0;
  margin-left: calc(var(--tabs-indent) * 4);
  width: calc(100% - var(--tabs-indent) * 4);
}
.Tab[data-lvl="5"] {
  padding-left: 0;
  margin-left: calc(var(--tabs-indent) * 5);
  width: calc(100% - var(--tabs-indent) * 5);
}
.Tab[data-lvl="6"] {
  padding-left: 0;
  margin-left: calc(var(--tabs-indent) * 6);
  width: calc(100% - var(--tabs-indent) * 6);
}
.Tab[data-lvl="7"] {
  padding-left: 0;
  margin-left: calc(var(--tabs-indent) * 7);
  width: calc(100% - var(--tabs-indent) * 7);
}
.Tab[data-lvl="8"] {
  padding-left: 0;
  margin-left: calc(var(--tabs-indent) * 8);
  width: calc(100% - var(--tabs-indent) * 8);
}
.Tab[data-lvl="9"] {
  padding-left: 0;
  margin-left: calc(var(--tabs-indent) * 9);
  width: calc(100% - var(--tabs-indent) * 9);
}
.Tab[data-lvl="10"] {
  padding-left: 0;
  margin-left: calc(var(--tabs-indent) * 10);
  width: calc(100% - var(--tabs-indent) * 10);
}