Sideberry custom CSS + a userChrome.css to hide surrounding panel UI elements when the Sidebery panel is active

sidebar.css

#root.root {--tabs-border-radius: 8px;}
#root.root[data-toolbar-color-scheme="light"] {
  --btw-the-inactive-bg-is: rgb(235, 235, 239);
  --btw-ff-light: rgb(235, 235, 239);
  --frame-bg: var(--btw-ff-light);
  --toolbar-bg: var(--btw-ff-light);
	--toolbar-fg: rgb(91,91,102);
}
#root.root[data-toolbar-color-scheme="dark"] {
  --frame-bg: rgb(28, 27, 34);
  --toolbar-bg: rgb(28, 27, 34);
  --toolbar-el-overlay-hover-bg: rgb(65,64,71);
  --active-el-bg: rgb(82, 82, 94);
  --tabs-activated-bg: rgb(82, 82, 94);
}

#root.root {--tabs-pinned-width: 36px;}
#root.root {--tabs-pinned-height: 36px;}
#root.root {--nav-btn-width: 36px;}
#root.root {--nav-btn-height: 34px;}
#root.root {--tabs-inner-gap: 7px;}

#root.root {--tabs-font: /*0.9375rem*/ Segoe UI;}


:root {
  background-color: light-dark(transparent, transparent);
}

#root {
  --tabs-height: 36px !important;
  --tabs-title-padding: 8px;
  --tabs-font-size: .8rem;
  --tabs-title-lines: 2;
}

.central-box {
	--my-separation: 3.8px;
  padding-left: var(--my-separation);
}


/* Hack for consistent right padding across pinned tabs and regular tabs, whenever scrolling or not */

#root[data-pinned-tabs-position="top"] .central-box:has(.TabsPanel[data-pos="center"] > .ScrollBox > .top-shadow[data-show="false"]):has(.TabsPanel[data-pos="center"] > .ScrollBox > .bottom-shadow[data-show="false"]) {
	padding-right: var(--my-separation);
}

#root[data-pinned-tabs-position="top"] .central-box:has(.TabsPanel[data-pos="center"] > .ScrollBox > :is(.top-shadow, .bottom-shadow)[data-show="true"]) .PinnedTabsBar {
	padding-right: var(--my-separation);
}


/* Pinned tabs bar */
#root[data-pinned-tabs-position="top"] .PinnedTabsBar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  grid-gap: var(--tabs-margin) 6px;

  & .Tab[data-pin="true"] {
    width: unset;
  }

	margin-bottom: 0;
	padding-bottom: var(--tabs-margin);
}

#root[data-pinned-tabs-position="top"] .central-box:has(.TabsPanel[data-pos="center"] > .ScrollBox > .top-shadow[data-show="true"]) .PinnedTabsBar {
	padding-bottom: 0;
}



/* Tabs panel top shadow that shows when scrollable */

.TabsPanel :is(.top-shadow, .bottom-shadow) {
	width: auto;
	left: 12px;
	right: 12px;
	
	&[data-show="true"] {
		opacity: .5;
		&.bottom-shadow { opacity: 0; }
	}
}




/* Indentation lines */

.Tab {
	--tabs-indent: 16px;
}

.Tab .body:after {
  left: calc(-1px - var(--tabs-margin));
}


#root[data-tabs-tree-lvl-marks=true] .Tab[data-pin=false]:not([data-lvl="0"]) .body:after {
  display: block;
  transition:opacity var(--d-slow);
  box-shadow: calc(var(--tabs-indent) * -1)  0 0 0 rgb(from var(--tabs-normal-fg) r g b / 66.67%),
              calc(var(--tabs-indent) * -2)  0 0 0 rgb(from var(--tabs-normal-fg) r g b / 44.44%),
              calc(var(--tabs-indent) * -3)  0 0 0 rgb(from var(--tabs-normal-fg) r g b / 29.63%),
              calc(var(--tabs-indent) * -4)  0 0 0 rgb(from var(--tabs-normal-fg) r g b / 19.75%),
              calc(var(--tabs-indent) * -5)  0 0 0 rgb(from var(--tabs-normal-fg) r g b / 13.17%),
              calc(var(--tabs-indent) * -6)  0 0 0 rgb(from var(--tabs-normal-fg) r g b / 8.78% ),
              calc(var(--tabs-indent) * -7)  0 0 0 rgb(from var(--tabs-normal-fg) r g b / 5.85% ),
              calc(var(--tabs-indent) * -8)  0 0 0 rgb(from var(--tabs-normal-fg) r g b / 3.9%  ),
              calc(var(--tabs-indent) * -9)  0 0 0 rgb(from var(--tabs-normal-fg) r g b / 2.6%  ),
              calc(var(--tabs-indent) * -10) 0 0 0 rgb(from var(--tabs-normal-fg) r g b / 1.73% ),
              calc(var(--tabs-indent) * -11) 0 0 0 rgb(from var(--tabs-normal-fg) r g b / 1.16% ),
              calc(var(--tabs-indent) * -12) 0 0 0 rgb(from var(--tabs-normal-fg) r g b / 0.77% ),
              calc(var(--tabs-indent) * -13) 0 0 0 rgb(from var(--tabs-normal-fg) r g b / 0.51% ),
              calc(var(--tabs-indent) * -14) 0 0 0 rgb(from var(--tabs-normal-fg) r g b / 0.34% ),
              calc(var(--tabs-indent) * -15) 0 0 0 rgb(from var(--tabs-normal-fg) r g b / 0.23% ),
              calc(var(--tabs-indent) * -16) 0 0 0 rgb(from var(--tabs-normal-fg) r g b / 0.15% );
}

#root.root {
  --tabs-lvl-opacity: 0.2;
}

#root:has(.TabsPanel:hover).root {
  --tabs-lvl-opacity: 0.3;
}


/* tab container line under favicon */

.Tab[data-pin=false] .ctx {
  top: unset;
  bottom: 6px;
  left: calc(var(--tabs-inner-gap) + 2px);
  width: 16px;
  height:2px;
}

#root_container #root /* I WIN */ .Tab[data-pin=true] .ctx {
  top: unset;
  bottom: 6px;
  left: calc(50% - 8px);
  width: 16px;
  height:2px;
}


.TabsPanel .new-tab-btns {
/* 	border-top: 4px dotted rgb(169,169,173); */
}

/* side buttons with panels and stuff (Navigation) */

.NavigationBar .nav-item[data-active="true"] {
	background-color: rgb(169,169,173);
	height: var(--tabs-height);
  border-radius: 5px;
	box-shadow: none;
}

#root.root[data-toolbar-color-scheme="dark"] .NavigationBar .nav-item[data-active="true"] {
  background-color: rgb(96,95,101);
}

.NavigationBar.-vert .nav-item[data-class="space"][data-type="static"]::after {
/* 	border-top: 1px solid rgb(169,169,173); */
	border-top: 1px dotted var(--toolbar-fg);
}

/* ... */
.Tab .t-box {
  align-items: center;
  max-height: calc(var(--tabs-height) - var(--tabs-title-padding));
  overflow: hidden;
}

.Tab .title {
  font-size: var(--tabs-font-size);
  white-space: pre-wrap;
  line-height: calc((var(--tabs-height) - var(--tabs-title-padding)) / var(--tabs-title-lines));
}

userChrome.css

/* @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); */

/* btw this collection looks cool
https: //mrotherguy.github.io/firefox-csshacks/
*/

/** Import Lepton stylesheet (Chrome) *****************************************/

/* @import url("css/leptonChrome.css"); */

/** Add your custom styles below **********************************************/

/* Enable option to edit bookmark URLs under Add Bookmark (blue star) menu */
.editBMPanel_locationRow {
  display: initial !important;
}

/* Disable Email Image/Audio/Video and Set as Desktop Background context menu items */
#context-sendimage,
#context-sendvideo,
#context-sendaudio,
#context-sep-setbackground,
#context-setDesktopBackground,
#context-inspect-a11y {
  display: none !important;
}

#main-menubar>menu>label.menu-text {
  color: rgb(91, 91, 102);
}

/* Hide the revamped sidebar header */
#sidebar-panel-header {
  display: none !important;
}

/* When Sidebery is active */
#main-window[titlepreface*="[S]"],
#main-window[titlepreface*="​"] {

  /************************/
  /* Hide horizontal tabs */
  /************************/
  #TabsToolbar {
    > .toolbar-items { height: 0 !important; }
    > .titlebar-spacer,
    > .titlebar-buttonbox-container { display: none !important; }
  }

  /* Show window buttons */
  #nav-bar > .titlebar-buttonbox-container,
  #nav-bar > .titlebar-buttonbox-container > .titlebar-buttonbox {
    display: flex !important;
  }

  /*****************************************************************/
  /* Make Sidebery "take control" of the entirety of the side bar */
  /*****************************************************************/

  #sidebar {
    border: unset !important;
    border-radius: unset !important;
    box-shadow: unset !important;
    outline: unset !important;
    background-color: var(--toolbox-bgcolor);
    color: var(--sidebar-text-color);
  }

  #sidebar-header {
    /* visibility: collapse; */
    display: none !important;
  }

  #sidebar-launcher-splitter {
    display: none;
  }

  #sidebar-main {
    display: none;
  }

  #sidebar-box {
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: var(--sidebar-background-color);
    color: var(--sidebar-text-color);
  }

  #TabsToolbar {
    height: 0 !important;
  }

  #tabbrowser-tabs {
    z-index: 0 !important;
  }

}