userChrome.css for a more compact LibreWolf UI

/* Note that I don't use LibreWolf as often so this might not be up-to-date and have issues */


/* Note that I have the top Menu Bar visible so if you don't it will cut off the top of the tab bar */
/* 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 Firefox: https://pastebin.com/CEGA9Bqw */


/* 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.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: 18px !important;
}
#TabsToolbar, #tabbrowser-tabs {
  max-height: 20px !important;
}

/* 02.1 decreasing the bottom padding of the tab 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: 3px !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 */
/* 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;
}

/* 03.2 reducing the height of the toolbar/urlbar */
/* note: unfortunately it doesn't affect the hover background of the toolbar buttons, not sure how to fix */
toolbar#nav-bar {
  height: 22px !important;
}
:root {
  --urlbar-min-height: 20px !important;
}
.urlbar {
  --urlbar-height: 20px !important;
}
.urlbar-container {
  --urlbar-container-height: 22px !important;
}
.urlbar-input-container {
  max-height: 20px !important;
}
/* fixing vertical placement of the address text line */
.urlbar-input {
  margin-top: -2px !important;
}

/* 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-outer-padding: 0px !important;
  --toolbarbutton-inner-padding: 5px !important;
  --toolbarbutton-outer-margin: 0px !important;
  --toolbarbutton-inner-margin: 0px !important;
}
/* spacing between toolbar buttons */
.toolbarbutton-1 {
  margin: -5px !important;
  padding: 0px !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 */
:root {
  --button-border-radius: 4px !important;
}

/* 04. Menus/Menu Items height/padding */
/* this does not affect the application menu ("hamburger menu") and extensions menu - for these see section 04.3 */
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 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: 0px !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;
}

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

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