diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index 4bd63832f9795..3548f12e9c6b5 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -2317,7 +2317,7 @@ p.customize-section-description { .wp-customizer .theme-overlay .theme-actions { text-align: right; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */ - padding: 10px 25px; + padding: 10px 25px 5px; background: #f0f0f1; border-top: 1px solid #dcdcde; } @@ -2326,13 +2326,6 @@ p.customize-section-description { margin-left: 8px; } -.control-panel-themes .theme-actions .delete-theme { - left: 15px; /* these override themes.css on mobile */ - right: auto; - bottom: auto; - position: absolute; -} - .modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content { overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */ } diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index c1a1eb22dde49..268cc558f3e10 100644 --- a/src/wp-admin/css/themes.css +++ b/src/wp-admin/css/themes.css @@ -506,10 +506,12 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap { z-index: 30; box-sizing: border-box; border-top: 1px solid #f0f0f1; + display: flex; + justify-content: center; + gap: 5px; } -.theme-overlay .theme-actions a { - margin-right: 5px; +.theme-overlay .theme-actions .button { margin-bottom: 5px; } @@ -521,26 +523,21 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap { .broken-themes a.delete-theme, .theme-overlay .theme-actions .delete-theme { - color: #d63638; + color: #b32d2e; text-decoration: none; border-color: transparent; box-shadow: none; background: transparent; } -.theme-overlay .theme-actions .delete-theme { - position: absolute; - right: 10px; - bottom: 5px; -} - .broken-themes a.delete-theme:hover, .broken-themes a.delete-theme:focus, .theme-overlay .theme-actions .delete-theme:hover, .theme-overlay .theme-actions .delete-theme:focus { - background: #d63638; + background: #b32d2e; color: #fff; - border-color: #d63638; + border-color: #b32d2e; + box-shadow: 0 0 0 1px #b32d2e; } .theme-overlay .theme-actions .active-theme, diff --git a/src/wp-admin/includes/theme.php b/src/wp-admin/includes/theme.php index ea73d8650da9c..b5579052a14c9 100644 --- a/src/wp-admin/includes/theme.php +++ b/src/wp-admin/includes/theme.php @@ -1058,12 +1058,7 @@ function customize_themes_print_templates() { <# if ( data.active ) { #> <# } else if ( 'installed' === data.type ) { #> - - <# if ( data.actions && data.actions['delete'] ) { #> - - <# } #> - - +
<# if ( data.blockTheme ) { #> <# } #> <# } #> +
+ + <# if ( data.actions && data.actions['delete'] ) { #> + + <# } #> + <# } else { #> <# if ( data.compatibleWP && data.compatiblePHP ) { #> diff --git a/src/wp-admin/themes.php b/src/wp-admin/themes.php index d5d8c150e32cd..80486748f460b 100644 --- a/src/wp-admin/themes.php +++ b/src/wp-admin/themes.php @@ -1221,23 +1221,23 @@ function wp_theme_auto_update_setting_template() { /* translators: %s: Theme name. */ $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' ); ?> - <# if ( data.actions.activate ) { #> - - <# } #> <# if ( ! data.blockTheme ) { #> <# } #> + <# if ( data.actions.activate ) { #> + + <# } #> <# } else { #> - <# if ( data.actions.activate ) { #> - - <# } #> <# if ( ! data.blockTheme ) { #> <# } #> + <# if ( data.actions.activate ) { #> + + <# } #> <# } #> diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css index 6da6da51e07d4..787efacab6953 100644 --- a/src/wp-includes/css/buttons.css +++ b/src/wp-includes/css/buttons.css @@ -385,6 +385,10 @@ TABLE OF CONTENTS: vertical-align: inherit; } + .wp-customizer .theme-overlay .theme-actions .button { + margin-bottom: 5px; + } + .media-modal-content .media-toolbar-primary .media-button { margin-top: 10px; margin-left: 5px;