Audio tab animation



  • This is a request from the Vivaldi reddit. It animates the background of a tab with active audio. The code used is very similar to the pulsating "loading" button.

    @keyframes greenwave {
    	from {background: var(--colorAccentBgFaded);}
    	to {background: #bbffff;}
    }
    
    @keyframes greenactive {
    	from {background: var(--colorBg);}
    	to {background: #bbffff;}
    }
    
    .tab.audio-on {
    	animation-name: greenwave;	
    }
    
    .tab.active.audio-on {
    	animation-name: greenactive;
    }
    
    .tab.audio-on, .tab.active.audio-on {
    	animation-duration: 2s;
    	animation-iteration-count: infinite;
    	animation-direction: alternate;
    	animation-timing-function: ease-in;
    }
    


  • Thanks for sharing.

    This can work with animations turned off as well

    .tab.audio-on, .tab.active.audio-on {
        animation-duration: 2s !important;
        animation-iteration-count: infinite !important;
        animation-direction: alternate !important;
        animation-timing-function: ease-in !important;
    }


  • Hmm, what do you mean, with animations turned off in settings?



  • Correct. I find them unresponsive more often than not. But mods like this can be useful


Log in to reply
 

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