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.