mirror of
https://github.com/WordPress/WordPress.git
synced 2024-07-02 17:55:07 +02:00
f9b60d3334
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. Built from https://develop.svn.wordpress.org/trunk@47813 git-svn-id: http://core.svn.wordpress.org/trunk@47589 1a063a9b-81f0-0310-95a4-ce76da25c4cd
418 lines
6.7 KiB
CSS
418 lines
6.7 KiB
CSS
html,
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
background: #f1f1f1;
|
|
min-width: 0;
|
|
color: #444;
|
|
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: #0073aa;
|
|
transition-property: border, background, color;
|
|
transition-duration: .05s;
|
|
transition-timing-function: ease-in-out;
|
|
}
|
|
|
|
a {
|
|
outline: 0;
|
|
}
|
|
|
|
a:hover,
|
|
a:active {
|
|
color: #00a0d2;
|
|
}
|
|
|
|
a:focus {
|
|
color: #124964;
|
|
box-shadow:
|
|
0 0 0 1px #5b9dd9,
|
|
0 0 2px 1px rgba(30, 140, 190, 0.8);
|
|
}
|
|
|
|
p {
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.login .message,
|
|
.login .success,
|
|
.login #login_error {
|
|
border-left: 4px solid #00a0d2;
|
|
padding: 12px;
|
|
margin-left: 0;
|
|
margin-bottom: 20px;
|
|
background-color: #fff;
|
|
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.login .success {
|
|
border-left-color: #46b450;
|
|
}
|
|
|
|
.login #login_error {
|
|
border-left-color: #dc3232;
|
|
}
|
|
|
|
#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: #007cba;
|
|
box-shadow: 0 0 0 1px #007cba;
|
|
/* 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 46px;
|
|
font-weight: 400;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
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 {
|
|
font-weight: 400;
|
|
float: left;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.login .button-primary {
|
|
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;
|
|
}
|
|
|
|
#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: #444;
|
|
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: 8% 0 0;
|
|
margin: auto;
|
|
}
|
|
|
|
.login #nav,
|
|
.login #backtoblog {
|
|
font-size: 13px;
|
|
padding: 0 24px 0;
|
|
}
|
|
|
|
.login #nav {
|
|
margin: 24px 0 0 0;
|
|
}
|
|
|
|
#backtoblog {
|
|
margin: 16px 0;
|
|
}
|
|
|
|
.login #nav a,
|
|
.login #backtoblog a {
|
|
text-decoration: none;
|
|
color: #555d66;
|
|
}
|
|
|
|
.login #nav a:hover,
|
|
.login #backtoblog a:hover,
|
|
.login h1 a:hover {
|
|
color: #00a0d2;
|
|
}
|
|
|
|
.login #nav a:focus,
|
|
.login #backtoblog a:focus,
|
|
.login h1 a:focus {
|
|
color: #124964;
|
|
}
|
|
|
|
.login .privacy-policy-page-link {
|
|
text-align: center;
|
|
width: 100%;
|
|
margin: 5em 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;
|
|
}
|
|
|
|
.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,
|
|
.login input[type="text"],
|
|
.login form input[type="checkbox"] {
|
|
background: #fbfbfb;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
@-ms-viewport {
|
|
width: device-width;
|
|
}
|
|
|
|
@media screen and (max-height: 550px) {
|
|
#login {
|
|
padding: 20px 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;
|
|
}
|
|
}
|