userChrome.css

FirefoxWin8Win10Colors.css

/*
By Ben-Kaniobi
https://gist.github.com/Ben-Kaniobi
Versions:
0.1.5  Fixed bug of black rectangle that sometimes appeared near the url bar with long urls
0.1.4  Updated for Firefox 42 on Windows 10; Also handling background of tab bar
0.1.3  Updated for Firefox 40 on Windows 10
0.1.2  Added info on how to make it work on Windows 10
0.1.1  Update for Firefox 29 (Australis)
0.1.0  First release

Install:
- Save to "(Firefox profile directory)/chrome/userChrome.css"
or
- Use Stylish addon (https://addons.mozilla.org/de/firefox/addon/stylish/) and install this style at
  http://userstyles.org/styles/97962/firefox-with-windows-8-colors

For Windows 10, you may first do this:
  http://www.howtogeek.com/222831/how-to-get-colored-window-title-bars-on-windows-10-instead-of-white/
*/

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


/* Bars on top and bottom transparent and borderless */
#main-menubar, #nav-bar, #customToolbars, #TabsToolbar, #PersonalToolbar, #web-developer-toolbar, #browser-bottombox {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Url bar and search bar slightly transparent; also fixes black rectangle that sometimes appeared near the url bar with long urls */
#urlbar, .searchbar-textbox {
    background: rgba(255,255,255,0.9) !important;
}
#identity-box:not(:hover) {
    background: transparent !important;
}

/* Change color of active tab */
.tab-background, .tab-background-middle {
    background-color: transparent !important;
}
.tab-background .tab-background-middle[selected=true]{
    background-image: url("chrome://browser/skin/customizableui/background-noise-toolbar.png"),url(chrome://browser/skin/tabbrowser/tab-active-middle.png), linear-gradient(#FFF, rgba(255,255,255,0.1));
    background-size: auto 100% !important;
}
.tab-background-start[selected=true]::before{
    clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start) !important;
}
.tab-background-end[selected=true]::before{
    clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end) !important;
}
.tab-background .tab-background-start[selected=true]::before,.tab-background .tab-background-end[selected=true]::before{
    content: "" !important;
    display: -moz-box !important;
    background-color: transparent!important;
    background-image: url("chrome://browser/skin/customizableui/background-noise-toolbar.png"), linear-gradient(#FFF, rgba(255,255,255,0.1)) !important;
}

/* Make sure the background image of the tab bar is not visible as we want it transparent */
#TabsToolbar {
    background-size: 0px !important;
    background-color: transparent !important;
}