Twenty Fourteen: Better Audio/Video Player Styling with Genericons

[celloexpressions]

I just realized that we can easily replace the default icons in the Audio/Video players with Genericons, and also introduce some color.

While this is fine to wait until .1, it would introduce some color rules that child themers would probably want to override.

[celloexpressions]

First pass at improved Media Element styling with Genericons instead of the default non-flat icons.

[celloexpressions]

Some screenshots, although the best way to see the interactions is to test the patch.

[lancewillett]

I think we can look for 1.1, or you can merge into your colors plugin so people can use it right away.

[celloexpressions]

​Added to Fourteen Colors as a component for now, and we can look at it for 1.1 unless it gets horrible feedback. We'd also want tweaks from iamtakashi.

[celloexpressions]

Genericons 3.0.3 ​introduced a new "fullscreen" icon, so we could consider using that instead of genericon-external for the fullscreen icon (unless we don't update them for some reason). Might want to ask for some sort of a "collapse" or "escape" icon to go with that, although the X works fine too.

By the way, this has been in Fourteen Colors for the past 6 weeks and I haven't heard any feedback either way, which I think is a good sign. At a minimum it flattens the design a bit more to bring it more closely in link with the rest of Twenty Fourteen, and it also makes it even easier for child themers to customize the audio/video players.

[wonderboymusic]

If only for the new fullscreen icon (I loathe the one in MEjs)

[celloexpressions]

Use Genericons for Media Element icons (including in the editor), and update to Genericons 3.0.3.

[celloexpressions]

26469.1.diff​ contains an updated version of 26469.diff​ and also adds the styles to the the visual editor, and an update to Genericons 3.0.3 (which contains the new fullscreen icon).

Fourteen Colors has been extremely popular, and no one has complained about its Genericons treatment of the audio/video players, so I think this is definitely a good, subtle improvement.

We could also do something similar for Twenty Thirteen, as it also uses almost identical MediaElement styling and Genericons. We could also use Dashicons in the admin if the necessary icons are added.

[wonderboymusic]

I am not in love with the play button

[celloexpressions]

Replying to wonderboymusic:

I am not in love with the play button

Agreed, we need someone (probably @iamtakashi) to design something that fits Twenty Fourteen better.

With the attached patch - probably worth splitting the genericons update out and doing that separately (should not break anything), and skipping that is always an option (using the genericon-external icon instead of the new fullscreen one).

[lancewillett]

Replying to celloexpressions:

With the attached patch - probably worth splitting the genericons update out and doing that separately (should not break anything)

Yes, can you split it out to a new ticket? See also #25391 for Twenty Thirteen. I can get both updated today if you refresh the patches.

[celloexpressions]

Replying to lancewillett:

Yes, can you split it out to a new ticket? See also #25391 for Twenty Thirteen. I can get both updated today if you refresh the patches.

Created #28456, #25391 looks ready to go as well. For both, the binary files are unlikely to work through the patch; those may need to be taken from ​http://genericons.com/ and committed directly.

[lancewillett]

Thanks! Noted about binary files.

[lancewillett]

Can you also refresh the patch for this ticket without the Genericons changes?

[lancewillett]

@celloexpressions You should come to WordCamp Orange County this weekend. :) ​http://2014.oc.wordcamp.org/ -- on Sunday we can work on Trac + patches.

[celloexpressions]

Refresh, without Genericons

[celloexpressions]

Refreshed without Genericons and to resolve a conflict.

[lancewillett]

In 28694:

Twenty Fourteen: first pass at better Audio/Video player styling with genericons. Props celloexpressions, see #26469.

[lancewillett]

Let's leave this open for Takashi to take a look at the play button, and for more testing.

[iamtakashi]

Maybe something like this?

If we are happy with this I make a patch.

[celloexpressions]

Replying to iamtakashi:

Maybe something like this?

If we are happy with this I make a patch.

Looks way better to me! Now that I see that, what about matching the button colors here? The white would be green by default, with a white arrow, and then the lighter green on hover/focus. This is fairly similar to the button-in-primary-sidebar look, and the white-on-black isn't great.

[obenland]

Needs a refreshed patch soon.
iamtakashi is looking at it.

[iamtakashi]

Style update for the play button.

[lancewillett]

Can you also refresh the editor-style.css file to match?

[iamtakashi]

Refreshed patch including the changes for editor-style.css

[lancewillett]

Hmm, patch doesn't apply cleanly to editor-style.css. Can you refresh again please?

[obenland]

Does it apply from the src/ folder?

[lancewillett]

My fault, cancel. :/

[lancewillett]

In 29168:

Twenty Fourteen: improve styles for media "play" button. Props iamtakashi, closes #26469.