Fix vertical container tab highlight colours in Nova

[mauitin]

Pre-Nova, when you were using vertical tabs, the container tab highlight colour was drawn on the left. Post-Nova, it is now drawn along the top, the same as in horizontal tabs mode, and weirdly close to the tab name considering all of the other spacing proportions in the vertical tab bar. Basically it looks like the horizonal tab formatting has been carried over and nobody bothered to check what it looked like in vertical tab mode. 

If drawing the highlight colour on the side is no longer an option because of the pill tabs (and there's so much more I could say about those) please find another way to represent it. A colour-coded dot at one or other end of the pill would be a significant improvement.

[kelimuttu]

Thanks for submitting an idea to the Mozilla Connect community! Your idea is now open to votes (aka kudos) and comments.

[efanchen]

@kelimuttuI beg to differ that it's an idea. it's rather a regression report. I experience this issue too, it looks extremely ugly.

[katsumi_maki]

I will be using browser.nova.enabled set to false in my about:config until this right-side highlight is restored for verticle tabs.

[Supergregg]

If you are capable of using userChrome.css, i fixed this problem like this:

/* --- Regular (Unpinned) Tabs --- */
.tabbrowser-tab:not([pinned]) .tab-context-line {
max-width: 80px !important; /* Adjust length as desired */
margin-inline: 8px auto !important; /* Position along the top edge */
transform: translateY(-1px) !important; /* Move the container bar Up */
mask-image: linear-gradient(to right, black 10px, transparent 80px) !important; /* Custom fade: solid for the first XXpx, fades to transparent over the last XXpx */
}

/* --- Pinned Tabs --- */
.tabbrowser-tab[pinned] .tab-context-line {
/* Center a solid accent bar directly over the pinned icon */
max-width: 10px !important; /* Adjust width to fit icon width */
margin-inline: auto !important; /* Centers the line */
/*transform: translateY(-2px) !important;/* Keeps the same vertical elevation */
mask-image: none !important; /* Solid bar without the fade-out */
border-radius: 2px !important; /* Soft rounded ends */
}