[Summary view] [Print] [Text view]

   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: 0 0 0 2px #2271b1;
  36      /* Only visible in Windows High Contrast mode */
  37      outline: 2px solid transparent;
  38  }
  39  
  40  p {
  41      line-height: 1.5;
  42  }
  43  
  44  .login .message,
  45  .login .notice,
  46  .login .success {
  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      word-wrap: break-word;
  54  }
  55  
  56  .login .success {
  57      border-left-color: #00a32a;
  58  }
  59  
  60  /* Match border color from common.css */
  61  .login .notice-error {
  62      border-left-color: #d63638;
  63  }
  64  
  65  .login .login-error-list {
  66      list-style: none;
  67  }
  68  
  69  .login .login-error-list li + li {
  70      margin-top: 4px;
  71  }
  72  
  73  #loginform p.submit,
  74  .login-action-lostpassword p.submit {
  75      border: none;
  76      margin: -10px 0 20px; /* May want to revisit this */
  77  }
  78  
  79  .login * {
  80      margin: 0;
  81      padding: 0;
  82  }
  83  
  84  .login .input::-ms-clear {
  85      display: none;
  86  }
  87  
  88  .login .pw-weak {
  89      margin-bottom: 15px;
  90  }
  91  
  92  .login .button.wp-hide-pw {
  93      background: transparent;
  94      border: 1px solid transparent;
  95      box-shadow: none;
  96      font-size: 14px;
  97      line-height: 2;
  98      width: 2.5rem;
  99      height: 2.5rem;
 100      min-width: 40px;
 101      min-height: 40px;
 102      margin: 0;
 103      padding: 5px 9px;
 104      position: absolute;
 105      right: 0;
 106      top: 0;
 107  }
 108  
 109  .login .button.wp-hide-pw:hover {
 110      background: transparent;
 111  }
 112  
 113  .login .button.wp-hide-pw:focus {
 114      background: transparent;
 115      border-color: #3582c4;
 116      box-shadow: 0 0 0 1px #3582c4;
 117      /* Only visible in Windows High Contrast mode */
 118      outline: 2px solid transparent;
 119  }
 120  
 121  .login .button.wp-hide-pw:active {
 122      background: transparent;
 123      box-shadow: none;
 124      transform: none;
 125  }
 126  
 127  .login .button.wp-hide-pw .dashicons {
 128      width: 1.25rem;
 129      height: 1.25rem;
 130      top: 0.25rem;
 131  }
 132  
 133  .login .wp-pwd {
 134      position: relative;
 135  }
 136  
 137  .no-js .hide-if-no-js {
 138      display: none;
 139  }
 140  
 141  .login form {
 142      margin: 24px 0;
 143      padding: 26px 24px;
 144      font-weight: 400;
 145      overflow: hidden;
 146      background: #fff;
 147      border: 1px solid #c3c4c7;
 148      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
 149  }
 150  
 151  .login form.shake {
 152      animation: shake 0.2s cubic-bezier(.19,.49,.38,.79) both;
 153      animation-iteration-count: 3;
 154      transform: translateX(0);
 155  }
 156  
 157  @keyframes shake {
 158      25% {
 159          transform: translateX(-20px);
 160      }
 161      75% {
 162          transform: translateX(20px);
 163      }
 164      100% {
 165          transform: translateX(0);
 166      }
 167  }
 168  
 169  @media (prefers-reduced-motion: reduce) {
 170      .login form.shake {
 171          animation: none;
 172          transform: none;
 173      }
 174  }
 175  
 176  .login-action-confirm_admin_email #login {
 177      width: 60vw;
 178      max-width: 650px;
 179      margin-top: -2vh;
 180  }
 181  
 182  @media screen and (max-width: 782px) {
 183      .login-action-confirm_admin_email #login {
 184          box-sizing: border-box;
 185          margin-top: 0;
 186          padding-left: 4vw;
 187          padding-right: 4vw;
 188          width: 100vw;
 189      }
 190  }
 191  
 192  .login form .forgetmenot {
 193      font-weight: 400;
 194      float: left;
 195      margin-bottom: 0;
 196  }
 197  
 198  .login .button-primary {
 199      float: right;
 200  }
 201  
 202  .login .reset-pass-submit {
 203      display: flex;
 204      flex-flow: row wrap;
 205      justify-content: space-between;
 206  }
 207  
 208  .login .reset-pass-submit .button {
 209      display: inline-block;
 210      float: none;
 211      margin-bottom: 6px;
 212  }
 213  
 214  .login .admin-email-confirm-form .submit {
 215      text-align: center;
 216  }
 217  
 218  .admin-email__later {
 219      text-align: left;
 220  }
 221  
 222  .login form p.admin-email__details {
 223      margin: 1.1em 0;
 224  }
 225  
 226  .login .admin-email__heading {
 227      border-bottom: 1px #f0f0f1 solid;
 228      color: #50575e;
 229      font-weight: normal;
 230      padding-bottom: 0.5em;
 231      text-align: left;
 232  }
 233  
 234  .admin-email__actions div {
 235      padding-top: 1.5em;
 236  }
 237  
 238  .login .admin-email__actions .button-primary {
 239      float: none;
 240      margin-left: 0.25em;
 241      margin-right: 0.25em;
 242  }
 243  
 244  #login form p {
 245      margin-bottom: 0;
 246  }
 247  
 248  #login form .indicator-hint,
 249  #login #reg_passmail {
 250      margin-bottom: 16px;
 251  }
 252  
 253  #login form p.submit {
 254      margin: 0;
 255      padding: 0;
 256  }
 257  
 258  .login label {
 259      font-size: 14px;
 260      line-height: 1.5;
 261      display: inline-block;
 262      margin-bottom: 3px;
 263  }
 264  
 265  .login .forgetmenot label,
 266  .login .pw-weak label {
 267      line-height: 1.5;
 268      vertical-align: baseline;
 269  }
 270  
 271  .login h1 {
 272      text-align: center;
 273  }
 274  
 275  .login h1 a {
 276      background-image: url(../images/w-logo-blue.png?ver=20131202);
 277      background-image: none, url(../images/wordpress-logo.svg?ver=20131107);
 278      background-size: 84px;
 279      background-position: center top;
 280      background-repeat: no-repeat;
 281      color: #3c434a;
 282      height: 84px;
 283      font-size: 20px;
 284      font-weight: 400;
 285      line-height: 1.3;
 286      margin: 0 auto 24px;
 287      padding: 0;
 288      text-decoration: none;
 289      width: 84px;
 290      text-indent: -9999px;
 291      outline: none;
 292      overflow: hidden;
 293      display: block;
 294  }
 295  
 296  #login {
 297      width: 320px;
 298      padding: 5% 0 0;
 299      margin: auto;
 300  }
 301  
 302  .login #nav,
 303  .login #backtoblog {
 304      font-size: 13px;
 305      padding: 0 24px;
 306  }
 307  
 308  .login #nav {
 309      margin: 24px 0 0;
 310  }
 311  
 312  #backtoblog {
 313      margin: 16px 0;
 314      word-wrap: break-word;
 315  }
 316  
 317  .login #nav a,
 318  .login #backtoblog a {
 319      text-decoration: none;
 320      color: #50575e;
 321  }
 322  
 323  .login #nav a:hover,
 324  .login #backtoblog a:hover,
 325  .login h1 a:hover {
 326      color: #135e96;
 327  }
 328  
 329  .login #nav a:focus,
 330  .login #backtoblog a:focus,
 331  .login h1 a:focus {
 332      color: #043959;
 333  }
 334  
 335  .login .privacy-policy-page-link {
 336      text-align: center;
 337      width: 100%;
 338      margin: 3em 0 2em;
 339  }
 340  
 341  .login form .input,
 342  .login input[type="text"],
 343  .login input[type="password"] {
 344      font-size: 24px;
 345      line-height: 1.33333333; /* 32px */
 346      width: 100%;
 347      border-width: 0.0625rem;
 348      padding: 0.1875rem 0.3125rem; /* 3px 5px */
 349      margin: 0 6px 16px 0;
 350      min-height: 40px;
 351      max-height: none;
 352  }
 353  
 354  .login input.password-input {
 355      font-family: Consolas, Monaco, monospace;
 356  }
 357  
 358  .js.login input.password-input {
 359      padding-right: 2.5rem;
 360  }
 361  
 362  .login form .input,
 363  .login input[type="text"],
 364  .login form input[type="checkbox"] {
 365      background: #fff;
 366  }
 367  
 368  .js.login-action-resetpass input[type="text"],
 369  .js.login-action-resetpass input[type="password"],
 370  .js.login-action-rp input[type="text"],
 371  .js.login-action-rp input[type="password"] {
 372      margin-bottom: 0;
 373  }
 374  
 375  .login #pass-strength-result {
 376      font-weight: 600;
 377      margin: -1px 5px 16px 0;
 378      padding: 6px 5px;
 379      text-align: center;
 380      width: 100%;
 381  }
 382  
 383  body.interim-login {
 384      height: auto;
 385  }
 386  
 387  .interim-login #login {
 388      padding: 0;
 389      margin: 5px auto 20px;
 390  }
 391  
 392  .interim-login.login h1 a {
 393      width: auto;
 394  }
 395  
 396  .interim-login #login_error,
 397  .interim-login.login .message {
 398      margin: 0 0 16px;
 399  }
 400  
 401  .interim-login.login form {
 402      margin: 0;
 403  }
 404  
 405  /* Hide visually but not from screen readers */
 406  .screen-reader-text,
 407  .screen-reader-text span {
 408      border: 0;
 409      clip: rect(1px, 1px, 1px, 1px);
 410      clip-path: inset(50%);
 411      height: 1px;
 412      margin: -1px;
 413      overflow: hidden;
 414      padding: 0;
 415      position: absolute;
 416      width: 1px;
 417      word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */
 418  }
 419  
 420  /* Hide the Edge "reveal password" native button */
 421  input::-ms-reveal {
 422      display: none;
 423  }
 424  
 425  #language-switcher {
 426      padding: 0;
 427      overflow: visible;
 428      background: none;
 429      border: none;
 430      box-shadow: none;
 431  }
 432  
 433  #language-switcher select {
 434      margin-right: 0.25em;
 435  }
 436  
 437  .language-switcher {
 438      margin: 0 auto;
 439      padding: 0 0 24px;
 440      text-align: center;
 441  }
 442  
 443  .language-switcher label {
 444      margin-right: 0.25em;
 445  }
 446  
 447  .language-switcher label .dashicons {
 448      width: auto;
 449      height: auto;
 450  }
 451  
 452  .login .language-switcher .button {
 453      margin-bottom: 0;
 454  }
 455  
 456  @media screen and (max-height: 550px) {
 457      #login {
 458          padding: 20px 0;
 459      }
 460  
 461      #language-switcher {
 462          margin-top: 0;
 463      }
 464  }
 465  
 466  
 467  @media screen and (max-width: 782px) {
 468      .interim-login input[type=checkbox] {
 469          width: 1rem;
 470          height: 1rem;
 471      }
 472  
 473      .interim-login input[type=checkbox]:checked:before {
 474          width: 1.3125rem;
 475          height: 1.3125rem;
 476          margin: -0.1875rem 0 0 -0.25rem;
 477      }
 478  
 479      #language-switcher label,
 480      #language-switcher select {
 481          margin-right: 0;
 482      }
 483  }
 484  
 485  @media screen and (max-width: 400px) {
 486      .login .language-switcher .button {
 487          display: block;
 488          margin: 5px auto 0;
 489      }
 490  }