Changeset 46371

Timestamp:

10/01/2019 03:54:39 PM (5 years 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:

• trunk/src/wp-admin/css/login.css (modified) (7 diffs)

trunk/src/wp-admin/css/login.css

@@ -84 +84 @@
     font-size: 14px;
     line-height: 2;
-    height: auto;
+    width: 2.5rem;
+    height: 2.5rem;
+    min-width: 40px;
+    min-height: 40px;
     margin: 0;
     padding: 5px 9px;
     position: absolute;
     right: 0;
-    top: 3px;
+    top: 0;
 }
 
@@ -98 +101 @@
 .login .button.wp-hide-pw:focus {
     background: transparent;
-    border-color: #5b9dd9;
-    box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
+    border-color: #007cba;
+    box-shadow: 0 0 0 1px #007cba;
+    /* Only visible in Windows High Contrast mode */
+    outline: 2px solid transparent;
 }
 
@@ -109 +114 @@
 
 .login .button.wp-hide-pw .dashicons {
-    top: 4px;
+    width: 1.25rem;
+    height: 1.25rem;
+    top: 0.25rem;
 }
 
@@ -193 +200 @@
 .login label {
     font-size: 14px;
+    line-height: 1.5;
+    display: inline-block;
+    margin-bottom: 3px;
 }
 
@@ -274 +284 @@
 .login input[type="password"] {
     font-size: 24px;
-    line-height: 1.16666666; /* 28px */
+    line-height: 1.33333333; /* 32px */
     width: 100%;
-    padding: 5px;
-    margin: 3px 6px 16px 0;
+    border-width: 0.0625rem;
+    padding: 0.1875rem 0.3125rem; /* 3px 5px */
+    margin: 0 6px 16px 0;
+    min-height: 40px;
+    max-height: none;
 }
 
@@ -283 +296 @@
 .js.login-action-rp form .input,
 .js.login-action-rp input[type="text"] {
-    padding-right: 45px;
+    padding-right: 2.5rem;
 }
 
@@ -353 +366 @@
 }
 
+
 @media screen and (max-width: 782px) {
     .interim-login input[type=checkbox] {
-        height: 16px;
-        width: 16px;
+        width: 1rem;
+        height: 1rem;
     }
 
     .interim-login input[type=checkbox]:checked:before {
-        width: 16px;
-        font: normal 21px/1 dashicons;
-        margin: -3px 0 0 -4px;
+        width: 1.3125rem;
+        height: 1.3125rem;
+        margin: -0.1875rem 0 0 -0.25rem;
     }
 }