Daily Shaarli

Maybe I'll want to do this one day

Great extension for vertical tabs with high customization.

My sidebery style:

#root.root {--tabs-indent: 16px;}

/* No empty space after last tabs */
.TabsPanel .bottom-space {
    height: 0
}

/* The spaces in the navigation bar take a whole line. It forces a line return */
.NavigationBar .nav-item[data-class="space"][data-type="dynamic"] {
//  height: 8px;
    height: 0;
    width: 100% !important;
}

/* The delimiters are horizontal now and force a line return */
.NavigationBar.-top .nav-item[data-class="space"][data-type="static"] {
    height: 8px;
    width: 100% !important;
}
.NavigationBar.-top .nav-item[data-class="space"][data-type="static"]::after {
    height: 1px;
    width: 100%;
    top: auto;
    left: auto;
    background-color: #75747A;
}

/* Moving Sidebery navigation bar to bottom, to mimic how Space works on Arc Browser. Make sure to choose Horizontal when activating the navigation bar. */
.top-horizontal-box {
  display: flex;
  order: 10; 
}
#search_bar {
    order: 5;
}

/* A bottom border on the pinned tabs bar */
.PinnedTabsBar {
     border-bottom: 1px solid #75747A;
}

.Tab .title {
    font-size: 12px;
    font-family: unset;
}

/* OLD STYLES
#root.root {--tabs-indent: 16px;}

/* No empty space after last tabs */
.TabsPanel .bottom-space {
    height: 0
}

/* The spaces in the navigation bar take a whole line. It forces a line return */
.NavigationBar .nav-item[data-class="space"][data-type="dynamic"] {
//  height: 8px;
    height: 0;
    width: 100% !important;
}

/* The delimiters are horizontal now and force a line return */
.NavigationBar.-top .nav-item[data-class="space"][data-type="static"] {
    height: 8px;
    width: 100% !important;
}
.NavigationBar.-top .nav-item[data-class="space"][data-type="static"]::after {
    height: 1px;
    width: 100%;
    top: auto;
    left: auto;
    background-color: #75747A;
}

/* Moving Sidebery navigation bar to bottom, to mimic how Space works on Arc Browser. Make sure to choose Horizontal when activating the navigation bar. */
.top-horizontal-box {
  display: flex;
  order: 10; 
}
#search_bar {
    order: 5;
}

/* A bottom border on the pinned tabs bar */
.PinnedTabsBar {
     border-bottom: 1px solid #75747A;
}

.Tab .title {
    font-size: 12px;
    font-family: unset;
}
*/

For user chrome, you need to set to true this flag toolkit.legacyUserProfileCustomizations.stylesheets in about:config

Then create chrome/userChrome.css in your profile. You can find it with about:profiles

My user chrome:

/* Hide the "Tree Style Tab" header at the top of the sidebar */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header,
/* Hide the "Sidebery" header at the top of the sidebar */
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header {
  display: none;
}

/* https://jahed.dev/2021/10/08/compacting-firefox-layout-with-sidebery-and-user-chrome/ */
#main-window[titlepreface*="[Sidebery]"] #navigator-toolbox {
  /* --toolbar-bgcolor: #1C1B22; */
  --toolbar-bgcolor: #000;
  background-color: var(--toolbar-bgcolor) !important;
  display: flex !important;
  /* flex-direction: row; */
  flex-direction: row-reverse;
}

#main-window[titlepreface*="[Sidebery]"] #TabsToolbar .titlebar-spacer,
#main-window[titlepreface*="[Sidebery]"] #TabsToolbar .toolbar-items {
  display: none !important;
}

#main-window[titlepreface*="[Sidebery]"] #TabsToolbar {
  /* #main-window[titlepreface*="[Sidebery]"] #TabsToolbar .titlebar-buttonbox { */
  /* margin-left: 12px !important; */
  /* margin-right: 12px !important; */
  max-width: fit-content;
}

#main-window[titlepreface*="[Sidebery]"] #nav-bar {
  flex-grow: 1 !important;
}

#sidebar-splitter {
  --sidebar-border-color: var(--chrome-content-separator-color);
  width: 4px !important;
  background-color: transparent !important;
  margin-inline-start: -4px !important;
  border: 0 !important;
}

#urlbar-background {
  --toolbar-field-border-color: transparent;
  --toolbar-field-background-color: transparent;
  --toolbar-field-focus-border-color: #a86595;
  --toolbar-field-focus-background-color: var(--toolbar-bgcolor);
  --arrowpanel-border-color: #a86595;
}

#main-window[titlepreface*="[Sidebery]"] #titlebar {
  flex-direction: row;
  order: 1;
}

#main-window[titlepreface*="[Sidebery]"] #PersonalToolbar {
  flex-direction: row;
  order: 2;
}

#main-window[titlepreface*="[Sidebery]"] #toolbar-menubar[inactive] {
  display: none;
}

/* Put the settings button on the left */
#PanelUI-button {
  order: -1;
  padding-inline-end: var(--toolbarbutton-outer-padding);
}

#main-window[titlepreface*="[Sidebery]"] #nav-bar-customization-target {
  padding-inline-end: var(--toolbar-start-end-padding);
}

/* No floating tabs */
.tab-background {
  /* border-radius: 0px 0px !important; */
  margin-bottom: 0px !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* Don't show the space on the left when you're in windowed mode */
.titlebar-spacer[type="pre-tabs"] {
  display: none;
}

/* Hide the private browsing label */
#private-browsing-indicator-with-label label {
  display: none;
}

/* Remove the down arrow button */
#alltabs-button {
  display: none;
}

/* Remove the space to the right of the tabs */
.titlebar-spacer[type="post-tabs"] {
  display: none;
}

/* Hide Firefox View */
#firefox-view-button {
  display: none;
}
#tabbrowser-tabs {
  border-inline-start: 0 !important;
  margin-inline-start: 0 !important;
  padding-inline-start: 0 !important;
}
.tabbrowser-tab:first-child {
  padding-left: 0 !important;
}

#main-window[titlepreface*="[Sidebery]"] .browser-toolbar:not(.browser-titlebar) {
  background-color: transparent !important;
}