Accent transitions



  • I created this mod after seeing this feature request: Accent Color from Active Page needs a Gradient Transition Between Tabs


    PREVIEW

    0_1540798273642_ezgif.com-optimize (1).gif

    More

    0_1540798302405_ezgif.com-optimize (2).gif 0_1540798326891_ezgif.com-optimize (3).gif 0_1540798374770_ezgif.com-optimize (4).gif


    All this mod does is include a transition time while moving between tabs, the default is set to 0.7s, but it can easily be changed to any desired amount of time. This mod can be broken down into multiple parts to accomodate the type of theme that you use:

    /* Adds transition to the window accent */
    .color-behind-tabs-on #tabs-container {
        transition: background-color 0.7s;
    }
    #tabs-container.top,
    #tabs-container.bottom {
        transition: background-color 0.7s, border-color 0.7s;
    }
    
    /* Adds transition to window accent when tabs are not on the top/bottom */
    #browser:not(.tabs-top).address-top #header {
        transition: background-color 0.7s;
    }
    
    /* Adds transition to the window accent when tabs are not on top/bottom and the address bar is hidden */
    #browser.color-behind-tabs-on.tabs-top,
    #browser + div.color-behind-tabs-on.tabs-top,
    #browser + div + div.color-behind-tabs-on.tabs-top,
    #browser.color-behind-tabs-off:not(.tabs-top),
    #browser + div.color-behind-tabs-off:not(.tabs-top),
    #browser + div + div.color-behind-tabs-off:not(.tabs-top) {
        transition: background-color 0.7s;
    }
    
    /* Adds transition to the address bar accent */
    .color-behind-tabs-off .toolbar-addressbar,
    .color-behind-tabs-off .toolbar-mailbar {
        transition: background 0.7s;
    }
    
    /* Adds transition to the address bar accent when it is on the bottom or it is hidden */
    .color-behind-tabs-off #tabs-container.top,
    .color-behind-tabs-off #tabs-container.bottom {
        transition: border-color 0.7s;
    }
    

    BONUS
    This is really just for tabs, nothing to do with the accent color.

    /* Adds transition to the active tab background color */
    #browser .tab-position .tab.active {
        transition: background-color 0.4s, color 0.4s;
    }
    
    /* Adds transition to non-active tabs background color */
    .tab-position .tab.tab.tab:not(.active) {
        transition: background-color 0.4s, color 0.4s;
    }
    
    /* Adds transition to the tab stack indicators */
    .color-behind-tabs-on.stacks-on .tab-strip .tab.active .tab-group-indicator .tab-indicator.active {
        transition: background-color 0.4s;
    }
    .stacks-on .tab-strip .tab.active .tab-group-indicator .tab-indicator.active {
        transition: background-color 0.4s;
    }
    .color-behind-tabs-on.stacks-on .tab-strip .tab .tab-group-indicator .tab-indicator.active, .stacks-on .tab-strip .tab .tab-group-indicator .tab-indicator.active.background-image {
        transition: background-color 0.4s;
    }
    .stacks-on .tab-strip .tab .tab-group-indicator .tab-indicator.active {
        transition: background-color 0.4s;
    }
    .color-behind-tabs-on.stacks-on .tab-strip .tab .tab-group-indicator .tab-indicator {
        transition: background-color 0.4s;
    }
    .color-behind-tabs-on.stacks-on .tab-strip .tab .tab-group-indicator .tab-indicator:hover {
        transition: background-color 0.4s;
    }
    .stacks-on .tab-strip .tab .tab-group-indicator .tab-indicator {
        transition: background-color 0.4s;
    }
    .stacks-on .tab-strip .tab .tab-group-indicator .tab-indicator:hover {
        transition: background-color 0.4s;
    }
    

  • Moderator

    @altcode said in Accent transitions:

    Don't know how to display gifs here.

    Regular GIFs or APNG are fine. Video gifv format is not supported.



  • @pesala Thank you Pesala. I tried to directly upload a regular GIF to the forum, but that always seemed to fail.



  • @altcode
    If you have a resized in the code of the gif you've uploaded (added by Vivaldi forum automatically when the gif is large), just erase that resized and it should work.



  • Looks good. As an uploaded gif:

    0_1540732436489_2018-10-28_13-12-55.gif

    One note is that if there is no window background image set to display, the animation doesn't occur. I suspect this is due to the gradient that is added. in its place. With a background image set, it works fine.



  • @lonm That's strange, would you mind testing this with tabs at the bottom? I can only reproduce this whenever the tabs are set at the top.

    @ornorm said in Accent transitions:

    @altcode
    If you have a resized in the code of the gif you've uploaded (added by Vivaldi forum automatically when the gif is large), just erase that resized and it should work.

    I don't know how to do that. I used a web tool to convert a video into a gif.



  • @altcode
    When you upload your gif to the forum, you should see that kind of code :
    0_1540735825854_14a6fd0b-b3ea-4530-9b91-7fbf3b604a05-image.png
    When it's uploaded, you get something like :
    ![0_1540735711119_VivaldiZoom.gif]/assets/uploads/files/1540735462939-vivaldizoom-resized.gif which gives in the preview pane something like :
    0_1540735982334_378c8e7f-a680-415e-ba4f-84b337a18d25-image.png

    What I suggest is to erase resized from the code generated by Vivaldi forum :
    ![0_1540735711119_VivaldiZoom.gif]/assets/uploads/files/1540735462939-vivaldizoom-.gif



  • @ornorm Ah, I see. Then it did upload. It's fixed now, thank you!



  • @altcode It works fine when tabs are on the bottom. Strange.


  • Vivaldi Ambassador

    @altcode This is the kind of feature you don't think you want untill you see it, then you just add it. Nice idea!



  • @masterleo29 It wasn't my idea, it was by @rejzor. Go to the feature request so that one day it may be an official feature!



  • @LonM magnifique


 

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