Merge toolbar and tab bar into single line bar
-
Hi, it would be nice to have option to add "tab container" element in toolbar - will save vertical space
-
If you want to save vertical space, you should use vertical tabs. Or run Vivaldi without tab bar, nowadays I use the window panel instead. In both cases you can then enable the setting to merge the title bar and address bar, which saves some vertical space additionally.
pic
-
@luetage Thank you!
Not ideal. In this case lot of horizontal space is also wasted. There is enough space near the address bar for all my tabs even on 13 inch laptop and this would be good to use that space for tabs -
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
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:
-
This would also be achieved by implementing Turn the Tab Bar into a Full Fledged Toolbar
-
@skorphil I agree. This is the one thing that Internet Explorer got right.
-
@hideli Thanks! Its great!
There r some minor issues:
- UI scaling seems to be broken (too small text)
- there are empty space areas on the left and right sides (on mac os)
Will try to tune it if I'll have time to kill
-
@skorphil
• The text is done to be default 8 pt, just the same as it is on classic Windows themes from 9x/XP/W7. I see no need to make bigger there.
• Can't understand a problem. Can you show a screenshot?
Also you may try to make it better for you. It would be great to make the best skin for Vivaldi, much better and efficient than regular ugly chrome-like composition.