9 background: #f1f1f1; |
10 background: #f1f1f1; |
10 min-width: 0; |
11 min-width: 0; |
11 color: #444; |
12 color: #444; |
12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
13 font-size: 13px; |
14 font-size: 13px; |
14 line-height: 1.4em; |
15 line-height: 1.4; |
15 } |
16 } |
16 |
17 |
17 a { |
18 a { |
18 color: #0073aa; |
19 color: #0073aa; |
19 transition-property: border, background, color; |
20 transition-property: border, background, color; |
73 .login * { |
70 .login * { |
74 margin: 0; |
71 margin: 0; |
75 padding: 0; |
72 padding: 0; |
76 } |
73 } |
77 |
74 |
78 .login .password-input-wrapper { |
|
79 position: relative; |
|
80 } |
|
81 |
|
82 .login .input.password-input { |
|
83 margin: 0; |
|
84 } |
|
85 |
|
86 .login .input::-ms-clear { |
75 .login .input::-ms-clear { |
87 display: none; |
76 display: none; |
88 } |
77 } |
89 |
78 |
90 .login .pw-weak { |
79 .login .pw-weak { |
91 margin-bottom: 15px; |
80 margin-bottom: 15px; |
92 } |
81 } |
93 |
82 |
94 .login .button.button-secondary { |
83 .login .button.wp-hide-pw { |
95 background: transparent; |
84 background: transparent; |
96 border: 1px solid transparent; |
85 border: 1px solid transparent; |
97 box-shadow: none; |
86 box-shadow: none; |
98 font-size: 14px; |
87 font-size: 14px; |
99 line-height: 2; |
88 line-height: 2; |
100 height: auto; |
89 width: 2.5rem; |
|
90 height: 2.5rem; |
|
91 min-width: 40px; |
|
92 min-height: 40px; |
101 margin: 0; |
93 margin: 0; |
102 padding: 5px 9px; |
94 padding: 5px 9px; |
103 position: absolute; |
95 position: absolute; |
104 left: 0; |
96 left: 0; |
105 top: 0; |
97 top: 0; |
106 } |
98 } |
107 |
99 |
108 .login .button.button-secondary:hover { |
100 .login .button.wp-hide-pw:hover { |
109 background: transparent; |
101 background: transparent; |
110 } |
102 } |
111 |
103 |
112 .login .button.button-secondary:focus { |
104 .login .button.wp-hide-pw:focus { |
113 background: transparent; |
105 background: transparent; |
114 border-color: #5b9dd9; |
106 border-color: #007cba; |
115 box-shadow: 0 0 3px rgba(0, 115, 170, 0.8); |
107 box-shadow: 0 0 0 1px #007cba; |
116 } |
108 /* Only visible in Windows High Contrast mode */ |
117 |
109 outline: 2px solid transparent; |
118 .login .button.button-secondary:active { |
110 } |
|
111 |
|
112 .login .button.wp-hide-pw:active { |
119 background: transparent; |
113 background: transparent; |
120 box-shadow: none; |
114 box-shadow: none; |
121 transform: none; |
115 transform: none; |
|
116 } |
|
117 |
|
118 .login .button.wp-hide-pw .dashicons { |
|
119 width: 1.25rem; |
|
120 height: 1.25rem; |
|
121 top: 0.25rem; |
|
122 } |
|
123 |
|
124 .login .wp-pwd { |
|
125 position: relative; |
|
126 } |
|
127 |
|
128 .no-js .hide-if-no-js { |
|
129 display: none; |
122 } |
130 } |
123 |
131 |
124 .login form { |
132 .login form { |
125 margin-top: 20px; |
133 margin-top: 20px; |
126 margin-right: 0; |
134 margin-right: 0; |
127 padding: 26px 24px 46px; |
135 padding: 26px 24px 46px; |
128 font-weight: 400; |
136 font-weight: 400; |
129 overflow: hidden; |
137 overflow: hidden; |
130 background: #fff; |
138 background: #fff; |
131 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13); |
139 border: 1px solid #ccd0d4; |
|
140 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); |
|
141 } |
|
142 |
|
143 .login form.shake { |
|
144 animation: shake 0.2s cubic-bezier(.19,.49,.38,.79) both; |
|
145 animation-iteration-count: 3; |
|
146 transform: translateX(0); |
|
147 } |
|
148 |
|
149 @keyframes shake { |
|
150 25% { |
|
151 transform: translateX(20px); |
|
152 } |
|
153 75% { |
|
154 transform: translateX(-20px); |
|
155 } |
|
156 100% { |
|
157 transform: translateX(0); |
|
158 } |
|
159 } |
|
160 |
|
161 @media (prefers-reduced-motion: reduce) { |
|
162 .login form.shake { |
|
163 animation: none; |
|
164 transform: none; |
|
165 } |
|
166 } |
|
167 |
|
168 .login-action-confirm_admin_email #login { |
|
169 width: 60vw; |
|
170 max-width: 650px; |
|
171 margin-top: -2vh; |
|
172 } |
|
173 |
|
174 @media screen and (max-width: 782px) { |
|
175 .login-action-confirm_admin_email #login { |
|
176 box-sizing: border-box; |
|
177 margin-top: 0; |
|
178 padding-right: 4vw; |
|
179 padding-left: 4vw; |
|
180 width: 100vw; |
|
181 } |
132 } |
182 } |
133 |
183 |
134 .login form .forgetmenot { |
184 .login form .forgetmenot { |
135 font-weight: 400; |
185 font-weight: 400; |
136 float: right; |
186 float: right; |
139 |
189 |
140 .login .button-primary { |
190 .login .button-primary { |
141 float: left; |
191 float: left; |
142 } |
192 } |
143 |
193 |
|
194 .login .admin-email-confirm-form .submit { |
|
195 text-align: center; |
|
196 } |
|
197 |
|
198 .admin-email__later { |
|
199 text-align: right; |
|
200 } |
|
201 |
|
202 .login form p.admin-email__details { |
|
203 margin: 1.1em 0; |
|
204 } |
|
205 |
|
206 .login h1.admin-email__heading { |
|
207 border-bottom: 1px rgb(241, 241, 241) solid; |
|
208 color: rgb(95, 95, 95); |
|
209 font-weight: normal; |
|
210 padding-bottom: 0.5em; |
|
211 text-align: right; |
|
212 } |
|
213 |
|
214 .admin-email__actions div { |
|
215 padding-top: 1.5em; |
|
216 } |
|
217 |
|
218 .login .admin-email__actions .button-primary { |
|
219 float: none; |
|
220 margin-right: 0.25em; |
|
221 margin-left: 0.25em; |
|
222 } |
|
223 |
144 #login form p { |
224 #login form p { |
145 margin-bottom: 0; |
225 margin-bottom: 0; |
146 } |
226 } |
147 |
227 |
148 #login form p.submit { |
228 #login form p.submit { |
227 width: 100%; |
311 width: 100%; |
228 margin: 5em 0 2em; |
312 margin: 5em 0 2em; |
229 } |
313 } |
230 |
314 |
231 .login form .input, |
315 .login form .input, |
232 .login input[type="text"] { |
316 .login input[type="text"], |
|
317 .login input[type="password"] { |
233 font-size: 24px; |
318 font-size: 24px; |
|
319 line-height: 1.33333333; /* 32px */ |
234 width: 100%; |
320 width: 100%; |
235 padding: 5px; |
321 border-width: 0.0625rem; |
236 margin: 2px 0 16px 6px; |
322 padding: 0.1875rem 0.3125rem; /* 3px 5px */ |
237 } |
323 margin: 0 0 16px 6px; |
238 |
324 min-height: 40px; |
239 .login-action-rp form .input, |
325 max-height: none; |
240 .login-action-rp input[type="text"] { |
326 } |
241 padding: 5px 5px 5px 45px; |
327 |
|
328 .js.login input.password-input, |
|
329 .js.login-action-rp form .input, |
|
330 .js.login-action-rp input[type="text"] { |
|
331 padding-left: 2.5rem; |
242 } |
332 } |
243 |
333 |
244 .login form .input, |
334 .login form .input, |
245 .login input[type="text"], |
335 .login input[type="text"], |
246 .login form input[type="checkbox"] { |
336 .login form input[type="checkbox"] { |
247 background: #fbfbfb; |
337 background: #fbfbfb; |
248 } |
338 } |
249 |
339 |
250 .ie7 .login form .input, |
340 .js.login-action-rp input[type="text"], |
251 .ie8 .login form .input { |
341 .js.login-action-rp input[type="password"] { |
252 font-family: sans-serif; |
342 margin-bottom: 0; |
253 } |
|
254 |
|
255 .login-action-rp input[type="text"] { |
|
256 box-shadow: none; |
|
257 margin: 0; |
|
258 } |
343 } |
259 |
344 |
260 .login #pass-strength-result { |
345 .login #pass-strength-result { |
261 font-weight: 600; |
346 font-weight: 600; |
262 margin: -1px 0 16px 5px; |
347 margin: -1px 0 16px 5px; |
285 |
370 |
286 .interim-login.login form { |
371 .interim-login.login form { |
287 margin: 0; |
372 margin: 0; |
288 } |
373 } |
289 |
374 |
|
375 /* Hide visually but not from screen readers */ |
|
376 .screen-reader-text, |
|
377 .screen-reader-text span { |
|
378 border: 0; |
|
379 clip: rect(1px, 1px, 1px, 1px); |
|
380 -webkit-clip-path: inset(50%); |
|
381 clip-path: inset(50%); |
|
382 height: 1px; |
|
383 margin: -1px; |
|
384 overflow: hidden; |
|
385 padding: 0; |
|
386 position: absolute; |
|
387 width: 1px; |
|
388 word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */ |
|
389 } |
|
390 |
|
391 /* Hide the Edge "reveal password" native button */ |
|
392 input::-ms-reveal { |
|
393 display: none; |
|
394 } |
|
395 |
290 @-ms-viewport { |
396 @-ms-viewport { |
291 width: device-width; |
397 width: device-width; |
292 } |
398 } |
293 |
399 |
294 @media screen and (max-height: 550px) { |
400 @media screen and (max-height: 550px) { |
295 #login { |
401 #login { |
296 padding: 20px 0; |
402 padding: 20px 0; |
297 } |
403 } |
298 } |
404 } |
299 |
405 |
|
406 |
300 @media screen and (max-width: 782px) { |
407 @media screen and (max-width: 782px) { |
301 .interim-login input[type=checkbox] { |
408 .interim-login input[type=checkbox] { |
302 height: 16px; |
409 width: 1rem; |
303 width: 16px; |
410 height: 1rem; |
304 } |
411 } |
305 |
412 |
306 .interim-login input[type=checkbox]:checked:before { |
413 .interim-login input[type=checkbox]:checked:before { |
307 width: 16px; |
414 width: 1.3125rem; |
308 font: normal 21px/1 dashicons; |
415 height: 1.3125rem; |
309 margin: -3px -4px 0 0; |
416 margin: -0.1875rem -0.25rem 0 0; |
310 } |
417 } |
311 } |
418 } |