README.md

This is my custom userChrome.css for Firefox, tested on version 145.0.1.

I will update this file if I find any useful changes. The primary goal was to improve Firefox's user interface and user experience, making it more similar to Google Chrome.

For instructions on how to use this, please refer to the userChrome documentation at https://www.userchrome.org.

Key customizations include:

• Smaller border radius for tabs.
• Tab separation using left border.
• Smaller spacer on both sides of tabs.
• Smaller min-width for tabs.
• Compatible with dark mode (incognito mode).
• Different URL bar color.
• Zero space between tabs.
• Fewer context menu options.

Preview Image:

userChrome.css

/* Tested on Version 145.0.1 */
/* Spacer */
.titlebar-spacer {
    width: 1rem !important;
    &:hover { background: #d9d9de; }
}

/* Tabs */
#TabsToolbar {
    tab {
        --tab-selected-bgcolor: light-dark(#f9f9fb, #2b2a33);
        --tab-border-radius: 0;
        --tab-block-margin: 0.35rem 0;
        --tab-overflow-clip-margin: 0;
    }

    tabs {
        --tab-min-width-pref: 4.75rem !important;
    }

    arrowscrollbox {
        --tab-border-radius: 0.5rem;
        --toolbarbutton-hover-background: light-dark(white, #1f1e25) !important;
        --toolbarbutton-active-background: light-dark(#ddd, #000);
    }

    toolbarbutton {
        --tab-border-radius: 0.5rem;
        --toolbarbutton-outer-padding: 0.35rem;
        --toolbarbutton-inner-padding: 0.85rem;
    }

    .tabbrowser-tab:hover .tab-background,
    .tab-background[selected] {
        --tab-border-radius: 0.5rem 0.5rem 0 0;
    }

    .tab-background > .tab-group-line {
        --tab-border-radius: 0.5rem;
        --tab-overflow-clip-margin: 0.5rem;
    }
}

.tabbrowser-tab:not(
        :first-child,
        :hover,
        :hover + .tabbrowser-tab,
        [selected],
        [selected] + .tabbrowser-tab
    )
    .tab-background {
    border-left: 0.5px solid light-dark(#bbb, #666);
}

.tabbrowser-tab:not(:hover, [selected]) .tab-close-button {
    display: none !important;
}

/* Urlbar*/
#urlbar {
    --toolbar-field-border-color: light-dark(#eee, #111);
    --toolbar-field-background-color: light-dark(white, #1f1e25);
    &:hover {
        --toolbar-field-border-color: #07c8;
    }
}
.urlbar-background {
    transition: border 100ms linear;
}

/* Toolbar */
#nav-bar,
#PersonalToolbar {
    --toolbarbutton-hover-background: transparent;
    --toolbarbutton-hover-outline-color: light-dark(#d1d2d3, #555);
    --toolbarbutton-border-radius: 0.5rem;
}

/* Context menu */
#context-sendimage,
#context-sep-setbackground,
#context-setDesktopBackground {
    display: none !important;
}