Skip to content
overdodactyl edited this page Jan 11, 2018 · 24 revisions

(generated by Table of Contents Generator for GitHub Wiki)

Navigation Bar

Change color of nav-bar buttons

/* 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;}

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; }

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);
}

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;
}

Bookmarks Bar

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

/* 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;
}

Hide bookmark labels (text) for bookmarks in bookmarks toolbar

/* 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;
}
Clone this wiki locally