WordPress.org
Get WordPress

Make WordPress Core

Changeset 50386


Ignore:
Timestamp:
02/18/2021 04:49:02 PM (5 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.

Location:
trunk/src/wp-admin/css
Files:
2 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}

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

    r50162 r50386  
    28182818                top: 0;
    28192819                left: 48px;
    2820                 line-height: 3.2;
     2820                line-height: 2.6;
    28212821                font-size: 14px;
    2822                 padding: 0 12px;
     2822                padding: 0 12px 4px;
    28232823                margin: 0;
    28242824                height: 45px;
    … …  
    28262826                border: 0;
    28272827                border-right: 1px solid #dcdcde;
     2828                border-top: 4px solid #f0f0f1;
    28282829                color: #50575e;
    28292830                cursor: pointer;
Note: See TracChangeset for help on using the changeset viewer.