Make WordPress Core

Changeset 36528


Ignore:
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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/css/editor.css

    r36384 r36528  
    378378.qt-dfw:focus {
    379379    background: #fafafa;
    380     border-color: #999;
     380    border-color: #555d66;
    381381    color: #23282d;
    382382    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
     
    389389.qt-dfw.active {
    390390    background: #ebebeb;
    391     border-color: #999;
     391    border-color: #555d66;
    392392    -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.3 );
    393393    box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.3 );
    394394}
    395395
    396 .mce-toolbar .mce-btn-group .mce-btn.mce-active:hover {
    397     border-color: #555;
    398 }
    399 
    400 .mce-toolbar .mce-btn-group .mce-btn.mce-active:hover i.mce-ico {
    401     color: #555;
     396.mce-toolbar .mce-btn-group .mce-btn.mce-active:hover,
     397.mce-toolbar .mce-btn-group .mce-btn.mce-active:focus {
     398    border-color: #23282d;
    402399}
    403400
     
    412409}
    413410
     411.mce-toolbar .mce-btn-group .mce-btn.mce-disabled:focus {
     412    border-color: #555d66;
     413}
     414
    414415.mce-toolbar .mce-btn-group .mce-first,
    415416.mce-toolbar .mce-btn-group .mce-last {
     
    450451    height: 3px;
    451452    width: 20px;
     453    background: #555d66;
    452454}
    453455
     
    503505}
    504506
    505 .mce-toolbar .mce-btn-group .mce-btn.mce-listbox:hover {
     507.mce-toolbar .mce-btn-group .mce-btn.mce-listbox:hover,
     508.mce-toolbar .mce-btn-group .mce-btn.mce-listbox:focus {
    506509    border-color: #b4b9be;
    507510}
    508511
    509512.mce-panel .mce-btn i.mce-caret {
    510     border-top: 6px solid #777;
     513    border-top: 6px solid #555d66;
    511514    margin-left: 2px;
    512515    margin-right: 2px;
     
    517520}
    518521
    519 .mce-panel .mce-btn:hover i.mce-caret {
    520     border-top-color: #32373c;
     522.mce-panel .mce-btn:hover i.mce-caret,
     523.mce-panel .mce-btn:focus i.mce-caret {
     524    border-top-color: #23282d;
    521525}
    522526
    523527.mce-panel .mce-active i.mce-caret {
    524528    border-top: 0;
    525     border-bottom: 6px solid #32373c;
     529    border-bottom: 6px solid #23282d;
    526530    margin-top: 7px;
    527531}
     
    648652.mce-window .mce-btn:focus {
    649653    background: #fafafa;
    650     border-color: #999;
     654    border-color: #555d66;
    651655    color: #23282d;
    652656}
     
    663667.mce-window .mce-btn:active {
    664668    background: #eee;
    665     border-color: #999;
    666     color: #32373c;
     669    border-color: #555d66;
     670    color: #23282d;
    667671    -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
    668672    box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
     
    779783
    780784.mce-toolbar .mce-ico {
    781     color: #777;
     785    color: #555d66;
    782786    line-height: 20px;
    783787    width: 20px;
     
    790794
    791795.qt-dfw {
    792     color: #777;
     796    color: #555d66;
    793797    line-height: 20px;
    794798    width: 28px;
     
    805809.mce-toolbar .mce-btn:focus .mce-open,
    806810.mce-toolbar .mce-btn.mce-active .mce-open {
    807     border-left-color: #999;
     811    border-left-color: #23282d;
    808812}
    809813
     
    10681072    top: 1px;
    10691073    background: #ebebeb;
    1070     color: #777;
     1074    color: #666;
    10711075    cursor: pointer;
    10721076    font: 13px/19px "Open Sans", sans-serif;
Note: See TracChangeset for help on using the changeset viewer.