Borderless Design

Geniusak

I came from Opera a bit ago, and while some things I'm glad to leave, others I miss, like it's slick "borderless" design. So I replicated it for Vivaldi. I know little CSS but it turned out well. In my opinion it's much cleaner and more modern than vivaldi's current look.

What it looks like

Code

.address-top .toolbar-mainbar:after {
    height: 0;
}

#panels-container.left #switch {
    box-shadow: none;
}
.bookmark-bar{
    border: none;
}
.toolbar-statusbar {
    border-top: none;
}

/*_ force bookmark bar and buttons to use same background color as address bar*/
.bookmark-bar,
.bookmark-bar .observer button {
    background-color: var(--colorAccentBg);
}
.color-behind-tabs-on .bookmark-bar,
.color-behind-tabs-on .bookmark-bar button {
    background-color: var(--colorBg);
}
.SiteInfoButton, .ContentBlocker-Control{ 
    height:24px;
}

/*_ Blend addressfield */
.addressfield {
    background-color: transparent;
    border-width: 0;
}

Some problems:

Bookmark bar still has border

BoneTone

Dude, great first post! Welcome to the forums and thanks for sharing. I'm definitely going to give this mod a try, maybe later this week. At the moment I'm quite swamped remodeling the study in our house with my fiancée -- current task is to finish building my desk which I hope to finish tomorrow.

nomadic

@Geniusak Nice work! I am an ex-Opera user that liked the styling of Modern Opera as well.

You can check out some of my CSS on GitHub if you are interested in my Opera-like UI changes.

Note, I did squish down the height of lots of UI elements, so look out for those changes if you don't care for the same effect.

GitHub Link: /vivaldi-customization/css/custom.css

You can use .private in front of CSS selectors to give special styling to incognito windows.

In my CSS, under the Bookmark Bar Mods comment (currently at line 284, but subject to change in the future), you can find some of my styles for removing borders in the bookmark bar.

Welcome to the forum! Always nice to have another modder!

Geniusak

@nomadic

Thanks, I realized that this mod actually does not mess up private windows, but another mod I have. Still helped me fix that though. Bookmark works too, though I don't actually use it.

Geniusak

Update

My mistake, it works fine in private windows
The little icons (site info, content blocker) are slightly off for some reason, so add the following to fix:

.SiteInfoButton, .ContentBlocker-Control{ 
    height:24px;
}

To remove border from bookmark bar, add

.bookmark-bar{
    border: none;
}

If you want to add a effect on hover (like opera) use .addressfield:hover