sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

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

Props dlh, joen.
Fixes #50547.


git-svn-id: https://develop.svn.wordpress.org/trunk@48371 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Riad Benguella 2020-07-07 11:28:12 +00:00
parent 4e78b0acd9
commit f3d3e1df31
1 changed files with 108 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -633,3 +633,111 @@ div#wp-responsive-toggle a:before {
.mce-container.mce-menu .mce-menu-item-preview.mce-active {
background: $highlight-color;
}
/* 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;
}
.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-panel-back:hover,
.customize-panel-back:focus,
.customize-section-back:hover,
.customize-section-back:focus {
color: $highlight-color;
border-left-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: $highlight-color;
}
.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-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;
}
.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 .theme-section .customize-themes-section-title.selected:after {
background: $highlight-color;
}
.control-panel-themes .customize-themes-section-title.selected {
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: $highlight-color;
}
.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;
}
.wp-full-overlay-footer .devices button:focus,
.wp-full-overlay-footer .devices button.active:hover {
border-bottom-color: $highlight-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 .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-footer .devices button:hover:before,
.wp-full-overlay-footer .devices button:focus:before {
color: $highlight-color;
}