My Firefox styling for Tree Style Tab

_Styling for Tree Style Tab.md

Styling for Tree Style Tab

See https://superuser.com/a/1424494/118213 for finding where to put this file.

userChrome.css

/** Hide the "Tree Style Tab" header */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
    display: none;
}

#sidebar-box {
  min-width: 100px !important;
}

/** hide tabs and keep OS window buttons */
#titlebar {
  appearance: none !important;
  height: 0px;
}

#titlebar > #toolbar-menubar {
  margin-top: 0px;
}

#TabsToolbar {
  min-width: 0 !important;
  min-height: 0 !important;
}

#TabsToolbar > .titlebar-buttonbox-container {
  display: block;
  position: absolute;
  top: 12px;
  left: 0px;
}

/** Make toolbar smaller **/
#urlbar-container {
  --urlbar-container-height: 30px !important;
}

#urlbar {
  --urlbar-height: 30px !important;
  --urlbar-toolbar-height: 30px !important;
}
#urlbar-container, #search-container
{
  padding-block: 2px !important;
}
#urlbar-background {
  inset: 3px !important;
}
.urlbar-icon, .sharing-icon, #identity-icon, #permissions-granted-icon,
    #tracking-protection-icon, #blocked-permissions-container > .blocked-permission-icon {
  width: 15px !important;;
  height: 15px !important;
}

toolbar .toolbarbutton-1 {
  & > .toolbarbutton-icon
{
    width: calc(2 * var(--toolbarbutton-inner-padding) + 15px) !important;
    height: calc(2 * var(--toolbarbutton-inner-padding) + 15px) !important;
  }
}
:root
{
  --toolbarbutton-inner-padding: 6px !important;
}