Removing a line between tab bar and address bar

killy9999

Using CSS code found on the forums I modded Vivaldi to display tabs bar below the address bar and customized the color of the tab bar to match that of the address bar:

/* Tabs below address bar */
#tabs-container.bottom {
    order: -1;
    padding-bottom: 0px !important;
    background-color: var(--colorAccentBg); /* Tab bar color */
    padding-top: 0px !important;
    border: 0 !important;
}

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

/* tab group indicators*/
.tabs-bottom .tab-strip .tab-group-indicator {
    bottom: 28px !important;
};

There's just one minor glitch remaining: a one-pixel-wide line between the address bar and the tab bar. Here's what it looks like: https://i.imgur.com/X8E7qcv.png I've spent nearly two hours trying to find a CSS element it belongs to and I just couldn't figure it out. Help appreciated.

nomadic

@killy9999 Hey don't know if you found this in your search, but I helped another user do something similar. I also added a few other tweaks to make it work better:

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

This should be all you need in the CSS file:

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

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

.toolbar.toolbar-addressbar {
  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);
}

killy9999

Thanks! I believe my CSS code was based on yours. Now everything works like a charm.

A question: what are fillets? I experimented with removing /* Fix Fillets */ section but don't see any difference. (Maybe another thing I'm not using, like bookmarks tab or corner rounding.)

nomadic

@killy9999 Happy to help!

Yeah, the fillets are only there if you have corner rounding in your theme:

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

One thing I noticed with this corner rounding is there is a slight artifact from moving the tabs to the bottom of the screen and then using css to move it to the top. There is a small fillet that is supposed to make the active tab blend into the border on the opposite end of the rounded corners, but we switched which corners were rounded. This means it just results in an odd visual defect.

You can fix them or you can just remove them. I will give the styles for both options below.

Fixed Fillet:

killy9999

Ah, that's why I didn't see them. Thanks.