userChrome.css

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

/* These settings used to be in userchrome.css */

/* Define colors, and fonts */

:root {
    /* tabs */
    --theme-bg: #1d1f21;
    --theme-fg: #a29491;
    --tabs-bg-selected: #373b41;
    --tabs-fg-selected: #c5c8c6;
    --tabs-bg-hover: #282a2e;
    --tabs-fg-hover: #ffffff;
    --tabs-font: fira mono;
    --tabs-font-size: 10px;

    /* urlbar */
    --url-bg: var(--theme-bg);
    --url-fg: var(--theme-fg);
    --url-bg-hover: var(--tabs-bg-hover);
    --url-fg-hover: var(--tabs-fg-hover);
    --url-font: var(--tabs-font);
    --url-font-size: 11px;
}


/* hide various indicators, and buttons that we do not need */
#private-browsing-indicator,
#alltabs-button,
.tabs-newtab-button,
.tab-icon-image,
#urlbar-go-button,
#urlbar-stop-button,
#urlbar-reload-button,
.urlbar-history-dropmarker
{
    display: none !important;
}

/* remove the separator beside hamburger */
#PanelUI-button {
    background-image: none !important;
}

/* hide scrollbars */
#content browser {
    margin-right: -14px !important;
    overflow-y: scroll;
    overflow-x: hidden;
}

/*show tab close button on hover and focus only*/
.tabbrowser-tab:not([selected]):not(:hover)
.tab-close-button {
    opacity:0;
}


/* Reduce Toolbar Height  - Frank @mozillazine*/
toolbarbutton {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

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


/**** URLbar ****/

#urlbar {
    border: none !important;
    background: none !important;
    color: var(--theme-fg) !important;
    font-family: var(--url-font) !important;
    font-size: var(--url-font-size)  !important;
    height: 20px !important;
}

.urlbar-textbox-container:hover,.urlbar-textbox-container[focused] {
    background: var(--url-bg-hover) !important;
    color: var(--url-fg-hover) !important;
    border-color: transparent !important;
}

/**** Back and forward buttons ****/

/* always show forward button */
#urlbar-wrapper > #forward-button {
    margin:0 !important;
}

#urlbar-wrapper {
    clip-path: none !important;
}

/* Strip all decorations */
#main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon,
#back-button > .toolbarbutton-icon,
#forward-button > .toolbarbutton-icon{
    background: none !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* some adjustments */
#back-button > .toolbarbutton-icon{
    -moz-image-region: rect(0,54px,18px,36px) !important;
    border-radius: 0 !important;
    padding: 1px 2px !important;
}

#forward-button > .toolbarbutton-icon{
    padding: 3px 2px !important;
}

/* add hover */
#back-button:not([disabled]):-moz-any(:hover, [open]) > .toolbarbutton-icon,
#forward-button:not([disabled]):-moz-any(:hover, [open]) > .toolbarbutton-icon {
    background-image: linear-gradient(hsla(0,0%,100%,.7), hsla(0,0%,100%,.5)) !important;
    box-shadow: 0 1px hsla(0,0%,100%,.3) inset,
    0 1px hsla(210,54%,20%,.03),
    0 0 2px hsla(210,54%,20%,.1) !important;
}


/**** Square Tabs ****/

#TabsToolbar {
    background-color: var(--theme-bg) !important;
    margin-bottom: 0 !important;
    font-family: var(--tabs-font) !important;
    font-size: var(--tabs-font-size) !important;
    text-align: center !important;
}

#TabsToolbar .arrowscrollbox-scrollbox {
    padding: 0 !important;
}

#TabsToolbar .tabbrowser-tabs {
    max-height: 22px !important;
    min-height: 0px !important;
    margin-top: 0px !important;
    background-color: var(--theme-bg) !important;

}

#TabsToolbar .tabbrowser-tab {
    -moz-border-top-colors: none !important;
    -moz-border-left-colors: none !important;
    -moz-border-right-colors: none !important;
    -moz-border-bottom-colors: none !important;
    border-style: none !important;
    padding: 4px 0px !important;
    background-color: var(--theme-bg) !important;
    color: var(--theme-fg) !important;
    background-clip: padding-box !important;
    transition: all .1s !important;
    margin-left: 1px !important;
}

#TabsToolbar .tabbrowser-tab[first-tab][last-tab],
#TabsToolbar .tabbrowser-tab[last-visible-tab] {
    border-right-width: 0px !important;
}

#TabsToolbar .tabbrowser-tab[afterselected] {
    border-left-color: transparent !important;
}

#TabsToolbar .tabbrowser-tab[selected] {
    color: var(--tabs-fg-selected) !important;
    background: var(--tabs-bg-selected) !important;
}

#TabsToolbar .tabbrowser-tab:hover:not([selected]) {
    background-color: var(--tabs-bg-hover) !important;
    color: var(--url-fg-hover) !important;
}

#TabsToolbar .tab-background {
    margin: 0 !important;
    background: transparent !important;
}

#TabsToolbar .tab-background-start,
#TabsToolbar .tab-background-end,
#TabsToolbar .tabbrowser-tab:after,
#TabsToolbar .tabbrowser-tab:before {
    display: none !important;
}

#TabsToolbar .tab-background-middle {
    margin: -4px -2px !important;
    background: transparent !important;
}

#addon-bar,
#PersonalToolbar,
#nav-bar {
    background: none !important;
    background-color: var(--theme-bg) !important;
    box-shadow: none !important;
    background-clip: padding-box !important;
    border-radius: 0 !important
}


/**** Cleaning Up ****
Some additional tweaking for a cleaner look */

/* Remove the pesky black lines */
#TabsToolbar:not([collapsed="true"]) + #nav-bar {
    border-top: none !important;
}

/* remove shadow from tab scroller - Thanks to Tew @ #firefox irc */
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
    background-image:none !important;
}

/* remove this white line (i.imgur.com/1jsi1GZ.png) - Thanks to Tew @ #firefox irc */
#navigator-toolbox::after{
    height: 0px !important;
    border: none !important;
}

/* fix FF 51 separator in urlbar */
.urlbar-input-box, #urlbar-display-box {
    border-inline-start: none !important;
}

/* FF53 broke center align in tabs. Fix (from /r/firefox) */
.tab-label {
    -moz-box-flex: 1 !important;
    text-align: center !important;
}

/* prevent the ugly white 'flash' while opening tabs */
tabbrowser tabpanels {
    background-color: var(--theme-bg) !important;
}