Active tab set to "connected" has bottom border

[cmvizitiu]

Firefox 126.0 (64-bit) on Fedora Linux (KDE).

For quite some time now (read: Firefox versions) the active tab has a thin line beneath it just like the other tabs making it difficult to spot as an active tab.

   

I mean in previous versions, when tabs were connected the active tab used to look like this

    It might sound like a tiny detail but for some reasons this small visual trick makes it very easy to spot the active tab.

[jscher2000]

Hmm, I don't have that line on the System or Light theme on Windows. Do you know whether it is a top border on the main toolbar, or something added to the tabs bar itself? To turn off any top border on the main toolbar, you could try this:

#nav-bar {
    --tabs-navbar-separator-style: none !important;
}

If it is a top border on the main toolbar, I don't see an obvious way to cover that up with a tab, but this could be because I don't really understand display: flex styling.

[jscher2000]

In case the border is on top of the nav bar, or across the entire bottom of the tab bar, you could try this override:

/* BETA - Move border from top of nav bar to bottom of tab bar items */
#navigator-toolbox {
    /* Set border color for consistency (predefined var, fallback value) */
    --user-border-color: var(--chrome-content-separator-color, light-dark(rgb(204, 204, 204), hsl(240, 5%, 5%)));
    border-bottom: 0.01px solid var(--user-border-color) !important;
}
#nav-bar {
    border-top: none !important;
}
#TabsToolbar, #TabsToolbar > .toolbar-items, #TabsToolbar-customization-target {
    border-bottom: none !important;
}
#TabsToolbar toolbarbutton, .tabbrowser-tab:not(selected){
    border-bottom: 0.01px solid var(--user-border-color) !important;
}

[cmvizitiu]

#nav-bar {
    --tabs-navbar-separator-style: none !important;
}

Not good: we lose the separator completely:

[cmvizitiu]

In case the border is on top of the nav bar, or across the entire bottom of the tab bar, you could try this override:

/* BETA - Move border from top of nav bar to bottom of tab bar items */
#navigator-toolbox {
    /* Set border color for consistency (predefined var, fallback value) */
    --user-border-color: var(--chrome-content-separator-color, light-dark(rgb(204, 204, 204), hsl(240, 5%, 5%)));
    border-bottom: 0.01px solid var(--user-border-color) !important;
}
#nav-bar {
    border-top: none !important;
}
#TabsToolbar, #TabsToolbar > .toolbar-items, #TabsToolbar-customization-target {
    border-bottom: none !important;
}
#TabsToolbar toolbarbutton, .tabbrowser-tab:not(selected){
    border-bottom: 0.01px solid var(--user-border-color) !important;
}

This is VERY close to what I'm looking for except for a small bug in the empty tab space.

Honesntly I'm willing to live with it especially since there are zero chances that I will ever face the problem of empty space on the tab bar in real life and once the space is filled we're fine.

[cmvizitiu]

FF Dev OTOH is a slightly different story: using your BETA hack above, the tabs scroll button also gets no bottom border and, to me at least it, makes it stand out like a sore thumb.

[cmvizitiu]

Sorry forgot to add: FF Dev is 127.0b9 (64-bit) same OS (Fedora Linux w. KDE) and in both cases I'm using "System theme - auto"

[jscher2000]

The spacer is easy, but I have some gaps on the scroll buttons:

/* BETA - Move border from top of nav bar to bottom of tab bar items */
#navigator-toolbox {
    /* Set border color for consistency (predefined var, fallback value) */
    --user-border-color: var(--chrome-content-separator-color, light-dark(rgb(204, 204, 204), hsl(240, 5%, 5%)));
    border-bottom: 0.01px solid var(--user-border-color) !important;
}
#nav-bar {
    border-top: none !important;
}
#TabsToolbar, #TabsToolbar > .toolbar-items, #TabsToolbar-customization-target {
    border-bottom: none !important;
}
#TabsToolbar toolbarbutton, .tabbrowser-tab:not(selected), #TabsToolbar .titlebar-spacer,
#scrollbutton-up, #scrollbutton-down {
    border-bottom: 0.01px solid var(--user-border-color) !important;
}

Probably there's a better approach to this. You could try r/FirefoxCSS.

[cmvizitiu]

The spacer is easy, but I have some gaps on the scroll buttons:

You mean these?

Not perfect but I can work with that... Thanks a lot for all the effort!