Changeset 46344

Timestamp:

09/29/2019 09:52:38 PM (7 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;
 }