Custom CSS to make Sidebery look more like Tree Style Tab

sidebery.css

@media (prefers-color-scheme: light) {
  :root {
    --xfg: black;
    --xbg: white;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --xfg: white;
    --xbg: black;
  }
}

/* ------ Disable animations ------ */

*, :before, :after {
  animation: initial !important;
  transition: initial !important;
}

/* ------ Thin Scrollbar ------ */
*, :before, :after {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 0, 0, 0.6) rgba(0, 0, 0, 0) !important;
}

/* ------ Common ------ */

*, :before, :after {
  box-sizing: border-box;
  box-shadow: none !important;
}

.NavigationBar {
  border-bottom: 1px solid #bbb;
}

*, :before, :after {
  scrollbar-width: none !important;
}
.scroll-container {
  scrollbar-width: thin !important;
}

.CtxMenu .box {
  border: 1px solid #999;
}

.ScrollBox > .top-shadow,
.ScrollBox > .bottom-shadow,
.Tab .update-badge,
.Tab .fav::after {
  display: none;
}

/* Selection line */
.pointer:after {
  margin-left: -6px !important;
  border: 1px solid var(--favicons-placeholder-bg) !important;
}
/* Selection line arrow */
.pointer:before {
  margin-left: -6px !important;
  border-left: 10px solid var(--favicons-placeholder-bg) !important;
}
/* Selection side arrow */
.pointer *:before,
.pointer *:after {
  border: 1px solid var(--favicons-placeholder-bg) !important;
}

/* ------ Tabs ------ */

.root,
.scrollable,
.Tab {
  background: #888 !important;
}

.Tab *, .Tab :before, .Tab :after {
  opacity: 1 !important;
}

.Tab .exp {
  opacity: 0 !important;
}

.Tab .title {
  color: var(--xfg) !important;
}

.Tab[data-unread="true"] .title {
  color: red !important;
}

.Tab[data-discarded="true"] .title {
  color: #333 !important;
}

.Tab .fav {
  forced-height: 20px;
  forced-width: 20px;
}

.Tab .child-count {
  width: auto !important;
  height: auto !important;
  right: -4px !important;
  background: #fff !important;
  color: black !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  line-height: 0.7rem !important;
  padding: 0 1px !important;
}

.Tab .lvl-wrapper {
  border-bottom: 1px solid #bbb;
}
.Tab:last-child .lvl-wrapper {
  border-bottom: none;
  padding-bottom: 1px;
}
.Tab .title {
  margin-top: 3px;
}

.Tab .lvl-wrapper {
  background: #fff !important;
}

.Tab[data-discarded="true"] .lvl-wrapper {
  background: #e7e7e7 !important;
}

.Tab[data-active="true"] .lvl-wrapper {
  background: #ffbb66 !important;
}

.Tab[data-selected="true"] .lvl-wrapper {
  background: #458fff !important;
}

.Tab:hover .lvl-wrapper::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0.05 !important;
}

/* ------ Bookmarks ------ */

.Folder > .body > .title,
.Bookmark > .body > .title {
  color: black;
  font-size: 1.1em;
}

.Folder,
.Bookmark {
  background-color: #eee !important;
  border-top: 1px solid #888;
  border-left: 1px solid #888;
}
.Folder[data-expanded="true"] {
  background-color: #888 !important;
}
.Folder[data-expanded="true"] > .body {
  background-color: #eee !important;
  margin-left: -12px;
  padding-left: 12px;
}

.len,
.Bookmark[data-open="true"] > .body > .title {
  color: red !important;
}