tabs below address bar and overlay menus

barefootcoder

@luetage said in tabs below address bar and overlay menus:

@barefootcoder Some selectors changed, that’s the reason it stopped working. Looking up selectors is relatively easy: https://forum.vivaldi.net/topic/16684/inspecting-vivaldi-s-ui-with-devtools. Just read the latest posts in this very topic for an example…

@potmeklecbohdan said in tabs below address bar and overlay menus:

@barefootcoder Read the discussion above your post.

Honestly, guys, I did read the thread before posting. I applied all the changes that I found in @nomadic's various posts, and also enabled the experimental thing (which I've never had to do before to make it work, but I figured I should follow the directions here anyway). I was hoping the stuff I posted would have made that clear. I still can't see any differences in what I currently have (which is up above) vs what nomadic (and even GruntZ) has in their posts. If anyone here can see any diffs, please let me know.

AFA the thread on inspecting Vivaldi's UI, I confess I'm not smart enough to see how to apply that knowledge to this problem. But I'm happy to learn more if anyone wants to show me how.

nomadic

@barefootcoder As @luetage and @potmeklecbohdan said, there was a change in the CSS selectors. The 2 posts above yours in this thread talk about the solution.

From the CSS I posted earlier in the thread, there is only one change that needs to be made (unless I missed something)

Old	New
`.toolbar.toolbar-addressbar { order: -3; }`	`.toolbar.UrlBar { order: -3; }`

Doing a find for .toolbar-addressbar and then replace each with .UrlBar should work.

I also got rid of some padding that seems no longer necessary.

Here is the new CSS:

Expand to see

  #tabs-container.bottom {
    order: -1;
    border-top: none;
    padding-bottom: 0px !important;
  }

  /* bookmarks bar above tabs */
  .bookmark-bar {
    order: -2;
  }

  .toolbar.UrlBar {
    order: -3;
  }

  /* corner rounding */
  .tabs-bottom .tab-position .tab {
    border-top-left-radius: var(--radiusHalf);
    border-top-right-radius: var(--radiusHalf);
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
  }

  /* Fix Fillets */
  .tabs-bottom .tab.active:not(.marked):not(.tab-mini):before {
    top: unset;
    bottom: 0;
    -webkit-mask-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 70%, #000 73%);
  }
  .tabs-bottom .tab.active:not(.marked):not(.tab-mini):after {
    top: unset;
    bottom: 0;
    -webkit-mask-image: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 70%, #000 73%);
  }

  /* tab group indicators*/
  .tabs-bottom .tab-strip .tab-group-indicator {
    bottom: 28px !important;
  }
  /* Remove line between address bar and bookmark bar */
  .address-top .toolbar-mainbar:after {
    content: unset;
  }

  /* Remove line between bookmark bar and tabs */
  .bookmark-bar {
    border-bottom-width: 0px !important;
  }

  .bookmark-bar {
    background-color: var(--colorAccentBg);
  }
  .color-behind-tabs-off .bookmark-bar button {
    background-color: var(--colorAccentBg);
  }

  .color-behind-tabs-on .bookmark-bar {
    background-color: var(--colorBg);
  }
  .color-behind-tabs-on .bookmark-bar button {
    background-color: var(--colorBg);
  }

barefootcoder

@nomadic said in tabs below address bar and overlay menus:

@barefootcoder As @luetage and @potmeklecbohdan said, there was a change in the CSS selectors. The 2 posts above yours in this thread talk about the solution.

From the CSS I posted earlier in the thread, there is only one change that needs to be made (unless I missed something)

Old New

.toolbar.toolbar-addressbar { order: -3; } .toolbar.UrlBar { order: -3; }

Ah, good eye ... I swear I had changed that, but I guess I missed it, or copy-pasted something on top of it or something. Thx for helping me find it! That totally fixes the problem.

eilegz

@nomadic thanks working perfectly, i havent use vivaldi in a while and the latest version 3.3 broke with previous code, its a pain that both firefox and vivaldi the need to edit the css to have tab below the address bar

TommyTulpe

Vivaldi 3.6 ignores the code again, now what? Thanks!

nomadic

@TommyTulpe It looks like #tabs-container has changed to #tabs-tabbar-container.

There also is a new bit of CSS for the fillet that needs to be overridden:

.tabs-bottom .tab.active:not(.marked):not(.tab-mini):after {
  transform: unset;
}

jdie1320

@nomadic

I don't understand what to do with the 2nd part of your post ?
Trying to get tabs below address bar.
Thanks for your reply,

nomadic

@jdie1320 That would just need to be added on to the end of the old CSS file.

The whole CSS is in this post further up in this thread. It includes all the changes I made for v3.6.

jdie1320

@nomadic

That's what the doctor ordered.
I missed your posts on Page 3.
Thank you very much, sir.

barefootcoder

In case anyone is like me and has difficulty stringing together all the bits and bobs from various posts, here's a distillation of the thread thus far. This is currently working for me in version 3.6, thanks almost entirely to @nomadic . (Warning: will not work on previous versions.)

/* https://forum.vivaldi.net/topic/15834 */
/* ... later ... */
/* https://forum.vivaldi.net/topic/42105 */

#tabs-tabbar-container.bottom {
    order: -1;
    border-top: none;
    padding-bottom: 0px !important;
}

/* bookmarks bar above tabs */
.bookmark-bar {
    order: -2;
}

.toolbar.UrlBar {
    order: -3;
}

/* newly required for 3.6 */
.tabs-bottom .tab.active:not(.marked):not(.tab-mini):after {
  transform: unset;
}

/* corner rounding */
.tabs-bottom .tab-position .tab {
    border-top-left-radius: var(--radiusHalf);
    border-top-right-radius: var(--radiusHalf);
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
}

/* Fix Fillets */
.tabs-bottom .tab.active:not(.marked):not(.tab-mini):before {
    top: unset;
    bottom: 0;
    -webkit-mask-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 70%, #000 73%);
}
.tabs-bottom .tab.active:not(.marked):not(.tab-mini):after {
    top: unset;
    bottom: 0;
    -webkit-mask-image: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 70%, #000 73%);
}

/* tab group indicators*/
.tabs-bottom .tab-strip .tab-group-indicator {
    bottom: 28px !important;
}
/* Remove line between address bar and bookmark bar */
.address-top .toolbar-mainbar:after {
    content: unset;
}

/* Remove line between bookmark bar and tabs */
.bookmark-bar {
    border-bottom-width: 0px !important;
}

.bookmark-bar {
    background-color: var(--colorAccentBg);
}
.color-behind-tabs-off .bookmark-bar button {
    background-color: var(--colorAccentBg);
}

.color-behind-tabs-on .bookmark-bar {
    background-color: var(--colorBg);
}
.color-behind-tabs-on .bookmark-bar button {
    background-color: var(--colorBg);
}

If anyone sees anything I've picked up that's wrong, or no longer necessary, I would love to hear your input.

eilegz

@barefootcoder thanks works for 3.7 updated today from 3.5 and it wasnt working

RainbowMagicMarker

This is great and very helpful, but can someone help me make it extend to multiple rows? I have 63 tabs open and it's very squished with only one row of tabs.

BloodyElf

I support the request above. Please help to make the tabs can be arranged in several row.
Sorry for the bad english.

MrMobodies

@barefootcoder: Worked for me for 3.8 and thank you very much.

Just went into settings and selected the tabs at bottom and it went under the bookmarks as expected.

alt text

barefootcoder

I'm glad this has worked for folks! Again, though: nomadic deserves most of the credit. I just cobbled together all the parts they posted.

AFA the ability to use multiple rows, that's beyond my meager skills. Someone more skilled with CSS would need to take a crack at that one.

Zakalwe

4.0 version has totally f*** up tabs below address bar CSS stuff. As I'm not a dev, I'm coming back to 3.8.

luetage

@zakalwe Very bad idea. Downgrading will likely mess up your profile. It can potentially make the browser unusable and is discouraged. I hope you do regular backups of your profile path…

Pesala

@zakalwe People need to understand that CSS or JS mods can break with any update, or break other features.

They can solve multiple issues, and offer a work around for missing features. They come with a warning: Use at your own risk. They are not officially supported.

I use this code:

/*Hide Triangle Bookmark Icon*/
.panel-bookmarks .vivaldi-tree .tree-row.folder .expand-icon svg {
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
     fill: transparent !important;
    transform: none !important;
}

It does what it says, but it also prevents me from selecting bookmark folders, which is a slight annoyance when it comes to emptying the Trash in Bookmarks.

SallyK

@pesala What is you say is absolutely true, and it's a risk we take - it's still annoying though. Tabs above the address bar have never made sense, and that all modern browsers insist on putting them there and not giving us the option to put them in the most sensible place is one of the minor but persistent frustrations of using the internet.

I'm just thankful for the people who know the software well enough to give us the option to put them back where they belong, and I'm hoping that will be as soon as possible.

Zakalwe

@luetage said in tabs below address bar and overlay menus:

@zakalwe Very bad idea. Downgrading will likely mess up your profile. It can potentially make the browser unusable and is discouraged. I hope you do regular backups of your profile path…

@luetage I got a saved profile. I reinstalled the last 3.8, put my saved profile and no issue.