diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index 743bf7a1e2..37f1fc1666 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/wp-admin/css/colors/_admin.scss @@ -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; + } } diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index e3b17f2c37..0a8fb42094 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -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;