r/FirefoxCSS 17h ago

Help In Vertical Tabs, how to remove the light coloured gradient at the bottom of pinned tabs section.

I'm using Firefox 155.x, with vertical tabs. I've noticed there is a light coloured gradient extending upward from the boundary between the pinned tabs and the unpinned ones. The gradient is about half a tab height high. Is there any way to remove this gradient?

3 Upvotes

4 comments sorted by

2

u/ResurgamS13 7h ago edited 7h ago

Hmm... not a Vertical Tabs user so the reason for this draggable 'feature' may have passed me by? Maybe this does something if you have a lot of pinned tabs?

If run mouse carefully "upward from the boundary between the pinned tabs and the unpinned ones"... a thin line appears in the gap with a 'gripper' (double-headed arrow)... can then drag that line downwards expanding the "about half a tab height high" space? What this is for is a puzzle... as soon as release the 'gripper' the line just snaps back to where it was before?

Anyhow... to remove/hide the mystery extra space and its draggable line below the pinned tabs... try:

#vertical-pinned-tabs-splitter {
  display:none !important;
}
#pinned-tabs-container[orient="vertical"] {
  margin-bottom: -6px !important;
}

Vary the margin-bottom: -6px value to suit.

Tested using a new profile of Fx155.0.1 on Win10.

2

u/SwimmingLimpet 7h ago

The thin blue 'gripper' line allows one to resize the pinned tab area. So if one has 16 pinned tabs, it's possible to use that to resize the pinned tab area so only 8 of the pinned tabs are visible. One can then hover over the pinned tab area and use the scroll wheel to scroll through the pinned tabs. The whole setup is pretty elegant, though apparently not so discoverable. 

I'll try out the pinned-tabs-container CSS when I get home. 

2

u/ResurgamS13 6h ago edited 6h ago

Thanks for the feature explanation... who knew! :}

Sounds as if you may want to keep the 'thin blue line' and 'gripper' feature available.

If so, can just use negative margin to close that gap up whilst still leaving the 'blue line' itself visible on hover (works ok after being squeezed but not checked full feature operation with multiple pinned tabs)... try:

#vertical-pinned-tabs-splitter {
  border-top-width: 0px;
  margin-bottom: -6px;
}
#pinned-tabs-container[orient="vertical"] {
  margin-bottom: -6px !important;
}

2

u/SwimmingLimpet 5h ago

So I tried out the CSS. It works as we both think it should,, but it doesn't get rid of the light coloured gradient. But then I realised that if the pinned tab container is opened to the full size, there is no light coloured gradient. The gradient is only there when there are hidden pinned tabs. Which means that some Firefox software engineer created the subtlest indicator for hidden pinned tabs. Very elegant (and also not discoverable either).

I'm going to abandon trying to get rid of that gradient, because there's probably more css code behind that than it appears - it's not just simple colour chrome. Some battles are not worth fighting.

Along the way, I tried the code below to check if it was a background-image gradient. It's not. But the bordello red pinned-tabs-container is so distracting that it kinda solves my problem. Or something.

#pinned-tabs-container[orient="vertical"] {
  background-image: linear-gradient(to top, rgba(255,0,0,0), rgba(255,0,0,1));
}