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