Merge tabs and address bar

MasterLeo29

@Mrxyzl I tested this version and noticed one small bug with it (at least, on my case). If you open the customize toolbar menu, the preview it showed got a little bit distorted. To fix it, I only had to add ".mainbar" on the selectors that use ".toolbar-mainbar"

Otherwise, works great

Mrxyzl

@MasterLeo29 thanks. i forgot to update the code with this (i fix this later)

Mrxyzl

Hi, i update the code to revert back to normal when open the built-in mail tab

note that you need to enable :has() selector by enable experimental web platform flag in vivaldi://flags

mib2berlin

@Mrxyzl
Hi, does this still work in Vivaldi 5.6?
I guess the latest code is in the first post?

Cheers, mib

oudstand

@mib2berlin this is my code I use with the latest Snapshot version of Vivaldi. It's completly new written code.

#tabs-container {
    position: fixed;
    left: calc(26vw + 140px);
    right: 0;      
    top: 0;
    margin-right: 20px;
}

.win.normal .tab-group-indicator {
    top: -2px;
}

.win.normal #titlebar {
    top: -5px;
}

.UrlBar-AddressField {
    width: 27vw;
}

.toolbar-mainbar:not(.toolbar-wrap) {
    position: absolute;
    top: 0;
    left: 30px !important;
    height: 30px;
}

.toolbar-mainbar {
     background: var(--colorBg) !important;
}

.toolbar-mainbar::before, .toolbar-extensions::before {
    display:none;
}

.win.normal .toolbar-mainbar {
    left: unset;
    right: unset;
}

.toolbar-extensions {
    position: absolute !important;
    transform: translate(-100%);
    background-color: var(--colorBg) !important;
    left: calc(100vw - 165px) !important;
    height: 30px !important;
    right: unset !important;
}

button[name="UpdateButton"] {
    position: fixed;
    right: 0;
    top: 32px; 
    height: 25px !important;
}

.window-buttongroup{
    height:35px;
}

#header, #main {
    position: unset;
}

#header {
    height: 30px;
    min-height: unset !important;
}

mib2berlin

@oudstand
Hi and thanks, it cut the first tab:

Cheers, mib
EDIT: I changed: left: calc(26vw + 180px);
and now it is working, thank you!

mib2berlin

@oudstand
OK, I will play around a bit with the code.
I cant add any icons with "Customized Toolbar" between address bar and first tab.

Cheers, mib

oudstand

@mib2berlin I'm not sure what you mean with this.

mib2berlin

@oudstand
The account icon is at this place by default and I have my reading list icon set there.

With your code:

oudstand

@mib2berlin Strange for me it's working fine. At least with the reload button:

mib2berlin

@oudstand
AH, I want to put it at the wrong space.

Thank you very much for the fast help.
Forum is like chat now.

Cheers, mib

oudstand

@mib2berlin you're welcome

oudstand

With the latest Snapshot version this code should solve upcoming problems

#tabs-tabbar-container {
    position: fixed;
    left: calc(26vw + 140px);
    right: 0;      
    margin-right: 20px;
}

.win.normal .tab-group-indicator {
    top: -2px;
}

.win.normal #titlebar {
    top: -5px;
}

.UrlBar-AddressField {
    width: 27vw;
}

.mainbar .toolbar-mainbar:not(.toolbar-wrap .toolbar-droptarget) {
    position: absolute;
    top: 0;
    left: 30px !important;
    height: 30px;
}

.mainbar .toolbar-mainbar {
     background: var(--colorBg) !important;
}

.mainbar .toolbar-mainbar::before, .mainbar .toolbar-extensions::before {
    display:none;
}

.win.normal .mainbar .toolbar-mainbar {
    left: unset;
    right: unset;
}

.toolbar-extensions {
    position: absolute !important;
    transform: translate(-100%);
    background-color: var(--colorBg) !important;
    left: calc(100vw - 165px) !important;
    height: 30px !important;
    right: unset !important;
}

.window-buttongroup{
    height:35px;
}

#header, #main {
    position: unset;
}

#header {
    height: 30px;
    min-height: unset !important;
}

oudstand

With Vivaldi Snapshot version 5.7.2876.3 the tabs are positioned wrong. This is my current code:

#tabs-tabbar-container {
    position: fixed;
    top: 0;
    left: calc(26vw + 140px);
    right: 0;
    padding-top: 0;
    margin-right: 20px;
}

.win.normal .tab-group-indicator {
    top: -2px;
}

.win.normal #titlebar {
    top: -5px;
}

.UrlBar-AddressField {
    width: 27vw;
}

.mainbar .toolbar-mainbar:not(.toolbar-wrap .toolbar-droptarget) {
    position: absolute;
    top: 0;
    left: 30px !important;
    height: 30px;
}

.mainbar .toolbar-mainbar {
    background: var(--colorBg) !important;
}

.mainbar .toolbar-mainbar::before, .mainbar .toolbar-extensions::before {
    display: none;
}

.win.normal .mainbar .toolbar-mainbar {
    left: unset;
    right: unset;
}

.toolbar-extensions {
    position: absolute !important;
    transform: translate(-100%);
    background-color: var(--colorBg) !important;
    left: calc(100vw - 165px) !important;
    height: 30px !important;
    right: unset !important;
}

.window-buttongroup {
    height: 35px;
}

#header, #main {
    position: unset;
}

#header {
    height: 30px;
    min-height: unset !important;
}

EDIT
updated the code a bit to work even better in windowed mode

Zalex108

@oudstand said in Merge tabs and address bar:

Snapshot version 5.7.2876.3

The Fix from the Future!

oudstand

@Zalex108 said in Merge tabs and address bar:

The Fix from the Future!

Yeah, the browser showed me the available update before the blog does

Zalex108

@oudstand said in Merge tabs and address bar:

@Zalex108 said in Merge tabs and address bar:

The Fix from the Future!

Yeah, the browser showed me the available update before the blog does

Does that count as the First! ?

Zalex108

@Zalex108 said in Merge tabs and address bar:

@oudstand said in Merge tabs and address bar:

@Zalex108 said in Merge tabs and address bar:

The Fix from the Future!

Yeah, the browser showed me the available update before the blog does

Does that count as the First! ?

It does!

oudstand

I've improved the code a bit for using it with Vivaldis e-mails.

#tabs-tabbar-container {
    margin-left: calc(26vw + 140px);
    margin-right: 20px;
    transition: all .75s;
}

#browser:has(.toolbar-mailbar) #tabs-tabbar-container {
    margin-left: 865px;
    margin-right: -50px;
}

.win.normal .tab-group-indicator {
    top: -2px;
}

.win.normal #titlebar {
    top: -5px;
}

.UrlBar-AddressField {
    width: 27vw;
}

.mainbar .toolbar-mainbar:not(.toolbar-wrap .toolbar-droptarget) {
    position: absolute;
    top: 0;
    left: 30px !important;
    height: 30px;
    border-radius: 10px;
}

.mainbar .toolbar-mainbar {
    background: var(--colorBg) !important;
}

.mainbar .toolbar-mainbar::before, .mainbar .toolbar-extensions::before {
    display: none;
}

.win.normal .mainbar .toolbar-mainbar {
    left: unset;
    right: unset;
}

.mainbar .toolbar-mailbar {
    width: 855px;
}

.toolbar-extensions {
    position: absolute !important;
    transform: translate(-100%);
    background-color: var(--colorBg) !important;
    left: calc(100vw - 165px) !important;
    height: 30px !important;
    right: unset !important;
}

.window-buttongroup {
    height: 35px;
}

#header, #main {
    position: unset;
}

#header {
    height: 30px;
    min-height: unset !important;
}

Currently I didn't add or remove any item from or to the mail toolbar. If you did you can change the width here:

.mainbar .toolbar-mailbar {
    width: 855px;
}

and here:

#browser:has(.toolbar-mailbar) #tabs-tabbar-container {
    margin-left: 865px; // add 10px more
    margin-right: -50px;
}

oudstand

Since the urlbar can be a bit small sometimes, I've made a solution for it. If you add this code, the urlbar extends its width when the omni dropdown appears (if you start typing or press arrow down). If you remove .mainbar:has(.OmniDropdown) then the width of the urlbar changes as soon as it gets focused.

.UrlBar-AddressField {    
    /* added animation for extending and reducing the width */
    transition: .2s ease-in-out !important;
}

 .mainbar:has(.OmniDropdown) .UrlBar-AddressField:focus-within {
    /* extends the width of the url bar addressfield while it is focused */
    width: 40vw !important;
    height: 30px;
}

.OmniDropdown {
    margin-top: -3px;
}

Before extending width:

After extending width:

Like this it's easier to read the url and see autocomplete.