nixos-configs/homeManagerModules/firefox/custom-css/style.scss

// Global Vars
:root * {
    --tab-height-personal: 40px !important;
    --uc-tab-corner-height: 41px !important;
    --my-vertical-toolbar-width: 46px !important;
}

#appMenu-mainView {

    // Main Menu outline
    .panel-subview-body {
        outline: 2px solid var(--button-background-color-primary);
    }

    // Makes main menu rows all the same height
    .subviewbutton {
        min-height: 40px !important;
    }
}

// Hide unused menu rows
#appMenu-mainView .browser-toolbar>* #alltabs-button,
#appMenu-fxa-status2,
#appMenu-fxa-separator {
    display: none !important;
}


// Fix url font-size
#urlbar-input {
    font-size: large !important;
}

// Extension padding on sidebar
toolbar .toolbarbutton-1>.toolbarbutton-badge-stack {
    padding: 10px !important;
}

// Hamburger button border
:root:not([chromehidden~="toolbar"]) #PanelUI-menu-button[open] {
    border: 2px solid var(--button-background-color-primary) !important;
    border-top-left-radius: $rounding !important;

    &>.toolbarbutton-badge-stack {
        border-top-left-radius: $rounding !important;
    }
}

// Fix extension dialog going off screen
#appMenu-addon-installed-notification,
#notification-popup {
    margin-top: -1px !important;
    margin-inline: -505px !important;
}

#customizationui-widget-panel {
    margin-top: -1px !important;
}

#PersonalToolbar {
    .toolbarbutton-1 {
        margin-block: 0px !important;
    }

    #PlacesToolbarItems>.bookmark-item {
        margin-block: 6px !important;
    }
}

/* ------------------------- Tricks ------------------------------------- */

/* https://github.com/Godiesc/firefox-gx/blob/main/Tricks/README.md */
/* Extensions button into the "left-sidebar" - Immovable */
:root:not([chromehidden~="toolbar"],
    [sizemode="fullscreen"]) #PersonalToolbar {
    --padding-top-left-sidebar: 110px !important;
    /* 182px to one-line config */
}

:root:not([chromehidden~="toolbar"],
    [sizemode="fullscreen"]) #unified-extensions-button {
    --toolbarbutton-hover-background: transparent !important;
    --toolbarbutton-active-background: transparent !important;
    position: fixed;
    display: flex;
    top: 42px !important;
    left: 3px !important;
    z-index: 2 !important;
    fill: var(--general-color) !important;
    width: calc(var(--uc-vertical-toolbar-width) - 4px) !important;
}

:root:not([chromehidden~="toolbar"],
    :root:not([chromehidden~="toolbar"],
        [sizemode="fullscreen"]) #unified-extensions-button:hover,
    [sizemode="fullscreen"]) #unified-extensions-button[open] {
    transform: scale(1.24) !important;
    transition: ease-in-out !important;
}

:root:not([chromehidden~="toolbar"],
    [sizemode="fullscreen"]) #unified-extensions-button:active {
    transform: scale(1.12) !important;
    transition-duration: 0ms !important;
}