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