Merge tabs and address bar

oudstand

@madiso Thank you, but somehow the addressbar is still broken for me. Maybe it has problems with other mods from me.

FYI: I made a version for me which is also working in windowed mode pretty fine:

.win.normal .toolbar-mainbar {
    left: unset;
    right: unset;
}

:root {
    --space-from-left: 46.5em;
    /* Main toolbar space - adjust according to your buttonset */
    --space-from-right: 10em;
    /* Extension toolbar space - adjust according to your tab bar buttons (cloud, trashbin, ...) */
}

.toolbar-mainbar {
    position: fixed !important;
    /* Set a fixed position for toolbar (before tabs) */
    top: -0.2em !important;
    /* Align it to the top edge */
    padding-left: 0em !important;
    /* Align to the left (corner) */
    z-index: 2 !important;
    /* Make sure autocomplete and overlays work */
}

.UrlBar-AddressField {
    width: 25vw !important;
    /* Set a fixed width for address bar */
    left: 110px;
}

#tabs-container {
    padding-left: calc(25vw + 120px) !important;
    z-index: 2 !important;
    /* Make sure overlays work */
}

.toolbar-mainbar,
.toolbar-mainbar,
.toolbar-extensions {
    background-color: var(--colorBg) !important;
    /* Append the background color */
    height: 38px;
}

#tabs-container.top {
    padding-right: 15em !important;
}

.toolbar-mainbar:after,
.toolbar-mainbar:after,
.toolbar-extensions:after,
.toolbar-tabbar:after {
    display: none !important;
    /* Remove a weird white line below the toolbar */
}

.toolbar-extensions {
    position: fixed !important;
    /* Move the extension toolbar toggle position */
    right: var(--space-from-right) !important;
    /* Position it next to trashbin/synced tabs */
}

/*  The Vivaldi button does not work when moved, so the only way to keep UI nice is 
    to remove it. You can still access the menu by pressing Alt anywhere on the page.
*/

.vivaldi .burger-icon {
    display: none !important;
}

.maximized .UrlBar-AddressField {
    margin-top: 1.5px;
}

.UrlBar-AddressField {
    margin-top: 14.5px;
}

.maximized .toolbar-mainbar>.button-toolbar {
    top: 4px;
}

.toolbar-mainbar>.button-toolbar {
    top: 9px;
}

.newtab {
    top: 4px !important;
}

.maximized .toolbar-droptarget {
	top: 0px;
}

.toolbar-droptarget {
	top: 2px;
}

.maximized .button-toolbar .vivaldi {
  top: -3px;
}

.button-toolbar .vivaldi {
  top: -6px;  
  margin-left: 3px;
}

.maximized #tabs-container {
	min-height: 35px;
}

#tabs-container {
	min-height: unset;
}

gahaalt

I wonder why this isn't an official feature yet? With a few lines of CSS it works well, both in maximized and normal versions, also with features like tab preview still functioning. I mean, not everyone uses 40 tabs opened, it'd be nice to include space-saving features such as this one among other customization options.

oudstand

@gahaalt said in Merge tabs and address bar:

I wonder why this isn't an official feature yet? With a few lines of CSS it works well, both in maximized and normal versions, also with features like tab preview still functioning. I mean, not everyone uses 40 tabs opened, it'd be nice to include space-saving features such as this one among other customization options.

That would be awesome!

lotionexplosion

@oudstand This is almost perfect except I am encountering an issue where I cannot click on the minimize, expand window, and close buttons at all. Any idea what could be causing this?

lotionexplosion

A couple of additional issues I'm encountering:

The address bar and extension toggle jut out slightly as their height seems to be bigger than the tab bar. This only occurs in a fullscreen window. I recognize that this can be 'fixed' by unchecking 'Remove Tab Spacing in Maximized Windows' but the whole idea here is to safe space.

I also cannot click the buttons in the top right (minimize, maximize, and close). Sort of. I can if my mouse is at the very top of the buttons, which is not... ideal.

I'm not using any other modifications in my Vivaldi aside from the below code; help would be appreciated:

.win.normal .toolbar-mainbar {
    left: unset;
    right: unset;
}

:root {
    --space-from-left: 46.5em;
    /* Main toolbar space - adjust according to your buttonset */
    --space-from-right: 10em;
    /* Extension toolbar space - adjust according to your tab bar buttons (cloud, trashbin, ...) */
}

.toolbar-mainbar {
    position: fixed !important;
    /* Set a fixed position for toolbar (before tabs) */
    top: -0.3em !important;
    /* Align it to the top edge */
    padding-left: 0em !important;
    /* Align to the left (corner) */
    z-index: 2 !important;
    /* Make sure autocomplete and overlays work */
}

.UrlBar-AddressField {
    width: 25vw !important;
    /* Set a fixed width for address bar */
    left: 10px;
}

#tabs-container {
    padding-left: calc(25vw + 20px) !important;
    z-index: 2 !important;
    /* Make sure overlays work */
}

.toolbar-mainbar,
.toolbar-mainbar,
.toolbar-extensions {
    background-color: var(--colorBg) !important;
    /* Append the background color */
    height: 38px;
}

#tabs-container.top {
    padding-right: 9em !important;
}

.toolbar-mainbar:after,
.toolbar-mainbar:after,
.toolbar-extensions:after,
.toolbar-tabbar:after {
    display: none !important;
    /* Remove a weird white line below the toolbar */
}

.toolbar-extensions {
    position: fixed !important;
    /* Move the extension toolbar toggle position */
    right: var(--space-from-right) !important;
    /* Position it next to trashbin/synced tabs */
}

/*  The Vivaldi button does not work when moved, so the only way to keep UI nice is 
    to remove it. You can still access the menu by pressing Alt anywhere on the page.
*/

.vivaldi .burger-icon {
    display: none !important;
}

.maximized .UrlBar-AddressField {
    margin-top: 1.5px;
}

.UrlBar-AddressField {
    margin-top: 14.5px;
}

.maximized .toolbar-large {
    max-height: 38px;
}

.maximized .toolbar-mainbar>.button-toolbar {
    top: 4px;
}

.toolbar-mainbar>.button-toolbar {
    top: 9px;
}

.newtab {
    top: 4px !important;
}

.maximized .toolbar-droptarget {
	top: 0px;
}

.toolbar-droptarget {
	top: 2px;
}

.maximized .button-toolbar .vivaldi {
  top: -3px;
}

.button-toolbar .vivaldi {
  top: -6px;  
  margin-left: 3px;
}

.maximized #tabs-container {
	min-height: 35px;
}

#tabs-container {
	min-height: unset;
}

.tab-strip {
	margin-right: -20px;
}

/* Remove the new tab button. */
.toolbar-tabbar .newtab
{
	display: none;
}

/* Remove the trash icon. */
#tabs-container .toggle-trash {
  display: none !important;
}

/* Remove reader icon. */
.toolbar.toolbar-small.toolbar-insideinput button[title="Reader View"] {
    display: none;
}

.sync-and-trash-container {
  display: none !important;
}

oudstand

@lotionexplosion this is the code I use. I saw a few differences to your code. Maybe it's working for you too.

.win.normal .toolbar-mainbar {
    left: unset;
    right: unset;
}
:root {
    --space-from-left: 46.5em;
    /* Main toolbar space - adjust according to your buttonset */
    --space-from-right: 10em;
    /* Extension toolbar space - adjust according to your tab bar buttons (cloud, trashbin, ...) */
}
.UrlBar {
    margin-left: 35px;
}
.toolbar-mainbar {
    position: fixed !important;
    /* Set a fixed position for toolbar (before tabs) */
    top: -0.2em !important;
    /* Align it to the top edge */
    /* padding-left: 1.3em !important;*/
    /*margin-left: 15px;*/
    /* Align to the left (corner) */
    z-index: 2 !important;
    /* Make sure autocomplete and overlays work */
}
.UrlBar-AddressField {
    width: 25vw !important;
    /* Set a fixed width for address bar */
    left: 120px;
}
#tabs-container {
    padding-left: calc(26vw + 140px) !important;
    /* Make sure overlays work */
}
.toolbar-mainbar, .toolbar-mainbar, .toolbar-extensions {
    background-color: var(--colorBg) !important;
    /* Append the background color */
    height: 38px;
}
#tabs-container.top {
    padding-right: 15em !important;
}
.toolbar-mainbar:after, .toolbar-mainbar:after, .toolbar-extensions:after, .toolbar-tabbar:after {
    display: none !important;
    /* Remove a weird white line below the toolbar */
}
.toolbar-extensions {
    position: fixed !important;
    /* Move the extension toolbar toggle position */
    right: var(--space-from-right) !important;
    /* Position it next to trashbin/synced tabs */
}
/*  The Vivaldi button does not work when moved, so the only way to keep UI nice is 
    to remove it. You can still access the menu by pressing Alt anywhere on the page.
*/

.vivaldi .burger-icon {
    display: none !important;
}
.maximized .UrlBar-AddressField {
    margin-top: 1.5px;
}
.UrlBar-AddressField {
    margin-top: 14.5px;
}
.maximized .toolbar-extensions>.button-toolbar {
    top: 4px;
}
.toolbar-extensions>.button-toolbar {
    top: 9px;
}
.newtab {
    top: 4px !important;
}
.maximized .toolbar-droptarget >.button-toolbar {
    top: 4px;
}
.toolbar-droptarget >.button-toolbar {
    top: 8px;
}
.maximized .vivaldi {
    top: -2px;
}
.vivaldi {
    top: -6px;
}
.maximized #tabs-container {
    min-height: 35px;
}
#tabs-container {
    min-height: unset;
}
.popup .toolbar-mainbar {
    visibility: hidden;
    /* hides the toolbar for apps */
}
.maximized #header {
    height: 35px;
}
#header {
    height: 39px;
}

lotionexplosion

Looks and works great, thanks.

almamunbd415371

@nomadic hihi...working is fk

oudstand

This is the code I'm using currently:

.win.normal .toolbar-mainbar {
    left: unset;
    right: unset;
}
:root {
    --space-from-left: 46.5em;
    /* Main toolbar space - adjust according to your buttonset */
    --space-from-right: 10em;
    /* Extension toolbar space - adjust according to your tab bar buttons (cloud, trashbin, ...) */
}
.UrlBar {
    margin-left: 35px;
}
.toolbar-mainbar {
    position: fixed !important;  /* <=== I think here is the problem */
    /* Set a fixed position for toolbar (before tabs) */
    top: -0.2em !important;
    /* Align it to the top edge */
    /* padding-left: 1.3em !important;*/
    /*margin-left: 15px;*/
    /* Align to the left (corner) */
    z-index: 2 !important;
    /* Make sure autocomplete and overlays work */
}
.UrlBar-AddressField {
    width: 25vw !important;
    /* Set a fixed width for address bar */
    left: 120px;
}
#tabs-container {
    padding-left: calc(26vw + 140px) !important;
    /* Make sure overlays work */
}
.toolbar-mainbar, .toolbar-mainbar, .toolbar-extensions {
    background-color: var(--colorBg) !important;
    /* Append the background color */
    height: 38px;
}
#tabs-container.top {
    padding-right: 15em !important;
}
.toolbar-mainbar:after, .toolbar-mainbar:after, .toolbar-extensions:after, .toolbar-tabbar:after {
    display: none !important;
    /* Remove a weird white line below the toolbar */
}
.toolbar-extensions {
    position: fixed !important;
    /* Move the extension toolbar toggle position */
    right: var(--space-from-right) !important;
    /* Position it next to trashbin/synced tabs */
}
/*  The Vivaldi button does not work when moved, so the only way to keep UI nice is 
    to remove it. You can still access the menu by pressing Alt anywhere on the page.
*/

.vivaldi .burger-icon {
    display: none !important;
}
.maximized .UrlBar-AddressField {
    margin-top: 1.5px;
}
.UrlBar-AddressField {
    margin-top: 14.5px;
}
.maximized .toolbar-extensions>.button-toolbar {
    top: 4px;
}
.toolbar-extensions>.button-toolbar {
    top: 9px;
}
.newtab {
    top: 4px !important;
}
.maximized .toolbar-droptarget >.button-toolbar {
    top: 4px;
}
.toolbar-droptarget >.button-toolbar {
    top: 8px;
}
.maximized .vivaldi {
    top: -2px;
}
.vivaldi {
    top: -6px;
}
.maximized #tabs-container {
    min-height: 35px;
}
#tabs-container {
    min-height: unset;
}
.popup .toolbar-mainbar {
    visibility: hidden;
    /* hides the toolbar for apps */
}
.maximized #header {
    height: 35px;
}
#header {
    height: 39px;
}

I've noticed that the pop up for the extensions hides immediately after showing up. Did some one else noticed this? I'm on the latest snapshot version of Vivaldi. It seems like .toolbar-mainbar's position: fixed causes this problem.

EDIT:

It's not happening in Vivaldi Snapshot 4.2.2406.40

oudstand

Currently this code fixes the problem for me:

.win.normal .toolbar-mainbar {
    left: unset;
    right: unset;
}
#main {
    position: unset;
}
:root {
    --space-from-left: 46.5em;
    /* Main toolbar space - adjust according to your buttonset */
    --space-from-right: 10em;
    /* Extension toolbar space - adjust according to your tab bar buttons (cloud, trashbin, ...) */
}
.UrlBar {
    margin-left: 35px;
}
.toolbar-mainbar {
    top: -0.2em !important;
}
.UrlBar.toolbar {
    position: absolute;
}
.UrlBar .toolbar-droptarget {
    position: fixed;
}
.UrlBar-AddressField {
    position: fixed;
    top: 0.25em;
    width: 25vw !important;
    /* Set a fixed width for address bar */
    left: 140px;
}
#tabs-container {
    padding-left: calc(26vw + 140px) !important;
    /* Make sure overlays work */
}
.toolbar-mainbar, .toolbar-mainbar {
    background-color: var(--colorBg) !important;
    /* Append the background color */
    height: 38px;
}
.maximized .toolbar-extensions {
    right: -91vw !important;
    top: 0px !important;
}
.toolbar-extensions {
    position: absolute;
    top: 4px !important;
    right: -85vw !important;
}
.toolbar-extensions .button-toolbar {
    margin-top: 3px;
}
.toolbar-mainbar:after, .toolbar-mainbar:after, .toolbar-extensions:after, .toolbar-tabbar:after {
    display: none !important;
    /* Remove a weird white line below the toolbar */
}
.vivaldi .burger-icon {
    display: none !important;
}
.maximized .UrlBar-AddressField {
    margin-top: 1.5px;
}
.UrlBar-AddressField {
    margin-top: 6px;
}
.maximized .toolbar-droptarget>.button-toolbar {
    top: 4px;
}
.toolbar-droptarget>.button-toolbar {
    top: 8px;
}
.maximized .vivaldi {
    top: -2px;
}
.vivaldi {
    top: -6px;
}
.maximized #tabs-container {
    min-height: 35px;
    margin-top: 0;
}
#tabs-container {
    min-height: unset;
    margin-top: -6px;
}
.button-toolbar.newtab {
    margin-top: -3px !important;
}
.popup .toolbar-mainbar {
    visibility: hidden;
    /* hides the toolbar for apps */
}
.maximized #header {
    height: 35px;
}
#header {
    height: 39px;
}

oudstand

As addition to the code above, I wrote this JS mod to dynamically adjust the padding of the tabs to the extensions as soon as the number of visible extensions changes:

/*
    adjusts the padding of the tabs container to the extensions if the number of visible extension changes
*/
setTimeout(function waitMergeTabbar() {
    const browser = document.getElementById('browser');
    if (browser) {
        observeExtensionsWidth();
    } else {
        setTimeout(waitMergeTabbar, 300);
    }
}, 300);

function observeExtensionsWidth() {
    let toolbarExtensions = document.querySelector('.toolbar-extensions');
    if (!toolbarExtensions) {
        setTimeout(observeExtensionsWidth, 300);
        return;
    }
    let tabsContainer = document.querySelector('#tabs-container.top'),
        resizeObserver = new ResizeObserver(entries => {
            for (let entry of entries) {
                tabsContainer.style.paddingRight = (entry.target.offsetWidth + 137) + 'px';
            }
        });
    resizeObserver.observe(toolbarExtensions);
}

Nish7009

made a small search and address bar css mod based on this and this by @dude99

.win.normal .toolbar-mainbar {
    left: unset;
    right: unset;
}
#main {
    position: unset;
}
:root {
    --space-from-left: 46.5em;
    /* Main toolbar space - adjust according to your buttonset */
    --space-from-right: 10em;
    /* Extension toolbar space - adjust according to your tab bar buttons (cloud, trashbin, ...) */
}
.UrlBar {
    margin-left: 35px;
}
.toolbar-mainbar {
    top: -0.2em !important;
}
.UrlBar.toolbar {
    position: fixed;
}
.UrlBar .toolbar-droptarget {
    position: fixed;
}
.UrlBar-AddressField {
    position: fixed;
    max-width: 30vw;
    min-width: 30vw;
    top: 0.25em;
    /* Set a fixed width for address bar */
    left: 140px;
    transition: .3s ease-in-out .1s !important;
    z-index: 9999;
}
#tabs-container {
    padding-left: 200px !important;
    /* Make sure overlays work */
}
.toolbar-mainbar, .toolbar-mainbar {
    background-color: var(--colorBg) !important;
    /* Append the background color */
    height: 38px;
}
.maximized .toolbar-extensions {
    right: -91vw !important;
    top: 0px !important;
}
.toolbar-extensions {
    position: absolute;
    top: 4px !important;
    right: -88vw !important;
}
.toolbar-extensions .button-toolbar {
    margin-top: 3px;
}
#tabs-container.top {
    padding-right: 10em !important;
}
.toolbar-mainbar:after, .toolbar-mainbar:after, .toolbar-extensions:after, .toolbar-tabbar:after {
    display: none !important;
    /* Remove a weird white line below the toolbar */
}
.maximized .UrlBar-AddressField, .maximized .UrlBar-SearchField {
    margin-top: 1.5px;
}
.UrlBar-AddressField, .UrlBar-SearchField {
    margin-top: 6px;
}
.maximized .toolbar-droptarget>.button-toolbar {
    top: 4px;
}
.toolbar-droptarget>.button-toolbar {
    top: 8px;
}
.maximized .vivaldi {
    top: -2px;
}
.vivaldi {
    top: -6px;
}
.maximized #tabs-container {
    min-height: 35px;
    margin-top: 0;
}
#tabs-container {
    min-height: unset;
    margin-top: -6px;
}
.button-toolbar.newtab {
    margin-top: -3px !important;
}
.popup .toolbar-mainbar {
    visibility: hidden;
    /* hides the toolbar for apps */
}
.maximized #header {
    height: 35px;
}
#header {
    height: 39px;
}

.UrlBar-AddressField:not(:hover):not(:focus-within) {
    min-width: 26.5px;
    max-width: 26.5px;
    transition: .3s ease-in-out !important;
}
.UrlBar-AddressField:not(:hover):not(:focus-within) > .UrlBar-UrlFieldWrapper {
    opacity: 0 !important;
    z-index: 1;
    min-width: 0px;
    max-width: 0px;
}

.UrlBar-AddressField:not(:hover):not(:focus-within) > *:not(.button-addressfield, .UrlBar-UrlFieldWrapper) {display: none !important; opacity: 0 !important;}
.UrlBar-AddressField > *:not(.button-addressfield){
    transition: opacity 1s ease-in-out !important;
}
.UrlBar-AddressField:is(:hover, :focus-within) {
    flex-basis: 30vw;
}
.UrlBar-AddressField .OmniDropdown {
    width: max-content;
    max-width: 80vw;
}

.UrlBar-AddressField:not(:focus-within):not(:hover) .UrlFieldWrapper {opacity:0; z-index:1; max-width: 0px; min-width: 0px;}

.UrlBar .UrlBar-SearchField:not(:focus-within):not(:hover) {min-width:26.5px; max-width:26.5px; transition: .5s ease-in-out !important;}
.UrlBar .UrlBar-SearchField:not(:focus-within):not(:hover) > .searchfield-input {opacity:0; z-index:1; max-width: 0px; min-width: 0px;}
.UrlBar .UrlBar-SearchField:not(:focus-within):not(:hover) > .toolbar-insideinput:last-child {visibility: hidden; opacity: 0;} 

.UrlBar-SearchField {max-width: 200px; transition: .3s ease-in-out .15s !important;}
.UrlBar-SearchField:is(:hover, :focus-within) {flex-basis: 200px;}

.toolbar-mainbar .toolbar-droptarget {order: -2;}
.UrlBar-SearchField {order: -1;}

.UrlBar-SearchField .OmniDropdown {
   width: max-content;
   max-width: 80vw;
}

.UrlBar-SearchField {
    position: fixed;
    top: 0.25em;
    left: 169px;
}

.UrlBar-SearchField:is(:hover, :focus-within) > .toolbar-insideinput:last-child {
     transition: opacity .6s ease-in !important;
}
.UrlBar-AddressField {z-index: 999;}
.UrlBar-SearchField {z-index: 99;}

.UrlBar-AddressField .toolbar-insideinput:first-child {order: 1;}
.UrlBar-AddressField .BookmarkButton {order: 2;}
.UrlBar-AddressField .toolbar-insideinput:last-child {order: 3;}

.UrlBar-AddressField:is(:hover, :focus-within) + .UrlBar-SearchField {left: calc(28vw + 169px);}

only problem is that tabbar doesn't resize when you hover over search field and address field but hopefully someone can make a js mod for that as it's not quite possible with just css

abolog

@oudstand

I've noticed this instant hide problem too on latest update. The extension button is fixed with your new code, but the Translate button pop-up still insta hides, any idea?

oudstand

@abolog You can try this code. For me it's working fine like this:

/* 
  https://forum.vivaldi.net/topic/34187/merge-tabs-and-address-bar?_=1593593936120

   One-line UI for Vivaldi 2.8+

   Before using this style, please 
   * remove the search bar (or adjust space-from-left below)
   * disable extension toggle button, profile switch button and menu bar
   * adjust the current theme to apply accent color to window (not toolbar)
   * make sure you've enabled the Alt key to open menu (keyboard settings)
   Otherwise you'll have to modify the style further to suit your usage.

   The style is meant to be used primarily in a window, 
   on restored windows it may not look as good. 

   Inspired by https://forum.vivaldi.net/topic/13042/one-line-ui-help-wanted
*/

.win.normal .toolbar-mainbar {
    left: unset;
    right: unset;
}
#main {
    position: unset;
}
:root {
    --space-from-left: 46.5em;
    /* Main toolbar space - adjust according to your buttonset */
    --space-from-right: 14em;
    /* Extension toolbar space - adjust according to your tab bar buttons (cloud, trashbin, ...) */
}
.UrlBar {
    margin-left: 35px;
}
.toolbar-mainbar {
    top: -0.2em !important;
}
.UrlBar.toolbar {
    position: absolute;
}
.UrlBar .toolbar-droptarget {
    position: fixed;
}
.UrlBar-AddressField {
    position: absolute;
    width: 25vw !important;
    /* Set a fixed width for address bar */
    left: 110px;
}
#tabs-container {
    padding-left: calc(26vw + 140px) !important;
    /* Make sure overlays work */
}
.toolbar-mainbar, .toolbar-mainbar {
    background-color: var(--colorBg) !important;
    /* Append the background color */
    height: 38px;
}
.maximized .toolbar-extensions {
    right: -91vw !important;
    top: 0px !important;
}
.toolbar-extensions {
    position: absolute;
    top: 4px !important;
    right: calc(var(--space-from-right) - 100vw) !important;
}
.toolbar-extensions .button-toolbar {
    margin-top: 3px;
}
.toolbar-mainbar:after, .toolbar-mainbar:after, .toolbar-extensions:after, .toolbar-tabbar:after {
    display: none !important;
    /* Remove a weird white line below the toolbar */
}
.maximized .UrlBar-AddressField {
    margin-top: 1.5px;
}
.UrlBar-AddressField {
    margin-top: 12px;
}
.maximized .toolbar-droptarget>.button-toolbar {
    top: 4px;
}
.toolbar-droptarget>.button-toolbar {
    top: 8px;
}
.maximized .vivaldi {
    top: -2px;
}
.vivaldi {
    top: -7px;
    left: 5px;
}
.maximized #tabs-container {
    min-height: 35px;
    margin-top: 0;
}
#tabs-container {
    min-height: unset;
    margin-top: -3px;
}
.button-toolbar.newtab {
    margin-top: -3px !important;
}
.popup .toolbar-mainbar {
    visibility: hidden;
    /* hides the toolbar for apps */
}
.maximized #header {
    height: 35px;
}
#header {
    height: 39px;
}

abolog

@oudstand

Thanks man, works perfectly.

But I've noticed now some other errors
the "+ tab" button goes behind the extension toolbar if there are too many tabs opened
and if the window is not maximized the extension toolbar goes on top of the tabs

This is what I had previously which worked nicely, but it insta hides it, damn.

.toolbar-extensions {
    position: fixed !important;
    right: var(--space-from-right) !important;
}

oudstand

@abolog for the problem with the new tab icon I wrote this JS mod. This should fix you problem

@oudstand said in Merge tabs and address bar:

As addition to the code above, I wrote this JS mod to dynamically adjust the padding of the tabs to the extensions as soon as the number of visible extensions changes:

/*
    adjusts the padding of the tabs container to the extensions if the number of visible extension changes
*/
setTimeout(function waitMergeTabbar() {
    const browser = document.getElementById('browser');
    if (browser) {
        observeExtensionsWidth();
    } else {
        setTimeout(waitMergeTabbar, 300);
    }
}, 300);

function observeExtensionsWidth() {
    let toolbarExtensions = document.querySelector('.toolbar-extensions');
    if (!toolbarExtensions) {
        setTimeout(observeExtensionsWidth, 300);
        return;
    }
    let tabsContainer = document.querySelector('#tabs-container.top'),
        resizeObserver = new ResizeObserver(entries => {
            for (let entry of entries) {
                tabsContainer.style.paddingRight = (entry.target.offsetWidth + 137) + 'px';
            }
        });
    resizeObserver.observe(toolbarExtensions);
}

For your other problem I've updated the code in the post before.

@oudstand said in Merge tabs and address bar:

@abolog You can try this code. For me it's working fine like this:

/* 
  https://forum.vivaldi.net/topic/34187/merge-tabs-and-address-bar?_=1593593936120

   One-line UI for Vivaldi 2.8+

   Before using this style, please 
   * remove the search bar (or adjust space-from-left below)
   * disable extension toggle button, profile switch button and menu bar
   * adjust the current theme to apply accent color to window (not toolbar)
   * make sure you've enabled the Alt key to open menu (keyboard settings)
   Otherwise you'll have to modify the style further to suit your usage.

   The style is meant to be used primarily in a window, 
   on restored windows it may not look as good. 

   Inspired by https://forum.vivaldi.net/topic/13042/one-line-ui-help-wanted
*/

.win.normal .toolbar-mainbar {
    left: unset;
    right: unset;
}
#main {
    position: unset;
}
:root {
    --space-from-left: 46.5em;
    /* Main toolbar space - adjust according to your buttonset */
    --space-from-right: 14em;
    /* Extension toolbar space - adjust according to your tab bar buttons (cloud, trashbin, ...) */
}
.UrlBar {
    margin-left: 35px;
}
.toolbar-mainbar {
    top: -0.2em !important;
}
.UrlBar.toolbar {
    position: absolute;
}
.UrlBar .toolbar-droptarget {
    position: fixed;
}
.UrlBar-AddressField {
    position: absolute;
    width: 25vw !important;
    /* Set a fixed width for address bar */
    left: 110px;
}
#tabs-container {
    padding-left: calc(26vw + 140px) !important;
    /* Make sure overlays work */
}
.toolbar-mainbar, .toolbar-mainbar {
    background-color: var(--colorBg) !important;
    /* Append the background color */
    height: 38px;
}
.maximized .toolbar-extensions {
    right: -91vw !important;
    top: 0px !important;
}
.toolbar-extensions {
    position: absolute;
    top: 4px !important;
    right: calc(var(--space-from-right) - 100vw) !important;
}
.toolbar-extensions .button-toolbar {
    margin-top: 3px;
}
.toolbar-mainbar:after, .toolbar-mainbar:after, .toolbar-extensions:after, .toolbar-tabbar:after {
    display: none !important;
    /* Remove a weird white line below the toolbar */
}
.maximized .UrlBar-AddressField {
    margin-top: 1.5px;
}
.UrlBar-AddressField {
    margin-top: 12px;
}
.maximized .toolbar-droptarget>.button-toolbar {
    top: 4px;
}
.toolbar-droptarget>.button-toolbar {
    top: 8px;
}
.maximized .vivaldi {
    top: -2px;
}
.vivaldi {
    top: -7px;
    left: 5px;
}
.maximized #tabs-container {
    min-height: 35px;
    margin-top: 0;
}
#tabs-container {
    min-height: unset;
    margin-top: -3px;
}
.button-toolbar.newtab {
    margin-top: -3px !important;
}
.popup .toolbar-mainbar {
    visibility: hidden;
    /* hides the toolbar for apps */
}
.maximized #header {
    height: 35px;
}
#header {
    height: 39px;
}

abolog

@oudstand

Niiiiice, now it works, finally. Thanks again.

One question though, is it possible to avoid the JS and set a static padding? As I never change/add buttons to the extension toolbar, I always open the pop-up and access them from there.

oudstand

@abolog You're welcome

Instead of the JS mod you can try something like this. Maybe you have to adjust the values a bit for your needs.

#tabs-container {
    padding-right: calc(10px + var(--space-from-right)) !important;
}

abolog

@oudstand
Bruh that's genius. Saved the day. Now it's perfect.

abolog

Aaaaand it's screwed again.
Latest update.
Any ideas?
@oudstand @Tharq