Customizer: Remove Header images button hidden by some images

[jacklyn.jade]

The option to remove an image uploaded for the header section of a theme is an "x" that appears on hover.

The "x" is a light grey color that can be difficult for users to see if they have images that are not mainly black or white. See the attached screen shots:

Perhaps something a little more noticeable would be nice here. Even the hover state of the "x" with the black and white outline would work.

[RDall]

Hi Jacklyn I think this could be solved with some text shadow behind the x. Will see if I can get a patch together.

[RDall]

Adds slight text shadow to X on both default style and rtl

[SergeyBiryukov]

Thanks for the patch, a before/after screenshot would be helpful too :)

No need to patch RTL files, a post-commit task takes care of that.

[RDall]

Adds another px of blur-radius and removes the rtl edit.

[RDall]

Latest patch 31325.2.diff is slightly adjusted on the blur radius from the previous patch.

Also here the before and after views as requested:

[jorbin]

There is clearly room for improvement here. I don't know if the blur is the right treatment though. It almost makes the X seem like something is wrong with it.

I wonder how this would look with no offset, maybe something like text-shadow: 0px 0px 2px #000000;

[RDall]

I'll give that a try on my next patch. The reason I used the blur is because I couldn't border the X as it was a dashicon as I though that would have been the best answer. I'll get you another patch this evening!

[RDall]

Adds 2px of white background with no offset.

[RDall]

The left image is the pre-patch the middle image is with the patch and the right image is when you hover over the X. I went with the white again because it meshes with the white background of the hover state of the X in the right photo. Although it looks like they differ a lot in the photos in the patch the difference is in my opinion negligible.

[jorbin]

Text shadow will work for 93% of users according to ​http://caniuse.com/#feat=css-textshadow , which I'm fine with. I'm going to ask in the design chat if there are any comments, but I like this change.

[melchoyce]

The text shadow feels really jagged and inelegant to me. In customizer-headerimg-x.png​, I've explored adding a transparent black background to the X, and made the X itself white. It seems to work well on dark, light, and busy images.

Here's the css I ended up using:

.customize-control-header .uploaded .header-view .close {
  font-size: 20px;
  color: #FFF;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  visibility: hidden;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 20px;
  height: 20px;
  cursor: pointer;
  padding: 2px;
}

.customize-control-header .uploaded .header-view .close:hover {
  color: #FFF;
  text-shadow: none;
}

[RDall]

Changes X to white and puts transparent box behind as per Mel Choice Suggestion

[RDall]

Hey @melchoyce I went ahead and tried out your suggestion and then made a new patch. I completely agree with you regarding this change. It is a much more elegant solution.

[afercia]

See also related #32227

[SergeyBiryukov]

In 32382:

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.