WordPress.org
Get WordPress

Make WordPress Core

Ticket #29158: 29158.i9.diff

File 29158.i9.diff, 8.6 KB (added by celloexpressions, 9 years ago)

Implements customizer-contrast-i9.png​.

  • src/wp-admin/css/customize-controls.css

     
    2121}
    2222
    2323#customize-controls .description {
    24         color: #555;
     24        color: #555d66;
    2525}
    2626
    2727#customize-header-actions .button-primary {
    … …  
    8282
    8383#customize-controls .customize-info .accordion-section-title {
    8484        background: #fff;
    85         color: #555;
     85        color: #555d66;
    8686        border-left: none;
    8787        border-right: none;
    8888        border-bottom: none;
    … …  
    9292#customize-controls .customize-info.open .accordion-section-title:after,
    9393#customize-controls .customize-info .accordion-section-title:hover:after,
    9494#customize-controls .customize-info .accordion-section-title:focus:after {
    95         color: #333;
     95        color: #32373c;
    9696}
    9797
    9898#customize-controls .customize-info .accordion-section-title:after {
    … …  
    153153#customize-controls .customize-info .customize-panel-description,
    154154#customize-controls .customize-info .customize-section-description,
    155155#customize-controls .no-widget-areas-rendered-notice {
    156         color: #555;
     156        color: #555d66;
    157157        display: none;
    158158        background: #fff;
    159159        padding: 12px 15px;
    … …  
    187187}
    188188
    189189#customize-theme-controls .accordion-section-title {
    190         color: #555;
     190        color: #555d66;
    191191        background-color: #fff;
    192         border-bottom: 1px solid #eee;
     192        border-bottom: 1px solid #ddd;
    193193        border-left: 4px solid #fff;
    194194}
    195195
    … …  
    199199}
    200200
    201201#customize-theme-controls .accordion-section-content {
    202         color: #555;
     202        color: #555d66;
    203203        background: transparent;
    204204}
    205205
    … …  
    207207#customize-controls .control-section .accordion-section-title:hover,
    208208#customize-controls .control-section.open .accordion-section-title,
    209209#customize-controls .control-section .accordion-section-title:focus {
    210         color: #191e23;
     210        color: #0073aa;
    211211        background: #f5f5f5;
     212        border-left-color: #f5f5f5;
     213}
     214
     215#customize-controls .control-section .accordion-section-title:focus {
    212216        border-left: 4px solid #0073aa;
    213217}
    214218
    … …  
    227231#customize-theme-controls .control-section .accordion-section-title:hover:after,
    228232#customize-theme-controls .control-section.open .accordion-section-title:after,
    229233#customize-theme-controls .control-section .accordion-section-title:focus:after {
    230         color: #23282d;
     234        color: #0073aa;
    231235}
    232236
    233237#customize-theme-controls .control-section.open {
    … …  
    392396        padding: 10px 10px 12px 14px;
    393397        margin: 0;
    394398        line-height: 21px;
    395         color: #555;
     399        color: #555d66;
    396400}
    397401
    398402.accordion-sub-container.control-panel-content {
    … …  
    467471
    468472#customize-controls .panel-meta.customize-info .accordion-section-title:hover {
    469473        background: #fff;
    470         color: #555;
     474        color: #555d66;
    471475        border-left: none;
    472476}
    473477
    … …  
    475479.customize-controls-close:hover,
    476480.customize-controls-preview-toggle:focus,
    477481.customize-controls-preview-toggle:hover {
    478         background: #ddd;
    479         border-color: #ccc;
    480         color: #000;
     482        background: #fff;
     483        color: #0073aa;
    481484        outline: none;
    482485        -webkit-box-shadow: none;
    483486        box-shadow: none;
    484487}
    485488
     489
     490.customize-controls-close:focus,
     491.customize-controls-preview-toggle:focus {
     492        border-top: 4px solid #0073aa;
     493        height: 41px;
     494}
     495
    486496.customize-panel-back:hover,
    487497.customize-panel-back:focus,
    488498.customize-section-back:hover,
    489499.customize-section-back:focus {
    490         color: #23282d;
     500        color: #0073aa;
    491501        background: #f5f5f5;
    492502        outline: none;
    493503        -webkit-box-shadow: none;
    … …  
    494504        box-shadow: none;
    495505}
    496506
     507.customize-panel-back:focus,
     508.customize-section-back:focus {
     509        border-left: 4px solid #0073aa;
     510}
     511
    497512.customize-controls-close:before {
    498513        font: normal 22px/45px dashicons;
    499514        content: "\f335";
    … …  
    502517        left: 13px;
    503518}
    504519
     520.customize-controls-close:focus:before {
     521        top: -3px;
     522}
     523
    505524.customize-panel-back:before,
    506525.customize-section-back:before {
    507526        font: normal 20px/72px dashicons;
    … …  
    510529        left: 13px;
    511530}
    512531
     532.customize-panel-back:focus:before,
     533.customize-section-back:focus:before {
     534        left: 10px;
     535}
     536
    513537.wp-full-overlay-sidebar .wp-full-overlay-header {
    514538        background-color: #eee;
    515539        -webkit-transition: padding ease-in-out .18s;
    … …  
    801825}
    802826
    803827.customize-control-color .dropdown .dropdown-content {
    804         background-color: #555;
     828        background-color: #555d66;
    805829        border: 1px solid rgba(0, 0, 0, 0.15);
    806830}
    807831
    … …  
    884908        display: none;
    885909        position: absolute;
    886910        width: 100%;
    887         color: #555;
     911        color: #555d66;
    888912        white-space: nowrap;
    889913        text-overflow: ellipsis;
    890914        overflow: hidden;
    … …  
    933957.customize-control-header .uploaded .header-view .close {
    934958        font-size: 20px;
    935959        color: #fff;
    936         background: #555;
     960        background: #555d66;
    937961        background: rgba(0, 0, 0, 0.5);
    938962        position: absolute;
    939963        top: 10px;
    … …  
    10791103#customize-theme-controls .control-panel-themes > .accordion-section-title {
    10801104        cursor: default;
    10811105        background: #fff;
    1082         color: #555;
     1106        color: #555d66;
    10831107        border-top: 1px solid #ddd;
    10841108        border-bottom: 1px solid #ddd;
    10851109        border-left: none;
    … …  
    13461370
    13471371.control-panel-themes .customize-themes-section-title:focus,
    13481372.control-panel-themes .customize-themes-section-title:hover {
    1349         border-left-color: #0073aa;
    13501373        color: #0073aa;
    13511374        background: #f5f5f5;
     1375    border-left-color: #f5f5f5;
    13521376}
    13531377
     1378.control-panel-themes .customize-themes-section-title:focus {
     1379        border-left-color: #0073aa;
     1380}
     1381
    13541382.control-panel-themes .theme-section .customize-themes-section-title.selected:after {
    13551383        content: "\f147";
    13561384        font: 16px/1 dashicons;
    … …  
    21552183                background: #eee;
    21562184                border: 0;
    21572185                border-right: 1px solid #ddd;
    2158                 color: #444;
     2186                color: #555d66;
    21592187                cursor: pointer;
    21602188                -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
    21612189                transition: color .1s ease-in-out, background .1s ease-in-out;
    … …  
    22362264                padding: 9px 10px 12px 14px;
    22372265                margin: 0;
    22382266                line-height: 24px;
    2239                 color: #555;
     2267                color: #555d66;
    22402268                display: block;
    22412269                overflow: hidden;
    22422270                white-space: nowrap;

  • src/wp-admin/css/customize-widgets.css

     
    231231#available-widgets .widget-tpl.selected {
    232232        background: #f5f5f5;
    233233        border-bottom-color: #ccc;
     234        color: #0073aa;
     235}
     236
     237#available-widgets .widget-tpl.selected { /* Used for focus */
    234238        border-left: 4px solid #0073aa;
    235239}
    236240

  • src/wp-admin/css/themes.css

     
    15381538}
    15391539
    15401540.wp-full-overlay-footer .devices button:focus {
    1541         background-color: #fff;
    15421541        border-bottom-color: #0073aa;
    15431542}
    15441543
    1545 .wp-full-overlay-footer .devices button.active:before,
     1544.wp-full-overlay-footer .devices button.active:before {
     1545        color: #191e23;
     1546}
     1547
    15461548.wp-full-overlay-footer .devices button:hover:before,
    15471549.wp-full-overlay-footer .devices button:focus:before {
    1548         color: #191e23;
     1550        color: #0073aa;
    15491551}
    15501552
    15511553.wp-full-overlay-footer .devices .preview-desktop:before {

  • src/wp-admin/js/customize-controls.js

     
    980980                                content = section.contentContainer,
    981981                                overlay = section.headContainer.closest( '.wp-full-overlay' ),
    982982                                backBtn = content.find( '.customize-section-back' ),
     983                                focusTarget = content.find( ':focusable' ).first() || backBtn,
    983984                                sectionTitle = section.headContainer.find( '.accordion-section-title' ).first(),
    984985                                expand;
    985986
    … …  
    993994                                                        sectionTitle.attr( 'tabindex', '-1' );
    994995                                                        backBtn.attr( 'tabindex', '0' );
    995996
    996                                                         backBtn.focus();
     997                                                        focusTarget.focus();
    997998                                                        content.css( 'top', '' );
    998999                                                        container.scrollTop( 0 );
    9991000
    … …  
    19691970                                overlay = accordionSection.closest( '.wp-full-overlay' ),
    19701971                                container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ),
    19711972                                topPanel = panel.headContainer.find( '.accordion-section-title' ),
    1972                                 backBtn = accordionSection.find( '.customize-panel-back' );
     1973                                backBtn = accordionSection.find( '.customize-panel-back' ),
     1974                                focusTarget = accordionSection.find( ':focusable' ).first() || backBtn;
    19731975
    19741976                        if ( expanded && ! accordionSection.hasClass( 'current-panel' ) ) {
    19751977                                // Collapse any sibling sections/panels
    … …  
    19881990                                        topPanel.attr( 'tabindex', '-1' );
    19891991                                        backBtn.attr( 'tabindex', '0' );
    19901992
    1991                                         backBtn.focus();
     1993                                        focusTarget.focus();
    19921994                                        accordionSection.css( 'top', '' );
    19931995                                        container.scrollTop( 0 );
    19941996