Twenty Seventeen: broken MediaElement.js player icons on hover

[celloexpressions]

Color schemes seem to cause issues with MediaElement.js audio and video player icons, erasing the icons on hover. Likely also related to button styling.

[celloexpressions]

Hover state on play/pause icon, normal on audio/mute button.

[menakas]

Not able to reproduce with dark color scheme (of the Twenty Seventeen theme)

[menakas]

Not able to reproduce with light color scheme (of the Twenty Seventeen theme)

[menakas]

Hi @celloexpressions,
I am not able to reproduce this with the various color schemes of the theme - light, dark and custom. I have attached gifs for the same. Can you give some more pointers that could help me reproduce this defect?

[davidakennedy]

Hi @celloexpressions – thanks for creating this issue!

Like @menakas, I wasn't able to reproduce this issue. I tried on all color types, light, dark and custom. Everything worked as normal for me. I also double checked hover styles against Twenty Sixteen.

I'm going to close this. If I missed something, let me know, and we can reopen it and fix.

[celloexpressions]

This is an issue with custom color schemes, not light/dark, and only in the customize preview. Looks like the cascade is broken here with .colors-custom button:hover.

[xkon]

Fixes button:hover color on me-js

[xkon]

40843.diff skips the me-js buttons from applying the custom background colors.

Further information: As the button background is .svg based, by adding a custom color through an extra .css or Customizr was resulting on overwriting the .svg element. That being said there's no way to target the me-js specific .svg as installations are different on every WordPress. This patch uses a simple trick with :not() to 'skip' the me-js buttons while selecting new colors.

It works fine on my tests but further tests on different spec pcs are always welcome.

Concerning browser support on not(): ​https://www.w3schools.com/cssref/sel_not.asp

[xkon]

Fixes button:hover background on me-js container

[ianbelanger]

I can confirm this issue still exists in Twenty Seventeen and the patch still applies and fixes it. I am recommending this gets committed

[SergeyBiryukov]

I see similar styles in all of the bundled themes, is it only Twenty Seventeen that has this issue?

[ianbelanger]

That's a great question @SergeyBiryukov, I will look into the other themes today and create separate tickets, if needed.

[ianbelanger]

It appears that this is an issue in only Twenty Seventeen. 2010 - 2016 do not have the Custom Color option and 2019 does have the Custom Color option, but does not have this issue.

[xkon]

refresh

[xkon]

40843.3.diff​ is just a simple refresh, applies fine now without need of auto-correcting lines.

@SergeyBiryukov yes I can confirm as @ianbelanger said as well this issue was only for 2017 :) .

Marking this for commit.

[pento]

In 45146:

Twenty Seventeeen: Fix MediaElement control hover colours in the customiser.

When selecting custom colour schemes in the customiser, the hover colour is incorrectly applied to MediaElement controls.

Props xkon, ianbelanger.
Fixes #40843.

[afercia]

See #47543 as the selector used in [45146] appears to be not supported (not even by latest Chrome).

button:hover:not( .mejs-container > button ) is just ignored as "invalid", preventing normal buttons to get their hover style.

[SergeyBiryukov]

In 45576:

Twenty Seventeen: Correct the CSS selectors intended to fix hover colors for MediaElement controls.

This is a follow-up to the previous fix in [45146], which didn't work as expected.

Props ryokuhi.
Fixes #47543. See #40843.

[SergeyBiryukov]

In 45847:

Twenty Seventeen: Correct the CSS selectors intended to fix hover colors for MediaElement controls.

This is a follow-up to the previous fix in [45146], which didn't work as expected.

Props ryokuhi.
Merges [45576] to the 5.2 branch.
Fixes #47543. See #40843.