Modify tab separators

User Help for Mozilla Firefox
Post Reply
semigeek
Posts: 322
Joined: April 16th, 2014, 8:54 pm
Location: Colorado

Modify tab separators

Post by semigeek »

In FF 78 ESR, tab separators are rather minimal (grey, partial height). How do I make them black and possibly taller? I've found the ID .tabbrowser-tab::after/before, but the only thing I can do is make them disappear with display:none. Other attempts to modify appearance fail.
siffemoz
Posts: 250
Joined: January 29th, 2016, 4:36 pm

Re: Modify tab separators

Post by siffemoz »

See if this works:

.tabbrowser-tab:not
(:hover, [beforehovered],
[selected],
[last-visible-tab],
[beforeselected-visible])::after .tabbrowser-tab {
border-left: 1px solid Black; !important;
}

.tabbrowser-tab[last-visible-tab] {
border-right: 1px solid Black; !important;
}
semigeek
Posts: 322
Joined: April 16th, 2014, 8:54 pm
Location: Colorado

Re: Modify tab separators

Post by semigeek »

No, the first part just doesn't work even after making some corrections (thanks for thinking of all those cases though!), and the last bit puts another line next to the grey one that's already there, not in place of it. Did this work for you? (If you're using 92 you may have no separators at all?)
Last edited by semigeek on September 17th, 2021, 5:42 pm, edited 2 times in total.
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: Modify tab separators

Post by jscher2000 »

A side note:

In the Photon UI (Firefox 57-88), I think the separator color was determined by your theme (there is a CSS variable that Firefox Color and themes can set for them). I don't recall ever seeing them less than full height, at least in maximized windows.

The Australis design (Firefox 29-56) did have short separators that faded out as they went up.

And in Proton, we have no separators whatsoever.
semigeek
Posts: 322
Joined: April 16th, 2014, 8:54 pm
Location: Colorado

Re: Modify tab separators

Post by semigeek »

OK... I got the result I wanted. Two step process: hide the existing separators, then create new ones. They're now somewhat darker matching the bottom of the tab bar, and extend the full height of it instead of stopping short.

.tabbrowser-tab::after {opacity: 0 !important;}
.tabbrowser-tab {border-right: 1px solid #7D7D7D !important;}

(works in Thunderbird 68 too: substitute before for after for some reason, and tabmail for tabbrowser)
Post Reply