userChrome.css for a more compact Firefox UI

/* Note that I have the top Menu Bar visible so if you don't it will cut off the top of the tab bar */
/* Also note that I'm on Firefox Beta and not using the Nova design (browser.nova.enabled=false), so some differences might be expected */
/* To enable the use of the file, enter [about:config](https://support.mozilla.org/en-US/kb/about-config-editor-firefox) in the address bar, then accept the warning if it appears. Search for "toolkit.legacyUserProfileCustomizations.stylesheets" and double-click it to set it to "true" */
/* See a different version for LibreWolf: https://pastebin.com/dkgZBbxp (I don't use it as often so it might not be up-to-date) */


/* 01. Menu Bar height */
#toolbar-menubar { /* also works with #menubar-items but requires more padding reduction */
  margin-top: -2px !important;
  margin-bottom: -2px !important;
  padding-top: -2px !important;
  padding-bottom: -2px !important;
}
/* 01.1 Height of the window controls (close/min/max) which also affects the menu bar height */
#toolbar-menubar .titlebar-button {
  padding-block: 0px !important;
}

/* 01.2 Aligning the top iconless options of the bookmarks menu to the left (makes the Bookmarks menu narrower if bookmarks names are shorter) */
#bookmarksShowAll, #menu_bookmarkThisPage, #menu_bookmarkAllTabs {
  padding-left: 0px !important;
  margin-left: -10px !important;
}

/* 01.3 setting a minimum width for the main bookmarks menu (for when the bookmark names are too short) */
#bookmarksMenuPopup { min-width: 180px !important; }

/* 02. Tabs/Tab Bar height */
:root {
 --tab-min-height: 18px !important;
}
#TabsToolbar {
  max-height: 23px !important;
}
/* raise the tab text */
/*.tab-label {
  margin-top: -1px !important;
}*/

/* 02.1 decreasing the bottom padding of the tabs toolbar, above the url bar */
#TabsToolbar {
  margin-bottom: -3px !important;
}

/* 02.2 padding of the New Tab button */
#tabs-newtab-button {
  padding-left: 3px !important;
}

/* 02.3 decreasing the spacing between the site icon and the tab's title */
.tab-icon-stack {
  margin-right: -4px !important;
}

/* 02.4 reducing horizontal padding of tab content */
.tab-content {
  padding-right: 2px !important;
  padding-left: 2px !important;
}
/* increasing vertical height of a tab's text */
.tab-text {
  padding-bottom: 1px !important;
}

/* 02.5 reducing spacing between tabs */
tab.tabbrowser-tab {
  padding-right: 1px !important;
  padding-left: 1px !important;
}

/* 02.6 minimally rounded tabs (use 0px or 0% to remove rounded corners entirely) */
/* thanks to a somewhat similar solution here https://www.reddit.com/r/FirefoxCSS/comments/1n8xv4s/. also see: https://www.reddit.com/r/firefox/comments/1vgtjna/no_more_rounded_corners_userchromecss_inside/ */
.tab-background {
  border-radius: 4px !important;
}

/* 02.7 padding of the audio button on a tab (mute/unmute), spacing between the icon and the tab's title */
.tab-audio-button  {
  margin-right: -1px !important;
  --button-size-icon-small: 20px !important;
  --button-min-height-small: 20px !important;
}


/* 03. Address bar/URL bar/Toolbar */
/* To prevent the address bar from "popping out" while clicking on it set "browser.urlbar.openViewOnFocus" to false in about:config */

/* 03.1 reducing empty horizontal space */
/* in the toolbar sides */
#back-button {
  padding-left: 0px !important;
}
#PanelUI-menu-button {
  padding-right: 0px !important;
}
/* space between url/address and icons inside the urlbar */
.urlbar-input-box {
  margin-left: 1px !important;
  margin-right: 1px !important;
}

/* 03.2 reducing the height of the toolbar/urlbar */
/* also affected by "reducing spacing/padding of toolbar buttons" later */
.urlbar {
  --urlbar-height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
}
.urlbar-container {
  --urlbar-container-height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
}
.urlbar-input-container { /* address line content including the icons/buttons */
  min-height: 22px !important;
  max-height: 22px !important;
  padding-bottom: 1px !important;
}
.urlbar-input {
  padding-bottom: 1px !important; /* address text line */
}
/* for reference, here's what I worked with before: #nav-bar { height: 23px !important; } .urlbar-input-container { height: 23px !important; margin-top: 4px !important; } .urlbar-background { height: 19px !important; margin-top: 5px !important; } */
/* and then it ballooned into this while re-tweaking it possibly due to an ever-changing UI in Nightly: https://www.reddit.com/r/FirefoxCSS/comments/1tdnav1/toolbarurlbar_keeps_changing_with_every_new/ */
/* */
/* due to redcued height: fixing vertical placement of the address text line */
.urlbar-input {
  margin-top: -2px !important;
}
/* due to reduced height: increasing spacing of urlbar buttons inside the address bar */
#notification-popup-box,
#remote-control-box,
#searchmode-switcher-panel,
#searchmode-switcher-panel-list-urlbar,
#urlbar-search-mode-indicator,
#trust-icon-container /*Shield*/,
#tracking-protection-icon-container,
#urlbar-label-box,
#identity-box, #identity-icon-box, /*Permissions/Extension/Firefox button, and search icon*/
#identity-permission-box,
#urlbar-revert-button-container,
#page-action-buttons, /* right-side buttons (like "bookmark this page", or the zoom when it is set) */
#eme-notification-icon /*DRM*/ {
  padding-right: 1px !important;
  padding-left: 1px !important;
  margin-right: 0px !important; /* because the #identity-box margin-right became 6px */
}

/* 03.3 reducing spacing/padding of toolbar buttons (navigation/addons/window controls) */
toolbarbutton {
  margin: -1px !important;
}
/* all icons/buttons in the toolbar around the urlbar, including pinned addons icons */
:root {
  --toolbarbutton-padding-outer: 0px !important;
  --toolbarbutton-padding-inner: 4px !important;
}
/* spacing between toolbar buttons */
.toolbarbutton-1 {
  margin-left: -2px !important;
  margin-right: -2px !important;
}
/* spacing between urlbar and buttons on both sides */
:root {
  --urlbar-margin-inline: 1px !important;
}

/* 03.3.1 padding of the Permissions/Extension/Firefox button next to the address */
#identity-icon-box {
  padding-right: 1px !important;
  padding-left: 1px !important;
  margin-block: -1px !important;
}

/* 03.3.2 lowering the badges (tickers) on pinned addon icons + update dot on hamburger menu */
.toolbarbutton-1 .toolbarbutton-badge {
  margin-top: -3px !important;
}

/* 03.4 reducing the horizontal padding of the application menu button ("hamburger menu", 3-line button on the right side of the toolbar) */
#PanelUI-menu-button > stack {
  padding-left: 3px !important;
  padding-right: 3px !important;
}

/* 03.5 reverting to a less rounded button background while hovering over it + urlbar background */
:root {
  --button-border-radius: 4px !important;
  --urlbarview-border-radius: 4px !important;
}


/* 04. Menus/Menu Items height/padding */
menupopup > menu:not(bookmarksPopup), /* this is for the lines of the sub-menus/folders/containers */
menupopup > menuitem:not(bookmarksPopup) {
  padding-block: 3px !important; /* above and below each item */
  margin-left: -2px !important; /* margin is the outer space around an item */
  padding-left: 8px !important; /* padding is the inner space inside an item */
  margin-right: 0px !important;
  padding-right: 6px !important;
}

/* 04.1 removing padding for the menu itself so that the highlighting of a menu item covers the whole line */
menupopup {
  --panel-padding: 0px !important;
}

/* 04.2 removing padding for separators in menus */
menuseparator {
  padding-block: 0px !important;
}

/* 04.3 Reducing padding in the application menu ("hamburger menu") and extensions menu */
#unified-extensions-panel /* extensions menu */ {
--panel-menuitem-margin: 0px !important;
--panel-menuitem-margin-inline: 0px !important;
--panel-menuitem-padding: 1px !important;
--panel-menuitem-padding-inline: 3px !important;
}
#appMenu-mainView /* application menu */ {
--panel-menuitem-padding: 2px !important;
--panel-menuitem-margin: 0px !important; /* only affects the Zoom line */
}
#appMenu-zoom-controls /* additional zoom line padding (height) */ {
  padding: 0px !important;
}
/* vertical padding of "Extensions" title in the extensions menu */
#unified-extensions-view .panel-header {
  min-height: 25px !important;
}
/* vertical padding of the application menu (top and bottom) */
#appMenu-mainView .panel-subview-body  {
  padding: 0px !important;
}
/* fixing the visibility of badges (tickers) on addon icons in the extensions menu (they get cut off vertically due to the padding changes above) */
#unified-extensions-view .toolbarbutton-badge {
  margin-top: 0px !important;
  max-width: 100% !important;
}
/* increasing the left margin of the "Manage extensions" text at the bottom of the extensions menu */
#unified-extensions-manage-extensions .toolbarbutton-text {
  margin-left: 5px !important;
}

/* Reducing the padding in the autofill menu */
.autocomplete-richlistitem {
  margin-top: -5px !important;
}
.autocomplete-richlistbox {
  margin: -8px !important;
}