diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index ffc7e067c922a..2507f8c2e5627 100644 --- a/src/wp-admin/css/themes.css +++ b/src/wp-admin/css/themes.css @@ -282,6 +282,22 @@ body.js .theme-browser.search-loading { .theme-browser .theme.active .theme-actions .button:not(.button-primary):focus { background: #fff; + box-shadow: + 0 0 0 var(--wp-admin-border-width-focus, 1.5px) #fff, + inset 0 0 0 1px var(--wp-admin-theme-color, #3858e9); + outline: 1px solid transparent; +} + +/* Active theme card: uses white outer ring against the colored banner. */ +.theme-browser .theme.active .theme-actions .button.disabled:focus { + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) #fff, inset 0 0 0 1px var(--wp-admin-theme-color, #3858e9) !important; + outline: 1px solid transparent; +} + +/* Other theme cards: standard focus ring on the card white background. */ +.theme-browser .theme:not(.active) .theme-actions .button.disabled:focus { + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9) !important; + outline: 1px solid transparent; } .theme-browser .theme .theme-author { diff --git a/src/wp-admin/theme-install.php b/src/wp-admin/theme-install.php index ce06d850b972c..a611a6819367f 100644 --- a/src/wp-admin/theme-install.php +++ b/src/wp-admin/theme-install.php @@ -416,7 +416,7 @@ <# if ( ! data.active ) { #> <# } else { #> - + <# } #> <# } #> <# if ( data.customize_url ) { #> @@ -436,12 +436,12 @@ $aria_label = sprintf( _x( 'Cannot Activate %s', 'theme' ), '{{ data.name }}' ); ?> <# if ( data.activate_url ) { #> - + <# } #> <# if ( data.customize_url ) { #> - + <# } else { #> - + <# } #> <# } #> <# } else { #> @@ -457,8 +457,8 @@ /* translators: %s: Theme name. */ $aria_label = sprintf( _x( 'Cannot Install %s', 'theme' ), '{{ data.name }}' ); ?> - - + + <# } #> <# } #> @@ -495,16 +495,16 @@ <# if ( ! data.active ) { #> <# } else { #> - + <# } #> <# } else { #> - + <# } #> <# } else { #> <# if ( data.compatible_wp && data.compatible_php ) { #> <# } else { #> - + <# } #> <# } #>