Custom Firefox userChrome.css

userChrome.css

@layer Colors {
    :root {
        --bg-bright: white; /* Used for Navigation bar */
        --bg-dark: #F6F6F6; /* Used for Tab bar */
        --seperator: #CFCFCF;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --bg-bright: #424242;
            --bg-dark: #373737;
            --seperator: #262626;
        }
    }
    
    #titlebar {
        background: var(--bg-dark);
        border-top: solid 1px var(--seperator);
    }
    
    #nav-bar {
        background: var(--bg-bright) !important;
    }
}
@layer Tabs {
    :root { /* Makes tab fill vertical space */
        --tab-block-margin: 0 !important;
        --tab-min-height: 2.5em !important;
        --tab-border-radius: 2px !important;
    }
    
    #titlebar { /* Move tabs to bottom */
        -moz-box-ordinal-group: 2;
        padding: 0 2px;
    }
    
    .tabbrowser-tab[fadein]:not([pinned]) { /* Tabs stretch to fill */
        max-width: none !important;
    }
    
    .tab-content { /* Center tab content */
        margin: auto;
    }
    
    .tab-close-button { /* Hide button to close tab */
        display: none;
    }
    
    
    .titlebar-spacer:where([type="pre-tabs"], [type="post-tabs"]) { /* Remove spacer around tabs */
        display: none;
    }
    
    .tabbrowser-tab[first-visible-unpinned-tab] { /* Remove spacer between pinned and unpinned tabs */
        margin-inline-start: 0 !important;
    }
    
    .tab-text { /* Increases distance between tab icon and label */
        margin-left: 0.25em !important;
    }
    
    #alltabs-button { /* Hide "all tabs" button */
        display: none;
    }
    
    .tabbrowser-tab[selected] .tab-context-line {
        height: 2px !important;
        margin-top: 0 !important;
    }
}
@layer Buttons {    
    #PanelUI-button { /* Move firefox menu to the far left */
        -moz-box-ordinal-group: 0;
    }
    
    #appMenu-popup { /* Prevents cutoff when touching left of screen */
        margin-left: 0 !important;
    }

    .titlebar-buttonbox-container { /* Move Window buttons to right of navigation bar */
        position: absolute;
        display: block;
        right: 0;
        top: 0.5em;
    }
}

@layer Tidbits {
    :root { /* Reduce UI font size */
        font-size: 12.5px !important;
    }
    
    #unified-extensions { /* Prevents overlap between new extensions and Window controls */
        margin-right: 5em;
    }
}

Moves tabs to bottom and stretches them to fill the tab bar
Hides a few minor features (all tabs dropdown, close tab button, container line)
The overflow menu is very likely bugged but I don't make use of it