Customizer: Use a semantic, accessible element for Remove Header Image button.
Make the button more noticeable on dark, light, and busy images. props afercia, RDall, melchoyce. fixes #32227, #31325. git-svn-id: https://develop.svn.wordpress.org/trunk@32382 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
2b8e7270d5
commit
5af9ac0ea2
@ -764,29 +764,22 @@ p.customize-section-description {
|
||||
/* Header control: overlay "close" button */
|
||||
|
||||
.customize-control-header .uploaded .header-view .close {
|
||||
font-size: 2em;
|
||||
color: grey;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
background: #555;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
right: -999px;
|
||||
z-index: 1;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.customize-control-header .uploaded .header-view .close:hover {
|
||||
color: black;
|
||||
text-shadow:
|
||||
-1px -1px 0 #fff,
|
||||
1px -1px 0 #fff,
|
||||
-1px 1px 0 #fff,
|
||||
1px 1px 0 #fff;
|
||||
}
|
||||
|
||||
.customize-control-header .header-view:hover .close {
|
||||
visibility: visible;
|
||||
.customize-control-header .header-view:hover .close,
|
||||
.customize-control-header .header-view .close:focus {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
/* Header control: randomiz(s)er */
|
||||
|
@ -1074,7 +1074,7 @@ class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
|
||||
<# } else { #>
|
||||
|
||||
<# if (data.type === 'uploaded') { #>
|
||||
<div class="dashicons dashicons-no close"></div>
|
||||
<button type="button" class="dashicons dashicons-no close"><span class="screen-reader-text"><?php _e( 'Remove image' ); ?></span></button>
|
||||
<# } #>
|
||||
|
||||
<button type="button" class="choice thumbnail"
|
||||
|
Loading…
Reference in New Issue
Block a user