Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
@namespace url("");
/* [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-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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.