WordPress.org

Make WordPress Core

Changeset 46371


Ignore:
Timestamp:
10/01/2019 03:54:39 PM (3 weeks ago)
Author:
afercia
Message:

Accessibility: Improve and modernize user interface controls for better contrast: Login screen improvements.

  • allows the login input fields to better scale with text
  • improves the input fields layout on Internet Explorer 11
  • uses the new focus style on the "Show password" button
  • adjusts the CSS for the interim login

See #47153.
See #42888.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/login.css

    r46356 r46371  
    8484    font-size: 14px;
    8585    line-height: 2;
    86     height: auto;
     86    width: 2.5rem;
     87    height: 2.5rem;
     88    min-width: 40px;
     89    min-height: 40px;
    8790    margin: 0;
    8891    padding: 5px 9px;
    8992    position: absolute;
    9093    right: 0;
    91     top: 3px;
     94    top: 0;
    9295}
    9396
     
    98101.login .button.wp-hide-pw:focus {
    99102    background: transparent;
    100     border-color: #5b9dd9;
    101     box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
     103    border-color: #007cba;
     104    box-shadow: 0 0 0 1px #007cba;
     105    /* Only visible in Windows High Contrast mode */
     106    outline: 2px solid transparent;
    102107}
    103108
     
    109114
    110115.login .button.wp-hide-pw .dashicons {
    111     top: 4px;
     116    width: 1.25rem;
     117    height: 1.25rem;
     118    top: 0.25rem;
    112119}
    113120
     
    193200.login label {
    194201    font-size: 14px;
     202    line-height: 1.5;
     203    display: inline-block;
     204    margin-bottom: 3px;
    195205}
    196206
     
    274284.login input[type="password"] {
    275285    font-size: 24px;
    276     line-height: 1.16666666; /* 28px */
     286    line-height: 1.33333333; /* 32px */
    277287    width: 100%;
    278     padding: 5px;
    279     margin: 3px 6px 16px 0;
     288    border-width: 0.0625rem;
     289    padding: 0.1875rem 0.3125rem; /* 3px 5px */
     290    margin: 0 6px 16px 0;
     291    min-height: 40px;
     292    max-height: none;
    280293}
    281294
     
    283296.js.login-action-rp form .input,
    284297.js.login-action-rp input[type="text"] {
    285     padding-right: 45px;
     298    padding-right: 2.5rem;
    286299}
    287300
     
    353366}
    354367
     368
    355369@media screen and (max-width: 782px) {
    356370    .interim-login input[type=checkbox] {
    357         height: 16px;
    358         width: 16px;
     371        width: 1rem;
     372        height: 1rem;
    359373    }
    360374
    361375    .interim-login input[type=checkbox]:checked:before {
    362         width: 16px;
    363         font: normal 21px/1 dashicons;
    364         margin: -3px 0 0 -4px;
     376        width: 1.3125rem;
     377        height: 1.3125rem;
     378        margin: -0.1875rem 0 0 -0.25rem;
    365379    }
    366380}
Note: See TracChangeset for help on using the changeset viewer.