Firefox userChrome CSS #config

userChrome.css

/* 
Use with Tree Style Tab Firefox extension - styles Firefox to remove tab bar

sources: https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#auto-showhide-sidebar-by-mouseover-hover
         https://gist.github.com/collinbarrett/45c90f7d427e08d69d32dfef402c86f6

macOS: ~/Library/Application Support/Firefox/Profiles/<Your Firefox Profile>/chrome
Linux: /home/<Your Username>/.mozilla/firefox/<Your Firefox Profile>/chrome/;
Windows: C:\Users\<Your Username>\AppData\Roaming\Mozilla\Firefox\Profiles\<Your Firefox Profile>\chrome

Editing firefox CSS:
https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/

If minimize, maximize, and close buttons overlap other controls, customize toolbar in Firefox and add flexible space
*/

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* TODO: overlay */

/* Hide Firefox tab toolbar */
#TabsToolbar {
    visibility:collapse!important;
}

/*Collapse sidebar in default state and add transition*/
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
  overflow: hidden;
  min-width: 40px;
  max-width: 40px;
  transition: all 0.2s ease;
  border-right: 1px solid #0c0c0d;
  /*background-color: red;*/
  z-index: 2;
}

/*Expand to 220px on hover*/
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
  min-width: 260px !important;
  max-width: 260px !important;
}

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