Tabs On Bottom For 1.8

luetage

Tabs Below Address Bar for 2.0

#tabs-container.bottom {
    order: -1;
    border-top: none;
    padding-top: var(--padding);
    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;
}

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

CSS only. Please remember that you still need to set tab position to bottom in Vivaldi settings for this mod to work at all.

eilegz

@luetage

@luetage said in Tabs On Bottom For 1.8:

#tabs-container.bottom {
order: -1;
border-top: none;
padding-top: var(--padding);
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;
}

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

Thanks a lot it worked perfectly

edit: wondering if theres a way to hide the line between the address bar and the tab bar

pafflick

@eilegz said in Tabs On Bottom For 1.8:

edit: wondering if theres a way to hide the line between the address bar and the tab bar !

Try this:

.address-top .toolbar-addressbar:after { background-color: transparent !important; }

I haven't checked if it works with this mod, I just took it from here. If it doesn't work, let me know.

eilegz

@pafflick said in Tabs On Bottom For 1.8:

@eilegz said in Tabs On Bottom For 1.8:

edit: wondering if theres a way to hide the line between the address bar and the tab bar !

Try this:
.address-top .toolbar-addressbar:after { background-color: transparent !important; }
I haven't checked if it works with this mod, I just took it from here. If it doesn't work, let me know.

based on the one you put didnt work but im added the border bottom and now it works, THANKS

.bookmark-bar-top .bookmark-bar { border-bottom-width: 0 !important; }
.address-top .toolbar-addressbar:after { 

background-color: transparent !important;
border-bottom-width: 0 !important;  }

pafflick

@eilegz Are you sure about that? I've just checked and the .toolbar-addressbar:after pseudo-element doesn't have any border and thus adding border-bottom-width attribute shouldn't actually change anything. Or perhaps the border was coming from the .bookmark-bar?
That is strange to me, nevertheless, I'm glad that you achieved what you wanted.

reyn

tried few variants but all have some flaws.. so did anybody succeed in putting address bar above tabs with drop-down menus appearing above everything?(not covered by tabs/appearing below them)

now i have this:
i'd wish it to become this:
or at least this:

baris.sehri

@luetage I couldn't make the code work in latest snapshot. is it possible to achieve something like this in vivaldi?

Untitled 2.jpg

luetage

@baris-sehri As mentioned, the code works for me. Please check 2 things:

test the CSS without any other modifications running
make sure you have selected Bottom in vivaldi://settings/tabs/

baris.sehri

@luetage

make sure you have selected Bottom in vivaldi://settings/tabs/

thank you. yes, it is working now. but, it's not working properly with the auto-hide bookmarks bar css. which is this, I don't know if this one is also yours or not...

/* Auto hide bookmark bar */
#browser:not(.color-behind-tabs-off) .toolbar-addressbar {
    background: inherit;
}

#browser.tabs-top.address-top.bookmark-bar-top .toolbar-addressbar,
#browser.tabs-top.address-bottom.bookmark-bar-bottom .toolbar-addressbar,
#browser.tabs-top.address-bottom.bookmark-bar-top .toolbar-addressbar,
#browser.tabs-bottom.address-top.bookmark-bar-top .toolbar-addressbar,
#browser.tabs-bottom.address-bottom.bookmark-bar-bottom .toolbar-addressbar {
    z-index: 2;
}

#browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar,
#browser.tabs-top.address-bottom.bookmark-bar-bottom .bookmark-bar,
#browser.tabs-top.address-bottom.bookmark-bar-top .bookmark-bar,
#browser.tabs-bottom.address-top.bookmark-bar-top .bookmark-bar,
#browser.tabs-bottom.address-bottom.bookmark-bar-bottom .bookmark-bar {
    position: absolute !important;
    width: 100%;
    transition: transform 0.2s ease-in-out !important;
    z-index: 1;
}

/* tabs-top address-top bookmark-bar-top */
#browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar {
    top: 34px;
    transform: translateY(-100%);
}

#browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar:hover,
#browser.tabs-top.address-top.bookmark-bar-top .toolbar-addressbar:hover ~ .bookmark-bar,
#browser.tabs-top.address-top.bookmark-bar-top #header:hover ~ #main .bookmark-bar {
    transform: translateY(0);
}

/* tabs-top address-bottom bookmark-bar-bottom */
#browser.tabs-top.address-bottom.bookmark-bar-bottom .bookmark-bar {
    bottom: 34px;
    transform: translateY(100%);
}

#browser.tabs-top.address-bottom.bookmark-bar-bottom .bookmark-bar:hover,
#browser.tabs-top.address-bottom.bookmark-bar-bottom .toolbar-addressbar:hover ~ .bookmark-bar {
    transform: translateY(0);
}

/* tabs-top address-bottom bookmark-bar-top */
#browser.tabs-top.address-bottom.bookmark-bar-top .bookmark-bar {
    top: 0;
    transform: translateY(-100%);
}

#browser.tabs-top.address-bottom.bookmark-bar-top .bookmark-bar:hover,
#browser.tabs-top.address-bottom.bookmark-bar-top #header:hover ~ #main .bookmark-bar {
    transform: translateY(0);
}

/* tabs-bottom address-top bookmark-bar-top */
#browser.tabs-bottom.address-top.bookmark-bar-top .bookmark-bar {
    top: 34px;
    transform: translateY(-100%);
}

#browser.tabs-bottom.address-top.bookmark-bar-top .bookmark-bar:hover,
#browser.tabs-bottom.address-top.bookmark-bar-top .toolbar-addressbar:hover ~ .bookmark-bar {
    transform: translateY(0);
}

/* tabs-bottom address-bottom bookmark-bar-bottom */
#browser.tabs-bottom.address-bottom.bookmark-bar-bottom .bookmark-bar {
    bottom: 64px;
    transform: translateY(100%);
}

#browser.tabs-bottom.address-bottom.bookmark-bar-bottom.stacks-on:not(.tabs-at-edge) .bookmark-bar {
    bottom: calc(64px + var(--padding));
    transform: translateY(100%);
}

#browser.tabs-bottom.address-bottom.bookmark-bar-bottom .bookmark-bar:hover,
#browser.tabs-bottom.address-bottom.bookmark-bar-bottom .toolbar-addressbar:hover ~ .bookmark-bar {
    transform: translateY(0);
}

.webpanel-header {
    z-index: 0;
}

luetage

@baris-sehri I haven't written this.

luetage

@baris-sehri You could try and take all the selectors out that contain .tabs-bottom, because this should be the reason the mods conflict. You pick tabs bottom in settings, but the tabs are truly on top.

baris.sehri

@luetage

take all the selectors out that contain .tabs-bottom

I tried this in both css separately, but couldn't make it work. either I'm doing something wrong or it's not happening

luetage

@baris-sehri You only remove it from the other css, the one I wrote needs the tabs-bottom parts obviously.

baris.sehri

@luetage

You only remove it from the other css, the one I wrote needs the tabs-bottom parts obviously.

yes I know, but I couldn't make it. thanks.

luetage

@baris-sehri I tried it now, using both mods together without any change works, but the bookmarks bar only shows when hovering beneath the address bar and the bookmarks bar will overlay the tabs bar when being triggered. If this isn't the case for you, then you have yet another mod interfering. So far so good.

My remark about removing the tab-bottom parts can't work, because the tabs-top instructions can't influence the tabs bar in this configuration of course, because browser is set to tabs bottom. You need custom code for this, but since only the autohide bookmarks bar feature needs to be changed, I suggest you try to change it yourself or ask the original author about it. But mind you that it isn't their responsibility either, because you want to run a unique setup, which needs individual maintaining initially and whenever Vivaldi changes relevant code.

baris.sehri

@luetage exactly, they are overlapping and when it happens it's not very possible to click on bookmarks bar items if there's no tab underneath them. where can I learn to do this by myself? are there any documentations?

luetage

@baris-sehri Learn by doing, CSS isn't a programming language. When you want to know how to do something, just search on the web, https://stackoverflow.com/ is your friend. The only thing you need on the Vivaldi side of things is inspecting UI with devtools.

eilegz

seems that its not working anymore on the latest version

edit: the new code that its working here
https://forum.vivaldi.net/topic/42105/tabs-below-address-bar-and-overlay-menus/56?page=3

dude99

Here is my alternate version of Top Addressbar above Top Tabbar CSS mod

Tabs On Bottom For 1.8

Tabs Below Address Bar for 2.0

Sorry, I'm currently hiatus from updating any of my CSS mod until further notice...