Merge tabbar with addressbar
-
I wrote a mod to merge the tab bar with the address bar. To make it work you have to set the tabs to the bottom.
When the URL bar is focused it increases its size. If you don't like this behavior, there is a comment in the CSS code, just remove that line.
JS Code:
function addTabbarObserver(tabbar) { const toolbar = document.querySelector('.mainbar .toolbar-mainbar:last-of-type'), config = {attributes: true}, observer = new MutationObserver(moveTabbar.bind(this, tabbar)); observer.observe(toolbar, config); } function moveTabbar(tabbar) { let visibleToolbar = document.querySelector('.toolbar-mainbar.toolbar-visible'), target = visibleToolbar.querySelector('.UrlBar-AddressField') ?? visibleToolbar.childNodes[visibleToolbar.childNodes.length - 1]; console.log('callback'); target.after(tabbar); } setTimeout(function waitMergeTabbar() { const browser = document.getElementById('browser'), tabbar = document.querySelector('#tabs-tabbar-container'); if (browser) { moveTabbar(tabbar); addTabbarObserver(tabbar); } else { setTimeout(waitMergeTabbar, 300); } }, 300);
CSS Code:
#tabs-tabbar-container { order: 0 !important; flex: 2 !important; background: var(--colorAccentBg) !important; padding-left: 1rem !important; padding-bottom: 0 !important; border-top-width: 0 !important; overflow: hidden; } .resize, .tab-strip { overflow: hidden; } .tab-strip { display: flex !important; } .tab-strip > span { flex: 1 !important; display: flex; overflow: hidden !important; max-width: 11rem; } #browser:not(.no-app-dragging) .tab-strip .newtab { left: unset !important; } .tab-strip .toolbar { flex: 0 !important; } .tab { border-radius: var(--radiusHalf) !important; } .tab.active { background: var(--colorTabBar, transparent) !important; } .tab.active:before, .tab.active:after { display: none !important; } .tab-position:hover .tab:not(.active), .tab:hover:not(.active) { background-color: var(--colorBgDarker) !important; } .tab-position { left: 0; } #browser:not(.no-app-dragging) .tab-position { transform: unset !important; position: relative !important; } .tab.unread { background-image: linear-gradient(-135deg, var(--colorFgFadedMore) 5px, transparent 5px) !important; } .tab-group-indicator { top: -7px !important; height: 0; padding-right: calc(var(--radius) * 0.33) !important; padding-left: calc(var(--radius) * 0.33) !important; } .tab-indicator:first-of-type { border-top-left-radius: var(--radiusHalf) !important; border-bottom-left-radius: unset !important; } .tab-indicator:last-of-type { border-top-right-radius: var(--radiusHalf) !important; border-bottom-right-radius: unset !important; } .tab-indicator.active { background-color: var(--colorHighlightFgAlpha) !important; border-top-width: 3px !important; height: 9px !important; padding-top: 3px !important; } #browser.maximized .tab-indicator.active { height: 12px !important; padding-top: 6px !important; } .tab-indicator { background-color: var(--colorHighlightFgAlphaHeavy) !important; } #vivaldi-tooltip .tooltip { top: 2.5rem !important; } .toolbar-tabbar { margin-right: 2rem; } .UrlBar-AddressField { transition: flex .35s ease-in-out !important; background-color: var(--colorBgLightIntense); } .UrlBar-AddressField:focus-within { flex: 2; } .toolbar-mainbar { min-height: calc(35px / var(--uiZoomLevel)) !important; } .window-buttongroup { height: 35px !important; }
EDIT:
Updated the CSS code (wobbling of tabs is gone and window is easier to drafg)
EDIT 2:
Adjusted the tooltip position when hovering over a tab
EDIT 3:
Reduced wobbling when moving tabs -
@oudstand
You may want to see my own version#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 - 172px) !important; height:30px !important; right:unset !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 + 184px) !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 + 184px) !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:unset !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 !important; font-weight:400; font-size:11px; line-height:1.0; }
It is far from being perfect, but may be useful for you.
Some notes:- It needs the tabs to be upside.
- It works good with main menu - both on and off.
- It is made for hidden extenstions into one button.
- No need to use any external JS file at all.
Here is GIF how that looks with menus and without them. -
-
- Can I find there the last version of that standalone CSS to compare with my one?
- Where should I put JS from this topic to test it?
-
-
not sure what i did wrong but im getting this.
![alt text]Nvm im stupid i just needed to restart after changing to bottom tabs
-
@Roobba So it's working now?