TST + TabBar hide + show on hover

tst-style.css

:root {
  /* This value should be updated here and in the userChrome.css */
  --tst-sidepanel-hide-delay: 0ms;
}

/* Hide border on tab bar, force its state to 'scroll', adjust margin-left for width of scrollbar. */
#tabbar {
  border: 0;
  scrollbar-width: none;
  overflow: scroll !important;
  margin-top:  0 !important;
}

/* resolve extra space for scrollbar (scrollbar is hidden by this script) */
.on-scrollbar-area #tabbar {
  --shift-tabs-for-scrollbar-distance: 0px;
}

/* Include 'reveal' animation ... stagers by level */
#tabbar .tab {
  transition: 0.1s margin-top, 0.2s 0.1s visibility;
}
#tabbar tab-item-substance {
  transition: 0.2s 0.1s margin-left;
}


/* delay transitions on open */
#tabbar:not(:hover) tab-item-substance {
  transition-delay: var(--tst-sidepanel-hide-delay);
  margin-left: 0;
}

/* animate twisty reveal */
#tabbar .tab .twisty {
  transition: 0.2s margin;
}

/* general tabs */
.tab {
  background-color: transparent;
}
.tab,
.tab.pinned {
  height: 2.8em;
}

/* Push tab labels slightly to the right so they're completely hidden in collapsed state, but still look fine while expanded. */
.tab .label {
  margin-left: 1em;
}

/* fix closebox */
.tab .closebox {
  margin-left:  0;
}

.tab .counter {
  margin-left:  auto;
  display: inline-block !important;
}

/* Hide .twisty and adjust margins so favicons have 7px on left. */
#tabbar:not(:hover) .tab .twisty {
  visibility: hidden;
  margin-left: -12px;
  transition-delay: var(--tst-sidepanel-hide-delay);
}


/* hide closebox unless needed */
.tab:not(:hover) .closebox {
  visibility: hidden;
}

/* Hide sound playing/muted button. */
.sound-button {
  margin-left: 0;
  display: inline-block;
  visibility: collapse;
}

.tab.audible .sound-button {
  visibility: visible;
  margin-left: 0.25em;
}

.tab:not([data-child-ids]) .counter {
  /* visibility: hidden; */
}

tab-item:not(.subtree-collapsed) .counter {
  visibility: hidden;
} 

/* Hide 'new tab' button. */
.newtab-button {
  display: none;
}

/* active tab */
.tab.active {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

tab-item.active .highlighter::before {
  background-color: #fffd !important;
}

.tab:hover,
.tab.active:hover {
  background-color: inherit;
}
.tab.active .label {
  font-weight: bold;
  color: #f4f4f4 !important;
}
.tab .label,
.tab.active .label {
  border-bottom:  1px solid transparent;
}
.tab:hover .label,
.tab.active:hover .label {
  border-bottom:  1px dotted;
  min-width:  0 !important;
  flex-shrink:  1 !important;
  flex-grow:  unset !important;
}

/* pending / unloaded tabs */
.tab.discarded {
  background-color: #1d1d1d;
}
.tab.discarded .label {
  color: #efefefCC !important;
}
.tab.discarded:hover .label {
  color: #efefef !important;
}

/* Adjust style for tab that has sound playing. */
.tab.sound-playing .favicon::after,
.tab.muted .favicon::after {
  content: '🔊';
  z-index: var(--favicon-base-z-index);
  position: absolute;
  font-size: 0.5em;
  bottom: -0.35em;
  right: -0.7em;
}

/* Adjust style for tab that is muted. */
.tab.muted .favicon::after {
  content: '🔇';
}

/* Pinned tabs: */
/* Hide all non-active pinned tabs (these are included in top-bar instead) */
.tab.pinned {
  position: relative;
  max-width: none;
  width: auto;
  top: 0 !important;
  left: 0 !important;
}
.tab.pinned:not(.active) {
  display: none;
}
.tab.pinned .label,
.tab.pinned .label-content {
  opacity: 1;
  position: unset;
  padding-bottom: 0;
}
.tab.pinned .sound-button {
  position: relative;
  transform: none;
}
.tab.pinned .twisty {
  display: block;
  min-width: none;
  width: auto;
}

userChrome.css

/* hides the native tabs */
:root:not([customizing]) #navigator-toolbox{
  position: relative;
  z-index: 1;
}

#navigator-toolbox:not(:hover) > #titlebar{
  -moz-window-dragging: no-drag !important;
  pointer-events: none
}

:root:not([customizing]) #navigator-toolbox:hover,
:root:not([customizing]) #titlebar{
  margin-bottom: calc(0px - 2 * var(--tab-block-margin) - var(--tab-min-height));
}
#TabsToolbar:not([customizing]){ visibility: hidden; transition: visibility 0ms linear 200ms }

#navigator-toolbox,
#titlebar{ transition: margin-bottom 48ms ease-out 200ms }

#navigator-toolbox:hover{ transition-delay: 0s }
#navigator-toolbox:hover > #titlebar{
  margin-bottom: 0px;
  transition-delay: 0s;
}

#navigator-toolbox:hover #TabsToolbar{
  visibility: visible;
  transition-delay: 18ms
}

#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container{
  max-height: var(--tab-min-height);
}
.tab-label{ line-height: 20px !important; }
:root[uidensity="compact"] .tab-label{ line-height: 18px !important; }

#TabsToolbar{
  -moz-window-dragging: no-drag;
  visibility: collapse;
}
#titlebar:hover > #TabsToolbar{ visibility: visible }

/* 
Firefox `userChrome.css` for Tree Style Tab
  
  * Auto-sliding draw for TST
  * Leaves 'pinned' and 'active' tabs visible in standard browser chrome
  * Leaves 'last-active' tabs visible for 3 minutes after becoming inactive
  * Where an active tab is pinned, leaves 'last-active' tab (x1) visible for 1hr

  Instructions:
    1. Choose: (Hamburger menu) -> 'Customize'
      - Switch 'Title bar': off
      - also 'Drag space': off
    2. Browse to URL "about:config"
      - set `toolkit.legacyUserProfileCustomizations.stylesheets`: true
    3. Browse to URL "about:profiles"
      - Select 'Profile in use' -> 'Root Directory' -> 'Show in Finder' (Mac)
      - Save this file under `chrome/userChrome.css`
      - restart the browser
    4. Install Tree Style Tab
    5. Browse to URL: "about:addons"
      - Select 'Tree Style Tab' -> 'Preferences' tab -> 'Extra style rules for sidebar contents'
      - paste in content from `tree-style-tabs-theme.css`

  Debugging: https://superuser.com/q/1608096
  See step 2. above to update `{profile root dir}/chrome/userChrome.css`
 */

 :root {
  --thin-tab-width: 30px;
  --wide-tab-width: 300px;
  --inactive-tab-hide-delay: 180s;
  /* This value should be updated here and in the tree-style-tabs-theme.css */
  --tst-sidepanel-hide-delay: 1s;
}



/* Sidebar sliding auto-reveal */

/* Sidebar min and max width removal */
#sidebar {
  max-width: none !important;
  min-width: 0px !important;
}

/* Hide splitter */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
  display: none !important;
}
/* Hide sidebar header */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  visibility: collapse;
}

/* Shrink sidebar until hovered */
#sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) {
  min-width: var(--wide-tab-width) !important;
  max-width: none !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
  overflow: hidden !important;
  position: relative !important;
  transition: all 300ms !important;
  min-width: var(--thin-tab-width) !important;
  max-width: var(--thin-tab-width) !important;
  z-index: 2;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
  transition: all 300ms !important;
  min-width: var(--wide-tab-width) !important;
  max-width: var(--wide-tab-width) !important;
  z-index: 1;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover {
  margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
}