@-moz-document url-prefix(chrome://) {
  @media screen and (-moz-os-version:windows-win7) {
    window {
      background-color: transparent !important;
    }
  }
}

/* Change the color of buttons in the nav-bar (sidebar, more, hamburger)*/
#nav-bar-overflow-button, #PanelUI-menu-button, #sidebar-button {
    opacity: 1 !important;
    fill: var(--primary-accent-color) !important;
}

Remove background color of sidebar button when active

/* Change the background color of the sidebar button when active */
#sidebar-button[checked] > .toolbarbutton-icon{ background-color: inherit !important; }

Remove forward and back buttons

/* Remove the forward and back buttons */
#back-button, #forward-button  { display: none !important; }

Remove owner name for SSL certs

/* Remove owner name for SSL certs */
#identity-box.verifiedIdentity #identity-icon-labels {display: none !important;}

Remove containers name and symbol

/* Remove containers name and symbol */
#userContext-label, #userContext-indicator { display: none !important;}

/* Remove Page Actions Menu */
#pageActionButton {
  display: none !important;
}

Put refresh button "inside" address bar

This tweak requires that you first put the refresh button directly to the right of the address bar.

/* Put refresh button "inside" address bar */
#pageActionSeparator{
    margin-right:26px !important;
}

#stop-reload-button .toolbarbutton-icon{
    border-radius: 0px !important;
    padding: 5px 6px !important;
}

#stop-reload-button{
    transform: translateX(-62px);
    border-radius:0px !important;
    margin-right:-32px !important;
}

Remove reload button on new tab page

/* Hide reload button */
#main-window[title^="New Tab"] #stop-reload-button { display: none !important; }
#main-window[title^="Nightly"] #stop-reload-button { display: none !important; }

/* Remove separator before hamburger menu */
#PanelUI-button {
    border-inline-start: 0px !important;
}

/* Remove hamburger menu button */
#PanelUI-menu-button {display: none;}

Invert color of Neat URL webextension icon

/* Invert color of Neat URL icon */
toolbarbutton#neaturl_hugsmile_eu-browser-action {filter:invert(95%) !important;}

Original navigation bar to bottom on UI repository: bottom-nav-bar

#browser {
  margin-bottom: 32px !important;
}
#nav-bar {
  bottom: 0 !important;
  height: 32px !important;
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
}
/* Make it full width, after re-position */
#nav-bar-customization-target {
  width: calc(100% - 60px) !important;
}
/* Fix the main menu action */
#PanelUI-button {
  display: inline-block !important;
  height: 32px !important;
  position: absolute !important;
  right: 3px;
  top: 3px !important;
}
#nav-bar-overflow-button {
  display: inline-block !important;
  height: 32px !important;
}
/* position the result list above (not below) the address bar */
#urlbar-results {
  bottom: 32px;
  right: 0px;
  width: 100%;
  margin-top: -410px !important;
}

Tabs Bar

Mac - remove window buttons (Close, Minimize, Fullscreen)

/* Remove window buttons (Close, Minimize, Fullscreen) */
#titlebar {display: none !important;}
#TabsToolbar .titlebar-placeholder {display: none !important; }

Dark favicons

/*
 * Makes the favicon near-grayscale to match dark mode but remain distinguishable
 *
 * Contributor(s): Madis0, Timvde, capta
 */

tab .tab-icon, .tab-icon-image {
  /* Tweak these values and their order, as you prefer */
  filter: invert(1) saturate(2) brightness(.35) hue-rotate(180deg) grayscale(.95) saturate(2) brightness(1.5);
}

Favicons on right

/* Favicon on Right */
.tab-icon-image {
  -moz-box-ordinal-group: 2 !important;
  margin-left: 3px !important;
  margin-right: 1px !important;
}

Turn favicons into close buttons on hover

.tabbrowser-tab:not(:hover) .tab-close-button{ display:none; }
.tabbrowser-tab:not([pinned]):hover .tab-close-button{ display:block !important; }


.tabbrowser-tab:not([pinned]):hover  .tab-icon-image {
  display: none !important;
}

.tabbrowser-tab:hover  .tab-throbber,
.tabbrowser-tab:hover  .tab-icon-image,
.tabbrowser-tab:hover .tab-sharing-icon-overlay,
.tabbrowser-tab:hover  .tab-icon-overlay,
.tabbrowser-tab:hover  .tab-label-container,
.tabbrowser-tab:hover  .tab-icon-sound {
   -moz-box-ordinal-group: 2 !important;
}

.tabbrowser-tab .tab-close-button {
  margin-left: -2px !important;
  margin-right: 2px !important;
}

Turn favicons into close buttons on hover on the right

.tab-icon-image {
  -moz-box-ordinal-group: 2 !important;
  margin-left: 3px !important;
  margin-right: 1px !important;
}

.tabbrowser-tab:not(:hover) .tab-close-button{ display:none; }
.tabbrowser-tab:not([pinned]):hover .tab-close-button{ display:block !important; }

.tabbrowser-tab:not([pinned]):hover  .tab-icon-image {
  display: none !important;
}

Show close button on hover

.tabbrowser-tab:not([pinned]):not(:hover) .tab-close-button {
  visibility: collapse !important;
}

.tabbrowser-tab:not([pinned]):hover .tab-close-button {
  visibility: visible !important;
  display: block !important;
}

Bookmarks Bar

/* Auto-hide bookmarks bar (show only on nav-bar hover)  */
#PersonalToolbar{
    opacity:0 !important;
    margin-top: -23px !important;
    transition: all 0.4s ease 0s !important;
}

#navigator-toolbox:hover > #PersonalToolbar{
visibility: visible !important;
margin-top: 0px !important;
transition: all 0.4s ease 0s !important;
opacity: 1 !important;
}

/* Hides bookmark text for all bookmarks displayed in a toolbar */
.bookmark-item > .toolbarbutton-text  { display: none !important; }

Sidebar

Decrease minimum width

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

Combined Setups

One-liner: no tabs bar

/*
 * One-liner, no tabs bar
 *
 * Contributor(s): @krruzic
 */

/* hide tabs */
#tabbrowser-tabs { visibility: hidden !important; }
tab { display: none !important; }

/* CSS to make urlbar and window controls 1 line */
#nav-bar {
  margin-bottom: -1px !important;               /* remove navbar bottom 1px border */
  margin-top: -30px !important;
  margin-right: 7.2vw !important;
  border-top: none !important;
}

/* Remove padding above tabbar in compact mode */
#main-window[sizemode="normal"] > #titlebar {
  -moz-appearance: initial !important;
}

/* Back & Forward buttons */
#back-button > .toolbarbutton-icon,
#forward-button > .toolbarbutton-icon {
  transform: scale(0.9, 0.9) !important;
  margin-left: -2px !important;
  margin-right: -2px !important;
}

/* Move hamburger menu to the left */
#PanelUI-button,
#customization-panel-container,
#customization-panelWrapper .panel-arrow {
  -moz-box-ordinal-group: 0 !important;
  margin-right: -6px !important;
}

#appMenu-popup {
  margin-right: -258px !important;
}

#appMenu-popup .panel-arrow {
  margin-right: 248px !important;
}

/* More tools... button */
#nav-bar-overflow-button {
  transform: scale(0.9, 0.9) !important;
}

#titlebar-buttonbox {
  background: var(--chrome-secondary-background-color) !important;
}

userChrome.js

All credit for the following userChrome.js tweaks go to the original developers (linked below) - I did not have a part in writing these, I am merely passing them along.

For more information about what userChrome.js is, how it works, and what it can do, see the following links:

To get these tweaks to work, begin by adding the content found at the following link to your userChrome.css file:

https://gist.github.com/Sporif/db6b3440fba0b1bcf5477afacf93f875

Next, add the corresponding file to your chrome folder for any desired tweak.

Dark scroll bars

https://gist.github.com/Sporif/ba3c9a9bcec1114f9f6bbd24079be69f

Restart button

Adds a restart button to your browser.

https://gist.github.com/Sporif/ad6e917d87787491538bac80d3c8918c

Browser toolbox button

Adds a button to open the browser toolbox.

https://github.com/Endor8/userChrome.js/blob/master/Firefox-57/Rest/browsertoolbox.uc.js

Additional resources

userChrome.css

Repository of userChrome.css tweaks.

https://github.com/Timvde/UserChrome-Tweaks

Great website about userChrome.css, with helpful information, style recipes and resources:

https://www.userchrome.org/what-is-userchrome-css.html

Tweaks by the author of Classic Theme Restorer

https://github.com/Aris-t2/CustomCSSforFx

userChrome.js

Many of userChrome.js tweaks listed above came from the same repo. There are plenty more availabe there:

https://github.com/Endor8/userChrome.js

Icons

The following sites contain a multitude of graphics if you are looking to change the look of Firefox's built in icons.

userChrome.css

Navigation Bar

Windows 7 Aero Theme - Transparent Navbar

Change color of nav-bar buttons

Remove background color of sidebar button when active

Remove forward and back buttons

Remove owner name for SSL certs

Remove containers name and symbol

Remove page actions menu (3 dots)

Put refresh button "inside" address bar

Remove reload button on new tab page

Remove separator before hamburger menu

Remove hamburger menu button

Invert color of Neat URL webextension icon

Navigation Bar on the bottom of the UI

Tabs Bar

Mac - remove window buttons (Close, Minimize, Fullscreen)

Dark favicons

Favicons on right

Turn favicons into close buttons on hover

Turn favicons into close buttons on hover on the right

Show close button on hover

Bookmarks Bar

Auto-hide bookmarks bar (show only on nav-bar hover)

Hide bookmark labels (text) for bookmarks in bookmarks toolbar

Sidebar

Decrease minimum width

Combined Setups

One-liner: no tabs bar

userChrome.js

Dark scroll bars

Restart button

Browser toolbox button

Double click tab to reload

Middle click tab bar to undo Close

Open profile folder

Hide tab bar with one tab

Additional resources

userChrome.css

userChrome.js

Icons

Table of Contents