Skip to content

Instantly share code, notes, and snippets.

@Zren Zren/userChrome.css
Last active Oct 24, 2019

Embed
What would you like to do?
Firefox 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;
}
/*
* Bookmarks toolbar is visible only on new tab page, just like Chrome.
*
* Screenshot: https://vimeo.com/235059188
* Video: https://vimeo.com/240436456
*
* Contributor(s): https://www.reddit.com/user/AJtfM7zT4tJdaZsm and Andrei Cristian Petcu
* https://www.reddit.com/r/FirefoxCSS/comments/7evwow/show_bookmarks_toolbar_only_on_new_tab/
*/
#main-window #PersonalToolbar {
visibility: collapse !important;
}
#main-window[title^="about:newtab"] #PersonalToolbar,
#main-window[title^="New Tab"] #PersonalToolbar,
#main-window[title^="Nightly"] #PersonalToolbar,
#main-window[title^="Mozilla Firefox"] #PersonalToolbar,
#main-window[title^="Firefox"] #PersonalToolbar {
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;
}
/* [KWin] Picture in Picture */
/* Hide the navbar when a firefox window is a specific size/position. */
/* I have a macro that resizes & positions the window, so this will be useless for other people and you can delete it. */
#main-window[sizemode="normal"][width="960"][height="525"][screenX="960"][screenY="525"] #titlebar,
#main-window[sizemode="normal"][width="960"][height="525"][screenX="960"][screenY="525"] #navigator-toolbox {
display: none;
}
#main-window[sizemode="normal"][width="569"][height="318"] #titlebar, #main-window[sizemode="normal"][width="569"][height="318"] #navigator-toolbox,
#main-window[sizemode="normal"][width="568"][height="318"] #titlebar, #main-window[sizemode="normal"][width="568"][height="318"] #navigator-toolbox,
#main-window[sizemode="normal"][width="567"][height="318"] #titlebar, #main-window[sizemode="normal"][width="567"][height="318"] #navigator-toolbox,
#main-window[sizemode="normal"][width="566"][height="318"] #titlebar, #main-window[sizemode="normal"][width="566"][height="318"] #navigator-toolbox,
#main-window[sizemode="normal"][width="565"][height="318"] #titlebar, #main-window[sizemode="normal"][width="565"][height="318"] #navigator-toolbox {
display: none;
}
#main-window[sizemode="normal"][width="746"][height="420"] #titlebar, #main-window[sizemode="normal"][width="746"][height="420"] #navigator-toolbox {
display: none;
}
/* 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;*/
}
/****** Dark Theme ******/
/*** Tab Row ***/
#toolbar-menubar,
#toolbar-menubar toolbaritem > menubar > menu:not([open]),
#navigator-toolbox {
color: #c2c4c5 !important;
}
#toolbar-menubar,
#titlebar,
#navigator-toolbox,
#TabsToolbar,
#tabbrowser-tabs {
background-color: #202124 !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);
}
.titlebar-max {
list-style-image: url(chrome://browser/skin/window-controls/restore.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-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-max,
.titlebar-close,
:root[sizemode="maximized"] .titlebar-max {
-moz-appearance: none;
padding: 6px 12px !important;
-moz-context-properties: stroke;
stroke: currentColor;
color: inherit;
margin: 0 !important;
}
.titlebar-min:hover,
.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 {
background-color: #282c2f !important;
color: #c2c4c5 !important;
transition: background-color 0.2s, border-color 0.2s;
--urlbar-separator-color: #9aa0a6;
}
#urlbar:not(:-moz-lwtheme):not([focused="true"]),
.searchbar-textbox:not(:-moz-lwtheme):not([focused="true"]) {
border-color: #323639 !important;
}
#urlbar[focused="true"],
.searchbar-textbox[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;
}
/*****************************/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.