Moving the close tab button



  • I use tabs from vertical side panel, along with a mod for overlay and activating panel with mouse hover (code can be found here: https://forum.vivaldi.net/topic/10590/overlay-panels?page=4).

    The thing is that I want to move the "x" close tab button, to the left of the title. Being on the right, many times I want to close a tab, I loose focus on the panel if I accidentally hover the mouse on the page.

    Any code/help for this? Thanks.



  • @kallon You should dig deeper into the overlay panel thread. We have a variety of advanced codes in there, OPs one is rudimentary.

    Anyway, what you want is easy to achieve, look at this code and adjust, it's all been done before.
    https://forum.vivaldi.net/topic/16265/moving-buttons-right-or-address-bar-left/22



  • Since @luetage has already addressed your close button, I'll just add, that if you find that you are losing focus on the tab container too quickly, you can add a longer delay to the animation.

    Here's an example using a transition for the container on the left side. The second number represents the delay before the transition takes place and the first is the duration of the transition.

    #tabs-container.left {
        position: absolute !important;
        z-index: 5;
        height: 100%;
        width: 230px !important;
        background-color: var(--colorBgDarker) !important;
        opacity: .99;
    }
    #tabs-container.left {
        left: -230px;
        transition: left 2s ease 1s !important;
    }
    
    #tabs-container.left:hover {
        left: 0;
        transition: left .5s ease .3s !important;
    }
    


  • @luetage Thanks for your reply, maybe I wasn't clear. I don't use tab bar, I use the window panel. What I want to achieve is to move the close tab button of the window panel tabs.
    tab-header .close does not refer to this. Am I right?

    Regarding the overlay panels I am not using OP's one, I have edited my post to the last page just in case.



  • @kallon Oh yeah, I didn't catch that. Has never been done before, you can be the first ^^

    Try to find the selector with devtools and then similar code should do the trick. If you run into problems just ask.
    https://forum.vivaldi.net/topic/16684/inspecting-vivaldi-s-ui-with-devtools/


 

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