Merge tabs and address bar

oudstand

This CSS mod combines the URL bar and the tab bar of Vivaldi to save vertical space.

When typing in the address field, the field will take more horizontal space to make editing the URL easier:

Code:

/**
 * Merge tabbar and addressbar
 * Forum link: https://forum.vivaldi.net/topic/96664/merge-tabs-and-address-bar
 * Inspired by: https://forum.vivaldi.net/topic/34187/merge-tabs-and-address-bar
 */

#header {
    .vivaldi {
        height: 34px;
        width: 34px;
        margin-top: 3px;
        margin-left: 3px;
        padding: 0;
        border-radius: var(--radius) !important;

        &:hover {
            background-color: var(--colorAccentBgDark) !important;
        }

        .expand-arrow {
            display: none;
        }
    }

    .window-buttongroup {
        height: 35px;
    }

    #tabs-tabbar-container {
        margin-left: calc(26vw + 140px);
        transition: all 0.75s;
        padding-top: 0 !important;
    }
}

#browser:has(.toolbar-mailbar:not(.toolbar-hidden)) #tabs-tabbar-container {
    margin-left: 47rem;
    margin-right: 0;
}

.win.normal {
    .tab-group-indicator {
        top: -2px;
    }

    #titlebar:not(.tabless) {
        top: -5px;
    }

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

.win.maximized #header .vivaldi {
    margin-top: 2px;
}

.UrlBar-AddressField {
    width: 27vw;
    transition: width 0.2s ease-in-out, height 0.2s ease-in-out, margin-top 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;

    &:not(:focus-within) {
        overflow: hidden;
    }

    &:focus-within {
        width: 40vw !important;
        height: 30px;
        margin-top: -2px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    }

    .OmniDropdown {
        margin-top: 0;
    }
}

.mainbar {
    .toolbar-mainbar {
        border-bottom: none !important;

        &:not(.toolbar-wrap .toolbar-droptarget) {
            position: absolute;
            transform: translateY(-100%);
            left: 40px !important;
            height: 30px;
            border-radius: 10px;
        }

        .toolbar-extensions {
            position: absolute !important;
            transform: translate(-100%);
            left: calc(100vw - 180px) !important;
            height: 30px !important;
            right: unset !important;
        }
    }

    .toolbar-mainbar::before,
    .toolbar-extensions::before {
        display: none;
    }

    .toolbar-mailbar {
        width: 45rem;
    }
}

#browser:not(.is-settingspage) #main {
    position: unset;
}

#browser:not(.fullscreen) #header {
    height: 30px;
    min-height: unset !important;
}

.density-on {
    &#browser:not(.fullscreen) #header, .vivaldi {
        height: calc(36px / var(--uiZoomLevel));
    }

    .toolbar-mainbar {
        &:not(.toolbar-wrap .toolbar-droptarget), .toolbar-extensions {
            height: 36px !important;
        }
    }

    #tabs-tabbar-container {
        padding-top: 3px !important;
        padding-bottom: 3px !important;
        padding-right: 30px;
    }

    #header .vivaldi {
        margin-top: 6px;
    }

    .window-buttongroup {
        height: 40px !important;
    }

    .mainbar {
        padding: 0 !important;
    }
}

#browser.popup {
    #header,
    #titlebar,
    #pagetitle {
        height: 35px !important;
    }

    #pagetitle {
        margin-left: 45vw !important;
        padding: 5px 0 0 0 !important;
        max-width: calc(55vw - 220px) !important;

        span {
            margin: 0 auto;
            max-width: 100%;
        }
    }

    .toolbar-mainbar {
        left: 10px !important;
        padding-bottom: 0.5rem;
    }

    .UrlBar-AddressField {
        width: 40vw !important;
        background-color: var(--colorBgLightIntense);

        &:focus-within {
            width: 50vw !important;
        }
    }

    .window-buttongroup button {
        height: 35px !important;
    }

    .toolbar-extensions {
        left: calc(100vw - 150px) !important;
    }
}

To get the constant look between the combined URL bar and tab bar and the bookmark bar, use this code:

#tabs-tabbar-container {
    background-color: var(--colorAccentBg) !important;
}

.tab {
    border-radius: var(--radiusHalf) !important;

    &.active {
        background: var(--colorTabBar, transparent) !important;

        &:before,
        &:after {
            display: none !important;
        }
    }
}

.tab-indicator {
    background-color: var(--colorHighlightFgAlphaHeavy) !important;

    &.active {
        background-color: var(--colorHighlightFgAlpha) !important;
        border-bottom-width: 3px !important;
    }
}

.UrlBar-AddressField {
    background-color: var(--colorBgLightIntense);
}

.mainbar .toolbar-mainbar {
    background: var(--colorAccentBg) !important;
}

.toolbar-extensions {
    background-color: var(--colorAccentBg) !important;
}

#header {
    background-color: var(--colorAccentBg) !important;
}

#browser.popup #header {
    background: var(--colorAccentBg) !important;
}

Before:

After:

In the screenshots there are also other mods visible (in case you want to get exactly the same look):

The mod is inspired by an existing mod. Since the mod isn't updated anymore I rewrote the mod from scratch and created this new forum mod to maintain it easier.

EDIT: added code to add a constant look between the combined URL bar and tab bar and the bookmark bar
EDIT 2: improved overflow of URL bar & improved look of popup windows
EDIT 3: fixed Vivaldi buttons position
EDIT 4: improved look for popup windows & using nested selectors
EDIT 5: fixed Vivaldi button position
EDIT 6: fixed position of title and extensions in popup windows
EDIT 7: fixed problems with Vivaldis new destiny setting

oudstand

Ribbon Theme

This is a ribbon theme (inspired by Ribbon Theme) especially for the Merge tabs and address bar mod.

Before:

After:

#app {
    --background-image: url("chrome://vivaldi-data/thumbnail/3PQ4CTYBAPUJZOTDNALGC4TD4SIFLSID.png"); /* set your image url */
}

#header .vivaldi {
    margin-top: 0.45rem;
}

#main {
    background-color: var(--colorAccentBg);
    padding-top: 0.25rem;
}

.bookmark-bar-top-off .inner {
    padding-top: calc(var(--edge-like-border-radius) / 4);
}

.inner {
    padding-top: calc(var(--edge-like-border-radius) / 2);
}

.startpage {
    background-image: var(--background-image);
    background-size: cover;
}

.window-buttongroup {
    margin-top: 3px;
}

#tabs-container {
    margin-top: 0.25rem;
}

.UrlBar-AddressField {
    background-color: var(--colorBgAlphaBlur);
}

.tab.active .tab-header {
    background-color: var(--colorBgAlphaBlur) !important;
}

.bookmark-bar {
    background: var(--colorAccentBg) !important;
    margin: 0.2rem;
    margin-bottom: 0px;

    .observer {
        border-radius: var(--radius) !important;
        background: var(--colorBgAlphaBlur) !important;

        button {
            border-radius: var(--radius);
        }
    }
}

#panels-container {
    background-color: var(--colorAccentBg) !important;
}

#browser:not(.fullscreen) #panels-container {
    &.icons, &.overlay {
        width: 41px !important;
    }
}

#browser:not(.fullscreen).density-on #panels-container {
    &.icons, &.overlay {
        width: 46px !important;
    }
}

#switch {
    background-color: var(--colorBgAlphaBlur) !important;
    margin: 0rem 0.2rem 0.5rem 0.2rem;
    border-radius: var(--radius);
}

.panel-collapse-guard {
    min-width: 100% !important;
}

.panel {
    background-color: var(--colorBgAlphaBlur) !important;
}

.panel-group {
    left: 41px !important;
}

.webpanel-header {
    background-color: var(--colorBgAlphaBlur);
}

#browser, #header, #tabs-tabbar-container, .tab.active, .mainbar, .bookmark-bar, #main, #webpage-stack, #webpage-stack::before,
.SlideBar, .panel-group::before, .toolbar-mainbar, #panels-container, .YBDomainButton, .YBDomain::after, .toolbar-extensions {
    transition: background-color 0.5s, border-color 0.5s, outline 0.5s, box-shadow 0.5s !important;
}

footer:has(.toolbar-statusbar) {
    border-radius: var(--radius);
    margin: 0.2rem;
    background: var(--colorBgAlphaBlur) !important;

    &::after {
        display: none;
    }
}

footer:has(.toolbar-statusbar) {
    margin-top: 0;
}

.find-in-page-wrapper {
    background-color: var(--colorBgAlphaBlur);
}

If you use this mod together with Edge like curved frame around website and show the status bar at the bottom, then add this code to avoid to much margin:

footer:has(.toolbar-statusbar) {
    margin-top: 0;
}

In the first line you can set an URL for your background-image. This needs to be set otherwise you won't have a background image. In my case I've used the one from the theme I'm using. That has the advantage that Vivaldi already stored it locally and provides an URL for it.
This is how to get the URL:

go to your themes settings and navigate to the background tab
use the developer tools to inspect Vivaldis UI. Click with the element selector on your favorite image. The developer tools should display something like this:
Copy the value after background-image. In my case this would be: url("chrome://vivaldi-data/local-image/KXDTZI7XGHAQLI5QQ3VFKSRU72SLWRQG.png").
update the first line of code and replace the current URL with yours.

EDIT: Improved transition when changing colors
EDIT 2: adjusted spaces for a more consistent look
EDIT 3: small improvements & background image variable
EDIT 4: fixed Vivaldi button position
EDIT 5: fixed problems with Vivaldis new destiny setting

VivaldiDY

Exactly what I need, thank you very much for sharing, hope future updates won't break it!

oudstand

@VivaldiDY thank you! Since I use it every day, I'll fix it as soon as possible.

bonziBuddy

Hi @oudstand

Fantastic work keeping this mod alive, thank you!

If you wouldn't mind helping me, I'm having problems getting the styling to work.
My browser looks like this:

How can I fix the position of the Vivaldi button, and is there a way to make the bar fill more of the available space?

I notice when I apply the second piece of code in your first post that the address bar appears to overlap the end of the workspace dropdown:

To fix the bar space issue, I suppose I'd need to adjust the margin to the left? How could I go about doing that?

Thank you!

mib2berlin

@bonziBuddy
Hi, right click on a address bar icon and choose Customize Toolbar. Move the space left out of the address bar and release mouse.

Cheers, mib

bonziBuddy

hey @mib2berlin , that fixed the spacing issue perfectly, thank you

now I just need to figure out the button positioning issue

oudstand

@bonziBuddy I've updated the code of both mods. It should be fixed now.

bonziBuddy

hi @oudstand

the update works and everything looks brilliant, thank you! I adjusted the
margin-top of .vivaldi under #header to -1.75px because the button was still hanging a little low for my liking, and now everything looks slick!

thanks again for your good work!

oudstand

I've adjusted some code to improve the look of the Merge tabs and address bar mod and the Ribbon Theme mod if you use the new destiny setting.

tomhomr

"My current Vivaldi version is 7.1.3570.54, and the CSS style you provided is no longer working well on this latest version. The main issue is that when adding extensions or other icons after the download button, they do not display. Could you please modify and improve it? Thank you."

oudstand

@tomhomr I can't make it work for every amount of extension automatically but I can show you how to solve the problem.

find this block of code:

  #tabs-tabbar-container {
        margin-left: calc(26vw + 140px);
        transition: all 0.75s;
        padding-top: 0 !important;
    }

add this line: margin-right: 5rem;

  #tabs-tabbar-container {
        margin-left: calc(26vw + 140px);
        margin-right: 5rem; /* adjust the value to your needs */
        transition: all 0.75s;
        padding-top: 0 !important;
    }

test which margin works for you. Change 5rem for example to 3rem if you need less space or to 7rem for more space. Just experiment a bit with the numbers to find the one that fits your needs.

tomhomr

@oudstand Thank you very much for your patient answer, but even after adding according to your instructions, the problem still exists.

/**
 * Merge tabbar and addressbar
 * Forum link: https://forum.vivaldi.net/topic/96664/merge-tabs-and-address-bar
 * Inspired by: https://forum.vivaldi.net/topic/34187/merge-tabs-and-address-bar
 */

#header {
    .vivaldi {
        height: 34px;
        width: 34px;
        margin-top: 3px;
        margin-left: 3px;
        padding: 0;
        border-radius: var(--radius) !important;

        &:hover {
            background-color: var(--colorAccentBgDark) !important;
        }

        .expand-arrow {
            display: none;
        }
    }

    .window-buttongroup {
        height: 35px;
    }

    #tabs-tabbar-container {
        margin-left: calc(26vw + 140px);
        margin-right: 5rem; /* adjust the value to your needs */
        transition: all 0.75s;
        padding-top: 0 !important;
    }
}

#browser:has(.toolbar-mailbar:not(.toolbar-hidden)) #tabs-tabbar-container {
    margin-left: 47rem;
    margin-right: 0;
}

.win.normal {
    .tab-group-indicator {
        top: -2px;
    }

    #titlebar:not(.tabless) {
        top: -5px;
    }

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

.win.maximized #header .vivaldi {
    margin-top: 2px;
}

.UrlBar-AddressField {
    width: 27vw;
    transition: width 0.2s ease-in-out, height 0.2s ease-in-out, margin-top 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;

    &:not(:focus-within) {
        overflow: hidden;
    }

    &:focus-within {
        width: 40vw !important;
        height: 30px;
        margin-top: -2px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    }

    .OmniDropdown {
        margin-top: 0;
    }
}

.mainbar {
    .toolbar-mainbar {
        border-bottom: none !important;

        &:not(.toolbar-wrap .toolbar-droptarget) {
            position: absolute;
            transform: translateY(-100%);
            left: 40px !important;
            height: 30px;
            border-radius: 10px;
        }

        .toolbar-extensions {
            position: absolute !important;
            transform: translate(-100%);
            left: calc(100vw - 180px) !important;
            height: 30px !important;
            right: unset !important;
        }
    }

    .toolbar-mainbar::before,
    .toolbar-extensions::before {
        display: none;
    }

    .toolbar-mailbar {
        width: 45rem;
    }
}

#browser:not(.is-settingspage) #main {
    position: unset;
}

#browser:not(.fullscreen) #header {
    height: 30px;
    min-height: unset !important;
}

.density-on {
    &#browser:not(.fullscreen) #header, .vivaldi {
        height: calc(36px / var(--uiZoomLevel));
    }

    .toolbar-mainbar {
        &:not(.toolbar-wrap .toolbar-droptarget), .toolbar-extensions {
            height: 36px !important;
        }
    }

    #tabs-tabbar-container {
        padding-top: 3px !important;
        padding-bottom: 3px !important;
        padding-right: 30px;
    }

    #header .vivaldi {
        margin-top: 6px;
    }

    .window-buttongroup {
        height: 40px !important;
    }

    .mainbar {
        padding: 0 !important;
    }
}

#browser.popup {
    #header,
    #titlebar,
    #pagetitle {
        height: 35px !important;
    }

    #pagetitle {
        margin-left: 45vw !important;
        padding: 5px 0 0 0 !important;
        max-width: calc(55vw - 220px) !important;

        span {
            margin: 0 auto;
            max-width: 100%;
        }
    }

    .toolbar-mainbar {
        left: 10px !important;
        padding-bottom: 0.5rem;
    }

    .UrlBar-AddressField {
        width: 40vw !important;
        background-color: var(--colorBgLightIntense);

        &:focus-within {
            width: 50vw !important;
        }
    }

    .window-buttongroup button {
        height: 35px !important;
    }

    .toolbar-extensions {
        left: calc(100vw - 150px) !important;
    }
}

oudstand

@tomhomr can you provide me a screenshot?

tomhomr

@oudstand 动画.gif ths

tomhomr

@oudstand ，After I pieced together some CSS styles, the expansion button can be dragged, but it still doesn't appear.
I don’t understand why vivaldi always changes some interface styles when upgrading.

/* 
 * Reduce space of the above tab bar
 * @note VivaldiMods tweaks Github: https://github.com/benzBrake/VivaldiMods 
 */
:root {
    --tab-min-height: 30px;
}

		.toolbar-extensions {
    & > .ExtensionIcon {
        order: 2;
        &.ExtensionIcon--Hidden {
            order: 1;
        }
    }

    & > .ExtensionToggleIcon {
        order: 3;
    }
}

#browser.tabs-top.normal {
    &.address-top:not(.fullscreen, .disable-titlebar) #header {
        min-height: calc(var(--tab-min-height) / var(--uiZoomLevel));
    }

    &:is(.win, .linux) #tabs-tabbar-container.top {
        padding-top: 0;
    }

    .vivaldi {
        margin: 0;
        height: calc(var(--tab-min-height) / var(--uiZoomLevel));
    }
}

#browser.tabs-top #titlebar {
    & .window-buttongroup {
        height: calc(var(--tab-min-height) / var(--uiZoomLevel) + 2 * var(--tab-block-margin, 0px));

        &>button:not(.vivaldi) {
            height: 100% !important;
        }
    }

    &:has(~ .tabbar-wrapper > #tabs-tabbar-container >#tabs-subcontainer) .window-buttongroup {
        height: calc(var(--tab-min-height) / var(--uiZoomLevel) + var(--tab-block-margin, 0px));
    }
}

.tab-position .tab .tab-header {
    flex: 0 0 calc(var(--tab-min-height) / var(--uiZoomLevel)) !important;
}




/* 
 * Show topmenu and tabs bar in one line
 * @note VivaldiMods tweaks Github: https://github.com/benzBrake/VivaldiMods 
 */
#browser.tabs-top {
    & #header:has(>.topmenu) {
        display: flex;
        flex-direction: row-reverse;

        &>.topmenu {
            margin-right: 0;
            align-items: center;
            height: 100%;

            &>.vivaldi-horizontal-icon,
            &>.horizontal-menu-pagetitle {
                display: none;
            }
        }

        &>.tabbar-wrapper {
            flex-grow: 1;
        }

        #tabs-container {
            padding-left: var(--tab-inline-margin, 4px);
        }

        &:not(:has(#tabs-subcontainer)) {
            padding-right: calc(140px / var(--uiZoomLevel));

            & .window-buttongroup {
                &>button {
                    height: 100%;
                }
            }
        }

        &:has(#tabs-subcontainer) {
            & #tabs-container {
                padding-right: calc(140px / var(--uiZoomLevel));
            }

            & .topmenu {
                position: fixed;
                top: 0;
                right: calc(140px / var(--uiZoomLevel));
                height: calc(var(--tab-min-height, 30px) + 2*var(--tab-block-margin, 4px));
                z-index: 1;
                background-color: var(--colorTabBar);

                /* 左侧 透明到背景色渐变 */
                &::before {
                    content: "";
                    display: block;
                    width: 30px;
                    height: 100%;
                    background-image: linear-gradient(to right, transparent, var(--colorTabBar));
                }
            }
        }
    }
}

.tabs-top#browser.win:not(.fullscreen, .disable-titlebar) #header:has(>.topmenu) {
    &:not(:has(#tabs-subcontainer)) {
        & .window-buttongroup {
            height: calc(36px + var(--densityGap) * 2)
        }
    }
}







/**
 * Merge tabbar and addressbar
 * Forum link: https://forum.vivaldi.net/topic/96664/merge-tabs-and-address-bar
 * Inspired by: https://forum.vivaldi.net/topic/34187/merge-tabs-and-address-bar
 */
#main > div.bookmark-bar.default > div > button:nth-child(2) > span {
    font-size: 0;
}

#main > div.bookmark-bar.default > div > button.uifocusstop.bookmarkbarItem.folder > svg {
    display: none;
}

#header {
    .vivaldi {
        height: 34px;
        width: 34px;
        margin-top: 3px;
        margin-left: 3px;
        padding: 0;
        border-radius: var(--radius) !important;

        &:hover {
            background-color: var(--colorAccentBgDark) !important;
        }

        .expand-arrow {
            display: none;
        }
    }

    .window-buttongroup {
        height: 35px;
    }

    #tabs-tabbar-container {
        margin-left: calc(23vw + 103px);
        transition: all 0.75s;
        padding-top: 0 !important;
    }
}

#browser:has(.toolbar-mailbar:not(.toolbar-hidden)) #tabs-tabbar-container {
    margin-left: 47rem;
    margin-right: 0;
}

.win.normal {
    .tab-group-indicator {
        top: -2px;
    }

    #titlebar:not(.tabless) {
        top: -5px;
    }

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

.win.maximized #header .vivaldi {
    margin-top: 2px;
}

.UrlBar-AddressField {
    width: 22vw;
    transition: width 0.2s ease-in-out, height 0.2s ease-in-out, margin-top 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
    &:not(:focus-within) {
        overflow: hidden;
    }

    &:focus-within {
        width: 22vw !important;
        height: 30px;
        margin-top: -2px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    }

    .OmniDropdown {
        margin-top: 0;
    }
}

.mainbar {
    .toolbar-mainbar {
        border-bottom: none !important;

        &:not(.toolbar-wrap .toolbar-droptarget) {
            position: absolute;
            transform: translateY(-100%);
            left: 40px !important;
            height: 30px;
            border-radius: 10px;
        }
    }

    .toolbar-mainbar::before,
    .toolbar-extensions::before {
        display: none;
    }

    .toolbar-mailbar {
        width: 45rem;
    }
}

#browser:not(.is-settingspage) #main {
    position: unset;
}

#browser:not(.fullscreen) #header {
    height: 30px;
    min-height: unset !important;
}

.density-on {
    &#browser:not(.fullscreen) #header, .vivaldi {
        height: calc(36px / var(--uiZoomLevel));
    }

    .toolbar-mainbar {
        &:not(.toolbar-wrap .toolbar-droptarget), .toolbar-extensions {
            height: 36px !important;
        }
    }

    #tabs-tabbar-container {
        padding-top: 3px !important;
        padding-bottom: 3px !important;
        padding-right: 30px;
    }

    #header .vivaldi {
        margin-top: 0px;
    }

    .window-buttongroup {
        height: 40px !important;
    }

    .mainbar {
        padding: 0 !important;
    }
}

#browser.popup {
    #header,
    #titlebar,
    #pagetitle {
        height: 35px !important;
    }

    #pagetitle {
        margin-left: 45vw !important;
        padding: 5px 0 0 0 !important;
        max-width: calc(55vw - 220px) !important;

        span {
            margin: 0 auto;
            max-width: 100%;
        }
    }

    .toolbar-mainbar {
        left: 10px !important;
        padding-bottom: 0.5rem;
    }

    .UrlBar-AddressField {
        width: 40vw !important;
        background-color: var(--colorBgLightIntense);

        &:focus-within {
            width: 50vw !important;
        }
    }
    .window-buttongroup button {
        height: 35px !important;
    }
}

动画.gif

oudstand

@tomhomr the problem is that you try to place them on the left. In my implementation I've fixed them to right position, as you can see on the screenshots.

This code is responsible for it:

 .toolbar-extensions {
    position: absolute !important;
    transform: translate(-100%);
    left: calc(100vw - 180px) !important;
    height: 30px !important;
    right: unset !important;
}

Currently I don't have time to fix it, especially if you're using multiple mods for the tab and address area.

SuperGee

Hello,
I was actually looking for a Safari-like compact mode and you made it !

Here are some behaviors that i'd like to share
On macOS, the tab bar does not go to the end of the right side (despite removing the extension drawer, the profile icon and the sync icon).
Also on the left I'm not sure how to align the window command buttons
alt text

Just wondering if you had an idea how to fix those.

Thanks for this awesome mod

okjellno

@SuperGee Regarding the window control buttons, try setting the interface density back to regular instead of using compact (until you get a proper reply).

SuperGee

@okjellno Indeed, thanks