Tabs Below Address Bar and Bookmark Bar
-
@adacom Thank you very much, I'll see what I can do.
-
Based off the current CSS @SallyK is using, I made a few tweaks.
The Vivaldi menu icon and window controls should be better centered in their height and the address bar dropdowns should appear above the tabs. I also tweaked some padding values and changed the background color to make the top bar look more unified, but not sure if that is something desired or not.
I also added a way to fully unify the colors of the top UI or have a distinction between the tab bar color and the rest of the UI. It can be acheived by
/* comment out */
or uncommenting the line:--unified: transparent;
near the top of the CSS.Unified Line Uncommented:
Unified Line Commented Out:
Known Bugs
The profile button popup doesn't seem to work. Didn't investigate too deeply.Edit: Fixed- Making the window narrow causes the window controls to overlap the address bar elements.
CSS
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; } .mainbar { position: absolute; top: -65px; padding-left: 34px; padding-right: var(--addressBarPaddingRight); width: 100%; z-index: 1 !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; } #browser.tabs-top.address-top.bookmark-bar-top .mainbar { transform: translateY(-30px); } /* 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(0px); } /* 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; } #browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top .mainbar { padding: unset; transform: translateY(-30px); } /* ---------------------------- */ /* 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); } .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:after, .address-top .mainbar > .toolbar-mainbar:after { content: unset; }
-
@nomadic Thanks again for your professional work.
-
@nomadic said in Tabs Below Address Bar and Bookmark Bar:
#browser.tabs-top.address-top.horizontal-menu .UrlBar {
top: 24px !important;
left: 0;
right: 0;
}Just scan through the code once & I noticed
.UrlBar
? I though it's obsolete? -
@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.
-
@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.
-
@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.
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.
-
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;
-
@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; }
-
@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.
-
@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?
-
@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.
-
@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.
-
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.
-
@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 aposition: relative;
on it, so theabsolute
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; }
-
@nomadic Thanks again! Everything looks good on my end.
-
@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.
-
-
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.
-
@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.