Vertical tabs 2 of 2

vertical-tabs.css

/* pure css vertical tabs without addons so they don't go haywire */
:root{
  --firsh-tab-width: 250px;
  --firsh-tab-height: 30px;
  --firsh-tab-top: 94px;
}
#TabsToolbar {
  position: absolute;
  right: 0;
  top: var(--firsh-tab-top);
  bottom:0;
  display: block;
  width: var(--firsh-tab-width);
  background: #161619;
  overflow-y: auto;
}
html:not([chromehidden~="toolbar"])#main-window #browser, #main-window #customization-container {
  margin-right: var(--firsh-tab-width);
}
#main-window[inFullscreen] #browser {
  margin-right:  0 !important;
}
#tabbrowser-tabs {
  padding-inline: 0 !important;
  --tab-min-width: var(--firsh-tab-width) !important;
}
#tabbrowser-arrowscrollbox[orient="horizontal"] {
  overflow-x: hidden;
  flex-direction: column !important;
}
#scrollbutton-up,
#scrollbutton-down,
#new-tab-button,
#alltabs-button,
/*#tabbrowser-arrowscrollbox-periphery,*/
#tabbrowser-arrowscrollbox::part(overflow-start-indicator),
#tabbrowser-arrowscrollbox::part(overflow-end-indicator)
{
  display:none;
}
#scrollbutton-up ~ .scrollbox-clip scrollbox{
  display: flex;
  flex-direction: column !important;
  overflow-x: hidden;
  padding: 0 !important;
  /*! overflow-y: scroll; */
}
.tab-label-container {
  height: auto !important;
}
#tabbrowser-tabs .tab-background, #tabbrowser-tabs .tab-stack{
  min-height: 0;
}
.tab-close-button.close-icon {
  display: none;
}
.tabbrowser-tab:hover .tab-close-button.close-icon {
  display: block;
}
#TabsToolbar .tabbrowser-tab{
  min-height: var(--firsh-tab-height) !important;
}
/* labels, make double height tab */
#TabsToolbar .tabbrowser-tab[soundplaying],
#TabsToolbar .tabbrowser-tab[pictureinpicture]{
  min-height: calc(var(--firsh-tab-height) * 2) !important;
}
#TabsToolbar .tab-background {
  margin-block: 0px !important;
}
.tab-label{
  margin-block: 0 2px !important;
}
.tab-secondary-label label{
  animation: secondary-label-reveal 0.2s forwards ease-out;
}
@keyframes secondary-label-reveal {
  0% {
    transform:translateY(10px);
    opacity:0;
    height:0;
  }
  100% {
    transform:none;
    opacity:1;
    height:12px;
  }
}
/* fix pinned tabs' special treatment */
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab]{
  margin-inline-start: 0 !important;
}
:root:not([uidensity="compact"]) .tab-content[pinned]{
  padding: 0 var(--inline-tab-padding) !important;
}
.tab-throbber[pinned], .tab-icon-pending[pinned], .tab-icon-image[pinned], .tab-sharing-icon-overlay[pinned], .tab-icon-overlay[pinned] {
  margin-inline-end: 5.5px;
}
.tab-label-container[textoverflow][labeldirection="ltr"][pinned], .tab-label-container[textoverflow][pinned]:-moz-locale-dir(ltr) {
  direction: ltr;
  mask-image: linear-gradient(to left, transparent, black var(--tab-label-mask-size));
}
.tabbrowser-tab[pinned]:hover .tab-close-button {
  
}

/* custom perma icon to incidate pinned*/
.tab-close-button[pinned]{
  display: block !important;
  width: 24px !important; 
}
.tabbrowser-tab[pinned]:not(:hover) .tab-close-button{
  appearance: inherit;
  list-style-image: none !important;
  mask-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="122.879px" height="122.867px" viewBox="0 0 122.879 122.867" enable-background="new 0 0 122.879 122.867" xml:space="preserve"><g><path fill-rule="evenodd" fill="currentColor" clip-rule="evenodd" d="M83.88,0.451L122.427,39c0.603,0.601,0.603,1.585,0,2.188l-13.128,13.125 c-0.602,0.604-1.586,0.604-2.187,0l-3.732-3.73l-17.303,17.3c3.882,14.621,0.095,30.857-11.37,42.32 c-0.266,0.268-0.535,0.529-0.808,0.787c-1.004,0.955-0.843,0.949-1.813-0.021L47.597,86.48L0,122.867l36.399-47.584L11.874,50.76 c-0.978-0.98-0.896-0.826,0.066-1.837c0.24-0.251,0.485-0.503,0.734-0.753C24.137,36.707,40.376,32.917,54.996,36.8l17.301-17.3 l-3.733-3.732c-0.601-0.601-0.601-1.585,0-2.188L81.691,0.451C82.295-0.15,83.279-0.15,83.88,0.451L83.88,0.451z"/></g></svg>') !important;  
  mask-size: auto 12px;
  mask-repeat: no-repeat;
  background-color: var(--lwt-text-color);
  mask-position: 0 center;
  width: 17px !important; 
}
/*.close-icon.tab-close-button[pinned]:hover{
  background-color: var(--lwt-text-color) !important;
}*/
.tab-close-button[pinned]:-moz-window-inactive {
  opacity: .6;
}

/* apply theme bg to selected, in my case it's the dark space, slowly moving stars */
#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon:-moz-lwtheme,
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected="true"]:-moz-lwtheme,
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected="true"]:-moz-lwtheme {
  background-image: var(--lwt-additional-images) !important;
  background-repeat: var(--lwt-background-tiling) !important;
  background-position: var(--lwt-background-alignment) !important;
  background-size: 640px 360px !important;
  background-color: black !important;
}

/* top title projection*/
html[tabsintitlebar] .tabbrowser-tab:is([selected]):not([busy])::after {
    content: attr(label);
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    right: 0;
    padding: 0 135px 0 300px;
    line-height: 28px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    /*animation: sheen 0.2s forwards;*/
}
#TabsToolbar:-moz-window-inactive .tabbrowser-tab:is([selected]):not([busy])::after {
  opacity: .6;
}





/* Tab drag and drop */
.tabbrowser-tab{
  transform: none !important;
}
.tab-drop-indicator {
  width: 2px !important;
  height: 12px !important;;
  margin-inline-start: 0 !important;;
  /*background: url(chrome://browser/skin/tabbrowser/tab-drag-indicator.svg) no-repeat center;*/
  background:red !important;;
  position: relative;
  /* The z-index needs to be big enough to trump other positioned UI pieces
     that we want to overlay. The selected tab uses 2. */
  z-index: 3;
}

/* Drag space */

.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 40px;
  height: 40px;
  background:blue;
}

@media (max-width: 500px) {
  .titlebar-spacer[type="post-tabs"] {
    display: none;
  }
}