Change the color of this separators in about:preferences in the translation section?

Hello!

How could I change the separator color in about:preferences in the translation section?

When I put my code in userContent in @ -moz-document url("about:preferences#general")

It doesn't work, I guess that it's because it opens up in a new window, but when I put it outside of it it works, the only problem with that is that I don't know if it will also affect webpages.

Thanks!

1 points · 6 comments · view on lemmy.world

6 Comments

KnowItAll@fedia.io · 1 pts · 2y (3 replies)

Why in userContent?
The code belongs in userChrome!
Look at the answer of your post here:

https://www.reddit.com/r/FirefoxCSS/comments/181dzn9/change_the_color_of_this_separators_in/

Zethasu@fedia.io · 1 pts · 2y (2 replies)

It doesn’t work.

But isn’t this code in userContent because about:preferences is a webpage?

KnowItAll@fedia.io · 1 pts · 2y (1 reply)

No! This is an 'modal-dialog', it is not a window nor a website, and it is a part of chrome!
https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal

Zethasu@fedia.io · 1 pts · 2y

But it doesn’t work in user chrome, it works in userContent but only if I don’t put it inside @ moz something. I don’t know why, I even created a new css file to do it and nothing.

@MrOtherGuy any ideas on what to do?

Godie@lemmy.world · 1 pts · 2y

Use this format to englobe all urls in about:preferences page:

@-moz-document url-prefix(about:preferences){...}

Edit: maybe you want something like this:

window, dialog{
    --in-content-border-color: red !important;
}

Zethasu@fedia.io · 1 pts · 2y

I managed to do it with this:

@-moz-document url("chrome://browser/content/preferences/dialogs/translations.xhtml"){
 #alwaysTranslateLanguagesTree > treecols:nth-child(1) > treecol:nth-child(1) {
  color: red !important;
 }
}

in userContent outside of @-moz-document url("about:preferences")