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

help to change the icons used in the animation: reload-stop button. (self.FirefoxCSS)

submitted 9 months ago by Godie to c/[email protected]

2 comments fedilink hide all child comments

hi, I use this to change the icons for reload and stop button:

#reload-button {
    list-style-image: url("../icons/reload.svg") !important;
}
#stop-button {
    list-style-image: url("../icons/stop.svg") !important;
}

but when the icon start the animation the icons are bigger and cause a unwanted zoom, it's possible to change the icons used in the animation?

top 2 comments

sorted by: hot top controversial new old

[–] MrOtherGuy 1 points 9 months ago (1 children)

What exactly do you want to do? Create your own animation frames? Or just disable the animation?

You can find layout rules for the animations here and from that you can figure out that to display a custom image frame during the animation in both directions you could write something like this (in addition to the list-style-images for the static images):

:is(#reload-button,#stop-button) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image{
  background: no-repeat center url("chrome://browser/skin/home.svg") !important;
  animation: none !important;
  width: 100% !important;
  transform: none !important;
}

If you want to define your own animation frames then it would probably be easiest to create customized copies from chrome://browser/skin/stop-to-reload.svg and .../reload-to-stop.svg

[–] Godie 1 points 9 months ago

thanks, I don't know if I could be able to edit a svg animated, maybe I just delete that animation. ❤️‍🔥