[Enhancement] Add styling to settings dialogs

[66BA9Q-ME49]

The theme currently does not apply any custom styling to dialog popups within the settings, causing them to use the default browser styling.

[Lockframe]

Hello.

Thank you for bringing this up, but I'm not sure it'd be possible to restyle those dialogues, as neither additions to custom.css nor userContent.css seem to have a proper effect.

Would you happen to know a way around this?

[66BA9Q-ME49]

Firefox-UWP-Style managed to do that:

And they even managed to edit dialogs:

[66BA9Q-ME49]

Found it!

Your approach

If I understand well, you use @-moz-document url-prefix(about:) to select only Firefox's pages, avoiding styling websites.
When I write this:

@-moz-document url-prefix(about:) {
	/* All your code */
	menulist {
		background-color: red !important;
	}
}

It appears like this:

Firefox-UWP-Style's approach

In Firefox-UWP-Style, instead of using @-moz-document url-prefix(about:) they use @-moz-document regexp("chrome:\/\/(?!devtools).*"), regexp("about:(?!(blank|devtools)).*") which will apply the changes to all UI elements of Firefox except devtools.
Apparently, Firefox uses chrome:// URLs to load more "internal" UI parts.
So when I append this to your code:

/* All your code */
@-moz-document regexp("chrome:\/\/(?!devtools).*"), regexp("about:(?!(blank|devtools)).*") {
	menulist {
		background-color: red !important;
	}
}

The settings dialogs are correctly styled:

Solution

Replace this line (userContent.css#L186) by this:

@-moz-document regexp("chrome:\/\/(?!devtools).*"), regexp("about:(?!(blank|devtools)).*") {

This excludes everything related to devtools because, unless you add specific compatibility, the styling corrupts a bit the devtools UI:

If you're going to fix devtools, just replace the line by this:

@-moz-document url-prefix(chrome:), url-prefix(about:) {

[Lockframe]

Thank you, you are a lifesaver!

[66BA9Q-ME49]

I installed the new version, and I love the new dialogs! You did a great work!
Here is a list of the glitches I noticed:

The Import Data menu is transparent and the dropdown is not completely styled

The bottom of many dialogs is not visible until I resize them

The Clear Data dialog has an non-styled surface

You can also see another example of dialog cropping in this image

Some lists and tables have a styling issue

The number inputs in the Connexion Settings dialog are not styled

The table in the Saved Addresses and Saved payment methods dialog is not styled

Icon and color selectors in containers settings have radio-box styling

[Lockframe]

Are there any other dialogs I've missed after the last commit?

[66BA9Q-ME49]

Hello!
You did a wonderful work!
Here are the problems I noticed in the last commit:

• The up/down buttons of the number inputs in the Connection Settings dialog are still not styled and there is no spacing between the labels and the inputs
  

• The table in the Saved Addresses and Saved payment methods dialogs are not styled
  

• And the Applications table in General still has styling issues despite the great work on other tables
  

[Lockframe]

Have I missed any other dialogs after the latest commit?

[66BA9Q-ME49]

There are still some issues with Saved Addresses and Saved payment methods dialogs.
Add/edit dialogs:

Selected table items: