Top Addressbar above Top Tabbar CSS mod

[dude99]

ATTENTION: This CSS mod is adopted by @nomadic, please continue related discussion on this topic: https://forum.vivaldi.net/post/491392

---

Unify Tabbar & Addressbar Color Palette

---

Compact Header

Classic Header

Recent v4.0 changes have completely broke the popular Addressbar on Top mod (a.k.a. Tabs below Addressbar) & causing quite a bit of riot in the mod forum. Thus, I come up with an alternate pure CSS mod that hopefully can keep EX-FX user from sacrifice Vivaldi to the foxy woke goddess. LOL

---

ReadMe

1. No need to fumble with tabbar & addressbar position, just keep both of 'em at top position.

2. You can achieve the Unify Tabbar & Addressbar Color Palette effect by remove background-color & color properties from line 3, & line 4 entirely. Then enable line 14 & 15 under Unify tabbar & addressbar color palette section by remove / in the beginning of each line. For horizontal menu bar, reduce #titlebar height: 58px to 0 in line 26.

3. You can choose between Classic header or Compact header (enabled by default). Add / in the beginning of line to disabled the code, or remove the / in the beginning of line to enabled it.

   

4. Both header options will respect Remove Tab Spacing in Maximized Windows setting:

   

5. Support Horizontal Menu Bar anchor at the top above Addressbar when it's enabled.

   

6. Support Bookmark Bar anchor below Addressbar & above Tabbar when it's on top position.

---

CSS Code

/* top addressbar above top tabbar  */
#browser.tabs-top.address-top #header {padding-top:37px;}
#browser.tabs-top.address-top #titlebar {height:34px; background-color: var(--colorBg); color: var(--colorFg);}  /* remove background & color for unify tabbar & addressbar color palette */
#browser.tabs-top.address-top .color-behind-tabs-off #titlebar {background-color: var(--colorAccentBg); color: var(--colorAccentFg);}  /* remove this line for unify tabbar & addressbar color palette */
#browser.tabs-top.address-top.maximized:not(.tabs-at-edge) #titlebar {height:41px;}
#browser.tabs-top.address-top .vivaldi {height:34px; top: unset; bottom:0;}

#browser.tabs-top.address-top #main {overflow: visible;}
#browser.tabs-top.address-top .toolbar-mainbar:after {display:none;}
#browser.tabs-top.address-top .UrlBar {position: fixed; top:0px; left: 34px; right: 100px;}
#browser.tabs-top.address-top.maximized:not(.tabs-at-edge) .UrlBar {top:7px;}
#browser.tabs-top.address-top .UrlBar, #browser.tabs-top.address-top .UrlBar > div:not(.UrlBar-AddressField):not(.UrlBar-SearchField) {background-color: transparent;}
/* optional: unify tabbar & addressbar color palette */
/.color-behind-tabs-off#browser.tabs-top.address-top .UrlBar > div:not(.UrlBar-AddressField):not(.UrlBar-SearchField) {color: var(--colorImageFg, var(--colorFg));}
/.color-behind-tabs-on#browser.tabs-top.address-top .UrlBar > div:not(.UrlBar-AddressField):not(.UrlBar-SearchField) {color: var(--colorImageFg, var(--colorAccentFg));}

#browser.tabs-top.address-top #tabs-tabbar-container > div {padding-left: 2px;}

/* bookmark bar enabled */
#browser.tabs-top.address-top.bookmark-bar-top #header {padding-top:65px;}
#browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar {position: fixed; top:34px; left:0; right:0;}
#browser.tabs-top.address-top.bookmark-bar-top.maximized:not(.tabs-at-edge) .bookmark-bar {top:41px;}
/* horizontal menu enabled */
#browser.tabs-top.address-top.horizontal-menu #header {padding-top:38px !important;}
#browser.tabs-top.address-top.horizontal-menu .topmenu {transform: translateY(-38px); margin-bottom:0; color: var(--colorFg);}  /* remove color for unify tabbar & addressbar color palette */
#browser.tabs-top.address-top.horizontal-menu #titlebar {height: 58px !important; z-index:-1;} /* set 0 height for unify tabbar & addressbar color palette */
#browser.tabs-top.address-top.horizontal-menu .UrlBar {top: 24px !important; left: 0; right: 0;}
#browser.tabs-top.address-top.horizontal-menu #tabs-tabbar-container {padding-top: 0;} 
/* bookmark bar & horizontal menu enabled */
#browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top #header {padding-top: 65px !important;}
#browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top .topmenu {transform: translateY(-65px);}
#browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top .bookmark-bar {top: 58px !important;}

/* option 1: classic top section window drag zone */
/#browser.tabs-top.address-top.normal #titlebar {height:46px;}
/#browser.tabs-top.address-top.normal .UrlBar {top:12px;}  /* 7px for Mac */
/#browser.tabs-top.address-top.normal .bookmark-bar {top:46px;}

/* option 2: compact header, drag zone are all around addressbar */
#browser.tabs-top.address-top.normal #tabs-tabbar-container {padding-top: 0 !important;}

---

Personally, I'm a vertical tabbar user. I don't really understand why most user still stuck with the ancient horizontal tabbar & never consider the vertical tabbar as superior tabs layout...

Anyway, I probably won't work on this CSS mod any further in the future, because I don't use it, this is really just for the Vivaldi community. So feel free to fork it to whatever you think might be useful for you & share it with the community.

PS: I accidentally created the Unify Tabbar & Addressbar Color Palette effect while coding this CSS mod, & I really like how it turn out. Maybe, team V should consider it for future GUI upgrade! LOL

[shifte]

@dude99
Nice!

I don't really understand why most user still stuck with the ancient horizontal tabbar & never consider the vertical tabbar as superior tabs layout...

Now you've created a reason for everyone to use the horizontal tabbar.

[dude99]

@shifte That's not a good reason to stick with the horizontal tabbar, so I'm not worry about it too much...

1. it doesn't have infinite scrolling scrollbar & become impossible to read tabs' title in plainview when tab width shrink to less than 100px. Even with scrollbar + fixed width mod, it will take significant more time & effort to scroll through tabs.

2. it can't display tab title properly when you have over a dozen of tabs opened, even with mod it still can't display 25+ readable tab title in plainview like vertical tabbar with 300px width.

3. it took out large amount of space at the top of the window, yet display so little readable information in plainview. I think it's a terrible tradeoff, & it get worst when introduce horizontal multi-row tabbar into the mix... just imagine a third of the top window stuffed with rows of tabs & other GUI!

   

The evolution of monitor screen is getting wider & longer width, thus we end up with extra space at both sides of the browser. So, it's natural for us to utilize those extra spaces to display tabbar, panel, or tile tab instead of wasted on empty web content. Even with laptop screen of 4:3 ratio, a vertical tabbar with auto-shrink capability can display more readable information than multi-row horizontal tabbar in most cases.

My point is, V team should spend more resources on develop better vertical tabbar, instead of just focusing on horizontal tabbar & treat vertical tabbar as afterthought. Because, majority of Internet user devices' screen setup doesn't look like this:

IMHO the reason horizontal tabbar is more popular & widely use by most is because it's the default setup in most web browser, which inherited it's legacy from ancient time when all computer monitor are 5:4 ratio. It make sense to have horizontal tabbar when you have an almost square screen display. But when wider width screen display become dominant, vertical tabbar is a more suitable tabs layout for modern web browser...

Until, everyone also have an oversize 15 inches golden ratio tablet! LOL

[shifte]

@dude99
The reason I use horizontal tabbar is just a lifestyle diseases.
Shall I use vertical tabbar?
By the way, ".vivaldi" disappears when I delete line 3 & 4.
I can't figure out how to fix it.
LOL

[dude99]

@shifte Don't delete the entire line 3, only the background-color: var(--colorBg); color: var(--colorFg); in line3, & entire line 4

---

Shall I use vertical tabbar?

You should at least try it for a few days, maybe then you will like it & realize how inferior is the horizontal tabbar. LOL

[dude99]

Update OP code:

• now compact header also support tab spacing when enabled.

• add horizontal menu bar support.

[shifte]

@dude99
Thanks!! What a genius!

[dude99]

@shifte It seems u didn't enabled line 14 & 15?

Remove the / in front of line to enabled 'em, then add / in front of any line to disabled the entire line, like this:

or you can use proper syntax to envelop code with /* code */ to disabled it.

[shifte]

@dude99
I see, worked well.

Anyway, I probably won't work on this CSS mod any further in the uture,

This is too difficult, who's going to manage...?

[SallyK]

Thank you, it's great to have something that works with just CSS and doesn't need redoing every time a new version of Vivaldi comes out. The only issue I have is that while the tab bar is now under the address bar, it's still above the bookmarks, is that a setting I have wrong?

[dude99]

Final update:

• tidy up overall code & optimized consistency between toolbar in "various" situation.

• fixed compact header related bug, it should be bug free now...

• add support for bookmark bar, I won't do unify color for this toolbar cuz it look kinda weird to me. but feel free to fix it if you insist...

---

@shifte

This is too difficult, who's going to manage...?

Don't worry, my code are quite clean & easy to understand by CSS guru. They can fork it in the future if needed. I have wasted too much time on this useless mod (to me anyway), better invest in something I actually will use in the future... LOL

[SallyK]

@dude99 Thank you again. I really appreciate the work you've put in to make the browser more usable for us, even though it's not something that you would use yourself.

I will try the option at the side one day, because I do get your logic, it's just after nearly 20 years it's such an automatic thing for me for it to be stuck to the top of the page.

[TreaKu]

@dude99 Thanks! It works!

[dude99]

Great News! @nomadic have adopted this CSS mod, so all future update will be maintain by him.

[shifte]

@dude99
Oh, my God!
@dude99 and @nomadic.
It's a big merger between HP and Compaq.

[shifte]

@juanvase
It's true!
Truth is spoken here.
opera12 is the soul, Vivaldi is the dream.

[dude99]

@shifte Nah...

It's more like Microsoft give up on smartphone concept halfway, then Apple made IPhone! LOL

[shifte]

This post is deleted!

[BloodyElf]

@dude99 Thank you for your work!
I also use multiline-tabs.css from VivaldiHooks.
If I use both of these css together - drag and drop of tabs on the panel doesn't work. Tabs are being dragged to the wrong place.
It can be fixed?

[dude99]

@bloodyelf This CSS mod doesn't modify any tabbar properties except adding padding-left: 2px to both #tabs-container & #tabs-subcontainer. Everything else are work around the tabbar. So, maybe you can try remove that value & see if it's the cause of the problem?

Also, did you try with just one CSS mod at a time? See if both works properly separately?

Else, I don't think both mod are compatible with each other...

Also, currently there is a bug related to drag & drop tab always end up in the last position... in Windows OS at least. (fixed in latest stable release)

Sorry, can't help u here. This mod is actually adopted by @nomadic & I'm pretty much handoff from this project now.