Make WordPress Core


Ignore:
Timestamp:
07/07/2020 11:28:12 AM (4 years ago)
Author:
youknowriad
Message:

Customizer: Adapt the colors to the selected admin scheme colors.

Uses the $highlight-color variable to override the hardcoded colors used in the customizer UI.

Props dlh, joen.
Fixes #50547.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/colors/_admin.scss

    r48342 r48371  
    634634    background: $highlight-color;
    635635}
     636
     637/* Customizer */
     638#customize-controls .control-section:hover > .accordion-section-title,
     639#customize-controls .control-section .accordion-section-title:hover,
     640#customize-controls .control-section.open .accordion-section-title,
     641#customize-controls .control-section .accordion-section-title:focus {
     642    color: $highlight-color;
     643    border-left-color: $highlight-color;
     644}
     645
     646.customize-controls-close:focus,
     647.customize-controls-close:hover,
     648.customize-controls-preview-toggle:focus,
     649.customize-controls-preview-toggle:hover {
     650    color: $highlight-color;
     651    border-top-color: $highlight-color;
     652}
     653
     654.customize-panel-back:hover,
     655.customize-panel-back:focus,
     656.customize-section-back:hover,
     657.customize-section-back:focus {
     658    color: $highlight-color;
     659    border-left-color: $highlight-color;
     660}
     661
     662.customize-screen-options-toggle:hover,
     663.customize-screen-options-toggle:active,
     664.customize-screen-options-toggle:focus,
     665.active-menu-screen-options .customize-screen-options-toggle,
     666#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
     667#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
     668#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
     669    color: $highlight-color;
     670}
     671
     672.wp-customizer .menu-item .submitbox .submitdelete:focus,
     673.customize-screen-options-toggle:focus:before,
     674#customize-controls .customize-info .customize-help-toggle:focus:before,
     675.wp-customizer button:focus .toggle-indicator:before,
     676.menu-delete:focus,
     677.menu-item-bar .item-delete:focus:before,
     678#available-menu-items .item-add:focus:before {
     679    box-shadow:
     680        0 0 0 1px lighten($highlight-color, 10),
     681        0 0 2px 1px $highlight-color;
     682}
     683
     684#customize-controls .customize-info.open .customize-help-toggle,
     685#customize-controls .customize-info .customize-help-toggle:focus,
     686#customize-controls .customize-info .customize-help-toggle:hover {
     687    color: $highlight-color;
     688}
     689
     690.control-panel-themes .customize-themes-section-title:focus,
     691.control-panel-themes .customize-themes-section-title:hover {
     692    border-left-color: $highlight-color;
     693    color: $highlight-color;
     694}
     695
     696.control-panel-themes .theme-section .customize-themes-section-title.selected:after {
     697    background: $highlight-color;
     698}
     699
     700.control-panel-themes .customize-themes-section-title.selected {
     701    color: $highlight-color;
     702}
     703
     704#customize-theme-controls .control-section:hover > .accordion-section-title:after,
     705#customize-theme-controls .control-section .accordion-section-title:hover:after,
     706#customize-theme-controls .control-section.open .accordion-section-title:after,
     707#customize-theme-controls .control-section .accordion-section-title:focus:after,
     708#customize-outer-theme-controls .control-section:hover > .accordion-section-title:after,
     709#customize-outer-theme-controls .control-section .accordion-section-title:hover:after,
     710#customize-outer-theme-controls .control-section.open .accordion-section-title:after,
     711#customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
     712    color: $highlight-color;
     713}
     714
     715.customize-control .attachment-media-view .button-add-media:focus {
     716    background-color: #fbfbfc;
     717    border-color: $highlight-color;
     718    border-style: solid;
     719    box-shadow: 0 0 0 1px $highlight-color;
     720    outline: 2px solid transparent;
     721}
     722
     723.wp-full-overlay-footer .devices button:focus,
     724.wp-full-overlay-footer .devices button.active:hover {
     725    border-bottom-color: $highlight-color;
     726}
     727
     728.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
     729.wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
     730    color: $highlight-color;
     731}
     732
     733.wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
     734.wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
     735    box-shadow:
     736        0 0 0 1px lighten($highlight-color, 10),
     737        0 0 2px 1px $highlight-color;
     738}
     739
     740.wp-full-overlay-footer .devices button:hover:before,
     741.wp-full-overlay-footer .devices button:focus:before {
     742    color: $highlight-color;
     743}
Note: See TracChangeset for help on using the changeset viewer.