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 Nightly, so some differences from the main version might be expected */


/* 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 */
/* Don't use in LibreWolf */
#toolbar-menubar .titlebar-button {
  padding-block: 0px !important;
}

/* 01.2 Aligning "Manage Boorkmarks" to the left, causing the Bookmarks menu to be narrower */
#bookmarksShowAll {
  padding-left: 0px !important;
  margin-left: -10px !important;
}

/* 02. Tabs/Tab Bar height */
:root {
 --tab-min-height: 20px !important;
}
/* For LibreWolf change this section to "#TabsToolbar, #tabbrowser-tabs { max-height: 22px !important; }" */
#TabsToolbar {
  max-height: 25px !important;
}

/* 02.1 decreasing the bottom padding of the tabs toolbar */
#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 */
stack.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;
}

/* 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/ */
.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: -3px !important;
  --button-size-icon-small: 20px !important;
  --button-min-height-small: 20px !important;
}

/* 03. Address bar/URL bar/Toolbar height */
/* partially based on https://github.com/CarterSnich/firefox-xtra-compact/blob/master/chrome/userChrome.css */
toolbar#nav-bar {
  height: 25px !important;
}
.urlbar-input-container {
  height: 24px !important;
  margin-top: 4px !important;
}
.urlbar-background {
  height: 21px !important;
  margin-top: 5px !important;
}

/* 03.1 centering the url text line vertically */
#urlbar-input {
  padding-bottom: 2px !important;
}

/* 03.2 removing the empty spaces in the toolbar sides */
#back-button {
  padding-left: 0px !important;
}
#PanelUI-menu-button {
  padding-right: 0px !important;
}

/* 03.3 Removing the extra space to the sides of the address bar (field) */
#urlbar-container {
  margin: 0px !important;
}

/* 03.4 height/placement of the "go" arrow when typing/searching in the urlbar */
#urlbar-go-button {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  line-height: 20px !important;
  max-height: 20px !important;
}

/* 03.5 reducing padding of the icons to the left of the address (in the field itself) */
#tracking-protection-icon-container, #identity-icon-box, #identity-permission-box, #eme-notification-icon {
  padding: 3px !important;
}

/* 03.6 Vertical placement of the DRM icon in the address field */
#eme-notification-icon {
  margin-top: -7px !important;
}

/* 03.7 reducing spacing/padding of toolbar buttons (navigation/addons/window controls) */
toolbarbutton {
  margin: -1px !important;
}
/* all icons/buttons in the toolbar around the urlbar */
:root {
  --toolbarbutton-outer-padding: 0px !important;
  --toolbarbutton-inner-padding: 5px !important;
  --toolbarbutton-outer-margin: 0px !important;
  --toolbarbutton-inner-margin: 0px !important;
}
/* pinned addons icons */
.toolbaritem-combined-buttons:not([widget-type='button-and-view']) {
  margin-inline: 0px !important;
  margin-inline-start: 0px !important;
  margin-inline-end: 0px !important;
}
/* padding of the application menu button ("hamburger menu", on the right side of the toolbar) */
#PanelUI-menu-button {
  padding-left: 0px !important;
}
#PanelUI-menu-button > stack {
  padding-left: 0px !important;
  padding-right: 3px !important;
}

/* 03.8 reducing spacing between padlock icon and url */
#identity-box {
  margin: 0px !important;
}

/* 03.9 reverting to a less rounded icons background while hovering over them */
:root {
  --button-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 padding of the application menu ("hamburger menu") and extensions menu in the toolbar */
:root{
--arrowpanel-menuitem-padding: 1px !important; /* vertical and horizontal padding of the addon lines in the extensions menu */
--arrowpanel-menuitem-margin-inline: 1px !important; /* vertical padding of the addon lines in the extensions menu */
--arrowpanel-menuitem-padding-block: 0px !important; /* vertical padding of the Zoom line in the hamburger menu */
--panel-subview-body-padding-block: 0px !important; /* vertical padding of the hamburger menu itself */
}

/* 04.4 vertical padding of Extensions title in the extensions menu */
#unified-extensions-view .panel-header {
  min-height: 25px !important;
}

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