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