mirror of
https://github.com/WordPress/WordPress.git
synced 2024-09-18 18:41:23 +02:00
491a21da64
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. Built from https://develop.svn.wordpress.org/trunk@56654 git-svn-id: http://core.svn.wordpress.org/trunk@56166 1a063a9b-81f0-0310-95a4-ce76da25c4cd
494 lines
7.8 KiB
CSS
494 lines
7.8 KiB
CSS
/*! This file is auto-generated */
|
|
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 1px #4f94d4,
|
|
0 0 2px 1px rgba(79, 148, 212, 0.8);
|
|
}
|
|
|
|
p {
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.login .message,
|
|
.login .notice,
|
|
.login .success {
|
|
border-right: 4px solid #72aee6;
|
|
padding: 12px;
|
|
margin-right: 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-right-color: #00a32a;
|
|
}
|
|
|
|
/* Match border color from common.css */
|
|
.login .notice-error {
|
|
border-right-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;
|
|
left: 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-right: 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-right: 4vw;
|
|
padding-left: 4vw;
|
|
width: 100vw;
|
|
}
|
|
}
|
|
|
|
.login form .forgetmenot {
|
|
font-weight: 400;
|
|
float: right;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.login .button-primary {
|
|
float: left;
|
|
}
|
|
|
|
.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: right;
|
|
}
|
|
|
|
.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: right;
|
|
}
|
|
|
|
.admin-email__actions div {
|
|
padding-top: 1.5em;
|
|
}
|
|
|
|
.login .admin-email__actions .button-primary {
|
|
float: none;
|
|
margin-right: 0.25em;
|
|
margin-left: 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 0 16px 6px;
|
|
min-height: 40px;
|
|
max-height: none;
|
|
}
|
|
|
|
.login input.password-input {
|
|
font-family: Consolas, Monaco, monospace;
|
|
}
|
|
|
|
.js.login input.password-input {
|
|
padding-left: 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 0 16px 5px;
|
|
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-left: 0.25em;
|
|
}
|
|
|
|
.language-switcher {
|
|
margin: 0 auto;
|
|
padding: 0 0 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
.language-switcher label {
|
|
margin-left: 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.25rem 0 0;
|
|
}
|
|
|
|
#language-switcher label,
|
|
#language-switcher select {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 400px) {
|
|
.login .language-switcher .button {
|
|
display: block;
|
|
margin: 5px auto 0;
|
|
}
|
|
}
|