Edge-like Vertical Tabs

[drannex42]

I've fixed a number of things since yesterday, heres the quick and simple update log:

v1.0.1-1.1.0: Fixed tab positioning, roundness, notification icons, audio icons, improved theme colouring, tab overflow, scrolling, vivaldi/menu icon positions, and many other improvements.

v1.1.1: Added tab thumbnails (when enabled in settings) and the appropriate tab positions for when they are in use.

I'll try to keep this page updated as it goes. I will try to keep updates in the css file, as well as an updated version system.

[Ararararagi]

This is a wonderful mod, thank you very much! I used it for a while, and I am definitely loving it!

One thing I wanted to notice is that the favicons of the internal Vivaldi pages (like Speed Dial or Settings) are white and not visible on the light theme, when the tab bar is minimized and these internal pages are opened in the background. I've recreated it on clean profile with no other mods enabled except this one (v1.1.1).

[drannex42]

@Ararararagi I just fixed this for you! I had to set the importance of the color of the tab. I hope v1.1.2 works for you! Thank you for alerting me to the issue!

v1.1.2: Fixed favicon svg on internal pages on light themes.
v1.1.3: Fixes the coloring on the close buttons, no longer attached to the accent of the window, but on the foreground lightest color. This tends to be far less jarring.

[Ararararagi]

@drannex42

Thank you for the update.

It seems that the fix is do be working at least on the default 'Subtle' theme. But default 'Vivaldi' theme, for example, still has the same bug. It is reproducible after switching from the Subtle to Vivaldi theme and restarting the browser.

Also, I noticed that favicons don't dim when tabs are hibernated (and when that option is ticked in the settings, of course). It is a minor inconvenience really, but it would be great if you could implement it.

[drannex42]

@Ararararagi I have updated the file for the newest changes described below, I am not able to reproduce the issue you are having with switching from subtle to vivaldi and restarting the browser. Quite a curious issue.

v1.1.4: Added hibernate (.isdiscarded) class (dims tab - if you change this option in settings, browser restart required), added unread tab indicator. Thanks @Ararararagi for pointing out these needed features!

[Ararararagi]

@drannex42 It is really strange, but today I, too, couldn't reproduce the issue I had previously. I guess it was something on my end and it somehow fixed itself. Puzzles me. But now everything works fine!

Thank you again for your time and work.

[drannex42]

v1.1.5: Minor update, notification badge has better positioning and padding, fixed the overflow menu and scrollbar overlay settings to be more native.

[drannex42]

v1.1.6: Fixed fullscreen bug on some monitors as reported by /u/Tsopek on reddit, also added label to the synced tags button on the toolbar, fixed the overflow overlay, and the overflow scrollbar appearing in some cases when not hovered.

---

I am trying to figure out how to get the 'New Tab' button to be fixed to the bottom of the tab-strip container when the tab bar is overflowed, if anyone has any ideas on how to do this please let me know. I have tried a multitude of solutions, but none of them have really fared well. @dude99 do you have any suggestions?

[dude99]

@drannex42 This should work like you described:

#browser:is(.tabs-left, .tabs-right) #tabs-container.overflow .toolbar-tabbar {position: fixed; bottom: 0; z-index: 3;}
#browser:is(.tabs-left, .tabs-right) #tabs-container.overflow .newtab {top: 0 !important;}

If you don't want the tab list overlapped with newtab button you will need to reduce it's height with:

#browser:is(.tabs-left, .tabs-right) #tabs-container.overflow .tab-strip {max-height: calc(100% - 30px);}

Also, u can remove .overflow if you want the newtab button to be fixed at bottom permanently.

Then, another solution would be using js to move the newtab button into .sync-and-trash-container, this would be the best solution if you don't mind using js mod along with css mod, because this will allow all 3 buttons to stack nicely in a row when the tabbar is shrunken into 50px.

Hope this help. Enjoy!

[drannex42]

v1.1.7: Removed absolute positioning on tabs, and made the new tab button sticky to the bottom of the overflow tab container!

I had to force the tabs to no longer use an absolute position for their placement, and instead of make them to be static (as they should've been). I then set a size of the overflow menu to have a max height of 85% of the view, and then set the newtab toolbar group to have a 'position: sticky;' attribute and bonded it to the bottom.

I had to add additional padding to the bottom so that the newly created tab does not go below the new tab button, and is instead in view, and so I had to create a bottom offset and a different padding to get that effect.

[drannex42]

v1.1.8: Realigned new tab button to be alongside the trash and sync buttons (when tab overflow happens), added config section below, fixed trash & sync svg sizes.

If you have the statusbar disabled (or hidden) you can now uncomment/toggle a line at the top of the CSS to remove the whitespace between the new tab button and the sync/trash buttons the bottom as well.

[drannex42]

v1.1.9: Fixed tab stack visual (better alignment of tab indicators).

v1.2.0: Centered (vertically and horizontally) the tab title in the header bar at the top of the window when you have the horizontal menu enabled.

I was going to make that text a hair bigger to make it more inline with the horizontal menu font-size, but I feel that the vivaldi team made the right move to reduce the size of the font. I disagree with their bottom aligning positioning for the header, so I did end up fixing that.

[drannex42]

The latest Vivaldi Snapshot added some new features and broke things (for the better)!

v1.2.1: Updates for latest vivaldi snapshot changes: added styling for additional tabbar container, readded border width, added removal of the new tab bar container width, fixed sync and trash container from being offset.

Someone messaged me asking to flip a few things for the right side (previous use case: when on the right side when you clicked where the favicon was, you would click the close button). I have come up with a simple and great solution for those users, and now that will no longer happen.

v1.2.2: Flipped how the favicon and close button are displayed for users using this on the right side of the screen.

You can get the new css styling here!

[drannex42]

v1.2.3: Updated the tab selection svg size/border positioning as latest vivaldi changed how they handled tab selections .

Vivaldi changed how they handle the tab selection display, since it is no longer class based and has shifted to an svg icon, I had to update the positioning on it to be in line with the rest of the tabs. Click here to download the latest version.

[Zug]

@drannex42 Thank you for this update. Now I don't have to catch new tab previews before they disappear after the tab bar collapses!

[drannex42]

@Zug Happy that it helped!

---

The latest Vivaldi snapshot seems to have caused some issues with the layout; the following fix will fix that.

v1.2.5: Latest Vivaldi Snapshot updates added a new transform property to the tab position class, I have removed that and added an importance tag to the new tab button to override.

Click here to download the latest version.

[Zug]

@drannex42 Thank you for the update. Can you please help me in solving this issue? Tab bar overlaps the content of any page https://imgur.com/a/F4pQ6qW. And I'm not quite sure when it started happening, it caught my eye only now. I tried reverting to older version of your mod (2.1.4, to be exact), but it seems that issue was present even then.

Vivaldi 3.5.2115.87 (Stable channel) (64-bit)
Revision 63862004ac4fa761fcf3c744cd6ac9ef44284b9c
OS Windows 10 OS Version 2009 (Build 19042.746)

P. S. Figured it out - it only happens if I uncomment the line as suggested in line 30 of the CSS code. Can you please explain what does that line of code changes? I'm using an overlay status bar, and as far as I understand it just moves icons located in the Tab bar a little bit.

[drannex42]

@Zug It's because there was a closing line comment that needed to be closed. Took a lot of trial and error, but uncommenting required removing the beginning /* and the closing /*. If you didn't remove the secondary comment it would skip over the layout positioning classes on the lines directly following.

But, now the config option is no longer needed at all as it will automatically reposition if you have the statusbar on/overlay/off. v1.2.6 fixes all of that (I also realized, I miswrote the versioning by flipping the 1 and 2. I have fixed the changelog to reflect the proper versioning system.).

[nonamed]

@drannex42 thank you for your work. moved to your version from old implementation (unusable with latest snapshots).
how i need to change code to:

1. add more width to tabs container and tabs themselves (tabs container was easy in line 142 but tabs still 200px long)
   also changing tabs container width broke favicon display when mouse not hovering it.
2. exchange position of tab close button and favicon
   Thanks.

[drannex42]

@nonamed

1. To add or remove width to the tabs container change the width value in the #tabs-container.left:hover, #tabs-container.right:hover class. Be sure to include an !important value at the end. This will automatically resize the inner tabs as well, so you will just need to change one value. I fixed this (for both of us, and others) in v.1.2.7 for better code editing.

2. If you want to switch position of the tab close button and favicon on hover just add flex-direction: row-reverse; to the .tab-header class.

You can download 1.2.7 here.

Suggestion: Add the modification to the bottom of your file and add an !important class to the changes, that way when new versions come out you can quickly update them and just replace the main code while keeping your own modifications! Happy you enjoy the modification! If you have any more ideas let me know!