Firefox Customs

64 readers

16 users here now

Chat with us!

Post your unsupported Firefox customizations here!

From the makers of r/FirefoxCSS

Links

Related

Firefox

Rules

Posts must have flair!
Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
When posting large amount of code use a service dedicated to hosting text snippets, such as pastebin, hastebin, github gist or equivalent. Relatively short snippets can be wrapped in code-block for inline viewing.
Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

founded 1 year ago

MODERATORS

[email protected]

MrOtherGuy

Is it possible to change the font color of a n active tab to an animation svg? (fedia.io)

submitted 3 months ago* (last edited 3 months ago) by [email protected] to c/[email protected]

2 comments fedilink hide all child comments

Hey I have an svg of a color animation, it's basically a gradient that loops around. And was wondering if it's possible to change the font color of the active tab to that svg animation.

I've been trying to do it with:

.tabbrowser-tab[selected] .tab-content{ text-color: url(../icons/animation.svg) !important; }

but can't get it to work.

Thanks for any help!

you are viewing a single comment's thread
view the rest of the comments

[–] MrOtherGuy 2 points 3 months ago* (last edited 3 months ago) (1 children)

I'm not sure about how the svg would work here (though it might work fine), but you can do that with just CSS as well:

@keyframes tab-gradient-anim{
  from{ background-position-x: 0% }
  to{ background-position-x: 200% }
}
.tab-content[selected]{
  background-image: linear-gradient(
        90deg,
        rgb(255, 0, 0) 0%,
        rgb(255, 154, 0) 12%,
        rgb(208, 222, 33) 24%,
        rgb(79, 220, 74) 35%,
        rgb(63, 218, 216) 44%,
        rgb(47, 201, 226) 50%,
        rgb(28, 127, 238) 60%,
        rgb(95, 21, 242) 70%,
        rgb(186, 12, 248) 80%,
        rgb(251, 7, 217) 90%,
        rgb(255, 0, 0) 100%
    );
  background-repeat: repeat-x;
  background-size: 200% 100%;
  animation: tab-gradient-anim 2s infinite steps(20);
  background-clip: text;
  color: transparent;
}
.tab-content[selected]:-moz-window-inactive{
  animation-play-state: paused;
}

You could use linear instead of steps(20) for interpolation method, but linear causes rather massive GPU use because it is updated at your framerate - steps(20) instead updates only 20 times during the 2 seconds interval - which, although not as smooth, is barely noticeable change perceptually but uses way less GPU.

Here I've also added rule to stop the animation when window becomes inactive - otherwise the animation runs for all of them. Feel free to remove that last part, but if you had - say 5 windows, the animation would then use about 5x GPU.

[–] [email protected] 1 points 3 months ago

Perfect!

Thank you so much!