Skip to content

Instantly share code, notes, and snippets.

@twome
Last active April 23, 2023 11:08
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save twome/2434f9c1a4d22e8b10d72967e1026f00 to your computer and use it in GitHub Desktop.
Save twome/2434f9c1a4d22e8b10d72967e1026f00 to your computer and use it in GitHub Desktop.
Simplified UI stylesheet for Firefox. Mozilla's made some absolutely unfathomable decisions recently.
/*
This CSS file customises Firefox' user interface look (colloquially, the "chrome" - no relation to Google Chrome)
It needs to be named exactle 'userChrome.css' and placed in:
- Mac: ~/Library/Application Support/Firefox/Profiles/<RANDOM CHARACTERS>.default/chrome/userChrome.css
You might need to create the `chrome` directory yourself.
To debug these styles, run Firefox's "Browser Toolbox" (the devtools for the browser itself) with `Shift+Opt+Cmd+I` by default.
*/
/*
Automatically reveal the bookmarks bar on any New Tab page (as there's no page content to display anyway)
*/
#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,
#main-window[title^="Customize Firefox"] #PersonalToolbar {
visibility: visible !important;
}
/* Hide unnecessary page identification / privacy controls (besides the HTTPS green lock icon */
#identity-icon,
#tracking-protection-icon-box {
display: none;
}
#identity-box:hover #identity-icon,
#identity-box:hover #tracking-protection-icon-box {
display: revert; /* Reveal all the parts when mousing into that area */
}
#identity-box {
padding-inline-start: 4px !important;
padding-inline-end: 4px;
margin-inline-end: 0px;
margin-right: 0px;
}
/* I'll never have any reason to use "reader mode" */
#reader-mode-button {
display: none;
}
/*
The bright red default badge icon is inappropriate if the badge is not for priority notifications.
Changed to a much less distracting grey.
*/
.toolbarbutton-badge {
background-color: hsl(0, 1.2%, 51.2%) !important;
}
/* This separated the "reader mode" button from page actions in the URL bar; unnecessary */
#pageActionSeparator {
display: none;
}
/*
Hide the "Edit" and "Firefox account" sections of the main corner menu
*/
#appMenu-edit-controls,
#appMenu-edit-controls + toolbarseparator {
display: none;
}
#appMenu-fxa-container,
#appMenu-fxa-container + toolbarseparator {
display: none;
}
/* There's an uncomfortably and confusingly large margin to the right of the macOS window controls; the gap seems to indicate something missing, even though there's not. */
.titlebar-spacer[type="pre-tabs"] {
width: 10px !important;
}
/* We don't need any dead space for dragging the whole window; we can bind modifier keys or drag the space around the window controls. */
.titlebar-spacer[type="post-tabs"] {
display: none;
}
/* Hides the distracting intense blue border atop the active tab. The active tab's already distinguished by background-color. */
.tabbrowser-tab {
--tab-line-color: hsla(0,0%,100%,0.0) !important;
}
/* Reduce the horizontal margins between each tab's icon, text, and their container to wring precious extra visible characters in the tab title. */
.tab-throbber:not([pinned]),
.tab-sharing-icon-overlay:not([pinned]),
.tab-icon-pending:not([pinned]),
.tab-icon-image:not([pinned]) {
margin-inline-end: 3px !important;
margin-left: -5px;
}
/* This was 1px for some reason, which de-aligned the text from the vertical center of the tab. */
.tab-label {
margin-top: 0px !important;
}
/* We don't need to distinguish the URL bar from anything; its shape and content is already different from its toolbar peers. */
/* The capsule around the URL bar is cute & comfy but wastes precious space */
#urlbar:not([focused="true"]) {
border-color: transparent !important; /* Don't actually remove the border-width. The border is handy when the URL bar is elected and we need to highlight it. To stop the URL bar contents moving around when selected, we'll just make the border invisible. */
background-color: transparent !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
#urlbar {
margin: 0px !important;
}
/* There's actually nothing in this menu which isn't either a) useless or b) easily achievable in other menus. */
#pageActionButton {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment