Firefox tree-style-tabs config

tree-style-tabs.css

@media (max-width: 120px) {
  #tabbar {
    margin-top: 5px !important;
    overflow-x: hidden;
  }
  :root {
     background: var(--tab-surface) !important;
  }
  /* the changes between.tab and .tab.faviconized differ between themes. doing this twice seems the most consistent */
  .tab {
    position: relative;
    display: flex;
    padding-right: 23px !important;
    justify-content: center;
    margin-left: 0px !important;
    padding-left: 6px;

  }
  
  .tab.faviconized
  {
    left: 0px !important;
    position: relative;
    display: flex;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    padding-right: 6px !important;
    min-height: 45px;
    border-bottom: solid 1px #404040 !important;
  }

  .tab .twisty {
  }

  .tab.removing {
    display:none;
  }
  .tab .label {
    display: none;
  }
  .tab .counter {
    display: none;

  }
  .tab .sound-button{
    display: none;
  }
  .tab .closebox{
    display: none !important;
  }
  .tab .burster {
    display: none;
  }
  .tab[data-level]:not([data-level="0"]) {
    border-right: solid 2px #4477ff !important;
  }
  /* all nesting markers are pretty obnoxious when collapsed so I went with color coded borders instead. might wanna add shades for >level 1?

  .tab[data-child-ids].subtree-collapsed {
    border-right: solid 2px #4477ff;
  }
  .tab[data-child-ids]:not(.subtree-collapsed) {
    border-right: solid 2px #224466;
  }*/
  .tab:not(.collapsed) .favicon {
    height: var(--faviconized-tab-size);
    max-height: var(--faviconized-tab-size);
    max-width: var(--faviconized-tab-size);
    width: var(--faviconized-tab-size);
    padding: calc((var(--faviconized-tab-size) - var(--favicon-size)) / 2);
  }

  .favicon-image {
    max-height: var(--favicon-size);
    max-width: var(--favicon-size);
  }

  /* the dropdown button is 5px wide */
  .newtab-button {
    position:relative;
    left: 4px;
  }
}

.tab.private-browsing .label:before {
  content: "🕶";
}
.closebox {
  display: none
}
.tab:hover .closebox {
  display: block;
}
.tab.discarded {
  opacity: 0.75;
}
.tab.unread .label {
  font-style: italic;
}
:root.left #tabbar {
  direction: ltr;
}

userChrome.css

#TabsToolbar { visibility: collapse !important; }
#titlebar {display: none !important;}
#TabsToolbar .titlebar-placeholder {display: none !important; }
#nav-bar {padding-top: 5px !important;}
#sidebar-header { display: none; } 
#sidebar { min-width: 1px !important; }

/* AGENT_SHEET */
scrollbarbutton[sbattr="scrollbar-up-top"],
scrollbarbutton[sbattr="scrollbar-down-top"],
scrollbarbutton[sbattr="scrollbar-up-bottom"],
scrollbarbutton[sbattr="scrollbar-down-bottom"]
{
  -moz-appearance: none !important;
  display: none !important;
}

scrollbar[orient="vertical"]
{
  -moz-margin-start: -15px;
  min-width: 15px!important;
  max-width: 15px!important;
  -moz-appearance: none!important;
  position: relative;
  background-color: transparent!important;
  background-image: none!important;
  border: 0;
  z-index: 2147483647;
  -moz-box-align: start;
  padding: 1px 1px 1px 6px!important;
}

scrollbar[orient="horizontal"]
{
  margin-top: -15px;
  min-height: 15px;
  max-height: 15px;
  -moz-appearance: none!important;
  position: relative;
  background-color: transparent;
  background-image: none;
  border: 0;
  z-index: 2147483647;
  -moz-box-align: start;
  padding: 6px 11px 1px 1px!important;
}

scrollbar thumb
{
  -moz-appearance: none !important;
  background-color: rgba(80,80,80,0.5);
  border-radius: 8px;
  border: 0;
}

scrollbar[orient="vertical"] thumb
{
  min-height: 20px!important;
  min-width: 15px!important;
  max-width: 15px!important;
}

scrollbar[orient="horizontal"] thumb
{
  min-width: 20px!important;
  min-height: 15px!important;
  max-height: 15px!important;
}

scrollbar thumb:hover, scrollbar thumb:active
{
  background-color: rgba(0,0,0,0.5);
}

html div scrollbar
{
  -moz-margin-start: 0!important;
}