Re: Merge toolbar and tab bar into single line bar
Here's modern solution from me.
New it works with recent 6.6.3271.61 (release) and 6.7.3329.9 (snapshot), and now supports all default themes. Older versions should work too.
I use this CSS for myself for long time. I added some comments for you to make it more understandable.
Try this if you wish. Any feedback would be great for any issue.
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; }
Also it supports classic menu position:
alt text
