Question on "about:" pages and "Library" window tweaks

[Zabooby]

Could you point me to the parts of your code that is able to style the "about:" pages and "Library" window?

[Guerra24]

Hello!

For about: it's here: https://github.com/Guerra24/Firefox-UWP-Style/blob/nightly/css/pagesContent.css

And for Library and others is here: https://github.com/Guerra24/Firefox-UWP-Style/blob/nightly/css/pagesChrome.css

[Zabooby]

Thank you for the answer!

For Library are the relevant lines starting from this line?

[Guerra24]

Yes, that is correct.

[Zabooby]

How do I change the background colour of boxes in about: pages

[Guerra24]

That depends on the element and page, you can use dev tools on those pages to see the HTML. For the language list it should be #translations-manage-install-list. For about:support those are just tables, the root table element has the background rules.

[Zabooby]

How do I find out what to put on the line above the element I'm trying to change? For example, would I use something like:

:root {
#translations-manage-install-list
}

or

@-moz-document url-prefix("about:") {
#translations-manage-install-list
}

or something else.

Also how were you able to change the langauge list box, I couldn't find #translations-manage-install-list anywhere?

[Guerra24]

@-moz-document url-prefix("about:preferences") {
    #translations-manage-install-list {
        /* rules here */
    }
}

Because I don't set it there, it pulls the background color from the --in-content-box-background variable and I just set that to transparent here https://github.com/Guerra24/Firefox-UWP-Style/blob/nightly/css/styles/sun-valley/pagesContent-dark.css#L12C58-L12C58.

The moz-document is there only to limit CSS to specific pages, just in case somewhere else there is another element with the same ID or class.

[Zabooby]

Ohh, thanks for the explanation, I get it now.

One more question, is @-moz-document url-prefix("chrome://"), regexp("about:(?!blank).*") { the same as @-moz-document url-prefix("about:") { ?

[Guerra24]

No, the first one checks for either URLs starting with chrome:// or any about: page except about:blank, the second one only checks if a URL starts with about:.

[Zabooby]

Thanks for answering all of my questions!

Btw some of your tooltips don't match your theme:

You could add this ag.css loader and your matching tooltips settings if you want.

[Guerra24]

Yeah... I'm aware JS loaders exist, but those require configuration and I want something that works out-of-the-box as-is, which so far does not exist.