"Tree Style Tab" for Firefox - Eye candy fixes

Hide Tree Style Tab Header + Horizontal bar + Auto-hide

A discussion about how to remove/hide various part of the GUI can be found here on Github.

Changes in "userChrome.css" to remove the header line in the sidebar:

This has to be changed or added to the userChrome.css file that is located in the Firefox profile directory, subdirectory "chrome".

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/*
* TreeStyleTabs solutions to remove tabs
*
* Solution by: https://news.ycombinator.com/item?id=15343940 */

#TabsToolbar, #sidebar-header {
  visibility: collapse !important;
}

#TabsToolbar {
  margin-bottom: -21px !important;
}

Extra style rules for sidebar content

This has to be changed on the configuration page of the Tree Style Tab Firefox Add-on.

/* Show title of unread tabs with red and italic font */
/*
.tab.unread .label {
  color: red !important;
  font-style: italic !important;
}
*/

/* Add private browsing indicator per tab */
/*
.tab.private-browsing .label:before {
  content: "🕶";
}
*/

    .closebox {
      display: none
    }
    
    .tab:hover .closebox {
      display: block;
    }
    
    .tab {
      padding-top: 0px;
      padding-bottom: 0px;
    }

/* You can make `.tab` even tighter: */

    .tab .icon {
      padding-top: 2px; /* reducing it by 2px */
      padding-bottom: 2px;
    }
    
    :root {
      --tab-height: 22px; /* reducing it by 4px */
    }

Update 2020-05: For the userChrome.css to work you have to set in about:config the value toolkit.legacyUserProfileCustomizations.stylesheets to true and remove the @namespace line from the beginning of the CSS.