userChrome.css

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");


/* [uidensity="compact"] */

/* changes padding of toolbar buttons */

toolbar .toolbarbutton-1 {
    margin-left: -1px
    margin-right: 1px;
	padding: 0px 4px 0px 4px !important;
}


/* adjusts the padding and margin of the URL box buttons */

:root .urlbar-icon {
	width: 20px !important;
	height: 20px !important;
	padding: 4px !important;
}


/* adjusts the padding and margin of the icons before the URL */
#identity-icon, #tracking-protection-icon, #connection-icon, .notification-anchor-icon, #blocked-permissions-container > .blocked-permission-icon, #extension-icon {
	width: 14px !important;
	height: 14px !important;
	margin-inline-start: 4px !important;
}


/* adjusts entire nav bar padding */

#nav-bar {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}


/* adjusts the padding of the three lines menu button */

#PanelUI-menu-button {
	padding-inline-start: 4px !important;
	padding-inline-end: 8px !important;
}



/* reduces the margin of the url bar */

#urlbar-container {
	margin: -4px !important;
}


/* url bar border settings */

#urlbar, .searchbar-textbox {
	border: 0px solid hsla(240,5%,5%,.25) !important;
}

#urlbar {
    min-height: 33px;
}


/* Hide some tab area elements */

#alltabs-button, .arrowscrollbox-overflow-start-indicator, .arrowscrollbox-overflow-end-indicator, .tab-close-button, .scrollbutton-up, .scrollbutton-down, .tabbrowser-tab::after, .tabbrowser-tab::before {
    display: none !important;
}


/* Remove the line on top of tabs */

#tabbrowser-tabs {
    --tab-line-color: none !important;
}


/* Allow tabs to fill the tab area and only let them get 100px wide at minimum */

.tabbrowser-tab {
    max-width: unset !important;
    --tab-min-width: 100px;
}


/* Set the tab height using vars, they onlt apply if they're in the same rule for some reason, :root didn't work for me */

#TabsToolbar, .tabbrowser-tab {
    max-height: var(--tab-max-height);
    min-height: var(--tab-min-height);
    --tab-max-height: 18px !important;
    --tab-min-height: 18px !important;
}


/* Clear the tab border */

#navigator-toolbox {
    --tabs-border-color: rgba(0,0,0,0) !important;
}


/* tab box border settings */

#TabsToolbar:not([collapsed="true"]) + #nav-bar {
	border-top: 0px solid var(--tabs-border) !important;
}

.tab-background:not([selected=true]),
.tab-line:not([selected=true]) {
    background-color: transparent !important;
}


/* Set the active tab background */

.tab-background[selected="true"] {
    background-color: #0088CC !important;
    background-image: unset !important;
    border-top-color: unset !important;
    background-repeat: unset !important;
}


/* Adjust the left side padding for tab content(text, favicon) */

.tab-content {
    padding: 0 3px !important;
}


/* Resize the favicon to fit better with the adjusted height */

.tab-icon-image {
    height: 12px !important;
    width: 12px !important;
    margin-top: 0px !important;
}


/* Use a better font size and line-height for the tab height */

.tab-label {
    line-height: 0.7em !important;
    font: 12px sans-serif !important;
}


/* Hack for an odd thing I noticed where there's a tiny sliver above the tab */

.tab-stack {
    margin-top: -1px !important;
}



:root {
	--toolbarbutton-border-radius: 0px !important;
/* removes inner padding of all toolbar buttons */
	--toolbarbutton-inner-padding: -1px !important;
}