Procedure

1. Set up 'Sideberry'

   1. Install Sideberry from extension store.
   2. Click 'Cog' ⚙️ icon in the top right of the sidebar.
   3. Choose 'Style Editor' from side menu.

      1. Add these lines to set properties for fonts and background colors;

         #root.root {--tabs-indent: 15px;}
         #root.root {--tabs-activated-bg: #BC8F8F;}
         #root.root {--tabs-font: 0.77rem sans-serif;}
         #root.root {--frame-bg: #f3b1a6;}
         #root.root {--toolbar-el-overlay-active-bg: rgba(255,255,255,0.133);}
         #root.root {--toolbar-bg: #f3b1a6;}
         
         #root.root {--toolbar-el-overlay-selected-border: #146fd9;}
         
         

2. Next, in order to hide horizontal(normal) tabs

   1. Enter about:config in the address bar and select “Accept the Risk and Continue.”
   2. Under “Search preference name,” paste the following text: toolkit.legacyUserProfileCustomizations.stylesheets
   3. Tap the toggle button on the right so the preference says “true.”
   4. Enter about:support in the address bar.
   5. Scroll down to the section that says “Profile Folder,” and click the “Open Folder” ("Show in Finder" on macOS) button.
   6. Create a new subfolder called “chrome” within the folder you just opened.
   7. In the new “chrome” folder, create a new file named userChrome.css.

Hide the header for Sidebar

#sidebar-box #sidebar-header {
display: none !important;
}

Hide the normal horizontal tabs ONLY WHEN the vertical tabs are not there

Add these lines to userChrome.css to use Dynamic native tabs

#main-window #titlebar {
  overflow: hidden;
  transition: height 0.3s 0.3s !important;
}
/* Default state: Set initial height to enable animation */
#main-window #titlebar { height: 3em !important; }
#main-window[uidensity="touch"] #titlebar { height: 3.35em !important; }
#main-window[uidensity="compact"] #titlebar { height: 2.7em !important; }
/* Hidden state: Hide native tabs strip */
#main-window[titlepreface*="XXX"] #titlebar { height: 0 !important; }
/* Hidden state: Fix z-index of active pinned tabs */
#main-window[titlepreface*="XXX"] #tabbrowser-tabs { z-index: 0 !important; }

Now you must set the Preface value to “XXX” in order for the animation to work.

Look for this option in Sideberry Settings.

See below.

Reference:

https://github.com/mbnuqw/sidebery/wiki/Firefox-Styles-Snippets-(via-userChrome.css)

But if you’re on Mac, you will not see titlebar buttons.

In order to counter this, Use this userChrome.css instead

#main-window #titlebar {
  overflow: hidden;
  transition: height 0.3s 0.3s !important;
}
/* Default state: Set initial height to enable animation */
#main-window #titlebar { height: 3em !important; }
#main-window[uidensity="touch"] #titlebar { height: 3.35em !important; }
#main-window[uidensity="compact"] #titlebar { height: 2.7em !important; }

#sidebar-box #sidebar-header {
  display: none !important;
}

#main-window[titlepreface*="XXX"] .tabbrowser-tab {
  visibility: collapse;
}
#main-window[titlepreface*="XXX"] .titlebar-button {
  height: 27px !important;
}
#main-window[titlepreface*="XXX"] #nav-bar {
  margin-top: -30px;
  margin-left: 80px; 
  margin-right: 40px; 
  box-shadow: none !important;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#main-window[titlepreface*="XXX"] [uidensity="compact"]:root .titlebar-button {
  height: 32px !important;
}
#main-window[titlepreface*="XXX"] [uidensity="compact"]:root #nav-bar {
  margin-top: -32px;
}

#main-window[titlepreface*="XXX"] #titlebar-spacer {
  background-color: var(--chrome-secondary-background-color);
}
#main-window[titlepreface*="XXX"] #titlebar-buttonbox-container {
  background-color: var(--chrome-secondary-background-color);
}

#main-window[titlepreface*="XXX"] #main-window[inFullscreen="true"] #sidebar-box,
#main-window[titlepreface*="XXX"] #main-window[inFullscreen="true"] #sidebar-box + splitter {
    visibility: collapse;
}