Merge tabs and address bar

oudstand

oudstand

With the latest Snapshot version this code should solve upcoming problems

#tabs-tabbar-container {
    position: fixed;
    left: calc(26vw + 140px);
    right: 0;      
    margin-right: 20px;
}

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

.win.normal #titlebar {
    top: -5px;
}

.UrlBar-AddressField {
    width: 27vw;
}

.mainbar .toolbar-mainbar:not(.toolbar-wrap .toolbar-droptarget) {
    position: absolute;
    top: 0;
    left: 30px !important;
    height: 30px;
}

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

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

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

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

.window-buttongroup{
    height:35px;
}

#header, #main {
    position: unset;
}

#header {
    height: 30px;
    min-height: unset !important;
}

oudstand

With Vivaldi Snapshot version 5.7.2876.3 the tabs are positioned wrong. This is my current code:

#tabs-tabbar-container {
    position: fixed;
    top: 0;
    left: calc(26vw + 140px);
    right: 0;
    padding-top: 0;
    margin-right: 20px;
}

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

.win.normal #titlebar {
    top: -5px;
}

.UrlBar-AddressField {
    width: 27vw;
}

.mainbar .toolbar-mainbar:not(.toolbar-wrap .toolbar-droptarget) {
    position: absolute;
    top: 0;
    left: 30px !important;
    height: 30px;
}

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

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

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

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

.window-buttongroup {
    height: 35px;
}

#header, #main {
    position: unset;
}

#header {
    height: 30px;
    min-height: unset !important;
}

EDIT
updated the code a bit to work even better in windowed mode

Zalex108

@oudstand said in Merge tabs and address bar:

Snapshot version 5.7.2876.3

The Fix from the Future!

oudstand

@Zalex108 said in Merge tabs and address bar:

The Fix from the Future!

Yeah, the browser showed me the available update before the blog does

Zalex108

@oudstand said in Merge tabs and address bar:

@Zalex108 said in Merge tabs and address bar:

The Fix from the Future!

Yeah, the browser showed me the available update before the blog does

Does that count as the First! ?

Zalex108

@Zalex108 said in Merge tabs and address bar:

@oudstand said in Merge tabs and address bar:

@Zalex108 said in Merge tabs and address bar:

The Fix from the Future!

Yeah, the browser showed me the available update before the blog does

Does that count as the First! ?

It does!

oudstand

I've improved the code a bit for using it with Vivaldis e-mails.

#tabs-tabbar-container {
    margin-left: calc(26vw + 140px);
    margin-right: 20px;
    transition: all .75s;
}

#browser:has(.toolbar-mailbar) #tabs-tabbar-container {
    margin-left: 865px;
    margin-right: -50px;
}

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

.win.normal #titlebar {
    top: -5px;
}

.UrlBar-AddressField {
    width: 27vw;
}

.mainbar .toolbar-mainbar:not(.toolbar-wrap .toolbar-droptarget) {
    position: absolute;
    top: 0;
    left: 30px !important;
    height: 30px;
    border-radius: 10px;
}

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

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

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

.mainbar .toolbar-mailbar {
    width: 855px;
}

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

.window-buttongroup {
    height: 35px;
}

#header, #main {
    position: unset;
}

#header {
    height: 30px;
    min-height: unset !important;
}

Currently I didn't add or remove any item from or to the mail toolbar. If you did you can change the width here:

.mainbar .toolbar-mailbar {
    width: 855px;
}

and here:

#browser:has(.toolbar-mailbar) #tabs-tabbar-container {
    margin-left: 865px; // add 10px more
    margin-right: -50px;
}

oudstand

Since the urlbar can be a bit small sometimes, I've made a solution for it. If you add this code, the urlbar extends its width when the omni dropdown appears (if you start typing or press arrow down). If you remove .mainbar:has(.OmniDropdown) then the width of the urlbar changes as soon as it gets focused.

.UrlBar-AddressField {    
    /* added animation for extending and reducing the width */
    transition: .2s ease-in-out !important;
}

 .mainbar:has(.OmniDropdown) .UrlBar-AddressField:focus-within {
    /* extends the width of the url bar addressfield while it is focused */
    width: 40vw !important;
    height: 30px;
}

.OmniDropdown {
    margin-top: -3px;
}

Before extending width:

After extending width:

Like this it's easier to read the url and see autocomplete.

hideli

I try to do my own custom.css with support of upper menus by Ctrl+M.

Here's the code

#browser:not(.tabs-top) .vivaldi { height:30px; padding:0; }
#browser.win.win10.tabs-top #header #titlebar .window-buttongroup button:not(.vivaldi) { height:unset; }
#header { height:unset; }
#header, #main { position:unset; }
#main { position:unset; }
#main > div.mainbar > div > div.toolbar-extensions { position:absolute !important; transform:translate(-100%, 0); background-color:var(--colorAccentBg) !important; transition:background-color 0.7s ease-out; left:calc(100vw - 135px) !important; height:30px !important; top:0px; border-radius:var(--radiusHalf)!important; }
#tabs-container .resize { min-height:30px; margin-top:0px; }
#tabs-container:not(.none).top { padding-left:calc(30vw + 200px) !important; padding-right:170px !important; padding-top:0px !important; margin-top:0px; min-height:30px; transition:0.3s; }
.color-behind-tabs-on#browser.tabs-top #header { transition:0.7s ease-out; }
.tab-group-indicator { top:0 !important; }
.tab-position .tab { display:flex; flex:1 1 100%; flex-flow:column; overflow:hidden; font-size:11px; -webkit-user-select:none; -webkit-user-drag:element; }
.tabs-right#browser.win.win10 .tabs-bottom#browser.win.win10 .tabs-left#browser.win.win10, #browser.win.win10 #header #titlebar .window-buttongroup button { height:30px; }
.tabs-at-edge.fullscreen#browser.win.win10.tabs-top #header #titlebar .window-buttongroup button:not(.vivaldi), .tabs-at-edge.maximized#browser.win.win10.tabs-top #header #titlebar .window-buttongroup button:not(.vivaldi) { height:30px; }
.maximized#browser:has(#tabs-subcontainer.top) .toolbar-mainbar:not(.toolbar-wrap):not( .toolbar-editor section.dialog-preview .toolbar):not(.toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-mailbar.toolbar-large) { transform:translateY(-60px); }
.toolbar-mainbar .toolbar-extensions > .button-toolbar > button { height:30px; }
.toolbar-mainbar .toolbar-extensions { background-color:transparent; }
.toolbar-mainbar .toolbar-extensions:after, .toolbar-mainbar:after { display:none !important; }
.toolbar-mainbar > .button-toolbar > button { height:30px; }
.toolbar-mainbar { background:linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker); transition:background-color 0.7s ease-out; }
.toolbar-mainbar { background:transparent; border-radius:var(--radiusHalf); }
.toolbar-mainbar:not(.toolbar-wrap):not( .toolbar-editor section.dialog-preview .toolbar):not(.toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-mailbar.toolbar-large) { position:absolute; top:unset;  left:35px !important; height:30px; background:var(--colorAccentBg) !important; border:none !important; transform:translateY(-30px); }
.toolbar-tabbar.sync-and-trash-container { top:0px !important; }
.toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-mailbar.toolbar-large { width:100vw; left:0px; }
.maximized#browser:has(.toolbar-mailbar.toolbar-large) #tabs-container:not(.none).top { padding-left:35px !important; }
.maximized#browser:has(.toolbar-mailbar.toolbar-large) .mainbar { top:unset; position:relative; }
.UrlBar-AddressField { width:31vw !important; top:0px !important; }
.UrlBar-PrivateWindowIndicator { font-size:0; padding:0 6px 0 6px; }
.maximized#browser:has(.UrlBar-PrivateWindowIndicator) #tabs-container:not(.none).top { padding-left:calc(30vw + 200px) !important; }
.vivaldi { margin-top:-6px !important; }
.vivaldi { margin-top:0px !important; }
.win #titlebar #pagetitle > span, .linux #titlebar #pagetitle > span { text-align:left; margin-left:38%; width:42vw; }
.win.normal #titlebar { top:0px; }
.win.normal .toolbar-mainbar { left:unset; right:unset; border-radius:var(--radiusHalf)!important; }
.win.normal .UrlBar-AddressField { top:0px; }
.win10.normal #tabs-tabbar-container.top { padding-top:6px; }
.maximized .win10.normal #tabs-tabbar-container.top { padding-top:0px !IMPORTANT; }
.window-buttongroup { height:unset !important; width:100px !important; top:0px !important; }
#browser, #browser + div, #browser + div + div, #browser button, #browser input, #browser select, #browser textarea { font-family:Arial,Tahoma,'MS Sans Serif','Segoe UI',system-ui,sans-serif; font-weight:400; font-size:11px; line-height:1.0; }

Screenshots:

Fullscreen

Windowed

Could anyone help to fix one small issue (wrong extensions positon) there on windowed mode?

oudstand

This code has improvements for the settings dialog:

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

#browser:has(.toolbar-mailbar:not(.toolbar-hidden)) #tabs-tabbar-container {
    margin-left: 865px;
    margin-right: -50px;
}

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

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

.UrlBar-AddressField {    
    width: 27vw;
    
    /* added animation for extending and reducing the width */
    transition: .2s ease-in-out !important;
}

/* .mainbar:has(.OmniDropdown) */ .UrlBar-AddressField:focus-within {
    /* extends the width of the url bar addressfield while it is focused */
    width: 40vw !important;
    height: 30px;
}

.OmniDropdown {
    margin-top: -3px;
}

.mainbar .toolbar-mainbar:not(.toolbar-wrap .toolbar-droptarget) {
    position: absolute;
    top: 0;
    left: 30px !important;
    height: 30px;
    border-radius: 10px;
}

.mainbar .toolbar-mainbar {
    background: var(--colorBg) !important;
    border-bottom: none !important;
}

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

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

.mainbar .toolbar-mailbar {
    width: 855px;
}

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

.window-buttongroup {
    height: 35px;
}

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

#header {
    height: 30px;
    min-height: unset !important;
}

EDIT: small bug fix
EDIT 2: small bug fix for Vivaldi Snapshot > 5.7
EDIT 3: fixed bug in windowed mode
EDIT 4: fixed bug in latest Snapshot where the toolbar-mailbar always exists but has class toolbar-hidden
EDIT 5: fixed header height for Snapshot 6.1.3001.3

oudstand

@hideli if you add this it should look better:

.window-buttongroup {
    margin-top: 10px!important;
}

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

hideli

@oudstand
Thanks.
This works fine.

MJose16

@oudstand - could you please post complete code till date here as one css file to include all the latest modifications? because the code for above is split in many chats with so many modifications. this would help newbies like me to pick it up easily. thanks in advance.

oudstand

@MJose16 the post with the edits contains one block of code which is exactly the code I use. The code blog which I posted later was just to help @hideli and is not directly related to my code.

MJose16

@oudstand said in Merge tabs and address bar:

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

#browser:has(.toolbar-mailbar:not(.toolbar-hidden)) #tabs-tabbar-container {
margin-left: 865px;
margin-right: -50px;
}

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

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

.UrlBar-AddressField {
width: 27vw;
/* added animation for extending and reducing the width */
transition: .2s ease-in-out !important;
}

/* .mainbar:has(.OmniDropdown) / .UrlBar-AddressField:focus-within {
/ extends the width of the url bar addressfield while it is focused */
width: 40vw !important;
height: 30px;
}

.OmniDropdown {
margin-top: -3px;
}

.mainbar .toolbar-mainbar:not(.toolbar-wrap .toolbar-droptarget) {
position: absolute;
top: 0;
left: 30px !important;
height: 30px;
border-radius: 10px;
}

.mainbar .toolbar-mainbar {
background: var(--colorBg) !important;
border-bottom: none !important;
}

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

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

.mainbar .toolbar-mailbar {
width: 855px;
}

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

.window-buttongroup {
height: 35px;
}

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

#header {
height: 30px;
min-height: unset !important;
}

@oudstand ok, in that case this is your last edit code as one block, correct?

Also, please confirm if the steps below are correct to be followed to get this working in latest vivaldi browser.

Put the above code in a text file, rename and save it to something like style.css
Open Vivaldi and go to: vivaldi://experiments
Enable "Allow for using CSS modifications" and restart Vivaldi
Go to Vivaldi's settings - Appearance: vivaldi://settings/appearance/
Under "Custom UI Modifications", select your CSS file and restart Vivaldi

Thanks again.

MJose16

@oudstand - I tried above mentioned steps myself and used the above code and it works fine. thanks. Though, there is some issue with the latest version of Vivaldi (6.0)

Attched image below where the Workspace icon goes hidden and the address bar hides first 2-3 tabs under it. I tried to customise the address bar by adding Workspaces to it.

could you please give some edit so that address bar doesn't overlap the tabs underneath it and space inside the searchbar is removed before and after the address and search entry fields.?

Thanks in advance.

oudstand

@MJose16 for me it's working fine, but I'm using the latest Snapshot:

Maybe it's because of differently customized toolbar. Mine looks like this without the mod:

MJose16

@oudstand - for some reason, it just doesn't work on my Vivaldi browser as yours, tried on both Win 10 & Win 11. I hae done no mods on the browser. just installed as new version - 6.0.2979.22 (Stable channel) (64-bit) ) on Windows 11 Version 22H2 (Build 22621.1702). could you please post your code as it is here again ? that way I can check if something is wrong here. Thanks.

oudstand

@MJose16 This is the code that I use:

#tabs-tabbar-container {
    margin-left: calc(26vw + 140px);
    margin-right: 65px;
    transition: all .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;
}

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

.UrlBar-AddressField {    
    width: 27vw;
    
    /* added animation for extending and reducing the width */
    transition: .2s ease-in-out !important;
}

/* .mainbar:has(.OmniDropdown) */ .UrlBar-AddressField:focus-within {
    /* extends the width of the url bar addressfield while it is focused */
    width: 40vw !important;
    height: 30px;
}

.OmniDropdown {
    margin-top: -3px;
}

.mainbar .toolbar-mainbar:not(.toolbar-wrap .toolbar-droptarget) {
    position: absolute;
    top: 0;
    left: 30px !important;
    height: 30px;
    border-radius: 10px;
}

.mainbar .toolbar-mainbar {
    background: var(--colorBg) !important;
    border-bottom: none !important;
}

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

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

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

.toolbar-mailbar .button-toolbar[title*="Seite"] {
    display: none;
}

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

.window-buttongroup {
    height: 35px;
}

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

#header {
    height: 30px;
    min-height: unset !important;
}

Maybe it's related to you Vivaldi version. Since I use the Snapshot version there could be a fix wich messes things up for you.