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