Changeset 36528 for trunk/src/wp-includes/css/editor.css

Timestamp:

02/15/2016 09:10:17 PM (9 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;