WordPress/wp-admin/css/login.css
joedolson 7464bdc47a Administration: Improve contrast and consistency of focus styles.
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.
Built from https://develop.svn.wordpress.org/trunk@57553


git-svn-id: http://core.svn.wordpress.org/trunk@57054 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-02-07 16:56:13 +00:00

493 lines
7.9 KiB
CSS

html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #f0f0f1;
min-width: 0;
color: #3c434a;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 13px;
line-height: 1.4;
}
a {
color: #2271b1;
transition-property: border, background, color;
transition-duration: .05s;
transition-timing-function: ease-in-out;
}
a {
outline: 0;
}
a:hover,
a:active {
color: #135e96;
}
a:focus {
color: #043959;
box-shadow: 0 0 0 2px #2271b1;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
p {
line-height: 1.5;
}
.login .message,
.login .notice,
.login .success {
border-left: 4px solid #72aee6;
padding: 12px;
margin-left: 0;
margin-bottom: 20px;
background-color: #fff;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
word-wrap: break-word;
}
.login .success {
border-left-color: #00a32a;
}
/* Match border color from common.css */
.login .notice-error {
border-left-color: #d63638;
}
.login .login-error-list {
list-style: none;
}
.login .login-error-list li + li {
margin-top: 4px;
}
#loginform p.submit,
.login-action-lostpassword p.submit {
border: none;
margin: -10px 0 20px; /* May want to revisit this */
}
.login * {
margin: 0;
padding: 0;
}
.login .input::-ms-clear {
display: none;
}
.login .pw-weak {
margin-bottom: 15px;
}
.login .button.wp-hide-pw {
background: transparent;
border: 1px solid transparent;
box-shadow: none;
font-size: 14px;
line-height: 2;
width: 2.5rem;
height: 2.5rem;
min-width: 40px;
min-height: 40px;
margin: 0;
padding: 5px 9px;
position: absolute;
right: 0;
top: 0;
}
.login .button.wp-hide-pw:hover {
background: transparent;
}
.login .button.wp-hide-pw:focus {
background: transparent;
border-color: #3582c4;
box-shadow: 0 0 0 1px #3582c4;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
.login .button.wp-hide-pw:active {
background: transparent;
box-shadow: none;
transform: none;
}
.login .button.wp-hide-pw .dashicons {
width: 1.25rem;
height: 1.25rem;
top: 0.25rem;
}
.login .wp-pwd {
position: relative;
}
.no-js .hide-if-no-js {
display: none;
}
.login form {
margin-top: 20px;
margin-left: 0;
padding: 26px 24px 34px;
font-weight: 400;
overflow: hidden;
background: #fff;
border: 1px solid #c3c4c7;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.login form.shake {
animation: shake 0.2s cubic-bezier(.19,.49,.38,.79) both;
animation-iteration-count: 3;
transform: translateX(0);
}
@keyframes shake {
25% {
transform: translateX(-20px);
}
75% {
transform: translateX(20px);
}
100% {
transform: translateX(0);
}
}
@media (prefers-reduced-motion: reduce) {
.login form.shake {
animation: none;
transform: none;
}
}
.login-action-confirm_admin_email #login {
width: 60vw;
max-width: 650px;
margin-top: -2vh;
}
@media screen and (max-width: 782px) {
.login-action-confirm_admin_email #login {
box-sizing: border-box;
margin-top: 0;
padding-left: 4vw;
padding-right: 4vw;
width: 100vw;
}
}
.login form .forgetmenot {
font-weight: 400;
float: left;
margin-bottom: 0;
}
.login .button-primary {
float: right;
}
.login .reset-pass-submit {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.login .reset-pass-submit .button {
display: inline-block;
float: none;
margin-bottom: 6px;
}
.login .admin-email-confirm-form .submit {
text-align: center;
}
.admin-email__later {
text-align: left;
}
.login form p.admin-email__details {
margin: 1.1em 0;
}
.login h1.admin-email__heading {
border-bottom: 1px #f0f0f1 solid;
color: #50575e;
font-weight: normal;
padding-bottom: 0.5em;
text-align: left;
}
.admin-email__actions div {
padding-top: 1.5em;
}
.login .admin-email__actions .button-primary {
float: none;
margin-left: 0.25em;
margin-right: 0.25em;
}
#login form p {
margin-bottom: 0;
}
#login form .indicator-hint,
#login #reg_passmail {
margin-bottom: 16px;
}
#login form p.submit {
margin: 0;
padding: 0;
}
.login label {
font-size: 14px;
line-height: 1.5;
display: inline-block;
margin-bottom: 3px;
}
.login .forgetmenot label,
.login .pw-weak label {
line-height: 1.5;
vertical-align: baseline;
}
.login h1 {
text-align: center;
}
.login h1 a {
background-image: url(../images/w-logo-blue.png?ver=20131202);
background-image: none, url(../images/wordpress-logo.svg?ver=20131107);
background-size: 84px;
background-position: center top;
background-repeat: no-repeat;
color: #3c434a;
height: 84px;
font-size: 20px;
font-weight: 400;
line-height: 1.3;
margin: 0 auto 25px;
padding: 0;
text-decoration: none;
width: 84px;
text-indent: -9999px;
outline: none;
overflow: hidden;
display: block;
}
#login {
width: 320px;
padding: 5% 0 0;
margin: auto;
}
.login #nav,
.login #backtoblog {
font-size: 13px;
padding: 0 24px;
}
.login #nav {
margin: 24px 0 0;
}
#backtoblog {
margin: 16px 0;
word-wrap: break-word;
}
.login #nav a,
.login #backtoblog a {
text-decoration: none;
color: #50575e;
}
.login #nav a:hover,
.login #backtoblog a:hover,
.login h1 a:hover {
color: #135e96;
}
.login #nav a:focus,
.login #backtoblog a:focus,
.login h1 a:focus {
color: #043959;
}
.login .privacy-policy-page-link {
text-align: center;
width: 100%;
margin: 3em 0 2em;
}
.login form .input,
.login input[type="text"],
.login input[type="password"] {
font-size: 24px;
line-height: 1.33333333; /* 32px */
width: 100%;
border-width: 0.0625rem;
padding: 0.1875rem 0.3125rem; /* 3px 5px */
margin: 0 6px 16px 0;
min-height: 40px;
max-height: none;
}
.login input.password-input {
font-family: Consolas, Monaco, monospace;
}
.js.login input.password-input {
padding-right: 2.5rem;
}
.login form .input,
.login input[type="text"],
.login form input[type="checkbox"] {
background: #fff;
}
.js.login-action-resetpass input[type="text"],
.js.login-action-resetpass input[type="password"],
.js.login-action-rp input[type="text"],
.js.login-action-rp input[type="password"] {
margin-bottom: 0;
}
.login #pass-strength-result {
font-weight: 600;
margin: -1px 5px 16px 0;
padding: 6px 5px;
text-align: center;
width: 100%;
}
body.interim-login {
height: auto;
}
.interim-login #login {
padding: 0;
margin: 5px auto 20px;
}
.interim-login.login h1 a {
width: auto;
}
.interim-login #login_error,
.interim-login.login .message {
margin: 0 0 16px;
}
.interim-login.login form {
margin: 0;
}
/* Hide visually but not from screen readers */
.screen-reader-text,
.screen-reader-text span {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */
}
/* Hide the Edge "reveal password" native button */
input::-ms-reveal {
display: none;
}
#language-switcher {
padding: 0;
overflow: visible;
background: none;
border: none;
box-shadow: none;
}
#language-switcher select {
margin-right: 0.25em;
}
.language-switcher {
margin: 0 auto;
padding: 0 0 24px;
text-align: center;
}
.language-switcher label {
margin-right: 0.25em;
}
.language-switcher label .dashicons {
width: auto;
height: auto;
}
.login .language-switcher .button {
margin-bottom: 0;
}
@media screen and (max-height: 550px) {
#login {
padding: 20px 0;
}
#language-switcher {
margin-top: 0;
}
}
@media screen and (max-width: 782px) {
.interim-login input[type=checkbox] {
width: 1rem;
height: 1rem;
}
.interim-login input[type=checkbox]:checked:before {
width: 1.3125rem;
height: 1.3125rem;
margin: -0.1875rem 0 0 -0.25rem;
}
#language-switcher label,
#language-switcher select {
margin-right: 0;
}
}
@media screen and (max-width: 400px) {
.login .language-switcher .button {
display: block;
margin: 5px auto 0;
}
}