Merge tabs and address bar
-
@nomadic You're right. Now the mod looks fine in a windowed mode too. Thanks
Do you have a small explanation for me what exactly your provided CSS does? -
@oudstand No problem
It is really just to override some
CSS
fromcommon.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
, theleft
/right
location position of the element can be set withCSS
. The default fromcommon.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 fromcommon.css
and basically says pretend like theleft
andright
positions were never specified by any otherCSS
. I found the problemCSS
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 forCSS
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! -
@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 -
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.
-
-
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?
-
@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.
-
@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; }
-
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.
-
@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!
-
@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?
-
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; }
-
@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; }
-
Looks and works great, thanks.
-
@nomadic hihi...working is fk
-
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
'sposition: fixed
causes this problem.EDIT:
It's not happening in Vivaldi Snapshot 4.2.2406.40
-
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; }
-
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); }
-
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
-
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?