sidebery + lepton, source from https://github.com/datguypiko/Firefox-Mod-Blur and reddit

sidebery.css

#root.root {
  --s-frame-bg: var(--gg-black) !important;
  --s-toolbar-bg: var(--gg-grey) !important;
  /* --s-frame-fg: var(--gg-white) !important; */
  /* --s-toolbar-fg: var(--gg-white) !important; */
}

/* --- NAV BAR --- */

#nav_bar {
  margin-bottom: -2px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  height: 50px;
}

/* --- PINNED TABS --- */

.PinnedTabsBar {
  padding: 2px var(--tabs-margin) var(--tabs-margin) var(--tabs-margin) !important;
  background: transparent;
}

/* --- TABS --- */

#root.root {
  --tabs-margin: 6px;
  --tabs-height: 35px;
  --tabs-width: 35px;
  --tabs-pinned-height: var(--tabs-height);
  --tabs-pinned-width: var(--tabs-width);
  --tabs-indent: 16px;
}

.Tab .close:hover {
  background: transparent !important;
}

.Tab .close > svg:hover {
  /* Styling the tab close button */
  border-radius: 50px;
  background: #d10032;
  opacity: 100%;
}

.TabsPanel .new-tab-btn {
  height: var(--tabs-height);
}

.TabsPanel .new-tab-btns {
  padding: 0 6px;
}

/* --- IMPROVEMENTS --- */

.TabsPanel {
  margin: 5px 0;
}

.central-box {
  z-index: 1;
  background: var(--gg-black);
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}

.main-box:after {
  position: absolute;
  z-index: 0;
  top: -5px;
  left: auto;
  right: -5px;
  content: "";
  background: var(--gg-grey);
  height: 10px;
  width: 10px;
}

/* Uncomment if you place your sidebar to the right */
/* .main-box:after {
	right: auto;
	left: -5px;
} */

.SearchBar {
  background-color: var(--gg-grey);
}

.SearchBar .clear-btn {
  background: transparent !important;
  opacity: 100%;
}

.SearchBar .clear-btn:before {
  background: transparent !important;
  opacity: 0;
}

.SearchBar .clear-btn svg {
  background: transparent !important;
}

.SearchBar .clear-btn svg:hover {
  border-radius: var(--search-border-radius);
  background: var(--gg-red) !important;
}

.popup {
  margin-top: 50px;
  max-width: 97%;
}




/* custom */
.Tab[data-pin="false"] .body {
	border: 1px solid #3333;
}

.Tab[data-pin="true"] .body {
}

.PinnedTabsBar {
  
}
.AnimatedTabList {	

}

userChrome.css

/** 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 {
  display: none !important;
}
*/

/* remove TabsToolbar when turn on tree style tab */

html#main-window #TabsToolbar {
  visibility: collapse;
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header {
  display: none;
}

#urlbar:not([focused]) #urlbar-input{ text-align: center !important; }

/* tree style tab config */
:root {
  --sidebar-default-width: 100px;
  --sidebar-hover-width: 200px;
}

/* addons */
/*  Clean and tight extensions menu */
#unified-extensions-panel #unified-extensions-view {
    width: 100% !important; /*  For firefox v115.x */
}

#unified-extensions-view{
    --uei-icon-size: 22px; /*  Change icon size */
    --firefoxcss-number-of-extensions-in-a-row: 5; /*  Increase to the number of icons you want in one row */
}

#unified-extensions-view .panel-header,
#unified-extensions-view .panel-header + toolbarseparator,
#unified-extensions-view .panel-subview-body + toolbarseparator,
#unified-extensions-view #unified-extensions-manage-extensions,
#unified-extensions-view .unified-extensions-item-menu-button.subviewbutton,
#unified-extensions-view .unified-extensions-item-action-button .unified-extensions-item-contents{
    display:none !important;
}

#unified-extensions-view .panel-subview-body {
    padding:4px !important;
}

#unified-extensions-view .unified-extensions-item .unified-extensions-item-icon, 
#unified-extensions-view .unified-extensions-item .toolbarbutton-badge-stack {
    margin-inline-end: 0px !important;
}

#unified-extensions-view #overflowed-extensions-list,
#unified-extensions-view #unified-extensions-area,
#unified-extensions-view .unified-extensions-list {
    display: grid !important;
    grid-template-columns: repeat(var(--firefoxcss-number-of-extensions-in-a-row),auto);
    justify-items:left !important;
    align-items:left !important;
}

#unified-extensions-view .unified-extensions-list .unified-extensions-item,
#unified-extensions-view .unified-extensions-list{
     max-width: max-content;
}

#unified-extensions-view #unified-extensions-area {
    padding-bottom: 3px !important;
    border-bottom: 1px solid #aeaeae33 !important;
}

#unified-extensions-view .unified-extensions-list {
/*     border-top: 1px solid #aeaeae33 !important; */
}

#wrapper-edit-controls:is([place="palette"], 
[place="panel"]) > #edit-controls, #wrapper-zoom-controls:is([place="palette"], 
[place="panel"]) > #zoom-controls, :is(panelview, #widget-overflow-fixed-list) .toolbaritem-combined-buttons {
  margin: 0px !important;
}

/* ----------------------------------------------------------------- */
/* ---------- MacOS style close/min/max window buttons ------------- */
/* ----------------------------------------------------------------- */
#navigator-toolbox #nav-bar {
  padding-left: var(--firefoxcss-control-buttons-margin) !important;
  padding-right: initial !important;
}

:root {
  --toolbar-start-end-padding: 3px !important;
  /* padding of frst and last child ,default - 8px */
}

#navigator-toolbox:not([inFullscreen])
  #TabsToolbar
  .titlebar-buttonbox-container {
  visibility: visible !important;
  position: absolute !important;
  top: 2px !important;
  left: 0 !important;
  right: unset !important;
  padding-top: 10px !important;
  padding-bottom: 2px !important;
  padding-right: 2px !important;
  padding-left: 8px !important;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-button {
  width: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  height: 14px !important;
}

#navigator-toolbox[inFullscreen] #TabsToolbar .titlebar-buttonbox-container {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  padding-right: 4px !important;
  padding-left: 8px !important;
  margin: 0 !important;
  align-items: center !important;
  order: -1 !important;
}

#navigator-toolbox[inFullscreen] #nav-bar {
  padding-left: initial !important;
}

:root:-moz-window-inactive:not([customizing])
  :is(.titlebar-buttonbox)
  > toolbarbutton:not(:hover) {
  opacity: 0.65 !important;
}

:is(.titlebar-buttonbox) .toolbarbutton-icon {
  opacity: 1 !important;
  appearance: none !important;
}

#TabsToolbar .titlebar-button > .toolbarbutton-icon {
  width: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  height: 14px !important;
  stroke: none !important;
}

#TabsToolbar .titlebar-buttonbox {
  margin-right: 2px !important;
  margin-left: 2px !important;
}

#TabsToolbar .titlebar-button {
  background-color: transparent !important;
  appearance: none !important;
  padding: 0px !important;
  margin: 0 !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

#TabsToolbar .titlebar-close {
  appearance: none !important;
  -moz-box-ordinal-group: 0 !important;
  order: 0 !important;
}

#TabsToolbar .titlebar-min {
  appearance: none !important;
  -moz-box-ordinal-group: 1 !important;
  order: 1 !important;
}

#TabsToolbar .titlebar-max,
#TabsToolbar .titlebar-restore {
  appearance: none !important;
  -moz-box-ordinal-group: 2 !important;
  order: 2 !important;
}

#TabsToolbar
  .titlebar-buttonbox-container:not(:hover)
  .titlebar-buttonbox
  .titlebar-button {
  background-color: hsla(0, 0%, 65%, 1) !important;
  transition: background-color 400ms ease 400ms !important;
}

#TabsToolbar
  .titlebar-buttonbox-container
  .titlebar-button
  > .toolbarbutton-icon {
  list-style-image: none !important;
  margin: 0px !important;
  padding: 0px !important;
}

#TabsToolbar
  .titlebar-buttonbox-container
  .titlebar-buttonbox
  .titlebar-button {
  border-radius: 50% !important;
  margin-right: 8px !important;
  position: relative !important;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-min {
  background-color: #fac536 !important;
  overflow: hidden !important;
  transition: background-color 200ms ease !important;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-min::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 2px;
  opacity: 0;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 2px;
  transition: 200ms;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-min:hover::before {
  opacity: 1;
  top: 50%;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-max,
#TabsToolbar .titlebar-buttonbox-container .titlebar-restore {
  background: #39ea49 !important;
  overflow: hidden !important;
  transition: background-color 200ms ease !important;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-max::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 55%;
  height: 55%;
  opacity: 0;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 2px;
  transition: 200ms;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-max::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 3px;
  height: 80%;
  opacity: 0;
  background: #39ea49;
  transition: 200ms;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-max:hover::before,
#TabsToolbar .titlebar-buttonbox-container .titlebar-max:hover::after {
  opacity: 1;
  top: 50%;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-close {
  background: #f25056 !important;
  overflow: hidden !important;
  transition: background-color 200ms ease !important;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-close::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 2px;
  height: 9px;
  opacity: 0;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 1px;
  transition: 200ms;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-close::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 2px;
  height: 9px;
  opacity: 0;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 1px;
  transition: 200ms;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-close:hover::before,
#TabsToolbar .titlebar-buttonbox-container .titlebar-close:hover::after {
  opacity: 1;
  top: 50%;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-restore:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  opacity: 0;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 2px;
  transition: 200ms;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-restore:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  opacity: 0;
  background: #39ea49;
  border-radius: 0px;
  transition: 200ms;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-restore:hover::before,
#TabsToolbar .titlebar-buttonbox-container .titlebar-restore:hover::after {
  opacity: 1;
  top: 50%;
}

@media only screen and (max-width: 670px) {
  #main-window
    #navigator-toolbox:not([inFullscreen])
    #TabsToolbar
    .titlebar-buttonbox-container {
    visibility: visible !important;
    position: relative !important;
    padding-top: 6px !important;
    padding-bottom: 2px !important;
    padding-right: 2px !important;
    padding-left: 8px !important;
    order: -1 !important;
  }

  #main-window #navigator-toolbox:not([inFullscreen]) #nav-bar {
    padding-left: initial !important;
  }
}


/* sidebery */
:root {
  --sidebar-default-width: 200px;
  --sidebar-hover-width: 320px;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
  position: relative !important;
  min-width: var(--sidebar-default-width) !important;
  max-width: var(--sidebar-default-width) !important;
  z-index: 10;
  opacity: 1;
  transition: 
    margin-right 0.3s cubic-bezier(1,0,.5,0),
    min-width 0.3s cubic-bezier(1,0,.5,0),
    max-width 0.3s cubic-bezier(1,0,.5,0),
    opacity 0.3s cubic-bezier(1,0,.5,0) !important;
} 
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover {
  margin-right: calc(var(--sidebar-hover-width) * -1 + var(--sidebar-default-width)) !important;
  min-width: var(--sidebar-hover-width) !important;
  max-width: var(--sidebar-hover-width) !important;
  z-index: 1;
  opacity: 1;
  transition: 
    margin-right 0.1s cubic-bezier(0.25, 0.1, 0.25, 1),
    min-width 0.1s cubic-bezier(0.25, 0.1, 0.25, 1),
    max-width 0.1s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.1s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}