firefox tree style tabs gnome dark theme integration hack

tree-style-tabs.css

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

@-moz-document url("chrome://browser/content/browser.xul") {

  /* from existing gnome integration css
    i opened an issue on github about this so presumably it will be fixed at some point
    but until then (or in case it isn't), this can be added as a stylish userstyle
    %define tree #TabsToolbar.treestyletab-tabbar-toolbar[orient="vertical"]
    %define treeDefault @tree@:not([treestyletab-style])
  */ 
    
  #TabsToolbar.treestyletab-tabbar-toolbar[orient="vertical"]:not([treestyletab-style]) {
    background-color: inherit !important;
  }

  #TabsToolbar.treestyletab-tabbar-toolbar[orient="vertical"]:not([treestyletab-style]) .tabbrowser-tab, 
  #TabsToolbar.treestyletab-tabbar-toolbar[orient="vertical"]:not([treestyletab-style]) .tabbrowser-tab > .tab-stack {
    color: inherit !important;
  }

  #TabsToolbar.treestyletab-tabbar-toolbar[orient="vertical"]:not([treestyletab-style]) .tabs-newtab-button,
  #TabsToolbar.treestyletab-tabbar-toolbar[orient="vertical"]:not([treestyletab-style]) #new-tab-button {
    border-color: #3e4545 !important;
  }
  
  #TabsToolbar.treestyletab-tabbar-toolbar[orient="vertical"]:not([treestyletab-style]) .tabbrowser-tab:hover,
  #TabsToolbar.treestyletab-tabbar-toolbar[orient="vertical"]:not([treestyletab-style]) .tabs-newtab-button:hover,
  #TabsToolbar.treestyletab-tabbar-toolbar[orient="vertical"]:not([treestyletab-style]) #new-tab-button:hover {
    color: #fff !important;
  }
  
  #TabsToolbar.treestyletab-tabbar-toolbar[orient="vertical"]:not([treestyletab-style]) .tabbrowser-tab[visuallyselected] {
    color: #fff !important;
  }
  
  #TabsToolbar.treestyletab-tabbar-toolbar[orient="vertical"]:not([treestyletab-style]) .tabbrowser-tab[visuallyselected]:hover {
    background-color: #356ba4 !important;
  }
  
  #TabsToolbar.treestyletab-tabbar-toolbar[orient="vertical"]:not([treestyletab-style]) .treestyletab-twisty {
    list-style-image: url("chrome://symbolic-icons/skin/extensions/twisty-adwaita-white-l.png") !important;
  }

  #TabsToolbar.treestyletab-tabbar-toolbar[orient="vertical"]:not([treestyletab-style])[treestyletab-tab-contents-inverted] .treestyletab-twisty {
    list-style-image: url("chrome://symbolic-icons/skin/extensions/twisty-adwaita-white-r.png") !important;
  }
  
  #TabsToolbar.treestyletab-tabbar-toolbar[orient="vertical"]:not([treestyletab-style]) .tabbrowser-tab:hover,
  #TabsToolbar.treestyletab-tabbar-toolbar[orient="vertical"]:not([treestyletab-style]) .tabs-newtab-button:hover, 
  #TabsToolbar.treestyletab-tabbar-toolbar[orient="vertical"]:not([treestyletab-style]) #new-tab-button:hover {
    background-color: #555 !important;
    outline: none !important;
  }
  
  #addon-bar {
    border-bottom: 1px solid #1e2222 !important;
  }
  
  #TabsToolbar {
    border-top: 1px solid #393f3f !important;
  }
  
  .treestyletab-splitter[orient="horizontal"] {
    -moz-appearance: none !important;
    background: inherit;
    min-width: 1px;
    width: 1px;
    border-right: 1px solid;
    border-color: #1e2222 !important;
  }
}