Guerra24 / Firefox-UWP-Style

Sun Valley + MDL2 Theme for Firefox
MIT License
406 stars 9 forks source link

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

Closed Zabooby closed 11 months ago

Zabooby commented 11 months ago

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

Guerra24 commented 11 months ago

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 commented 11 months ago

Thank you for the answer!

For Library are the relevant lines starting from this line?

Guerra24 commented 11 months ago

Yes, that is correct.

Zabooby commented 11 months ago

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

Guerra24 commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago
@-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 commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

Thanks for answering all of my questions!

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

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

Guerra24 commented 11 months ago

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.