Tabs On Bottom For 1.8



  • 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.



  • @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 0_1538426534716_vivaldi2.PNG


  • Moderator

    @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.



  • @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;  }
    

  • Moderator

    @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.



  • 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: 0_1552215760745_2019-03-10_145549.png
    i'd wish it to become this: 0_1552215844089_2019-03-10_1455492.png
    or at least this: 0_1552215977648_2019-03-10_1455493.png


  • Ambassador

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

    Untitled 2.jpg



  • @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/

  • Ambassador

    @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;
    }
    


  • @baris-sehri I haven't written this.



  • @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.


  • Ambassador

    @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 😢



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


  • Ambassador

    @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.



  • @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.


  • Ambassador

    @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?



  • @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.



  • 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


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.