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