Firefox userChrome.css

userChrome.css

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

/*
** In order for userChrome.css to work, you need to open `about:config` and change
** `toolkit.legacyUserProfileCustomizations.stylesheets` to `true`.
*/




/* Hide menubar (it's visible in global menu widget) */
@media (-moz-gtk-csd-available) {
	:root[shellshowingmenubar="true"] #toolbar-menubar[autohide="true"],
	:root[shellshowingmenubar="true"][sizemode="normal"] #toolbar-menubar[autohide="true"] {
/* 		height: 0 !important; */
	}
	:root[shellshowingmenubar="true"] #toolbar-menubar[autohide="true"]:not([inactive]) + #TabsToolbar > .titlebar-buttonbox-container {
/* 		visibility: visible !important; */
	}
}


/* Use Bookmark Star Icon for Library */
#library-button .toolbarbutton-icon {
/* 	list-style-image: url("chrome://browser/skin/bookmark-hollow.svg"); */
/* 	list-style-image: url("chrome://browser/skin/bookmark.svg"); */
	list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
/* 	list-style-image: url("chrome://browser/skin/bookmarks-toolbar.svg"); */
}


/* Disable animation for tracking protection icon */
#tracking-protection-icon-box[active][animate] #tracking-protection-icon-animatable-image {
	animation: none !important;
}
/* Always hide the tracking protection icon */
#tracking-protection-icon-container, /* Firefox v70 */
#tracking-protection-icon-box { /* Firefox v69 */
	display: none;
}



/*
 * Auto-hide bookmarks toolbar
 * Only display on New Tab page (like Chome).
 */
/* Firefox v71 and below */
/* https://www.reddit.com/r/FirefoxCSS/comments/7evwow/show_bookmarks_toolbar_only_on_new_tab/ */
/*
#PersonalToolbar {
	visibility: collapse !important;
}
#main-window[title^="about:newtab"] #PersonalToolbar
, #main-window[title^="New Tab"] #PersonalToolbar
, #main-window[title="Mozilla Firefox"] #PersonalToolbar
, #main-window[title="Customize Firefox - Mozilla Firefox"] #PersonalToolbar
{
	visibility: visible !important;
}
*/

/* Firefox v72 workaround */
/* Show bar (floating) when addressbar is focused. */
/* https://www.reddit.com/r/FirefoxCSS/comments/eilcmh/how_to_show_bookmark_toolbar_only_in_new_tab/ */
#PersonalToolbar {
	visibility: collapse !important;
	display: block;
	position: absolute !important;
	z-index: 1;
	width: 100%;
	box-shadow: 0 6px 6px -6px #000;
}
#nav-bar:focus-within + #PersonalToolbar
, #PersonalToolbar:focus-within
, #PersonalToolbar[customizing="true"]
/* , #navigator-toolbox:hover #PersonalToolbar */ /* Hover AddressBar+Tabs+CloseButtons */
, #nav-bar:hover + #PersonalToolbar, #PersonalToolbar:hover /* Hover AddressBar only */
{
	visibility: visible !important;
}



/* Remove left tabbar padding when not maximized. */
.titlebar-placeholder[type="pre-tabs"], /* Firefox 64 */
.titlebar-spacer[type="pre-tabs"] { /* Firefox 65 */
	width: 0 !important;
}

/* Compact density is 29px tall, while Breath close buttons are 32px tall.
 * We need to remove 3px "padding" from the top tabbar so tabs align
 * to the windows top edge. */


/* Fitts Law with close button when maximized */
.titlebar-close {
/* 	margin-right: -6px !important; */
/* 	width: 29px !important; */
}
.titlebar-buttonbox {
	margin-right: -6px; 
}

/* Don't animate fullscreen switch. It's stutters with Youtube. */
#navigator-toolbox[fullscreenShouldAnimate] {
	transition: 0s margin-top !important;
}

/* Pastel purple titlebar when in private browsing mode. */
window[privatebrowsingmode="temporary"] #navigator-toolbox {
	background: #c8a9c8 !important;
}



/* Hide ContextMenu Items */
/* https://support.mozilla.org/en-US/questions/1177488 */
#contentAreaContextMenu #context-openlinkincurrent,
#contentAreaContextMenu #context-openlinkinusercontext-menu,
#contentAreaContextMenu #context-bookmarklink,
#contentAreaContextMenu #context-selectall,
#contentAreaContextMenu #context-sendlinktodevice,
#contentAreaContextMenu #context-sendpagetodevice, 
#contentAreaContextMenu #context-sep-sendlinktodevice,
#contentAreaContextMenu #context-sep-sendpagetodevice,
#contentAreaContextMenu #context-viewpartialsource-selection {
	display: none !important;
}





/* Fix random titlebar margin-bottom: 0px */
#titlebar {
	/*! margin-bottom: -29px !important; */
}



/* Scrollbar */
:root{
	/*scrollbar-color: #336699 #000000;*/
	/*scrollbar-width: thin;*/
}


/* Search Popup */
.search-one-offs {
	display: none;
}
.urlbarView {
    margin-inline: 0px !important;
    width: 100% !important;
}

#urlbar[breakout][breakout-extend] {
	top: 0px !important;
	left: 0px !important;
	width: 100% !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-input-container {
	height: calc(var(--urlbar-toolbar-height)) !important;
	padding-block: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
	padding-inline: 0px !important;
}
.urlbarView.megabar {
	margin-inline: 0px !important;
	width: calc(100%) !important;
	border-inline: 1px solid transparent;
	margin-block-start: 0px !important;
}
html|div.urlbarView-results {
	padding-block: 0px !important;
	/*background-color: var(--toolbar-bgcolor);*/
	/*color: var(--toolbar-color);*/
}
html|div.urlbarView-row {
	padding-block: 0px !important;
}
.urlbarView:not(.megabar) html|div.urlbarView-row,
.urlbarView.megabar .urlbarView-row-inner {
	border-radius: 0px !important; /* Not working */
}



/****** Dark Theme ******/
/*** Tab Row ***/
#toolbar-menubar,
#toolbar-menubar toolbaritem > menubar > menu:not([open]),
#navigator-toolbox {
	color: #c2c4c5 !important;
}
#toolbar-menubar,
#titlebar,
#navigator-toolbox,
#TabsToolbar,
#window-controls,
#tabbrowser-tabs {
  background-color: #202124 !important;
}
.titlebar-spacer[post-tabs],
#titlebar-buttonbox-container,
#titlebar-buttonbox titlebar-color {
	--lwt-accent-color: #202124;
	--toolbarbutton-hover-background: #202124;
  --toolbarbutton-active-background: #202124;
	--backbutton-background: #202124;
	--backbutton-hover-background: #202124;
	--backbutton-active-background: #202124;
	--arrowpanel-background: #202124;
	fill: red;
  background: #202124 !important;
	transition: background 0s, background-color 0s, background-image 0s, fill 0s, fill-opacity 0s !important;
}

#navigator-toolbox {
	/* border-bottom: 1px solid #202124; */
	--chrome-content-separator-color: #202124;
}
/* Tabs */
.tabbrowser-tab {
	color: #c2c4c5 !important;
}

.tabbrowser-tab:not([visuallyselected="true"]) {
	color: #a3a9ae !important;
}
.tab-background {
	background-color: #27292c !important;
}
.tabbrowser-tab:hover {
	background-color: #27292c !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]):not([multiselected]) {
	background-color: transparent !important;
}
.tab-background {
	background-color: transparent !important;
	background-image: none !important;
}
.tab-background[selected="true"] {
	background-color: #323639 !important;
	background-image: none !important;
}
/* New Tab + Addon Buttons */
.toolbarbutton-animatable-box,
.toolbarbutton-1 {
	color: #9aa0a6 !important;
}
.toolbarbutton-animatable-box:hover,
.toolbarbutton-1:hover {
	color: #a4a9af !important;
}



toolbar .toolbarbutton-1 > .toolbarbutton-icon {
	transition: background-color 0.2s;
}
toolbar .toolbarbutton-1:not([disabled="true"]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
toolbar .toolbarbutton-1:not([disabled="true"]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon {
	background-color: #424649 !important;
}
toolbar .tabs-newtab-button.toolbarbutton-1:hover .toolbarbutton-icon,
toolbar .tabs-newtab-button.toolbarbutton-1:not([disabled="true"]):not([checked]):not([open]):not(:active):hover .toolbarbutton-icon {
	background-color: #363739 !important;
}

/* Purple titlebar when in private browsing mode. 25003e */
window[privatebrowsingmode="temporary"] #navigator-toolbox,
window[privatebrowsingmode="temporary"] #titlebar,
window[privatebrowsingmode="temporary"] #TabsToolbar,
window[privatebrowsingmode="temporary"] #tabbrowser-tabs {
	background: #201726 !important;
}

/* Close Buttons */
@media (-moz-gtk-csd-available) {
	.titlebar-min  {
		list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
	}
	:root[sizemode="maximized"] .titlebar-max, /* Firefox v76 */
	.titlebar-restore { /* Firefox v77 */
		list-style-image: url(chrome://browser/skin/window-controls/restore.svg);
	}
	.titlebar-max {
		list-style-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" stroke="context-stroke" stroke-width=".9" fill="none" shape-rendering="crispEdges"><rect x="1.5" y="1.5" width="9" height="9"/></svg>');
	}
	.titlebar-close {
		list-style-image: url(chrome://browser/skin/window-controls/close.svg);
	}

	@media (-moz-gtk-csd-minimize-button) {
		.titlebar-min {
			-moz-appearance: none !important;
		}
	}
	@media (-moz-gtk-csd-maximize-button) {
		.titlebar-restore,
		.titlebar-max,
		:root[sizemode="maximized"] .titlebar-max {
			-moz-appearance: none !important;
		}
	}
	@media (-moz-gtk-csd-close-button) {
		.titlebar-close {
			-moz-appearance: none !important;
		}
	}
}

.titlebar-buttonbox {
	background-color: #202124;
	color: #a3a9ae;
	-moz-box-align: initial !important;
}
.titlebar-min,
.titlebar-restore, /* Firefox v77 */
.titlebar-max,
.titlebar-close,
:root[sizemode="maximized"] .titlebar-max { /* Firefox v76 and below */
	-moz-appearance: none;
	padding: 6px 12px !important;
	-moz-context-properties: stroke;
	stroke: currentColor;
	color: inherit;
	margin: 0 !important;
}
.titlebar-min:hover,
.titlebar-restore:hover, /* Firefox v77 */
.titlebar-max:hover {
	background-color: #363739 !important;
	color: #c2c4c5 !important;
}
.titlebar-close:hover {
	background-color: #d70022 !important;
	color: white !important;
}
:root[sizemode="normal"] .titlebar-max {
	padding: 6px 13px !important;
}
:root[sizemode="normal"] .titlebar-max .toolbarbutton-icon {
	border: 1px solid currentColor;
	width: 10px;
	height: 10px;
	list-style-image: none;
}

/* Close Buttons - Fullscreen */
#window-controls {
	background-color: #202124 !important;
	color: #a3a9ae !important;
}
#minimize-button:hover,
#restore-button:hover {
	background-color: #363739 !important;
	color: #c2c4c5 !important;
}
#close-button:hover {
	
}

/*** Address Bar Row ***/
/* Address Bar */
#nav-bar {
	background: #323639 !important;
}
#urlbar {
	/*--urlbar-popup-action-color: #a9c7d7;*/
	/*--urlbar-popup-url-color: #a9c7d7;*/
	--urlbar-separator-color: #282c2f;
	/*--urlbar-separator-color: var(--toolbar-bgcolor);*/
}
#urlbar-input-container {
	color: #c2c4c5 !important;
	background-color: #282c2f !important;
	border-color: #323639 !important;
	transition: background-color 0.2s, border-color 0.2s;
}
#urlbar.megabar[focused="true"] > #urlbar-input-container {
	background-color: #3c4043 !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-input-container {
	border-radius: var(--toolbarbutton-border-radius) var(--toolbarbutton-border-radius) 0px 0px !important;
}

#urlbar:not(.megabar),
#urlbar.megabar > #urlbar-background,
#searchbar {
	/*background-color: #282c2f !important;*/
	/*color: #c2c4c5 !important;*/
	/*border-color: #323639 !important;*/
	/*transition: background-color 0.2s, border-color 0.2s;*/
}
#urlbar:not(.megabar)[focused="true"],
#urlbar.megabar[focused="true"] > #urlbar-background,
#searchbar[focused="true"] {
	/*background-color: #3c4043 !important;*/
	/*border-color: #5b6e8b !important;*/
}
#urlbar html|input.textbox-input::-moz-selection, /* Firefox v69 */
#urlbar html|input#urlbar-input::-moz-selection { /* Firefox v70 */
	background-color: #205fb5 !important;
	color: #eff4fa !important;
}



/* Addon Buttons + Bookmark Buttons */
toolbar toolbarbutton,
toolbar toolbarbutton .toolbarbutton-badge-stack,
toolbar toolbarbutton .toolbarbutton-icon {
	transition: background 0.4s, background-color 0.4s, background-image 0.4s, fill 0.4s, fill-opacity 0.4s;
}

/*** Bookmarks Bar Row ***/
#PersonalToolbar {
	color: #c2c4c5 !important;
	background: #323639 !important;
}

/*** Toolbar Seperator ***/
#navigator-toolbox::after {
	border-bottom-color: #323639 !important;
}





/*****************************/

Make sure to enable CSD (Client Side Decorations) in Firefox by going to Firefox's Customize and unchecking the "Title Bar".

More Firefox Tips: https://userbase.kde.org/Plasma/Tips#Firefox

With this CSS, the bookmarks toolbar appears when you hover the address bar. It does not appear when you hover the tabs/close buttons so it's fine to fling the mouse to the top right corner.