Vertical tabs 1 of 2

userChrome.css

@import url("vertical-tabs.css") screen;

/* vcenter menu */
#menubar-items {
  display: flex !important;
  align-content: center;
}
/* compact bookmarks */
#PlacesToolbar #PlacesToolbarItems toolbarbutton.bookmark-item {
  margin: 0 !important;
}
/* url not grey */
#urlbar-input{
  mix-blend-mode: luminosity;
}

:root{
  --toolbar-bgcolor:#16161900 !important;
}
/* hides the native tabs */
/*#TabsToolbar {
  visibility: collapse;
}*/


/* makes active tab the only thing and moves it to the hybrid menu - titlebar - windows buttons area */
/*
#titlebar {
  position: relative;
}
#TabsToolbar {
  min-height: 0;
  padding: 0;
  position: absolute !important;
  left: 0;
  display: flex;
  pointer-events: none;
  justify-content: center;
  top: 0;
  right: 0;
  bottom: 0;
  --tab-min-height: 0;
}
#TabsToolbar .toolbar-items {
  margin: 0 150px 0 300px;
  width: 100%;
  align-items: center;
  display: flex;
  mask-image: linear-gradient(to left, transparent, black 50px);
}
#TabsToolbar #TabsToolbar-customization-target {
  margin: 0 auto;
}
#TabsToolbar .tabbrowser-tab:not([pinned]) {
  width: auto !important;
  max-width: none !important;
  -moz-box-flex: 0 !important;
}
#TabsToolbar .tab-label-container {
  mask-image: unset !important;
}
#TabsToolbar .tab-background {
  display: none;
}
#TabsToolbar .tab-close-button.close-icon {
  display: none;
}
#TabsToolbar .tabbrowser-tab:not([selected]) {
  display: none;
}
#TabsToolbar #tabbrowser-arrowscrollbox-periphery {
  display: none;
}
*/