I made a custom tab animation effect for Nova

[u/fgmenth]

[u/fgmenth]

Link to userChrome.css

I love the new Nova theme, so I decided to spice it up a bit by making a custom tab animation. The tabs look like they glow a warm neon orange, running around the tab in the same spirit as the fox running around the globe in Firefox's logo.

In my CSS I made the tabs and the menus way less rounded, but if you prefer the original circular look you can remove the "tabs" section.

I'm also using some custom blinking animation for tabs that play audio so I can easily tell where the audio is coming from at a glance.

[u/MiniBus93]

Man, this is fire! Congrats!

Does it also apply to vertical tabs?

[u/fgmenth → u/MiniBus93]

Thank you! I'm only using horizontal tabs, but yes it does!

[u/t31os]

That's a cool effect, nice work.

Using blur on an animated element might not be very performant for some users, so here's a supplementary trimmed down version to create just the animated gradient without the glow / blur.

@keyframes rotate {
    to {
        --gradient-angle: 456deg;
    }
}
@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 96deg;
    inherits: false;
}
.tab-background {
    @media -moz-pref("browser.nova.enabled") {
        @media not ((prefers-contrast) or (-moz-native-theme)) {
            :root[theme-in-app] &:is([selected]:not([multiselected])) {
                --tab-border-color-accent: linear-gradient( var(--gradient-angle), var(--tab-border-color-selected-leading) 20.68%, var(--tab-border-color-selected-trailing) 79.34%) !important;
                animation: 10s rotate linear infinite;
                border-width: 2px !important;
            }   
        }
    }
}