maxxdogg on DeviantArthttps://www.deviantart.com/maxxdogg/art/UPDATE-FlatFox-Light-and-Dark-556554940maxxdogg

Deviation Actions

maxxdogg's avatar

UPDATE: FlatFox Light and Dark.

By
Published:
23.4K Views

Description

Flat theme for Firefox 40.0.2 or above. Inspired by Microsoft Edge UI and based on 10fox, Windows 10 Firefox Theme, Charming Firefox Theme. Created for Windows 10. I tried to make this theme pixel, border and color perfect. If You find some bug please report me and send screenshot. For some time I will upload dark version!

Bug list:
-on 3rd party Windows 10 themes caption buttons of Firefox window are big and white (I don't know how to fix it :c ), You have to use original Windows theme.

How to install?
Stylish addon is required. Create new script in Stylish and paste there content of .txt file and save script.

UPDATE:
-updated Light version, fixes and optimizations
-added DARK version!!!!!!!
© 2015 - 2024 maxxdogg
Comments71
Join the community to add your comment. Already a deviant? Log In
megazildjian's avatar
Or please fix this if you have some time. Latest FF update broke it. 

namespace url(www.mozilla.org/keymaster/gate…); @-moz-document url("chrome://browser/content/browser.xul") { #main-window { background-color: rgba(204,204,204,100) !important; } toolbarbutton.bookmark-item { -moz-appearance:none !important; } toolbarbutton.bookmark-item:hover { background-color: #e1e1e1 !important; border: 1px solid #cccccd !important; } #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) { background-color: rgba(242,242,242,100) !important; margin-bottom: 0px !important; margin-top: 0px !important; } #back-button > .toolbarbutton-icon, #forward-button > .toolbarbutton-icon, .urlbar-history-dropmarker, #urlbar > toolbarbutton, #urlbar-reload-button:not([disabled]):hover, #urlbar-reload-button:not([disabled]):hover:active, #urlbar-stop-button, #urlbar-stop-button:hover:active, #urlbar-stop-button:not([disabled]):hover, #urlbar-go-button, #urlbar-go-button:hover, #urlbar-go-button:hover:active, #PanelUI-menu-button .toolbarbutton-icon { -moz-image-region: rect(0, 0, 0, 0) !important; } #urlbar-reload-button, #urlbar-reload-button:not([disabled]):hover, #urlbar-reload-button:not([disabled]):hover:active, #urlbar-stop-button, #urlbar-stop-button:hover:active, #urlbar-stop-button:not([disabled]):hover, #urlbar-go-button, #urlbar-go-button:hover, #urlbar-go-button:hover:active, #PanelUI-menu-button .toolbarbutton-icon, .tabs-newtab-button .toolbarbutton-icon { list-style-image: none !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; } #urlbar:not(:-moz-lwtheme), .searchbar-textbox:not(:-moz-lwtheme) { background-color: #E5E5E5 !important; } #back-button > .toolbarbutton-icon { background-color: rgba(204,204,204,1) !important; opacity: 1 !important; list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAOVBMVEX///////////////////////////////////////////////////////////////////////////+0EB4eAAAAEnRSTlMAARITFEhhYoCVxs7P0NHS+P68sBq6AAAAX0lEQVR4Ae2UOw6AMAzFIKV86Aea+x+WnQFkibA0nm0pWd7gdMwcmb+0MzJfdR+Zn4T52dgvwdav1J+Yfxj7bVufuPuv8ICfRJ/+pKi8CLQoPxRZ7IskfGbokOGpdJwLrn4Nz4WSMXAAAAAASUVORK5CYII=) !important; box-shadow: none !important; } #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon { background-color: rgba(179,179,179,1) !important; opacity: 1 !important; } #back-button:not([disabled="true"]) > .toolbarbutton-icon { background-color: rgba(179,179,179,.7) !important; opacity: 1 !important; } #forward-button > .toolbarbutton-icon { background-color: rgba(179,179,179,.7) !important; opacity: 1 !important; list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsSAAALEgHS3X78AAAAoUlEQVR42u3YywnCQBhF4diCsSjbMJXYhC251Ek6mVkJ8%2FIXssjClQjJzZwPsg33QAjMdB0AAGhEjPGcUrrIji%2BlvOwpFjGo7T%2FknO91JhnhvT9axGMPEU8i1hZC6C3CEbGRiFE94rSXiImIJXvZdYXn9hn%2Bl4i6ET9HyAfIf0L8iRobP6qO79XHO8ZzoGlsvOyhXv9aRf1iS%2F9qEQAAfPEGvXXvmMQxVScAAAAASUVORK5CYII%3D) !important; box-shadow: none !important; } #forward-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon { background-color: rgba(179,179,179,1) !important; opacity: 1 !important; } #page-proxy-favicon { list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAYFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD6T+iNAAAAIHRSTlMAAQIOFBgaGx4gIiMwMTI1OkBBQ0RGR0lKS01PUVJTVGSK8IQAAACESURBVBjTZU8JDoMwDPNaYMC4ysIRaPH/f7kipm1aLSWSc9pARNas5NpkeGMguW0xDRcfpTxuXWeOUsaT96xaFstSsK3YA5a603uesSstnBrL3IiYnNaoA+s4BDgHxHZNhEmUT/FehCpTQJh/C3P4W3kwPZq8vYTdv8JS6am5075+7L8Aeq4P9lht9xsAAAAASUVORK5CYII=); background-size: contain !important; } .urlbar-history-dropmarker { margin-right: 4px !important; list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAKlBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADmU0mKAAAADXRSTlMAAp6go6KHIKGfpOAD7XSp+AAAAIJJREFUeNrt0DEOgCAQRFFXEAXd+1/XRoL4o9MbpiN5fwumsbGxx9Zkilhab3732YSffW9FckcB7576Z7YPn+tJFtq3ItiLD9WLAl4V9Cw2Htqa1wU9i6X/jIWehfIs4EURL2Kxel3AywJeFOU4Sud1Aa8KeFHAqwJeFvCqsGnsVzsB77EHSXksSN4AAAAASUVORK5CYII=); } .urlbar-history-dropmarker .dropmarker-icon { width: 16px !important; opacity: 0.33 !important; } #urlbar-reload-button, #urlbar-reload-button:not([disabled]):hover, #urlbar-reload-button:not([disabled]):hover:active { width: 16px !important; height: 16px !important; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAATlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADEoqZZAAAAGXRSTlMAECAwP0BQYG9wf4CPkJ+gr7C/wM/Q3+/wOZx2zAAAAYBJREFUeAGdldHW2yAMg00YIRnj7xpgid//RdcOfDhaPUr33TQXCFkGU0LMt+8/fy00Blfzg2t+tZAIWR0hfbUQCAl8oMjz36wvEuYfZqhZFAlnO9BcpEn4HGiSLmH2oBmlJ1u0kLueHn2wtkNN3/EXP8lGNblIw1ZNpMZyDtJjXCntVtdiej3P0Uz4SSGvpxdq31w1kW+P6QHZ+d4/b7VgNT3UbyRYM/RqerDZRVykMZgeKdLRE/pkSKUf30lkpa73uHY09ZemaBc6SJQBECZUSaIpUpXETyXxfySfF1YlmabIVeI/b7Kcz3v6qctlGwDzLpnydJQkWpys8eWHERtz63unORvbB5mcvB1jDulXt9ln2pVgdNiOy8JRjPBKq4oTH1gyZawRRTEvrzRvpLLxHy7YcuXKsSgWB0sQ/Y/5C0W0fHHDEyHrxY28WRKDLXPjcop/4U4+HmTuFEsKJvI/iYZ0XGKVNHpM3Z1fuDsas+xglfaFZnA+hBhD8Or+vwHYtEgUMH04/AAAAABJRU5ErkJggg==); background-size: 80% !important; } #urlbar-reload-button { opacity: 0.33; } #urlbar-reload-button:not([disabled]):hover, #urlbar-reload-button:not([disabled]):hover:active { opacity: 0.5; } #urlbar-stop-button, #urlbar-stop-button:hover:active, #urlbar-stop-button:not([disabled]):hover { width: 16px !important; height: 16px !important; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAKlBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADmU0mKAAAADXRSTlMAAqOfnqKhpBegA+AgKN8kbwAAAKhJREFUeAHtlMuqhjAMhDta7aXm/V/3oAyF89NAZufCLJvvC17SSW+rryq8Durq9BoZDp/HtZg/zDLWvNmoy2PbseB346iY4fJstZ8WGse4xvmvidPnOW4ak28uT+CYAA4OCBhBntD2QNgoB40gT7D0XihGjRhP44ZvCSlYvTx8T7qgP5L+0vpn1X+cvhr68unrrV8g/YrqIaDHjB5kelTqYazE/cvqqz8pywuRZp6l4QAAAABJRU5ErkJggg==) !important; } #urlbar-go-button, #urlbar-go-button:hover, #urlbar-go-button:hover:active { width: 16px !important; height: 16px !important; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAb1BMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADrabCLAAAAJHRSTlMAGNdw+gsK+0/BwgxSv8C+UVNQTq+LBAOn+Ww48js1VNgbw3Sk/KLxAAAAkElEQVR4Ae3Vxw6EMAwE0O2b7Uvv3f//jUSIcMUjy7fMiYOfhMCZHNTjkyZH99iUjPksp9MqqprO+6AtyImYiCOiixO3H08YifhoiVAgrl+e+EvEgyfeuLgLxJMngk281ERnRT8sYrRikgP8lcB5/LPiPw5fDXz58PXGDxB+RI18Hi8yvCrxMsbrHr9QfJQzA0DCHbVE0a0XAAAAAElFTkSuQmCC) !important; } #urlbar-go-button { opacity: 0.33; } #urlbar-go-button:not([disabled]):hover, #urlbar-go-button:not([disabled]):hover:active { opacity: 0.5; } .tabs-newtab-button .toolbarbutton-icon { width: 16px !important; height: 16px !important; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAABgSURBVDhPzcsxCkJBAEPBvf+lVwLTCE/kg4UDaUJyfuLe+zhvaiBTvSc1kKnekxrIVO9JDWSq96QGMtV7onzCkxUfMtV7UgOZ6j2pgUz1ntRApnpPaiBTvSc1+JZ/cc4LVFYODzudx0wAAAAASUVORK5CYII=) !important; background-size: 100% !important; margin-left: 3px !important; margin-right: 2px !important; margin-top: -1px !important; } #TabsToolbar .tabs-newtab-button { opacity: 1; } #TabsToolbar .tabs-newtab-button:hover { background: rgba(128,128,128,.7) !important; } #TabsToolbar .tabs-newtab-button:active { background: #a2a2a2 !important; } #PanelUI-menu-button .toolbarbutton-icon { width: 32px !important; height: 28px !important; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAANElEQVR42u3ToQ0AMAwDwQzs%2Fam7RNWCHHh8UiJP2%2FnRgMF74CS9kVODweYEBpuTH4PB7zp5%2B1rPXyietwAAAABJRU5ErkJggg%3D%3D) !important; } #TabsToolbar { background: transparent !important; margin-top: -1px !important; margin-bottom: 0 !important; margin-left: -1px !important; } #TabsToolbar .arrowscrollbox-scrollbox { padding: 0 !important; box-shadow: none !important; } #TabsToolbar .tabbrowser-tab { border-width: 0px 0px 0px 0px !important; -moz-border-top-colors: none !important; -moz-border-left-colors: none !important; -moz-border-right-colors: none !important; -moz-border-bottom-colors: none !important; color: rgba(0,0,0,.8) !important; padding: 0px 0px !important; background: rgba(255,255,255,.0) !important; background-clip: padding-box !important; transition: all .1s !important; margin-top: 1px !important; /*1px line to enable window drag and drop*/ } #TabsToolbar .tabs-newtab-button { -moz-border-top-colors: none !important; -moz-border-left-colors: none !important; -moz-border-right-colors: none !important; -moz-border-bottom-colors: none !important; border-style: solid !important; border-color: transparent !important; border-width: 1px 1px 0 1px !important; background: transparent !important; background-clip: padding-box !important; transition: all .1s !important; } #TabsToolbar .tabbrowser-tab[selected] { color: rgba(0,0,0,1) !important; background: rgba(242,242,242,1) !important; background-clip: padding-box !important; margin-top: -1px !important; /*potrzebne do 1px linii*/ padding-top: 2px !important; /*potrzebne do 1px linii*/ } #TabsToolbar .tabbrowser-tab:hover:not([selected]) { background-color: rgba(229,229,229,1) !important; margin-top: -1px !important; /*potrzebne do 1px linii*/ padding-top: 2px !important; /*potrzebne do 1px linii*/ } } #TabsToolbar .tab-background { margin: 0 !important; background: transparent !important; } #TabsToolbar .tab-background-start, #TabsToolbar .tab-background-end { display: none !important; } #TabsToolbar .tab-background-middle { margin: 0px 0px !important; background: transparent !important; } #TabsToolbar .tabs-newtab-button { border-width: 1px 1px 0 1px !important; margin: 0 !important; width: auto !important; padding: 0 5px !important; } #PersonalToolbar { min-height: 32px !important; padding-bottom: 3px !important; -moz-padding-start: 2px !important; -moz-padding-end: 2px !important; } #addon-bar, #PersonalToolbar, #nav-bar { background: #F7F7F7 !important; box-shadow: none !important; background-clip: padding-box !important; border-color: rgba(0,0,0,.25) !important; border-radius: 0 !important; } #menu_pocket, #menu_pocketSeparator, #panelMenu_pocket, #BMB_pocket, #BMB_pocketSeparator, #context-savelinktopocket, #context-pocket { display: none !important; } .tab-throbber[busy] { animation-name: none !important; list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGUlEQVQ4jWNgGAWjYLCB/1BMjhh1DBipAAAfxwv1p0imEAAAAABJRU5ErkJggg==") !important; } .tab-throbber[progress] { animation-name: none !important; list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGUlEQVQ4jWNgGAWjYLCB/1BMjhh1DBipAAAfxwv1p0imEAAAAABJRU5ErkJggg==") !important; } #identity-box { display:none;} #urlbar #plugins-notification-icon, #urlbar #notification-popup-box { display:none!important; } #urlbar { color: #757983 !important; font-family: "Segoe UI Semibold",Helvetica,Arial,sans-serif; font-size: 13px; box-shadow: none !important; padding-left: 13px !important; } #searchbar .search-go-button { visibility: hidden !important; } #searchbar .searchbar-dropmarker-image { display: none !important; } #searchbar .searchbar-engine-image { width: 0 !important; padding-left: 18px !important; margin-left: -20px !important; margin-top: 0px !important; margin-bottom: 0px !important; margin-right: 3px !important; } #searchbar .searchbar-textbox { color: #757983 !important; font-family: "Segoe UI Semibold",Helvetica,Arial,sans-serif; font-size: 12px; box-shadow: none !important; margin-left: 5px !important; margin-right: 10px !important; padding-left: 1px !important; } #urlbar > toolbarbutton { /*-moz-box-ordinal-group: 0;*/ /*refresh button on left side*/ padding-left: 10px; padding-right: 10px !important; margin-right: 5px !important; margin-left: 6px !important; } .autocomplete-history-dropmarker { display:none !important; } #main-window:not([privatebrowsingmode="true"])[sizemode="fullscreen"] #TabsToolbar { margin-right: -53px !important; } .tabs-alltabs-button { display: none !important; } /*remove dropdown all tabs button*/ /*tabs width*/ .tabbrowser-tab:not([pinned]) { min-width: 60px !important; /* defaults to 100px */ } .tab-close-button { display: -moz-box !important; opacity: 0 !important; } tab:hover .tab-close-button { display: -moz-box !important; opacity: 1 !important; } /*hide tab favicon-change opacity to 0 to hide*/ .tabbrowser-tab:not([pinned]) .tab-icon-image { opacity: 100 !important; } /*center tab text*/ .tabbrowser-tab .tab-text {text-align: center;} .tab-content:not([selected]) { /*font-size:12px!important;*/ /*text-align: center !important;*/ opacity: 0.4 !important; } .tab-content[selected] { /*font-size:12px!important;*/ /*text-align: center !important;*/ opacity: 0.8 !important; }