Tabs Below Address Bar and Bookmark Bar

eLeSands

@drkh
Having the button and windows controls on the address bar is maybe possible? I'm not really familiar with either since I use the menu bar with the native windows controls.

The two pictures have the same ui. The only difference is that in the second pic I only had the tabs css enabled. c:

mphantomx

@elesands , thanks for the update, but the tabbar isn't registering any clicks, I'm missing something?

eLeSands

@mphantomx
Are you using a theme that uses blur? The seems to break the mod. Let me test some things.

mphantomx

@elesands I'm using the default one.

eLeSands

@mphantomx
Ok, that is one of the themes that adds blurring. Luckily I figured out how to fix it.

/* Top Tabs Under Address/Bookmarks Bar */
:root{
    /* Default Height of Bookmark Bar and Tab Bar */
    --heightB: 30px;
    /* Default Height of Address Bar */
    --heightU: 34px;
    /* Sum is 64px */
    --heightC: calc(var(--heightU) + var(--heightB));
}

/* Header */
/* The default height of the Header is ~22px */
/* This is dependent on the Top Menu height */
/* The Header consists of the Titlebar, Menu Bar/Button, And Tab Bar */
#browser.tabs-top #header {
    /* Unset Contain so that the Tab Bar can be moved */
    contain: unset !important;
    /* Set to 1 for compatibility with blurred themes */
    z-index: 1 !important;
}

/* Horizontal Menu Only */
#browser.tabs-top.horizontal-menu #header {
    /* Setting height to 0 removes the space that the Tab Bar would normally occupy */
    height: 0 !important;
}

/* Vivaldi Menu Only */
#browser.tabs-top:not(.horizontal-menu) #header {
    /* Removes the space that the Tab Bar would normally occupy */
    margin-top: calc(0px - var(--heightB)) !important;
    /* Sets top to 30px */
    top: var(--heightB) !important;
}

/* Titlebar */
/* The Titlebar consists of the Vivaldi Menu and the Windows Buttons */
#browser.tabs-top:not(.horizontal-menu) #header #titlebar {
    /* Sets top to 64px */
    top: var(--heightC) !important;
    /* z-index needs to be at least 2 for the menu to display */
    z-index: 2 !important;
}

/* Without Address Bar Top */
#browser.tabs-top:not(.horizontal-menu):not(.address-top) #header #titlebar,
/* Without Bookmarks Bar Top */
#browser.tabs-top:not(.horizontal-menu):not(.bookmark-bar-top) #header #titlebar {
    /* Sets top to 30px */
    top: var(--heightB) !important;
}

/* Without Address Bar or Bookmarks Bar Top */
#browser.tabs-top:not(.horizontal-menu):not(.bookmark-bar-top):not(.address-top) #header #titlebar {
    /* Unsets top */
    top: unset !important;
}

/* Vivaldi Button */
#browser.tabs-top.bookmark-bar-top:not(.horizontal-menu) #header #titlebar button.vivaldi {
    /* Sets height to 30px */
    height: var(--heightB) !important;
}

/* Top Menu */
/* The default height of the Top Menu is ~21.59px */
/* This is dependent on Font Family, Size, and Line Height */
/* The Top Manu Contains the Menu Bar/Button */
#browser.tabs-top #header .topmenu {
    /* Sets height to the nearest whole number; 22px */
    height: 22px !important;
    /* Removes the 1px Margin Bottom to simplify Tab Bar Top Calculation */
    margin-bottom: unset !important;
}

/* Main */
/* Main consists of the Address Bar, Bookmarks Bar, and Inner Container */
#browser.tabs-top #main {
    /* Unset z-index so that the tabbar is below dropdowns */
    z-index: unset !important;
}

/* Address Bar */
/* The Address Bar Default Height is 34px */
#browser.tabs-top .toolbar-mainbar {
    /* Sets height to 34px */
    height: var(--heightU) !important;
}

/* Bookmarks Bar */
/* The Bookmarks Bar Default Height is 29px with a 1px bottom border */
#browser.tabs-top .bookmark-bar {
    /* Sets height to 30px */
    height: var(--heightB) !important;
}

/* Tab Bar */
/* The Tab Bar's default height is 30px */
/* Tabbar Container */
/* Horizontal Menu Only */
#browser.tabs-top.horizontal-menu #tabs-tabbar-container,
/* Vivaldi Menu Only */
#browser.tabs-top.bookmark-bar-top:not(.horizontal-menu) #tabs-tabbar-container,
/* Vivaldi Menu Only */
#browser.tabs-top.address-top:not(.horizontal-menu) #tabs-tabbar-container {
    /* Sets height to 30px */
    height: var(--heightB) !important;
    /* Makes sure that the padding remains consistant */
    padding-top: unset !important;
    /* Necessary for everything on the tabbar to be visible/accessable */
    z-index: 1 !important;
}

/* Address Bar and Bookmarks Bar Top */
#browser.tabs-top.address-top.bookmark-bar-top #tabs-tabbar-container {
    /* Sets top to 64px */
    top: var(--heightC) !important;
}

/* Only Address Bar Top */
#browser.tabs-top.address-top:not(.bookmark-bar-top) #tabs-tabbar-container {
    /* Sets top to 34px */
    top: var(--heightU) !important;
}

/* Only Bookmarks Bar Top */
#browser.tabs-top.bookmark-bar-top:not(.address-top) #tabs-tabbar-container {
    /* Sets top to 30px */
    top: var(--heightB) !important;
}

/* Inner Container */
/* The Inner Container consists of the Panels and the Web-View Continer */
#browser.tabs-top .inner {
    /* [margintop] = [height(tabs-tabbar-container)] */
    /* default height tabs-tabbar-container: 30px */
    margin-top: var(--heightB) !important;
}

/* Horizontal Menu Only */
#browser.tabs-top.horizontal-menu .inner {
    /* Places 1px border below tabs */
    border-top: 1px solid transparent !important;
}

The only change is setting the z-index to 1 for "#browser.tabs-top #header".

Since the tab-bar is moved into the main area, any blurring is drawn over the tabs, making it so you can't click them if the z-index is not set. (The z-index tells Vivaldi which bit to put in front)

Hope that fixes everything

mphantomx

@elesands thank you very much!

Mrxyzl

@eLeSands Hi there, your CSS work flawless for me, but somehow the Vivaldi (menu) button is misaligned on the title bar (it should stay center vertically but instead it is as in the screenshot.
Any suggestion for value to change for this?

eLeSands

Try somewhere in the Header area?

/* Header */
/* The default height of the Header is ~22px */
/* This is dependent on the Top Menu height */
/* The Header consists of the Titlebar, Menu Bar/Button, And Tab Bar */
#browser.tabs-top #header {
    /* Unset Contain so that the Tab Bar can be moved */
    contain: unset !important;
    /* Set to 1 for compatibility with blurred themes */
    z-index: 1 !important;
}

/* Horizontal Menu Only */
#browser.tabs-top.horizontal-menu #header {
    /* Setting height to 0 removes the space that the Tab Bar would normally occupy */
    height: 0 !important;
}

/* Vivaldi Menu Only */
#browser.tabs-top:not(.horizontal-menu) #header {
    /* Removes the space that the Tab Bar would normally occupy */
    margin-top: calc(0px - var(--heightB)) !important;
    /* Sets top to 30px */
    top: var(--heightB) !important;
}

/* Titlebar */
/* The Titlebar consists of the Vivaldi Menu and the Windows Buttons */
#browser.tabs-top:not(.horizontal-menu) #header #titlebar {
    /* Sets top to 64px */
    top: var(--heightC) !important;
    /* z-index needs to be at least 2 for the menu to display */
    z-index: 2 !important;
}

/* Without Address Bar Top */
#browser.tabs-top:not(.horizontal-menu):not(.address-top) #header #titlebar,
/* Without Bookmarks Bar Top */
#browser.tabs-top:not(.horizontal-menu):not(.bookmark-bar-top) #header #titlebar {
    /* Sets top to 30px */
    top: var(--heightB) !important;
}

/* Without Address Bar or Bookmarks Bar Top */
#browser.tabs-top:not(.horizontal-menu):not(.bookmark-bar-top):not(.address-top) #header #titlebar {
    /* Unsets top */
    top: unset !important;
}

/* Vivaldi Button */
#browser.tabs-top.bookmark-bar-top:not(.horizontal-menu) #header #titlebar button.vivaldi {
    /* Sets height to 30px */
    height: var(--heightB) !important;
}

adacom

hmmmmm - again apologies if i have missed something - i have not upgraded since 4.2 for various reasons but i think its time i did so just installed the latest snapshot and tabs under the address bar is a mess - it may be other css and js mods i run so start with a simple question

is this code still working and if so which version of the code

thanks

nomadic

Just pointing out that my original CSS hasn't been maintained by me at all. I sort of gave up on this mod since I don't use it and it breaks all the time.

I will probably hide my CSS behind a spoiler dropdown and link to a working version (if there is one).

TreaKu

Oh no, its broken again T_T.

The url bar is now under the tabs. This feels like a new reference for the #browser.tabs-top.address-top .UrlBar. Any idea how to fix it?

The custom.css im using:

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

rapierx2

This post is deleted!

TreaKu

As a temporary fix I tweaked the horizontal menu and bookmark bar positions with the following changes.

/* bookmark bar & horizontal menu enabled */
#browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top #header {padding-top: 32px !important;}
#browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top .topmenu {transform: translateY(-32px);}
#browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top .bookmark-bar {top: 28px !important;}

It is not ideal but at least it removes the empty gap under menu bar.

If anyone has any idea how to move the url bar right above the tabs bar, any help would be very appreciated.

adacom

@TreaKu - this moves the url bar to the top - whether its a start i dont know but maybe with work

 #header {
    padding-top:26px;
}

.mainbar {
     position: fixed; 
     top:0px;
}

a bit more

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

.mainbar {
     position: fixed; 
     top: 0px;
     padding-left: 30px; 
     padding-right: 140px;
     width: 100%;

}
/* brings vivaldi button and win controls to front */
#browser.tabs-top #header {
/*	background-color: unset; */
        backdrop-filter: unset;
        contain: unset; 
}

maybe its useful maybe its not but i now find all sorts of other issues with custom js - Vivaldi is looking extremely fragile for me - i either stick at an earlier build or find something where the devs dont make a complete mess of things

why do they have to change things like the reference to the url bar which then has knock on effects - i know they dont support mods but ..................

SallyK

@adacom That works very well, except that any dropdown menus from the address/extension bar only appear in the tab bar.

Is there anything that can be done about it?

adacom

@SallyK sure thats solvable - the code i put up is a toe in the water - other problems will have to be solved as they show - as i said above there are bigger problems [for me] in that many of my js mods do not work which is a far bigger problem as i have not a clue on js and thos who have helped in the past seem not to be on the forum any more

but will post any improvements as i find them

SallyK

Thank you - and I hope you're able to get your js mods sorted as well.

I'm afraid mine is non-existent, I can't do much more than move things around with CSS.

SallyK

This post is deleted!

SallyK

One thing that helps is adding:
z-index: 1 !important;

.mainbar {
    position: fixed; 
    top: 0px;
    padding-left: 30px; 
    padding-right: 140px;
    width: 100%;
z-index: 1 !important;
}

It's not perfect, the address bar still goes underneath the tab-bar, but the rest of it is accessible, and the dropdowns from the extension icons are okay, as long as you don't have enough tabs open to reach that side of the screen.

eilegz

oh god, just updated to 5.3 and man they break the tab below again.... sigh now i have a huge gap space above the tab bar and the address bar

Edit:

Well kinda fix it using this

#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;}  /* 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: 32px !important;}
#browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top .topmenu {transform: translateY(-32px);}
#browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top .bookmark-bar {top: 28px !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;}

.mainbar {
    position: fixed; 
    top: 25px;
    padding-left: 0px; 
    padding-right: 0px;
    width: 100%;
z-index: 1 !important;
}

the only thing i hate so far its the different color between the base and the address and tabs and the line below addons

how it looks like