vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2025-10-16 12:05:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Customizer: Bring admin color schemes back into the customizer.

Browse Source 
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.



git-svn-id: https://develop.svn.wordpress.org/trunk@50386 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Kelly Choyce-Dwan 2021-02-18 16:49:02 +00:00
parent d6dfdfdac7
commit bc1b41341b
2 changed files with 116 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
src/wp-admin/css/colors/_admin.scss
View File

@ -623,6 +623,16 @@ body.more-filters-opened .more-filters:focus:before {
color: $menu-highlight-text;
}
/* Nav Menus */
.nav-menus-php .item-edit:focus:before {
box-shadow:
0 0 0 1px lighten($button-color, 10),
0 0 2px 1px $button-color;
}
/* Responsive Component */
div#wp-responsive-toggle a:before {
@ -654,109 +664,121 @@ div#wp-responsive-toggle a:before {
}
/* Customizer */
#customize-controls .control-section:hover > .accordion-section-title,
#customize-controls .control-section .accordion-section-title:hover,
#customize-controls .control-section.open .accordion-section-title,
#customize-controls .control-section .accordion-section-title:focus {
color: $highlight-color;
border-left-color: $highlight-color;
}
.wp-core-ui {
#customize-controls .control-section:hover > .accordion-section-title,
#customize-controls .control-section .accordion-section-title:hover,
#customize-controls .control-section.open .accordion-section-title,
#customize-controls .control-section .accordion-section-title:focus {
color: $link;
border-left-color: $button-color;
}
.customize-controls-close:focus,
.customize-controls-close:hover,
.customize-controls-preview-toggle:focus,
.customize-controls-preview-toggle:hover {
color: $highlight-color;
border-top-color: $highlight-color;
}
.customize-controls-close:focus,
.customize-controls-close:hover,
.customize-controls-preview-toggle:focus,
.customize-controls-preview-toggle:hover {
color: $link;
border-top-color: $button-color;
}
.customize-panel-back:hover,
.customize-panel-back:focus,
.customize-section-back:hover,
.customize-section-back:focus {
color: $highlight-color;
border-left-color: $highlight-color;
}
.customize-panel-back:hover,
.customize-panel-back:focus,
.customize-section-back:hover,
.customize-section-back:focus {
color: $link;
border-left-color: $button-color;
}
.customize-screen-options-toggle:hover,
.customize-screen-options-toggle:active,
.customize-screen-options-toggle:focus,
.active-menu-screen-options .customize-screen-options-toggle,
#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
color: $highlight-color;
}
.customize-screen-options-toggle:hover,
.customize-screen-options-toggle:active,
.customize-screen-options-toggle:focus,
.active-menu-screen-options .customize-screen-options-toggle,
#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
color: $link;
}
.wp-customizer .menu-item .submitbox .submitdelete:focus,
.customize-screen-options-toggle:focus:before,
#customize-controls .customize-info .customize-help-toggle:focus:before,
.wp-customizer button:focus .toggle-indicator:before,
.menu-delete:focus,
.menu-item-bar .item-delete:focus:before,
#available-menu-items .item-add:focus:before {
box-shadow:
0 0 0 1px lighten($highlight-color, 10),
0 0 2px 1px $highlight-color;
}
.customize-screen-options-toggle:focus:before,
#customize-controls .customize-info .customize-help-toggle:focus:before,
&.wp-customizer button:focus .toggle-indicator:before,
.menu-item-bar .item-delete:focus:before,
#available-menu-items .item-add:focus:before,
#customize-save-button-wrapper .save:focus,
#publish-settings:focus {
box-shadow:
0 0 0 1px lighten($button-color, 10),
0 0 2px 1px $button-color;
}
#customize-controls .customize-info.open .customize-help-toggle,
#customize-controls .customize-info .customize-help-toggle:focus,
#customize-controls .customize-info .customize-help-toggle:hover {
color: $highlight-color;
}
#customize-controls .customize-info.open .customize-help-toggle,
#customize-controls .customize-info .customize-help-toggle:focus,
#customize-controls .customize-info .customize-help-toggle:hover {
color: $link;
}
.control-panel-themes .customize-themes-section-title:focus,
.control-panel-themes .customize-themes-section-title:hover {
border-left-color: $highlight-color;
color: $highlight-color;
}
.control-panel-themes .customize-themes-section-title:focus,
.control-panel-themes .customize-themes-section-title:hover {
border-left-color: $button-color;
color: $link;
}
.control-panel-themes .theme-section .customize-themes-section-title.selected:after {
background: $highlight-color;
}
.control-panel-themes .theme-section .customize-themes-section-title.selected:after {
background: $button-color;
}
.control-panel-themes .customize-themes-section-title.selected {
color: $highlight-color;
}
.control-panel-themes .customize-themes-section-title.selected {
color: $link;
}
#customize-theme-controls .control-section:hover > .accordion-section-title:after,
#customize-theme-controls .control-section .accordion-section-title:hover:after,
#customize-theme-controls .control-section.open .accordion-section-title:after,
#customize-theme-controls .control-section .accordion-section-title:focus:after,
#customize-outer-theme-controls .control-section:hover > .accordion-section-title:after,
#customize-outer-theme-controls .control-section .accordion-section-title:hover:after,
#customize-outer-theme-controls .control-section.open .accordion-section-title:after,
#customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
color: $highlight-color;
}
#customize-theme-controls .control-section:hover > .accordion-section-title:after,
#customize-theme-controls .control-section .accordion-section-title:hover:after,
#customize-theme-controls .control-section.open .accordion-section-title:after,
#customize-theme-controls .control-section .accordion-section-title:focus:after,
#customize-outer-theme-controls .control-section:hover > .accordion-section-title:after,
#customize-outer-theme-controls .control-section .accordion-section-title:hover:after,
#customize-outer-theme-controls .control-section.open .accordion-section-title:after,
#customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
color: $link;
}
.customize-control .attachment-media-view .button-add-media:focus {
background-color: #fbfbfc;
border-color: $highlight-color;
border-style: solid;
box-shadow: 0 0 0 1px $highlight-color;
outline: 2px solid transparent;
}
.customize-control .attachment-media-view .button-add-media:focus {
background-color: #fbfbfc;
border-color: $button-color;
border-style: solid;
box-shadow: 0 0 0 1px $button-color;
outline: 2px solid transparent;
}
.wp-full-overlay-footer .devices button:focus,
.wp-full-overlay-footer .devices button.active:hover {
border-bottom-color: $highlight-color;
}
.wp-full-overlay-footer .devices button:focus,
.wp-full-overlay-footer .devices button.active:hover {
border-bottom-color: $button-color;
}
.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
.wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
color: $highlight-color;
}
.wp-full-overlay-footer .devices button:hover:before,
.wp-full-overlay-footer .devices button:focus:before {
color: $button-color;
}
.wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
.wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
box-shadow:
0 0 0 1px lighten($highlight-color, 10),
0 0 2px 1px $highlight-color;
}
.wp-full-overlay .collapse-sidebar:hover,
.wp-full-overlay .collapse-sidebar:focus {
color: $button-color;
}
.wp-full-overlay-footer .devices button:hover:before,
.wp-full-overlay-footer .devices button:focus:before {
color: $highlight-color;
.wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
.wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
box-shadow:
0 0 0 1px lighten($button-color, 10),
0 0 2px 1px $button-color;
}
&.wp-customizer .theme-overlay .theme-header .close:focus,
&.wp-customizer .theme-overlay .theme-header .close:hover,
&.wp-customizer .theme-overlay .theme-header .right:focus,
&.wp-customizer .theme-overlay .theme-header .right:hover,
&.wp-customizer .theme-overlay .theme-header .left:focus,
&.wp-customizer .theme-overlay .theme-header .left:hover {
border-bottom-color: $button-color;
color: $link;
}
}

5
src/wp-admin/css/customize-controls.css
View File

@ -2817,14 +2817,15 @@ body.adding-widget .add-new-widget:before,
position: absolute;
top: 0;
left: 48px;
line-height: 3.2;
line-height: 2.6;
font-size: 14px;
padding: 0 12px;
padding: 0 12px 4px;
margin: 0;
height: 45px;
background: #f0f0f1;
border: 0;
border-right: 1px solid #dcdcde;
border-top: 4px solid #f0f0f1;
color: #50575e;
cursor: pointer;
transition: color .1s ease-in-out, background .1s ease-in-out;