Installation pages do not have forms.css enqueued

[dan@…]

Should it be? When I did enqueue it during the install page formatting got screwed up and i'm not sure I see what the difference is. See the following attachments:

[dan@…]

with forms css

[dan@…]

without forms css

[dan@…]

Of course the formatting issue differ depending on the order forms is enqueued, Is there some specific css in forms.css that is needed that can be coped to install.css ?

[bassgang]

@iseulde Can you please clarify what exact styles are missing from forms.css.

How should it look like?

[iseulde]

At first glance it looks like the input styles are missing. You can see the default browser focus style and checkbox style in the first screenshot. If the password input doesn't look good, then it'd need to be adjusted.

[bassgang]

Attached is a patch which mirrors relevant styles from "wp-admin/css/forms.css" into "wp-admin/css/install.css".
Find also before and after screenshots attached, the changes are mainly about the checkbox at the bottom of the form.

[bassgang]

Add form styles to install.css

[bassgang]

Install page Step 2 without form styles 01

[bassgang]

Install page Step 2 without form styles 02

[bassgang]

Install page Step 2 with form styles 01

[bassgang]

Install page Step 2 with form styles 02

[DrewAPicture]

Assigning to mark the good-first-bug as "claimed".

See 35776.patch​

[cdog]

See 35776.diff​ for a simpler approach. It imports core forms.css styles and then adjusts some form controls properties to match the new styles.

[SergeyBiryukov]

In 45673:

Upgrade/Install: Bring some consistency to installation screen styles.

• Include forms.css and l10n.css, for consistency with login screen and other admin screens.
• Remove redundant @import directives from login.css for files already declared as dependencies.
• Adjust margin on password strength meter for consistency with other fields.
• Increase font size for "You will need this password to log in" notice.
• Fix misaligned icon on "Hide" button for the password.

Props iseulde, dan@…, bassgang, cdog, johnbillion, nmenescardi, mukesh27, SergeyBiryukov.
Fixes #35776, #47757, #47758.

[SergeyBiryukov]

In 45844:

Upgrade/Install: Bring some consistency to installation screen styles.

• Include forms.css and l10n.css, for consistency with login screen and other admin screens.
• Remove redundant @import directives from login.css for files already declared as dependencies.
• Adjust margin on password strength meter for consistency with other fields.
• Increase font size for "You will need this password to log in" notice.
• Fix misaligned icon on "Hide" button for the password.

Props iseulde, dan@…, bassgang, cdog, johnbillion, nmenescardi, mukesh27, alpipego, SergeyBiryukov.
Merges [45673] to the 5.2 branch.
Fixes #35776, #43483, #47757, #47758.

[JeffPaul]

@SergeyBiryukov looks like the prop in r45673 and r45844 should have been to danmicamediacom.

[SergeyBiryukov]

Replying to JeffPaul:

looks like the prop in r45673 and r45844 should have been to danmicamediacom.

Thanks for bringing that up!

Previously, the rule of thumb was to always use the name that Trac shows:
​https://wordpress.slack.com/archives/C18723MQ8/p1471699137000226

However, there are indeed some quirks when the username has spaces or is an email address:
​https://wordpress.slack.com/archives/C18723MQ8/p1513306349000049

So apparently user_nicename should be used instead, but it's not currently available for Trac templates.

I'll double check the correct username when updating the Credits API for 5.2.3.

[afercia]

Looks like on the install page > step 1, fhe password input field and button need some love in the responsive view. Didn't look great in wp 5.1 as well. See screenshots below.

I think it can be addressed in #42888 together with other improvements. /Cc @SergeyBiryukov

[afercia]

Install screen on current trunk 5.3

[afercia]

Install screen on WP 5.1