Tabs Below Address Bar and Bookmark Bar

nomadic

@dude99 Yep, you are correct.

I was going through each one and making sure it still had a purpose, but somehow missed that one.

There are still probably some unnecessary bits.

SallyK

@nomadic Thank you very much for that - I've been doing some playing around, and got something that's the best I've been able to manage since the version 5 update.

For some reason the bookmark button in the address bar won't drop down, and hasn't for a long time (it'll toggle a bookmark, but that's all) - I don't know if it's the same reason as the profile dropdown not working. And in all cases when menus cross the bookmark bar, they have a dead spot, where you can see the content, but not interact with it.

But the tabs are in the right place, and it's usable, which is the best I can hope for, until someone can be persuaded it needs to be an official option.

nomadic

@SallyK It seems like the position: fixed on the .mainbar was causing the issues with the address bar dropdowns.

I updated the CSS in the post above to now use position: absolute and it seems to mostly be working.

The only issue I saw was that the window control buttons can overlap the address bar when the window is made too narrow.

image showing window controls overlap

Let me know if you see any other bugs. I don't use this mod, so I am sure I haven't tested every possible configuration or use case.

SallyK

Thank you very much for spending more time on this, when it's not your thing, I really appreciate it.

That fixes the official dropdowns, which is a big help. There's still the dead spot on the extension menus where they cross the bookmark bar, but that has been around since before the last big change.

Apart from that it's really only couple of minor visual points that I might be able to fix myself - the window buttons are a tiny bit tall, and there's more gap than I would like between them and the extension toggle.

d0a48c29-7252-4b70-94db-a8edbac8d375-Screenshot from 2022-07-07 20-26-16.png

ETA:
Extension toggle position fixed - edit this line as appropriate

#browser {
  --addressBarPaddingRight: 95px;

nomadic

@SallyK said in Tabs Below Address Bar and Bookmark Bar:

the window buttons are a tiny bit tall, and there's more gap than I would like between them and the extension toggle.

For the gap between the window buttons and the extension toggle, you can adjust this variable: --addressBarPaddingRight: 137px;

The height is controlled by --headerElementsHeight: 34px;, but maybe your window buttons have some extra margin on them that needs to be adjusted.

There's still the dead spot on the extension menus where they cross the bookmark bar, but that has been around since before the last big change.

Ah, forgot about that one. It is because the tab bar is a drag region for moving the window around.

If you don't need to do that or you want to set the drag region to somewhere else, you can add this:

#tabs-tabbar-container {
  app-region: no-drag;
}

And add app-region: drag; to some other interface element.

There is also the option of just moving the extension popups down so they don't cross the tab bar.

/* Move extension popups down to avoid crossing drag region which leads to dead zone */
.extension-popup.top {
  margin-top: 29px;
}
#browser.tabs-top.address-top.horizontal-menu .extension-popup.top {
  margin-top: 2px;
}
#browser.tabs-top.address-top.bookmark-bar-top .extension-popup.top {
  margin-top: 26px;
}

SallyK

@nomadic Thank you again - I wouldn't have even have thought of trying to drag the window by the tab bar - I guess it makes more sense if it's at the top of the window. So I'm happy to turn that off.

stardepp

@SallyK said in Tabs Below Address Bar and Bookmark Bar:

Thank you very much for spending more time on this, when it's not your thing, I really appreciate it.

That fixes the official dropdowns, which is a big help. There's still the dead spot on the extension menus where they cross the bookmark bar, but that has been around since before the last big change.

Apart from that it's really only couple of minor visual points that I might be able to fix myself - the window buttons are a tiny bit tall, and there's more gap than I would like between them and the extension toggle.

ETA:
Extension toggle position fixed - edit this line as appropriate
#browser {
  --addressBarPaddingRight: 95px;

I installed your code, but it looks wrong on my end:

What needs to be changed in my case?

SallyK

@stardepp I can't know without trying it, but it looks to me as if you have the opposite problem, not enough space before the window buttons.

Try editing

#browser {
  --addressBarPaddingRight: 95px;

and increasing the number of pixels - that should leave more room for the buttons.

nomadic

@stardepp You probably don't need to adjust that CSS variable from the number I provided.

It was tested on Windows, so I knew the correct width for the window controls. If you don't have a gap or overlap, then there is no need to change it.

HighOnPhazon

Thanks a lot for working on this; really hate how Vivaldi breaks these css mods every update.

Anyway, just wanted to report that the bookmarks bar breaks when using tab stacks.

nomadic

@HighOnPhazon Thanks. Might have a fix for that. ~~Will update the CSS above.~~ Edit: Actually will put the new CSS here in case the new version breaks something. Can't see the previous edits on the post, so it is safer to leave that one alone.

#main had a position: relative; on it, so the absolute address bar was referencing its position off of it. This was fine until the height of the tab bar changes. So now I have the position set relative to the overall #browser div.

Not sure if removing the relative position on the #main will break something else, so let me know if you notice any oddities.

New CSS

#browser {
  --addressBarPaddingRight: 137px;
  --headerElementsHeight: 34px;
  --tabBarPaddingRightToSeeTrashAndSync: 92px;
  /* uncomment the line below to unify tab bar color with the address bar's */
  --unified: transparent;
  --backgroundColor: var(--unified, var(--colorBg));
  --backgroundColorAccent: var(--unified, var(--colorAccentBg));
}

/* top addressbar above top tabbar */
#header {
  padding-top: 36px;
}

/* allows mainbar to be positioned absolute */
#main {
  overflow: unset;
  position: unset;
}

.mainbar {
  position: absolute;
  top: 0;
  padding-left: 34px;
  padding-right: var(--addressBarPaddingRight);
  width: 100%;
  z-index: 2 !important;
}

/* not sure if needed... */
/* brings vivaldi button and win controls to front */
#browser.tabs-top #header {
  backdrop-filter: unset;
  contain: unset;
}
#browser.tabs-top.address-top #main {
  overflow: visible;
}

/* Sets tabs to fill entire bar */
#tabs-tabbar-container.top {
  margin-left: 0px !important;
  margin-right: -90px !important;
}
#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 {
  --headerElementsHeight: 24px;
}
/* Make window controls same color as menu bar */
#browser.tabs-top.address-top.horizontal-menu .window-buttongroup {
  background-color: var(--colorTabBar);
}
#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);
}
#browser.tabs-top.address-top.horizontal-menu #tabs-tabbar-container {
  padding-top: 0;
}
#browser.tabs-top.address-top.horizontal-menu .mainbar {
  padding: unset;
  transform: translateY(24px);
}

/* 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;
}

/* ---------------------------- */
/*           New Stuff          */
/* ---------------------------- */

/* Shrink height of all the window action buttons */
.window-buttongroup button.window-minimize,
.window-buttongroup button.window-maximize,
.window-buttongroup button.window-close {
  height: var(--headerElementsHeight) !important;
}
/* Shrink height of Vivaldi menu button */
#titlebar button.vivaldi {
  height: var(--headerElementsHeight) !important;
  padding-top: 0;
}

/* Remove empty space to the right of tabs and above tabs*/
#tabs-container {
  padding-right: var(--tabBarPaddingRightToSeeTrashAndSync) !important;
}
#tabs-tabbar-container.top {
  padding-top: unset !important;
}

/* Make other title bar elements have the same color as the address bar elements */
#titlebar button.vivaldi,
.window-buttongroup {
  background-color: var(--backgroundColor);
  z-index: 3 !important;
}
.color-behind-tabs-off #titlebar button.vivaldi,
.color-behind-tabs-off .window-buttongroup {
  background-color: var(--backgroundColorAccent);
}
.toolbar-mainbar .toolbar-extensions,
.toolbar-mainbar {
  background-color: var(--backgroundColor);
}
.color-behind-tabs-off .toolbar-mainbar .toolbar-extensions,
.color-behind-tabs-off .toolbar-mainbar {
  background-color: var(--backgroundColorAccent);
}

/* Fix tabs showing above address bar and search dropdowns */
#tabs-tabbar-container.top {
  z-index: 0;
}

/* Remove line under address bar and extensions bar */
.address-top .mainbar > .toolbar-mainbar .toolbar-extensions:before,
.address-top .mainbar > .toolbar-mainbar:before {
  content: unset;
}

/* Move extension popups down to avoid crossing drag region which leads to dead zone */
.extension-popup.top {
  margin-top: 29px;
}
#browser.tabs-top.address-top.horizontal-menu .extension-popup.top {
  margin-top: 7px;
}
#browser.tabs-top.address-top.bookmark-bar-top .extension-popup.top {
  margin-top: 58px;
}
#browser.tabs-top.address-top.bookmark-bar-top.horizontal-menu .extension-popup.top {
  margin-top: 2px;
}

HighOnPhazon

@nomadic Thanks again! Everything looks good on my end.

SallyK

@nomadic Thank you - I don't usually use Tab Stacks, but it's good to have a version that makes it possible to. And your changes work with my spacing tweaks, and turning off the drag command on the tab bar.

barefootcoder

Just came here to say that @nomadic and @dude99, you guys are the best! I dared to upgrade yet again, and of course everything broke (again). But this thread saves the day ... once again.

barefootcoder

Although I did notice one oddity: if the panel is open, the address bar drop-down ends up behind it. Screenshot so you can see what I mean:

Not a deal-breaker by any stretch, but I thought I'd post here to see if anyone had any good suggestions before I started trying to experiment using my absolutely horrible CSS skills.

nomadic

@barefootcoder I can take a look at it later.

Just to make sure, you are using this version, right? It seemed to not cause too many issues (except maybe this overlap problem), so it is the version I would like to base all future updates from.

barefootcoder

@nomadic

Just to make sure, you are using this version, right?

The post from 7/13, correct. I did have a few cosmetic-only leftover bits from older versions (tweaking fillets, colors, etc), but I just verified that removing those doesn't impact this.

I would certainly appreciate it if you have time to take a look at it, but I understand if it takes you a while to get to it. I'm sure your time is as valuable as everyone else's (and probably more than most).

nomadic

@barefootcoder Alright, updated the CSS above.

Should be about the best I can do, but I did realize that the extension popup fix of shifting the popup down some to avoid the dead zone isn't perfect. If the tab bar changes height because of thumbnails or tab stacks, then it doesn't move the popup down enough. You can of course always disable the drag region, as discussed above, to avoid the issue.

There might be a fix with the new fancy :has() selector, but it works well enough for now. Might reevaluate once Vivaldi goes to Chromium 105, which is when :has() doesn't need an experimental flag to use anymore.

barefootcoder

@nomadic

Should be about the best I can do, ...

Looks perfect to me. Thx so much for putting in the effort on this!

If the tab bar changes height because of thumbnails or tab stacks, then it doesn't move the popup down enough. You can of course always disable the drag region, as discussed above, to avoid the issue.

I did take a look at that discussion, but I haven't noticed any issues on my end, and I do use tab stacking, and I also drag and drop tabs. So I don't think it's going to be a problem, at least for me.

Thx again, @nomadic! Yer the best.

dude99

@nomadic u gonna do another section with #browser:has(#tabs-subcontainer)?

The longer I observe this topic, the more I felt this mod should be a JS + CSS solution. Manipulating all the top section toolbars with pure CSS solution is just too cumbersome, plus it's too easy to be broken. JS can just rip & insert the tabbar into the lowest top position toolbar directly, & it can't be broken easily even when other toolbars changes during update.

Tabs Below Address Bar and Bookmark Bar

New CSS

Sorry, I'm currently hiatus from updating any of my CSS mod until further notice...