Changeset 46344

Timestamp:

09/29/2019 09:52:38 PM (5 years ago)

Author:

afercia

Message:

Accessibility: Improve and modernize user interface controls: Make the secondary buttons border blue.

Props drw158, youknowriad, kjellr, melchoyce, talldanwp, audrasjb.
See #34904.

Location:

trunk/src

Files:

• wp-admin/css/colors/_admin.scss (modified) (3 diffs)
• wp-admin/css/common.css (modified) (3 diffs)
• wp-admin/css/edit.css (modified) (1 diff)
• wp-admin/css/media.css (modified) (1 diff)
• wp-includes/css/buttons.css (modified) (5 diffs)

trunk/src/wp-admin/css/colors/_admin.scss

@@ -24 +24 @@
 }
 
-#media-upload a.del-link:hover,
-div.dashboard-widget-submit input:hover,
-.subsubsub a:hover,
-.subsubsub a.current:hover {
+#post-body .misc-pub-post-status:before,
+#post-body #visibility:before,
+.curtime #timestamp:before,
+#post-body .misc-pub-revisions:before,
+span.wp-media-buttons-icon:before {
     color: $link-focus;
 }
@@ -74 +75 @@
 
 .wp-core-ui {
+
+    .button,
+    .button-secondary {
+        color: $button-color;
+        border-color: $button-color;
+    }
+
+    .button.hover,
+    .button:hover,
+    .button-secondary:hover,
+    .button.focus,
+    .button:focus,
+    .button-secondary:focus {
+        border-color: darken( $button-color, 5% );
+        color: darken( $button-color, 5% );
+    }
+
     .button.focus,
     .button:focus,
@@ -84 +102 @@
     .button-primary {
         @include button( $button-color );
+    }
+
+    .button-group > .button.active {
+        border-color: $button-color;
     }
 

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

@@ -618 +618 @@
     top: -3px;
     text-decoration: none;
-    border: 1px solid #7e8993;
+    border: 1px solid #0071a1;
     border-radius: 2px;
     text-shadow: none;
@@ -624 +624 @@
     font-size: 13px;
     line-height: normal; /* IE8-IE11 need this for buttons */
-    color: #555; /* use the standard color used for buttons */
+    color: #0071a1; /* use the standard color used for buttons */
+    background: #f3f5f6;
     cursor: pointer;
 }
@@ -634 +635 @@
 .wrap .add-new-h2:hover, /* deprecated */
 .wrap .page-title-action:hover {
-    background: #f3f5f6;
-    border-color: #7e8993;
-    color: #007cba;
+    background: #f1f1f1;
+    border-color: #016087;
+    color: #016087;
 }
 

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

@@ -449 +449 @@
 #post-body #visibility:before,
 .curtime #timestamp:before,
-#post-body .misc-pub-revisions:before,
-span.wp-media-buttons-icon:before {
+#post-body .misc-pub-revisions:before {
     color: #82878c;
 }

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

@@ -932 +932 @@
     margin: 0 8px 8px 0;
     padding: 0 10px;
-    color: #555;
 }
 

trunk/src/wp-includes/css/buttons.css

@@ -124 +124 @@
 .wp-core-ui .button,
 .wp-core-ui .button-secondary {
-    color: #555;
-    border-color: #7e8993;
-    background: #f1f1f1;
+    color: #0071a1;
+    border-color: #0071a1;
+    background: #f3f5f6;
     vertical-align: top;
 }
@@ -140 +140 @@
 .wp-core-ui .button:focus,
 .wp-core-ui .button-secondary:focus {
-    background: #f3f5f6;
-    border-color: #7e8993;
-    color: #007cba;
+    background: #f1f1f1;
+    border-color: #016087;
+    color: #016087;
 }
 
@@ -158 +158 @@
 .wp-core-ui .button:active,
 .wp-core-ui .button-secondary:active {
-    background: #eee;
-    border-color: #999;
+    background: #f3f5f6;
+    border-color: #7e8993;
     transform: translateY(1px);
     box-shadow: none;
@@ -165 +165 @@
 
 .wp-core-ui .button.active:focus {
-    border-color: #999;
-    box-shadow: 0 0 0 1px #999;
+    border-color: #7e8993;
+    box-shadow: 0 0 0 1px #7e8993;
 }
 
@@ -320 +320 @@
     background-color: #e2e4e7;
     box-shadow: inset 0 1px 0 0 #999;
+    border-color: #016087;
 }