1html,
2body {
3 height: 100%;
4 margin: 0;
5 padding: 0;
6}
7
8body {
9 background: #f0f0f1;
10 min-width: 0;
11 color: #3c434a;
12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
13 font-size: 13px;
14 line-height: 1.4;
15}
16
17a {
18 color: #2271b1;
19 transition-property: border, background, color;
20 transition-duration: .05s;
21 transition-timing-function: ease-in-out;
22}
23
24a {
25 outline: 0;
26}
27
28a:hover,
29a:active {
30 color: #135e96;
31}
32
33a:focus {
34 color: #043959;
35 box-shadow: 0 0 0 2px #2271b1;
36 /* Only visible in Windows High Contrast mode */
37 outline: 2px solid transparent;
38}
39
40p {
41 line-height: 1.5;
42}
43
44.login .message,
45.login .notice,
46.login .success {
47 border-left: 4px solid #72aee6;
48 padding: 12px;
49 margin-left: 0;
50 margin-bottom: 20px;
51 background-color: #fff;
52 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
53 word-wrap: break-word;
54}
55
56.login .success {
57 border-left-color: #00a32a;
58}
59
60/* Match border color from common.css */
61.login .notice-error {
62 border-left-color: #d63638;
63}
64
65.login .login-error-list {
66 list-style: none;
67}
68
69.login .login-error-list li + li {
70 margin-top: 4px;
71}
72
73#loginform p.submit,
74.login-action-lostpassword p.submit {
75 border: none;
76 margin: -10px 0 20px; /* May want to revisit this */
77}
78
79.login * {
80 margin: 0;
81 padding: 0;
82}
83
84.login .input::-ms-clear {
85 display: none;
86}
87
88.login .pw-weak {
89 margin-bottom: 15px;
90}
91
92.login .button.wp-hide-pw {
93 background: transparent;
94 border: 1px solid transparent;
95 box-shadow: none;
96 font-size: 14px;
97 line-height: 2;
98 width: 2.5rem;
99 height: 2.5rem;
100 min-width: 40px;
101 min-height: 40px;
102 margin: 0;
103 padding: 5px 9px;
104 position: absolute;
105 right: 0;
106 top: 0;
107}
108
109.login .button.wp-hide-pw:hover {
110 background: transparent;
111}
112
113.login .button.wp-hide-pw:focus {
114 background: transparent;
115 border-color: #3582c4;
116 box-shadow: 0 0 0 1px #3582c4;
117 /* Only visible in Windows High Contrast mode */
118 outline: 2px solid transparent;
119}
120
121.login .button.wp-hide-pw:active {
122 background: transparent;
123 box-shadow: none;
124 transform: none;
125}
126
127.login .button.wp-hide-pw .dashicons {
128 width: 1.25rem;
129 height: 1.25rem;
130 top: 0.25rem;
131}
132
133.login .wp-pwd {
134 position: relative;
135}
136
137.no-js .hide-if-no-js {
138 display: none;
139}
140
141.login form {
142 margin: 24px 0;
143 padding: 26px 24px;
144 font-weight: 400;
145 overflow: hidden;
146 background: #fff;
147 border: 1px solid #c3c4c7;
148 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
149}
150
151.login form.shake {
152 animation: shake 0.2s cubic-bezier(.19,.49,.38,.79) both;
153 animation-iteration-count: 3;
154 transform: translateX(0);
155}
156
157@keyframes shake {
158 25% {
159 transform: translateX(-20px);
160 }
161 75% {
162 transform: translateX(20px);
163 }
164 100% {
165 transform: translateX(0);
166 }
167}
168
169@media (prefers-reduced-motion: reduce) {
170 .login form.shake {
171 animation: none;
172 transform: none;
173 }
174}
175
176.login-action-confirm_admin_email #login {
177 width: 60vw;
178 max-width: 650px;
179 margin-top: -2vh;
180}
181
182@media screen and (max-width: 782px) {
183 .login-action-confirm_admin_email #login {
184 box-sizing: border-box;
185 margin-top: 0;
186 padding-left: 4vw;
187 padding-right: 4vw;
188 width: 100vw;
189 }
190}
191
192.login form .forgetmenot {
193 font-weight: 400;
194 float: left;
195 margin-bottom: 0;
196}
197
198.login .button-primary {
199 float: right;
200}
201
202.login .reset-pass-submit {
203 display: flex;
204 flex-flow: row wrap;
205 justify-content: space-between;
206}
207
208.login .reset-pass-submit .button {
209 display: inline-block;
210 float: none;
211 margin-bottom: 6px;
212}
213
214.login .admin-email-confirm-form .submit {
215 text-align: center;
216}
217
218.admin-email__later {
219 text-align: left;
220}
221
222.login form p.admin-email__details {
223 margin: 1.1em 0;
224}
225
226.login .admin-email__heading {
227 border-bottom: 1px #f0f0f1 solid;
228 color: #50575e;
229 font-weight: normal;
230 padding-bottom: 0.5em;
231 text-align: left;
232}
233
234.admin-email__actions div {
235 padding-top: 1.5em;
236}
237
238.login .admin-email__actions .button-primary {
239 float: none;
240 margin-left: 0.25em;
241 margin-right: 0.25em;
242}
243
244#login form p {
245 margin-bottom: 0;
246}
247
248#login form .indicator-hint,
249#login #reg_passmail {
250 margin-bottom: 16px;
251}
252
253#login form p.submit {
254 margin: 0;
255 padding: 0;
256}
257
258.login label {
259 font-size: 14px;
260 line-height: 1.5;
261 display: inline-block;
262 margin-bottom: 3px;
263}
264
265.login .forgetmenot label,
266.login .pw-weak label {
267 line-height: 1.5;
268 vertical-align: baseline;
269}
270
271.login h1 {
272 text-align: center;
273}
274
275.login h1 a {
276 background-image: url(../images/w-logo-blue.png?ver=20131202);
277 background-image: none, url(../images/wordpress-logo.svg?ver=20131107);
278 background-size: 84px;
279 background-position: center top;
280 background-repeat: no-repeat;
281 color: #3c434a;
282 height: 84px;
283 font-size: 20px;
284 font-weight: 400;
285 line-height: 1.3;
286 margin: 0 auto 24px;
287 padding: 0;
288 text-decoration: none;
289 width: 84px;
290 text-indent: -9999px;
291 outline: none;
292 overflow: hidden;
293 display: block;
294}
295
296#login {
297 width: 320px;
298 padding: 5% 0 0;
299 margin: auto;
300}
301
302.login #nav,
303.login #backtoblog {
304 font-size: 13px;
305 padding: 0 24px;
306}
307
308.login #nav {
309 margin: 24px 0 0;
310}
311
312#backtoblog {
313 margin: 16px 0;
314 word-wrap: break-word;
315}
316
317.login #nav a,
318.login #backtoblog a {
319 text-decoration: none;
320 color: #50575e;
321}
322
323.login #nav a:hover,
324.login #backtoblog a:hover,
325.login h1 a:hover {
326 color: #135e96;
327}
328
329.login #nav a:focus,
330.login #backtoblog a:focus,
331.login h1 a:focus {
332 color: #043959;
333}
334
335.login .privacy-policy-page-link {
336 text-align: center;
337 width: 100%;
338 margin: 3em 0 2em;
339}
340
341.login form .input,
342.login input[type="text"],
343.login input[type="password"] {
344 font-size: 24px;
345 line-height: 1.33333333; /* 32px */
346 width: 100%;
347 border-width: 0.0625rem;
348 padding: 0.1875rem 0.3125rem; /* 3px 5px */
349 margin: 0 6px 16px 0;
350 min-height: 40px;
351 max-height: none;
352}
353
354.login input.password-input {
355 font-family: Consolas, Monaco, monospace;
356}
357
358.js.login input.password-input {
359 padding-right: 2.5rem;
360}
361
362.login form .input,
363.login input[type="text"],
364.login form input[type="checkbox"] {
365 background: #fff;
366}
367
368.js.login-action-resetpass input[type="text"],
369.js.login-action-resetpass input[type="password"],
370.js.login-action-rp input[type="text"],
371.js.login-action-rp input[type="password"] {
372 margin-bottom: 0;
373}
374
375.login #pass-strength-result {
376 font-weight: 600;
377 margin: -1px 5px 16px 0;
378 padding: 6px 5px;
379 text-align: center;
380 width: 100%;
381}
382
383body.interim-login {
384 height: auto;
385}
386
387.interim-login #login {
388 padding: 0;
389 margin: 5px auto 20px;
390}
391
392.interim-login.login h1 a {
393 width: auto;
394}
395
396.interim-login #login_error,
397.interim-login.login .message {
398 margin: 0 0 16px;
399}
400
401.interim-login.login form {
402 margin: 0;
403}
404
405/* Hide visually but not from screen readers */
406.screen-reader-text,
407.screen-reader-text span {
408 border: 0;
409 clip-path: inset(50%);
410 height: 1px;
411 margin: -1px;
412 overflow: hidden;
413 padding: 0;
414 position: absolute;
415 width: 1px;
416 word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */
417}
418
419/* Hide the Edge "reveal password" native button */
420input::-ms-reveal {
421 display: none;
422}
423
424#language-switcher {
425 padding: 0;
426 overflow: visible;
427 background: none;
428 border: none;
429 box-shadow: none;
430}
431
432#language-switcher select {
433 margin-right: 0.25em;
434}
435
436.language-switcher {
437 margin: 0 auto;
438 padding: 0 0 24px;
439 text-align: center;
440}
441
442.language-switcher label {
443 margin-right: 0.25em;
444}
445
446.language-switcher label .dashicons {
447 width: auto;
448 height: auto;
449}
450
451.login .language-switcher .button {
452 margin-bottom: 0;
453}
454
455@media screen and (max-height: 550px) {
456 #login {
457 padding: 20px 0;
458 }
459
460 #language-switcher {
461 margin-top: 0;
462 }
463}
464
465
466@media screen and (max-width: 782px) {
467 .interim-login input[type=checkbox] {
468 width: 1rem;
469 height: 1rem;
470 }
471
472 .interim-login input[type=checkbox]:checked:before {
473 width: 1.3125rem;
474 height: 1.3125rem;
475 margin: -0.1875rem 0 0 -0.25rem;
476 }
477
478 #language-switcher label,
479 #language-switcher select {
480 margin-right: 0;
481 }
482}
483
484@media screen and (max-width: 400px) {
485 .login .language-switcher .button {
486 display: block;
487 margin: 5px auto 0;
488 }
489}
490