Re-style Audio/Video players in the admin

[celloexpressions]

The audio & video players' skins need to be updated to match the WordPress 3.8 redesign. We have two options: change the defaults for all players (effects the front-end also) or override our defaults in the admin.

We could potentially do some cool things with the colorschemes here, perhaps like Twenty Fourteen did and the Fourteen Colors plugin does. We could also replace the icons with Dashicons for flexibility (see also #26469). At a minimum, we should remove the orange color and update the blue.

These players are more visible in the admin in 3.9 with the addition of audio and video to the media editing modal. This should be fairly straightforward, as the players are easily styled with CSS, but we need to decide where to make the changes first.

[wonderboymusic]

Those colors were chosen because they are the official WP school colors. Global overrides for MediaElement take place in wp-mediaelement.css. So, once you update there, they are updated everywhere. Themes can subsequently override those in their own CSS.

If this happens soon, 3.9, otherwise next time.

[celloexpressions]

Replying to wonderboymusic:

Those colors were chosen because they are the official WP school colors.

Were the official colors :)

The minimum thing to do would be to swap out those colors in the global styles. We could also flatten the global styles a bit, like Twenty Thirteen and Fourteen do (#25209) without worrying about compatibility, but that's obviously a subjective choice. The question is: does the flatter look work better for the majority sites/themes currently in use? Themes can (and should) override the defaults, but the defaults should look good on as many sites as possible. I'd vote for flattening.

In addition to that change, though, the players should definitely be flattened in the admin, and the colors could also potentially be tied to the admin menu colors. As part of that flattening, we could replace the icons with Dashicons for consistency. Since themes can re-style the players anyway, causing inconsistencies between front- and back-end, I don't see a reason that they shouldn't match the admin in the admin. If we did this, it would be a matter of updating whichever global styles we want to for front-end, then doing the rest in probably wp-admin/css/media.css. Essentially, this is about having different styles for the front-end defaults and the back-end.

Once we figure out the scope I can put together patches & screenshots with specific proposed changes.

[helen]

Yeah, no, not happening for 3.9.

[celloexpressions]

Cleaner global MediaElement styling, inspired by Twenty Thirteen and Fourteen's overrides, and using the WordPress 3.8+ design aesthetic and colors.

[celloexpressions]

27516.global.diff​ proposes new default styling for MediaElement players, most importantly using the new WordPress colors.

With or without this, we can also override the default styles in the admin to make the players feel more at home, utilizing the admin color schemes and Dashicons. The Fourteen Colors plugin's implementation of #26469 provides inspiration for this. I'll look at this for core soon, but in the meantime it would require new Dashicons, which I've requested on #27844.

[wonderboymusic]

The flatness looks a lot better - I am not a huge fan of the MEjs default styles, have seen some players in the wild that look lamer with them.

Gonna drop this in

[wonderboymusic]

In 28365:

Update the default (WP-defined) styles for MediaElement players to be more in-line with our flat aesthetic. Use the new official colors.

Props celloexpressions.
Fixes #27516.