Apply new focus styles from WordPress 5.3 more broadly. An updated focus style for form inputs, buttons, and link styled as buttons was added in WordPress 5.3; this commit makes other focus styles consistent with those changes so they meet accessibility standards for color contrast.
Props johnbillion, kebbet, joedolson, afercia.
Fixes#51870.
git-svn-id: https://develop.svn.wordpress.org/trunk@57553 602fd350-edb4-49c9-b593-d223f7449a82
Improve markup on Login and Registration errors. Use list markup for multiple issues, paragraph when only one to reduce semantic burden in the most common case. Normalize classes and markup for wrapper using `wp_admin_notice()` and `wp_get_admin_notice()` functions. Move definition of those functions from `wp-admin\includes\misc.php` to `wp-includes\functions.php`. Move tests to functions group.
Props extendwings, sabernhardt, afercia, lukecavanagh, rianrietveld, oglekler, sergeybiryukov, costdev, joedolson.
Fixes#30685.
git-svn-id: https://develop.svn.wordpress.org/trunk@56654 602fd350-edb4-49c9-b593-d223f7449a82
This fixes an alignement issue on small screens in the language switcher button displayed on the Login screen.
Follow-up to [52058], [52417].
Props sabernhardt.
Fixes#57617.
git-svn-id: https://develop.svn.wordpress.org/trunk@55582 602fd350-edb4-49c9-b593-d223f7449a82
Adds `word-wrap: break-word` to wrap long usernames in the login's error message. Using `word-wrap` instead of `word-break` for better cross-browser support and to avoid the deprecation (see Ref below).
For consistency, also changes `#backtoblog`.
Ref:
* `word-break: break-word` deprecation https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#syntax
Follow-up to [51108].
Props soniakash, audrasjb, sabernhardt, hellofromTonya, desrosj, ocean90.
Fixes#37617.
git-svn-id: https://develop.svn.wordpress.org/trunk@52174 602fd350-edb4-49c9-b593-d223f7449a82
Load a language switcher on the login and registration screens that allows users to choose any already-installed language. Set user locale on registration.
Props johnbillion, Nikschavan, afercia, sabernhardt, garrett-eclipse, keyur5, paaljoachim, Clorith, tobifjellner.
Fixes#43700.
git-svn-id: https://develop.svn.wordpress.org/trunk@52058 602fd350-edb4-49c9-b593-d223f7449a82
Remove units when the value is zero. Combine redundant values in shorthand declarations.
This was generated with `stylelint --fix` and a custom config (see #53866).
Props ankitmaru, audrasjb, pbiron, ayeshrajans, hareesh-pillai, netweb, mukesh27.
Fixes#53866.
git-svn-id: https://develop.svn.wordpress.org/trunk@51727 602fd350-edb4-49c9-b593-d223f7449a82
When typing a password, the input field should use a monospace font. It's easier to distinguish letters in monospace fonts, which makes it easier to accurately read passwords.
Props robdxw, utz119, hedgefield, hareesh-pillai.
Fixes#40275.
git-svn-id: https://develop.svn.wordpress.org/trunk@50846 602fd350-edb4-49c9-b593-d223f7449a82
This officially removes support for Internet Explorer 11 in the CSS files run through the build process in Core.
Individual tickets should be opened for removing each manually maintained area of the code base targeting IE11.
The resulting changes to CSS files are included in this commit.
Fixes#53077.
git-svn-id: https://develop.svn.wordpress.org/trunk@50784 602fd350-edb4-49c9-b593-d223f7449a82
Replace the float CSS removed in [50569], which is used to align the login & register buttons.
Props mukesh27, audrasjb.
Fixes#52834.
git-svn-id: https://develop.svn.wordpress.org/trunk@50577 602fd350-edb4-49c9-b593-d223f7449a82
Prevent misalignment of "generate password" and "save password" buttons on the password reset screen on narrow screens and in languages requiring longer text than English.
Props audrasjb, grapplerulrich, ryelle.
Fixes#52834.
git-svn-id: https://develop.svn.wordpress.org/trunk@50569 602fd350-edb4-49c9-b593-d223f7449a82
This is part of a larger project in cleaning up core's admin CSS. This collapses all colors used in the CSS to one of 12 blues, greens, reds, and yellows, 13 grays, pure black, and pure white. The colors are perceptually uniform from light to dark, half of each range has a 4.5 or higher contrast against white, the other half has a 4.5 or higher contrast against black.
Standardizing on this set of colors will help contributors make consistent, accessible design decisions. The full color palette can be seen here: https://codepen.io/ryelle/full/WNGVEjw
Props notlaura, danfarrow, kburgoine, drw158, audrasjb, Joen, hedgefield, ibdz, melchoyce.
See #49999.
git-svn-id: https://develop.svn.wordpress.org/trunk@50025 602fd350-edb4-49c9-b593-d223f7449a82
For a number of years, WordPress has been using a `#00a0d2` blue shade for the links `:hover` state. This blue shade doesn't have a sufficient color contrast with the various (too many) background colors used in the admin interface.
The new `#006799` blue shade is part of the official WordPress color palette and does have a sufficient color contrast with most of the admin backgrounds.
Props ryokuhi, audrasjb, joedolson, mapk.
See #47682.
git-svn-id: https://develop.svn.wordpress.org/trunk@48368 602fd350-edb4-49c9-b593-d223f7449a82
This shake should not occur when the user has opted to reduce motion, for example by selecting the "Reduce motion" option in macOS' preferences or unselecting "Show animations in Windows" in Windows' preferences.
Follow-up to [47226].
Props eddystile, johnbillion, sabernhardt, afercia, audrasjb.
Fixes#49723.
git-svn-id: https://develop.svn.wordpress.org/trunk@47813 602fd350-edb4-49c9-b593-d223f7449a82
Add `max-width` on desktop view and some padding on smaller screens.
Props chetan200891, azaozz, Clorith, afragen.
Fixes#48607.
git-svn-id: https://develop.svn.wordpress.org/trunk@47772 602fd350-edb4-49c9-b593-d223f7449a82
Thew new dotted outline for the links focus style introduced in [46241] doesn't appear to be ready to guarantee a good indication of focus.
It was agreed to restore the previous links focus style and postpone exploration for a new style to the next release cycle.
Partially reverts [46241] and [46293].
See #34904, #47153.
git-svn-id: https://develop.svn.wordpress.org/trunk@46425 602fd350-edb4-49c9-b593-d223f7449a82
- allows the login input fields to better scale with text
- improves the input fields layout on Internet Explorer 11
- uses the new focus style on the "Show password" button
- adjusts the CSS for the interim login
See #47153.
See #42888.
git-svn-id: https://develop.svn.wordpress.org/trunk@46371 602fd350-edb4-49c9-b593-d223f7449a82
The ability for users to see the password they're typing improves usability and accessibility of the login users flow.
- brings the login screen in line with the same feature already used in the New User, Edit User, and Reset Password pages
- improves association of labels and input fields by using explicit association with `for` / `id` attributes
- slightly increases the "Remember me" label font size
Props johnbillion, Iceable, audrasjb, joyously, adamsilverstein, boemedia, DrewAPicture, shadyvb, birgire, peterwilsoncc, pento, anevins, davidbaumwald, whyisjake, afercia.
Fixes#42888.
git-svn-id: https://develop.svn.wordpress.org/trunk@46256 602fd350-edb4-49c9-b593-d223f7449a82
- Fix wording of the HTML title.
- Add hidden `(opens in a new tab)` to links that need it.
- Add the `screen-reader-text` CSS class to login.css.
- Add another translator comment.
Props afercia.
See #46349.
git-svn-id: https://develop.svn.wordpress.org/trunk@46203 602fd350-edb4-49c9-b593-d223f7449a82
* 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@micamedia.com, bassgang, cdog, johnbillion, nmenescardi, mukesh27, SergeyBiryukov.
Fixes#35776, #47757, #47758.
git-svn-id: https://develop.svn.wordpress.org/trunk@45673 602fd350-edb4-49c9-b593-d223f7449a82
The right padding added in [44895] needs to be set only on the input fields in the Reset Password screen and exclude other login screens.
Amends [44895].
Fixes#42853.
git-svn-id: https://develop.svn.wordpress.org/trunk@45157 602fd350-edb4-49c9-b593-d223f7449a82
- makes the "Cancel" button always visible: this allows to generate a new password also on small screens
- moves focus back to the Generate Password button when closing the form
- changes the password reset show/hide button from a clickable `<span>` element to a real `<button>` element
- improves the CSS
Props janak007, afercia.
Fixes#42853.
git-svn-id: https://develop.svn.wordpress.org/trunk@44895 602fd350-edb4-49c9-b593-d223f7449a82
Also, fixes some indentation where spaces were used instead of tabs.
Props nielslange, mukesh27.
Fixes#45937.
git-svn-id: https://develop.svn.wordpress.org/trunk@44791 602fd350-edb4-49c9-b593-d223f7449a82
- properties should be followed by a colon and a space
- media queries shouldn't use spaces within parenthesis
- indentation should use tabs instead of spaces or mixed spaces / tabs
- the content property should use double quotes
- no double spaces
Props nadim0988, afercia.
Fixes#45185.
git-svn-id: https://develop.svn.wordpress.org/trunk@44637 602fd350-edb4-49c9-b593-d223f7449a82
Previously, the link used absolute positioning, in order to stick it at the bottom of the page. That was done in order to create visual separation between it and the "action" links, like "Lost Your Password?"
The absolute positioning can cause conflicts in some situations, though. For example, if extra text or error notices are added above the form, then the login link would be positioned on top of other elements.
Switching to relative positioning with extra margins avoids those issues, while maintaining the visual separation between the "action" links and the privacy policy link.
Props imath, melchoyce, desrosj, xkon, iandunn.
Fixes#44046.
git-svn-id: https://develop.svn.wordpress.org/trunk@43274 602fd350-edb4-49c9-b593-d223f7449a82
Personal data collection is more likely for registered users than casual visitors, and the privacy policy might have been updated since a user last logged in. Those changes could impact the collection of personal data from registered users, so it makes sense to provide a link to the policy before users log in.
Props voneff, xkon, melchoyce, chetan200891, desrosj.
Fixes#43721.
git-svn-id: https://develop.svn.wordpress.org/trunk@43120 602fd350-edb4-49c9-b593-d223f7449a82
Extends the password features added in 4.3 to the password reset flow.
Props johnbillion, manolis09, umesh.nevase, Nikschavan.
git-svn-id: https://develop.svn.wordpress.org/trunk@41556 602fd350-edb4-49c9-b593-d223f7449a82
WordPress no longer supports many old old browsers: https://make.wordpress.org/core/2017/04/23/target-browser-coverage/
This also removes alot of no longer necessary CSS. It served us well, but we are never getting back together with IE8,9,10.
So, in the (paraphrased) words of Taylor Swift:
I remember when we dropped support the first time
Saying, "This is it, I've had enough, " 'cause like
We hadn't seen many users in a month
When you said you needed flexbox. (What?)
Then you postMessage again and say
"IE8, I miss you and I swear I'm gonna change, trust me."
Remember how that lasted for a day?
I say, "I hate the box model, " we break up, you call me, "I love css-grids."
Ooh, we called it off again last night
But ooh, this time I'm telling you, I'm telling you
We are never ever ever supporting IE 8,9,10,
We are never ever ever supporting IE 8,9,10,
You go talk to EDGE, talk to my FIREFOX, talk to CHROME
But we are never ever ever ever getting back together
Like, ever...
Fixes#37651.
Props stunnedbeast, netweb, jorbin.
git-svn-id: https://develop.svn.wordpress.org/trunk@41062 602fd350-edb4-49c9-b593-d223f7449a82
Making behavior changes based on some broad definition of what mobile is rarely, if ever, makes sense. Each bit of functionality should be more clearly targeted, whether that's for screen size, performance, or some kind of touch capability.
props akibjorklund.
see #33704.
git-svn-id: https://develop.svn.wordpress.org/trunk@38739 602fd350-edb4-49c9-b593-d223f7449a82
When Open Sans was in use, the `300`, `400`, and `600` weights were loaded. `400` is the equivalent of `normal`; however, `bold` is equivalent to `700`, not `600`. With the move to system fonts, we need to be specific rather than relying on the lack of a `700` weight. Not all system fonts include a `600` weight; in those instances, they will use the `bold`/`700` weight.
The WordPress CSS Coding Standards have been updated accordingly.
props coderste.
see #36753.
git-svn-id: https://develop.svn.wordpress.org/trunk@37740 602fd350-edb4-49c9-b593-d223f7449a82
Rejoice, for your admins will feel more native to your surrounding computing environment and likely load faster, especially when offline, as they no longer have to talk to The Google Overlord.
At the time of introduction in 3.8, there were not good system fonts common to all platforms at the time. In the years since, Windows, Android, OS X, iOS, Firefox OS, and various flavors of Linux have all gotten their own (good) system UI fonts.
There will definitely be visual bugs, mainly around alignment and spacing; these should be documented and reported on the ticket and fixed more atomically so that our current and future selves have a better understanding of what happened and why.
The style remains registered, as it is almost certainly in use by themes and plugins.
props mattmiklic.
see #36753.
git-svn-id: https://develop.svn.wordpress.org/trunk@37361 602fd350-edb4-49c9-b593-d223f7449a82
Setting the background color on `body` is more flexible than on the `html` element. This patch assigns the background color to `body` instead of the `html` element.
Fixes#35314
git-svn-id: https://develop.svn.wordpress.org/trunk@37321 602fd350-edb4-49c9-b593-d223f7449a82
These colored backgrounds can be accessed by adding the `.notice-alt` class to a notice.
There is also now a large version when using the `.notice-large` class, and a `.notice-title` class that is appropriate for headline text within a large notice.
props paulwilde, hugobaeta, melchoyce.
fixes#32244.
git-svn-id: https://develop.svn.wordpress.org/trunk@34365 602fd350-edb4-49c9-b593-d223f7449a82
Joe Dolson