login.css (7067B)
1 html, 2 body { 3 height: 100%; 4 margin: 0; 5 padding: 0; 6 } 7 8 body { 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 17 a { 18 color: #2271b1; 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 { 30 color: #135e96; 31 } 32 33 a:focus { 34 color: #043959; 35 box-shadow: 36 0 0 0 1px #4f94d4, 37 0 0 2px 1px rgba(79, 148, 212, 0.8); 38 } 39 40 p { 41 line-height: 1.5; 42 } 43 44 .login .message, 45 .login .success, 46 .login #login_error { 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 } 54 55 .login .success { 56 border-left-color: #00a32a; 57 } 58 59 .login #login_error { 60 border-left-color: #d63638; 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 74 .login .input::-ms-clear { 75 display: none; 76 } 77 78 .login .pw-weak { 79 margin-bottom: 15px; 80 } 81 82 .login .button.wp-hide-pw { 83 background: transparent; 84 border: 1px solid transparent; 85 box-shadow: none; 86 font-size: 14px; 87 line-height: 2; 88 width: 2.5rem; 89 height: 2.5rem; 90 min-width: 40px; 91 min-height: 40px; 92 margin: 0; 93 padding: 5px 9px; 94 position: absolute; 95 right: 0; 96 top: 0; 97 } 98 99 .login .button.wp-hide-pw:hover { 100 background: transparent; 101 } 102 103 .login .button.wp-hide-pw:focus { 104 background: transparent; 105 border-color: #3582c4; 106 box-shadow: 0 0 0 1px #3582c4; 107 /* Only visible in Windows High Contrast mode */ 108 outline: 2px solid transparent; 109 } 110 111 .login .button.wp-hide-pw:active { 112 background: transparent; 113 box-shadow: 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; 129 } 130 131 .login form { 132 margin-top: 20px; 133 margin-left: 0; 134 padding: 26px 24px 34px; 135 font-weight: 400; 136 overflow: hidden; 137 background: #fff; 138 border: 1px solid #c3c4c7; 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 } 181 } 182 183 .login form .forgetmenot { 184 font-weight: 400; 185 float: left; 186 margin-bottom: 0; 187 } 188 189 .login .button-primary { 190 float: right; 191 } 192 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 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 { 218 border-bottom: 1px #f0f0f1 solid; 219 color: #50575e; 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 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; 246 line-height: 1.5; 247 display: inline-block; 248 margin-bottom: 3px; 249 } 250 251 .login .forgetmenot label, 252 .login .pw-weak label { 253 line-height: 1.5; 254 vertical-align: baseline; 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; 267 color: #3c434a; 268 height: 84px; 269 font-size: 20px; 270 font-weight: 400; 271 line-height: 1.3; 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 { 299 margin: 16px 0; 300 word-break: break-word; 301 } 302 303 .login #nav a, 304 .login #backtoblog a { 305 text-decoration: none; 306 color: #50575e; 307 } 308 309 .login #nav a:hover, 310 .login #backtoblog a:hover, 311 .login h1 a:hover { 312 color: #135e96; 313 } 314 315 .login #nav a:focus, 316 .login #backtoblog a:focus, 317 .login h1 a:focus { 318 color: #043959; 319 } 320 321 .login .privacy-policy-page-link { 322 text-align: center; 323 width: 100%; 324 margin: 5em 0 2em; 325 } 326 327 .login form .input, 328 .login input[type="text"], 329 .login input[type="password"] { 330 font-size: 24px; 331 line-height: 1.33333333; /* 32px */ 332 width: 100%; 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; 338 } 339 340 .login input.password-input { 341 font-family: Consolas, Monaco, monospace; 342 } 343 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; 348 } 349 350 .login form .input, 351 .login input[type="text"], 352 .login form input[type="checkbox"] { 353 background: #fff; 354 } 355 356 .js.login-action-rp input[type="text"], 357 .js.login-action-rp input[type="password"] { 358 margin-bottom: 0; 359 } 360 361 .login #pass-strength-result { 362 font-weight: 600; 363 margin: -1px 5px 16px 0; 364 padding: 6px 5px; 365 text-align: center; 366 width: 100%; 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 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 412 @media screen and (max-height: 550px) { 413 #login { 414 padding: 20px 0; 415 } 416 } 417 418 419 @media screen and (max-width: 782px) { 420 .interim-login input[type=checkbox] { 421 width: 1rem; 422 height: 1rem; 423 } 424 425 .interim-login input[type=checkbox]:checked:before { 426 width: 1.3125rem; 427 height: 1.3125rem; 428 margin: -0.1875rem 0 0 -0.25rem; 429 } 430 }