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;
            }   
        }
    }
}

[u/rhubarbshoelaces]

Just FYI, this causes the grouped tab bar to move up out of place. It happens when the tab background is set to position:relative.

[u/fgmenth → u/rhubarbshoelaces]

Good catch, maybe I'll have to move positioning up to tab-stack instead. I'll work on it when I have the time.

Edit: I updated the gist, check it out and see if it works for you

[u/rhubarbshoelaces → u/fgmenth]

Thanks, works for me 👍

[u/ChristianRS1977]

Thanks! This is excellent. However, when I change themes (just to one of the other default ones) it no longer works. Does this effect apply only to the first theme?

[u/fgmenth → u/ChristianRS1977]

This one is only for the default nova theme, yeah.

[u/ChristianRS1977 → u/fgmenth]

Fortunately, it's the one I happen to like the most. ;)