Partial Borders Between Tabs

[nomadic]

@stardepp Which tabs are pinned? Vivaldi should have a border between the pinned and unpinned tabs by default, so even if the new CSS isn't working, it should still be there.

This is what it looked like for me before adding those 2 fixes for pinned tabs:

You can see the double line between the pinned and unpinned tabs. My fix was to hide the one the mod added and extend the width of Vivaldi's default.

Your image doesn't show that, so I am confused. Can you try removing any other CSS mods to test?

[stardepp]

@nomadic I'm happy with how it looks now, I have the vertical table bar set to maximum width.

[stardepp]

@nomadic Thanks for the update, looks good now.

[Patskoue]

Hello again @nomadic! I really like this mod, but I'm having some strange issues with a few of the added tab borders that I can't seem to fix. The first thing includes the bar located on the left side of my currently selected tab. For whatever reason, this bar remains slightly visible even with the showBordersActiveTab setting set to 0. The bar on the right side disappears perfectly, and both the left and right bars disappear when I hover over the tab, but the bar on the left still remains when my cursor moves off the currently selected tab. The one other thing I noticed is that the border located at the beginning of my tab bar (showFirstBorder set to 1) is skinnier than all of the other borders (but is about the same size as the persistent left bar I mentioned earlier). Would there be a way to make this the same size as the rest of the borders? I don't think any of my other css mods are causing these problems since I tested for these issues using only this css code and got the same results.

(here's a screenshot showing the funkyness)

Thanks in advance for the help and for everything you've done for the Vivaldi community!

[nomadic]

@Patskoue Yeah, the active tab border was a copy paste error on my part. I fixed it on my install, but a large CSS project I have been working on distracted me and I forgot to update the post. Thanks for the reminder.

As for differing thicknesses, screen resolutions, aspect ratios, and tab widths can have an impact on things like this. I actually see the first border as thicker than the other borders.

They are all set to the same width, so there isn't much I can do. You could try manually adjusting it until looks right with something like this:

/* Adjust first border width */
#tabs-tabbar-container:is(.top, .bottom) span:first-of-type .tab-position::before {
  --borderWidth: 1.5px;
  width: var(--borderWidth);
  left: calc(-1 * var(--borderWidth) / 2);
}

By default they are 1px, so increasing to 1.5px might fix it.

[Patskoue]

@nomadic Everything is working great now! I ended up having to set the width of the first bar to 2px for it to match the rest of the borders. Thanks you so much again!

[Patskoue]

Hey @nomadic (sorry about all these questions, I swear these are the last two)! I was experimenting with your CSS code last night and I discovered a few strange quirks that I can't seem to fix/figure out for the life of me. The first thing I found involves the horizontal scrolling icon that gets added to the tab bar after the "Enable Horizontal Scrolling" option is turned ON in the settings menu. For some reason, this icon causes the first tab bar border to be completely cut off (maybe because the icon overlaps the border?).

(horizontal scrolling ON but missing first tab border)

(horizontal scrolling OFF and present first tab border)

Would there be a way to make it so that the first tab border appears even with the horizontal scrolling option turned ON?

What's weird about the above issue though, is that the first tab border, with horizontal scrolling turned ON, is present as long as there is a pinned tab. This segues into the other funky thing I found, which includes random improperly sized tab borders when there is a pinned tab.

(pinned tab [with horizontal scrolling ON] and present first tab border, but suddenly randomly improperly sized tab borders)

(pinned tab [with horizontal scrolling OFF] and correctly sized first tab border, but even more other improperly sized tab borders)

I didn't make many significant changes to your original CSS code (I'll post the section of the code that I altered below), but the changes I made I think only affected the tab borders' size and positioning. I tested pinned tabs along with horizontal scrolling using your original CSS code as well and got similar results (with --showFirstBorder set to 1 & --showLastBorder also set to 1).

/* For tab bars set to the top or bottom position */
#tabs-tabbar-container:is(.top, .bottom) span:first-of-type .tab-position::before,
#tabs-tabbar-container:is(.top, .bottom) span .tab-position::after {
  width: 1px;
  height: 56%;
  bottom: 21%;
  right: 0;
}
#tabs-tabbar-container:is(.top, .bottom) span:first-of-type .tab-position::before {
  right: unset;
  left: -1px;
}

I hope I'm not bothering you too much with all these questions (I'll try to ease up after this). Thanks in advance for the help!

[nomadic]

@Patskoue Sorry, but I don't think there is much to do about those quirks.

Would there be a way to make it so that the first tab border appears even with the horizontal scrolling option turned ON?

I suspect that if you scroll to the left, click the left arrow on the tab bar, or resize the window, then the first border would show up again. The borders go below the arrow buttons, so any scrolling will cause them to disappear.

If you always want a border to be present while horizontal scrolling is enabled, then you could add the first/last borders to the actual scroll buttons and disable the options in the original mod.

CSS for adding those borders:

/* Add borders to the horizontal scrolling tab bar buttons */
.resize > .toolbar-tabbar {
  position: relative;
}
.resize > .toolbar-tabbar::after {
  --borderOpacity: 0.5;
  content: "";
  position: absolute;
  overflow: hidden;
  background-color: var(--colorAccentFgFaded);
  opacity: var(--borderOpacity);
  transition: 0.15s;
  width: 1px;
  height: 60%;
  bottom: 20%;
}
#tabs-tabbar-container:is(.top, .bottom) .resize .toolbar-tabbar:first-of-type::after {
  right: -0.5px;
}
#tabs-tabbar-container:is(.top, .bottom) .resize .toolbar-tabbar:last-of-type::after {
  left: -0.5px;
}

---

random improperly sized tab borders when there is a pinned tab.

That is the same issue as before. There are just some limitations on how the thickness of the borders are shown. I would assume it is the difference between landing on a column of pixels vs being split between 2 columns.

There unfortunately isn't anything I can do to fix that. Even Opera doesn't have a solution for their built in tab borders:

I have been frequently running into that issue with the CSS project I am working on (OperaGX style skin for Vivaldi). The person helping me test has a slightly different screen than mine, so these sort of things keep popping up.

---

height: 56%;
bottom: 21%;

As for this bit of your modified CSS, the bottom percentage should be half of whatever is left when you subtract the height from the total 100%. This is to center the border in the tab bar height. So the bottom would be 22% in your case.

You could also use this to make adjusting the height easier:

  --borderHeight: 60%;
  height: var(--borderHeight);
  bottom: calc((100% - var(--borderHeight)) / 2);

[Patskoue]

@nomadic Thanks for all the help! Ya, I see now that the borders change width depending on Vivaldi's window size, which is pretty odd. I'll do a little more experimenting to see if something can be done about that. Either way, I'll stop bothering you now. Thanks again for the help!

[Barruel]

Sorry for hijacking the thread, but I think that my post will be on topic.

There is something wrong going on with the tabs spacing, and it is not (o at least not just) the width of the borders.

Pale Moon is quickly becoming obsolete, and I'm in the process of switching to Vivaldi. I'm sure I'm at the right place because I've found here names like @Pesala and @srazzano which I remember from the days of the Custom Buttons FF extension. Some of their code is still working fine in my PM installation.

Anyway, I started to arrange Vivaldi to my liking. First thing I did was getting the Tabs Below Address Bar and Bookmark Bar mod by @nomadic and this tabs issue showed up very soon. I did just a few minor height and position changes to the toolbars and started styling the tabs giving a 1 px outline to the tabs and moving them 1 px to the left, so the right border of a tab is covered by the border of the next and I see just 1 border. Then I had tab transparency enabled, and the tab spacing issue was blatant because moving 1 px to the left the tabs covered the right border of some tabs, but not of all of them, as it would happen if tab spacing was uniform and working correctly.

I "fixed" it first it by disabling tab transparency and then changing the 1px outline for just 1px left border. But then came the tab stacks.

I aimed (and aim) at something like this:

But then opening new tabs or closing existing tabs caused this:

The tab itself and the tab stacks (classes .tab and .tab-group-indicator respectively) are both direct children of .tab.position, which, you've guessed it, sets the tab position in the bar. Actually, tabs with house stacks receive also the class .tab-group, but there is nothing special in its style that I had found and the issue I am trying to explain is present also in a tab bar full of tabs with no tab stacks.

I double-checked that both .tab and .tab-group-indicator inherited width and position properties from their parent .tab position and placed this in mycustom css:

.tab-strip .tab-position { outline: 1px solid red;  }

The result is that I see this:

But then I open a new tab (or close an existing one) and Vivaldi does this, which is what I expect to see because I moved every tab 1 px to the left to cover the border of the tab at its left:

Both captures come from the same browsing session with the same css code and a maximized window.

For some reason, there are different gaps between tabs depending on the number of tabs opened, but it is always that 1px difference, so tabs are correctly spaced of wrongly spaced just randomly. To try to track the root of the issue, I added a 1px blue border to .tab and moved it 1px to the right. With the aforementioned 1px red .tab-position outline, the result is this:

If all tabs had the same separation, then every tab would show the pattern 1px blue + 1px red as the result of the blue 1px .tab right border and the 1px .tab-position outline. There are some tabs that show indeed, as expected, that pattern, but then there is an additional 1 px space between other tabs whose root I've failed to identify. After the first tab there is a gap of not 1 but 2 pixels. That's because there lies .toolbar-large, which houses the .tab-strip on which the .tab-position elements are (after a .resize and a span), the new tab button and the element where the synced tabs and the trash buttons lie, whose class I don't remember right now. Here it is with a 1px yellow outline:

The most disturbing thing is that the presence of such ghost pixel between tabs seems to be totally random. I've even built a spreadsheet where I put the width of #tabs-container and .tab-strip, number of tabs, their width and their position from 1 to 60-something tabs opened and performed lots of operations with such figures in order to find a pattern, but I've been unable to find something meaningful other than the fact that I could always make the tabs look evenly spaced by adding 0.8 or 0.9 (randomly, again) to the width of .tab-position

I've seen this issue in captures throughout the forum that seem to date back to forever. It would be nice to know where does it come from.