WordPress.org
Get WordPress

Make WordPress Core

Ticket #52230: customizer.diff

File customizer.diff, 9.3 KB (added by ryelle, 5 years ago)

  • src/wp-admin/css/colors/_admin.scss

     
    622622        color: $menu-highlight-text;
    623623}
    624624
     625
     626/* Nav Menus */
     627
     628.nav-menus-php .item-edit:focus:before {
     629        box-shadow:
     630                0 0 0 1px lighten($button-color, 10),
     631                0 0 2px 1px $button-color;
     632}
     633
     634
    625635/* Responsive Component */
    626636
    627637div#wp-responsive-toggle a:before {
    … …  
    653663}
    654664
    655665/* Customizer */
    656 #customize-controls .control-section:hover > .accordion-section-title,
    657 #customize-controls .control-section .accordion-section-title:hover,
    658 #customize-controls .control-section.open .accordion-section-title,
    659 #customize-controls .control-section .accordion-section-title:focus {
    660         color: $highlight-color;
    661         border-left-color: $highlight-color;
    662 }
     666.wp-core-ui {
     667        #customize-controls .control-section:hover > .accordion-section-title,
     668        #customize-controls .control-section .accordion-section-title:hover,
     669        #customize-controls .control-section.open .accordion-section-title,
     670        #customize-controls .control-section .accordion-section-title:focus {
     671                color: $link;
     672                border-left-color: $button-color;
     673        }
    663674
    664 .customize-controls-close:focus,
    665 .customize-controls-close:hover,
    666 .customize-controls-preview-toggle:focus,
    667 .customize-controls-preview-toggle:hover {
    668         color: $highlight-color;
    669         border-top-color: $highlight-color;
    670 }
     675        .customize-controls-close:focus,
     676        .customize-controls-close:hover,
     677        .customize-controls-preview-toggle:focus,
     678        .customize-controls-preview-toggle:hover {
     679                color: $link;
     680                border-top-color: $button-color;
     681        }
    671682
    672 .customize-panel-back:hover,
    673 .customize-panel-back:focus,
    674 .customize-section-back:hover,
    675 .customize-section-back:focus {
    676         color: $highlight-color;
    677         border-left-color: $highlight-color;
    678 }
     683        .customize-panel-back:hover,
     684        .customize-panel-back:focus,
     685        .customize-section-back:hover,
     686        .customize-section-back:focus {
     687                color: $link;
     688                border-left-color: $button-color;
     689        }
    679690
    680 .customize-screen-options-toggle:hover,
    681 .customize-screen-options-toggle:active,
    682 .customize-screen-options-toggle:focus,
    683 .active-menu-screen-options .customize-screen-options-toggle,
    684 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
    685 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
    686 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
    687         color: $highlight-color;
    688 }
     691        .customize-screen-options-toggle:hover,
     692        .customize-screen-options-toggle:active,
     693        .customize-screen-options-toggle:focus,
     694        .active-menu-screen-options .customize-screen-options-toggle,
     695        #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
     696        #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
     697        #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
     698                color: $link;
     699        }
    689700
    690 .wp-customizer .menu-item .submitbox .submitdelete:focus,
    691 .customize-screen-options-toggle:focus:before,
    692 #customize-controls .customize-info .customize-help-toggle:focus:before,
    693 .wp-customizer button:focus .toggle-indicator:before,
    694 .menu-delete:focus,
    695 .menu-item-bar .item-delete:focus:before,
    696 #available-menu-items .item-add:focus:before {
    697         box-shadow:
    698                 0 0 0 1px lighten($highlight-color, 10),
    699                 0 0 2px 1px $highlight-color;
    700 }
     701        .customize-screen-options-toggle:focus:before,
     702        #customize-controls .customize-info .customize-help-toggle:focus:before,
     703        &.wp-customizer button:focus .toggle-indicator:before,
     704        .menu-item-bar .item-delete:focus:before,
     705        #available-menu-items .item-add:focus:before,
     706        #customize-save-button-wrapper .save:focus,
     707        #publish-settings:focus {
     708                box-shadow:
     709                        0 0 0 1px lighten($button-color, 10),
     710                        0 0 2px 1px $button-color;
     711        }
    701712
    702 #customize-controls .customize-info.open .customize-help-toggle,
    703 #customize-controls .customize-info .customize-help-toggle:focus,
    704 #customize-controls .customize-info .customize-help-toggle:hover {
    705         color: $highlight-color;
    706 }
     713        #customize-controls .customize-info.open .customize-help-toggle,
     714        #customize-controls .customize-info .customize-help-toggle:focus,
     715        #customize-controls .customize-info .customize-help-toggle:hover {
     716                color: $link;
     717        }
    707718
    708 .control-panel-themes .customize-themes-section-title:focus,
    709 .control-panel-themes .customize-themes-section-title:hover {
    710         border-left-color: $highlight-color;
    711         color: $highlight-color;
    712 }
     719        .control-panel-themes .customize-themes-section-title:focus,
     720        .control-panel-themes .customize-themes-section-title:hover {
     721                border-left-color: $button-color;
     722                color: $link;
     723        }
    713724
    714 .control-panel-themes .theme-section .customize-themes-section-title.selected:after {
    715         background: $highlight-color;
    716 }
     725        .control-panel-themes .theme-section .customize-themes-section-title.selected:after {
     726                background: $button-color;
     727        }
    717728
    718 .control-panel-themes .customize-themes-section-title.selected {
    719         color: $highlight-color;
    720 }
     729        .control-panel-themes .customize-themes-section-title.selected {
     730                color: $link;
     731        }
    721732
    722 #customize-theme-controls .control-section:hover > .accordion-section-title:after,
    723 #customize-theme-controls .control-section .accordion-section-title:hover:after,
    724 #customize-theme-controls .control-section.open .accordion-section-title:after,
    725 #customize-theme-controls .control-section .accordion-section-title:focus:after,
    726 #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after,
    727 #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,
    728 #customize-outer-theme-controls .control-section.open .accordion-section-title:after,
    729 #customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
    730         color: $highlight-color;
    731 }
     733        #customize-theme-controls .control-section:hover > .accordion-section-title:after,
     734        #customize-theme-controls .control-section .accordion-section-title:hover:after,
     735        #customize-theme-controls .control-section.open .accordion-section-title:after,
     736        #customize-theme-controls .control-section .accordion-section-title:focus:after,
     737        #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after,
     738        #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,
     739        #customize-outer-theme-controls .control-section.open .accordion-section-title:after,
     740        #customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
     741                color: $link;
     742        }
    732743
    733 .customize-control .attachment-media-view .button-add-media:focus {
    734         background-color: #fbfbfc;
    735         border-color: $highlight-color;
    736         border-style: solid;
    737         box-shadow: 0 0 0 1px $highlight-color;
    738         outline: 2px solid transparent;
    739 }
     744        .customize-control .attachment-media-view .button-add-media:focus {
     745                background-color: #fbfbfc;
     746                border-color: $button-color;
     747                border-style: solid;
     748                box-shadow: 0 0 0 1px $button-color;
     749                outline: 2px solid transparent;
     750        }
    740751
    741 .wp-full-overlay-footer .devices button:focus,
    742 .wp-full-overlay-footer .devices button.active:hover {
    743         border-bottom-color: $highlight-color;
    744 }
     752        .wp-full-overlay-footer .devices button:focus,
     753        .wp-full-overlay-footer .devices button.active:hover {
     754                border-bottom-color: $button-color;
     755        }
    745756
    746 .wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
    747 .wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
    748         color: $highlight-color;
    749 }
     757        .wp-full-overlay-footer .devices button:hover:before,
     758        .wp-full-overlay-footer .devices button:focus:before {
     759                color: $button-color;
     760        }
    750761
    751 .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
    752 .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
    753         box-shadow:
    754                 0 0 0 1px lighten($highlight-color, 10),
    755                 0 0 2px 1px $highlight-color;
    756 }
     762        .wp-full-overlay .collapse-sidebar:hover,
     763        .wp-full-overlay .collapse-sidebar:focus {
     764                color: $button-color;
     765        }
    757766
    758 .wp-full-overlay-footer .devices button:hover:before,
    759 .wp-full-overlay-footer .devices button:focus:before {
    760         color: $highlight-color;
     767        .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
     768        .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
     769                box-shadow:
     770                        0 0 0 1px lighten($button-color, 10),
     771                        0 0 2px 1px $button-color;
     772        }
     773
     774        &.wp-customizer .theme-overlay .theme-header .close:focus,
     775        &.wp-customizer .theme-overlay .theme-header .close:hover,
     776        &.wp-customizer .theme-overlay .theme-header .right:focus,
     777        &.wp-customizer .theme-overlay .theme-header .right:hover,
     778        &.wp-customizer .theme-overlay .theme-header .left:focus,
     779        &.wp-customizer .theme-overlay .theme-header .left:hover {
     780                border-bottom-color: $button-color;
     781                color: $link;
     782        }
    761783}

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

     
    28212821                position: absolute;
    28222822                top: 0;
    28232823                left: 48px;
    2824                 line-height: 3.2;
     2824                line-height: 2.6;
    28252825                font-size: 14px;
    2826                 padding: 0 12px;
     2826                padding: 0 12px 4px;
    28272827                margin: 0;
    28282828                height: 45px;
    28292829                background: #eee;
    28302830                border: 0;
    28312831                border-right: 1px solid #ddd;
     2832                border-top: 4px solid #eee;
    28322833                color: #555d66;
    28332834                cursor: pointer;
    28342835                transition: color .1s ease-in-out, background .1s ease-in-out;