Changeset 48371

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:

• trunk/src/wp-admin/css/colors/_admin.scss (modified) (1 diff)

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

@@ -634 +634 @@
     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;
+}