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


 

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