Re: Merge toolbar and tab bar into single line bar
Here's modern solution from me. It works with recent 6.6.3271.61 (release) and 6.7.3329.9 (snapshot), and now supports all default themes.
Screenshot
alt text
Code for custom.css:
/* height 30px */ #browser:not(.tabs-top) .vivaldi { height:30px; padding:0; } .toolbar-mainbar .toolbar-extensions > .button-toolbar > button { height:30px; } .toolbar-mainbar > .button-toolbar > button { height:30px; } /* get main bar up */ #header, #main { position:unset; } .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 extensions placement to the right side, minimal minus (!!!) calc is 173 = 138 (window buttons) + 35 (each ext.) */ #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 - 173px) !important; height:30px !important; right:unset !important; top:0px; border-radius:var(--radiusHalf)!important; } .toolbar-mainbar .toolbar-extensions { background-color:transparent; } .toolbar-mainbar .toolbar-extensions:after, .toolbar-mainbar:after { display:none !important; } /* tabs position and look */ #tabs-container:not(.none).top { padding-left:calc(31vw + 173px + 35px) !important; padding-right:173px !important; padding-top:0px !important; margin-top:0px; min-height:30px; transition:0.3s; } .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; } /* main bar and url bar placement */ .win.normal .toolbar-mainbar { left:unset; right:unset; border-radius:var(--radiusHalf)!important; } .UrlBar-AddressField { width:31vw !important; top:0px !important; } /* hide unwanted text */ .UrlBar-PrivateWindowIndicator { font-size:0; padding:0 6px 0 6px; } .tabbar-workspace-button .button-title { font-size:0px; margin:0 0px; } /* fix for window buttons */ .normal .window-buttongroup { height:30px !important; width:unset !important; top:0px !important; align-items:center !important; } .maximized .window-buttongroup { height:unset !important; width:unset !important; top:0px !important; } /* fix for UI fonts */ #browser, #browser + div, #browser + div + div, #browser button, #browser input, #browser select, #browser textarea, .info { font-family:Arial,Tahoma,'MS Sans Serif',system-ui,sans-serif !important; font-weight:400; font-size:11px; line-height:1.0; text-shadow:transparent 0px 0px 0px, rgba(0,0,0,0.25) 0px 0px 0px !important; } /* fix for tabbar height */ .normal #tabs-tabbar-container.top { padding-top:0px !important; } .normal:not(.horizontal-menu) #tabs-tabbar-container.top { padding:0px 0 0 0 !important; } /* fix for windowed mode placement */ .vivaldi { margin-top:0px !important; } .tabs-top.address-top#browser.win:not(.fullscreen, .disable-titlebar) #header { min-height: calc(30px / var(--uiZoomLevel) ); } /* fix for unwanted border height */ .address-top .mainbar { border-bottom-width:0px; }Try this if you wish. Any feedback would be great for any issue.