Changeset 36528

Timestamp:

02/15/2016 09:10:17 PM (11 years ago)

Author:

afercia

Message:

Accessibility: improve the color contrast ratio for the TinyMCE button icons.

Also, tries to use the new grays from the Design Handbook wherever applicable.

Props michaelarestad, afercia.
Fixes #35604.

File:

• trunk/src/wp-includes/css/editor.css (modified) (12 diffs)

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

@@ -378 +378 @@
 .qt-dfw:focus {
         background: #fafafa;
-        border-color: #999;
+        border-color: #555d66;
         color: #23282d;
         -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
@@ -389 +389 @@
 .qt-dfw.active {
         background: #ebebeb;
-        border-color: #999;
+        border-color: #555d66;
         -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.3 );
         box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.3 );
 }
 
-.mce-toolbar .mce-btn-group .mce-btn.mce-active:hover {
-        border-color: #555;
-}
-
-.mce-toolbar .mce-btn-group .mce-btn.mce-active:hover i.mce-ico {
-        color: #555;
+.mce-toolbar .mce-btn-group .mce-btn.mce-active:hover,
+.mce-toolbar .mce-btn-group .mce-btn.mce-active:focus {
+        border-color: #23282d;
 }
 
@@ -412 +409 @@
 }
 
+.mce-toolbar .mce-btn-group .mce-btn.mce-disabled:focus {
+        border-color: #555d66;
+}
+
 .mce-toolbar .mce-btn-group .mce-first,
 .mce-toolbar .mce-btn-group .mce-last {
@@ -450 +451 @@
         height: 3px;
         width: 20px;
+        background: #555d66;
 }
 
@@ -503 +505 @@
 }
 
-.mce-toolbar .mce-btn-group .mce-btn.mce-listbox:hover {
+.mce-toolbar .mce-btn-group .mce-btn.mce-listbox:hover,
+.mce-toolbar .mce-btn-group .mce-btn.mce-listbox:focus {
         border-color: #b4b9be;
 }
 
 .mce-panel .mce-btn i.mce-caret {
-        border-top: 6px solid #777;
+        border-top: 6px solid #555d66;
         margin-left: 2px;
         margin-right: 2px;
@@ -517 +520 @@
 }
 
-.mce-panel .mce-btn:hover i.mce-caret {
-        border-top-color: #32373c;
+.mce-panel .mce-btn:hover i.mce-caret,
+.mce-panel .mce-btn:focus i.mce-caret {
+        border-top-color: #23282d;
 }
 
 .mce-panel .mce-active i.mce-caret {
         border-top: 0;
-        border-bottom: 6px solid #32373c;
+        border-bottom: 6px solid #23282d;
         margin-top: 7px;
 }
@@ -648 +652 @@
 .mce-window .mce-btn:focus {
         background: #fafafa;
-        border-color: #999;
+        border-color: #555d66;
         color: #23282d;
 }
@@ -663 +667 @@
 .mce-window .mce-btn:active {
         background: #eee;
-        border-color: #999;
-        color: #32373c;
+        border-color: #555d66;
+        color: #23282d;
         -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
         box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
@@ -779 +783 @@
 
 .mce-toolbar .mce-ico {
-        color: #777;
+        color: #555d66;
         line-height: 20px;
         width: 20px;
@@ -790 +794 @@
 
 .qt-dfw {
-        color: #777;
+        color: #555d66;
         line-height: 20px;
         width: 28px;
@@ -805 +809 @@
 .mce-toolbar .mce-btn:focus .mce-open,
 .mce-toolbar .mce-btn.mce-active .mce-open {
-        border-left-color: #999;
+        border-left-color: #23282d;
 }
 
@@ -1068 +1072 @@
         top: 1px;
         background: #ebebeb;
-        color: #777;
+        color: #666;
         cursor: pointer;
         font: 13px/19px "Open Sans", sans-serif;