Firefox css to disable horizontal tabs

userChrome.css

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
  opacity: 0;
  pointer-events: none;
}
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  display: none;
}

/*
    Display the status bar in Firefox Quantum (version 61+)
    permanently at the bottom of the browser window.
    Code below works best for the Dark Firefox theme and is based on:
    https://github.com/MatMoul/firefox-gui-chrome-css/blob/master/chrome/userChrome.css
    This userChrome.css file was last modified on: 28-Jun-2018.
    Tested to work with Firefox 61 on Windows.
    Related blog post: http://www.optimiced.com/en/?p=1727
*/

#browser-bottombox {
  height: 20px;
  border-top: solid 1px #505050;
}

.browserContainer>#statuspanel {
  left: 4px !important;
  bottom: 0px;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

.browserContainer>#statuspanel>#statuspanel-inner>#statuspanel-label {
  margin-left: 0px !important;
  border: none !important;
  padding: 0px !important;
  color: #EEE !important;
  background: #333 !important;
}

window[inFullscreen="true"] #browser-bottombox {
  display: none !important;
}

window[inFullscreen="true"] .browserContainer>#statuspanel[type="overLink"] #statuspanel-label {
  display: none !important;
}

#titlebar {
  appearance: none !important;
  height: 0px;
}

#titlebar > #toolbar-menubar {
  margin-top: 0px;
}

#TabsToolbar {
  min-width: 0 !important;
  min-height: 0 !important;
}

#TabsToolbar > .titlebar-buttonbox-container {
  display: block;
  position: absolute;
  top: 12px;
  left: 0px;
}

#nav-bar toolbarspring {
  min-width: 10px !important;
  max-width: 20px !important;
}

Screenshot of effects:

The customization needed starts with "customize toolbar" to put bookmarks and flexible spacing in place:

Then you go to about:config and set toolkit.legacyUserProfileCustomizations.stylesheets to true.

Then you create a chrome directory in your Firefox profile and save the css file as userChrome.css and reopen Firefox. You can find your profile directory via about:profiles

This is how nested and coloured tabs look:

In Tree Style Tab's settings page, there's an Advanced section that has a live-reloading user CSS style sheet. Great for testing out different ideas!

Here's what I have:

:root.sidebar tab-item.unread .label-content {
  font-style: italic !important;
}

:root.sidebar tab-item {
  font-family: "SF Pro" !important;
  font-stretch: condensed !important;
  font-weight: 300 !important;
}

:root.sidebar tab-item.active .label-content {
  font-weight: 500 !important;
}

Which looks like this:

Additionally, setting the same SF Pro Condensed font as the default UI font is possible:

#navigator-toolbox {
  font-family: "SF Pro" !important;
  font-stretch: condensed !important;
  font-weight: 300 !important;
}

.bookmark-item {
  font-family: "SF Pro" !important;
  font-stretch: condensed !important;
  font-weight: 300 !important;
}

Those snippets would be added to the end of your /chrome/userChrome.css file in your Firefox profile directory. Remember to close Firefox completely and restart it for the settings to take effect!

And, within the Tree Style Tab custom user style, add this:

:root.sidebar tab-item.active tab-label:before {
  content: "⇛⇛";
}

This adds a funky little pair of arrows to indicate your active tab :)

Unfortunately, it looks like 133.0b3 breaks these customizations: