diff -r 3d4e9c994f10 -r a86126ab1dd4 wp/wp-admin/css/login.css --- a/wp/wp-admin/css/login.css Tue Oct 22 16:11:46 2019 +0200 +++ b/wp/wp-admin/css/login.css Tue Dec 15 13:49:49 2020 +0100 @@ -11,7 +11,7 @@ color: #444; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; - line-height: 1.4em; + line-height: 1.4; } a { @@ -27,7 +27,7 @@ a:hover, a:active { - color: #00a0d2; + color: #006799; } a:focus { @@ -37,10 +37,6 @@ 0 0 2px 1px rgba(30, 140, 190, 0.8); } -.ie8 a:focus { - outline: #5b9dd9 solid 1px; -} - p { line-height: 1.5; } @@ -75,14 +71,6 @@ padding: 0; } -.login .password-input-wrapper { - position: relative; -} - -.login .input.password-input { - margin: 0; -} - .login .input::-ms-clear { display: none; } @@ -91,13 +79,16 @@ margin-bottom: 15px; } -.login .button.button-secondary { +.login .button.wp-hide-pw { background: transparent; border: 1px solid transparent; box-shadow: none; font-size: 14px; line-height: 2; - height: auto; + width: 2.5rem; + height: 2.5rem; + min-width: 40px; + min-height: 40px; margin: 0; padding: 5px 9px; position: absolute; @@ -105,22 +96,38 @@ top: 0; } -.login .button.button-secondary:hover { +.login .button.wp-hide-pw:hover { background: transparent; } -.login .button.button-secondary:focus { +.login .button.wp-hide-pw:focus { background: transparent; - border-color: #5b9dd9; - box-shadow: 0 0 3px rgba(0, 115, 170, 0.8); + border-color: #007cba; + box-shadow: 0 0 0 1px #007cba; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } -.login .button.button-secondary:active { +.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; @@ -128,7 +135,49 @@ font-weight: 400; overflow: hidden; background: #fff; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13); + border: 1px solid #ccd0d4; + 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 { @@ -141,6 +190,36 @@ float: right; } +.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 rgb(241, 241, 241) solid; + color: rgb(95, 95, 95); + 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; } @@ -152,11 +231,15 @@ .login label { font-size: 14px; + line-height: 1.5; + display: inline-block; + margin-bottom: 3px; } -.login form .forgetmenot label { - font-size: 12px; - line-height: 19px; +.login .forgetmenot label, +.login .pw-weak label { + line-height: 1.5; + vertical-align: baseline; } .login h1 { @@ -173,7 +256,7 @@ height: 84px; font-size: 20px; font-weight: 400; - line-height: 1.3em; + line-height: 1.3; margin: 0 auto 25px; padding: 0; text-decoration: none; @@ -213,7 +296,7 @@ .login #nav a:hover, .login #backtoblog a:hover, .login h1 a:hover { - color: #00a0d2; + color: #006799; } .login #nav a:focus, @@ -229,16 +312,22 @@ } .login form .input, -.login input[type="text"] { +.login input[type="text"], +.login input[type="password"] { font-size: 24px; + line-height: 1.33333333; /* 32px */ width: 100%; - padding: 5px; - margin: 2px 6px 16px 0; + border-width: 0.0625rem; + padding: 0.1875rem 0.3125rem; /* 3px 5px */ + margin: 0 6px 16px 0; + min-height: 40px; + max-height: none; } -.login-action-rp form .input, -.login-action-rp input[type="text"] { - padding: 5px 45px 5px 5px; +.js.login input.password-input, +.js.login-action-rp form .input, +.js.login-action-rp input[type="text"] { + padding-right: 2.5rem; } .login form .input, @@ -247,14 +336,9 @@ background: #fbfbfb; } -.ie7 .login form .input, -.ie8 .login form .input { - font-family: sans-serif; -} - -.login-action-rp input[type="text"] { - box-shadow: none; - margin: 0; +.js.login-action-rp input[type="text"], +.js.login-action-rp input[type="password"] { + margin-bottom: 0; } .login #pass-strength-result { @@ -287,6 +371,27 @@ 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; +} + @-ms-viewport { width: device-width; } @@ -297,15 +402,16 @@ } } + @media screen and (max-width: 782px) { .interim-login input[type=checkbox] { - height: 16px; - width: 16px; + width: 1rem; + height: 1rem; } .interim-login input[type=checkbox]:checked:before { - width: 16px; - font: normal 21px/1 dashicons; - margin: -3px 0 0 -4px; + width: 1.3125rem; + height: 1.3125rem; + margin: -0.1875rem 0 0 -0.25rem; } }