Merge tabs and address bar

[nomadic]

@oudstand No problem

It is really just to override some CSS from common.css that I found when I looked into why it wasn't working.

The default from common.css is this:

/* Old CSS */
.win.normal .toolbar-mainbar {
  left: 0;
  right: 0;
}

Because the extensions and address toolbars are set to position: fixed, the left/right location position of the element can be set with CSS. The default from common.css is making the extensions and address toolbars span the entire width of the UI because each is set to zero.

The new CSS that I gave you overrides the style from common.css and basically says pretend like the left and right positions were never specified by any other CSS. I found the problem CSS by inspecting the top element that appeared to be covering everything else (the extensions toolbar). By hovering over it, I saw that it was spanning the entire width, so I looked for CSS that could cause that change.

Hope that helps. I am relatively new to CSS myself, but modding the browser is certainly helping me learn more. Keep at it. Just messing around with coding is the best way to learn!

[oudstand]

@nomadic Thanks for your answer. This helped a lot
I just started modding Vivaldi the last days and there are so many possibilities! It's amazing. Also I really like the community

[oudstand]

Do you also have the problem that it is no longer possible to stack tabs on top of each other by moving them with the mouse? It seems like I have to select them and use the "new group out of X tabs" option.

[oudstand]

fyi: with this mod from @luetage you can still use the Vivaldi button.

[oudstand]

With the latest update we have to adapt some classes, but somehow the address bar still doesn't move to the right of the "back", "forward" and "reload" buttons. Could you manage it?

[madiso]

@oudstand said in Merge tabs and address bar:

With the latest update we have to adapt some classes, but somehow the address bar still doesn't move to the right of the "back", "forward" and "reload" buttons. Could you manage it?

Updated OP with new version.

[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;
}