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