WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
02/18/2021 04:49:02 PM (4 years ago)
Author:
ryelle
Message:

Customizer: Bring admin color schemes back into the customizer.

In #50547, the admin color schemes were added to the customizer UI, but at some point specificity changed and the colors were overridden by the defaults. This brings the color schemes back into the customizer, using the button color as a highlight, with the link color for text to keep things readable.

Follow up to [48371].
Props audrasjb, peterwilsoncc.
Fixes #52230.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

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