Further unify and refine media and view control styling. see #27320.

Built from https://develop.svn.wordpress.org/trunk@27628


git-svn-id: http://core.svn.wordpress.org/trunk@27471 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/js/tinymce/plugins/wpeditimage/plugin.js

@@ -348,7 +348,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 		dom.setAttrib( node, 'data-wp-imgselect', 1 );
 		rectangle = dom.getRect( node );
 
-		toolbarHtml = '<div class="dashicons dashicons-edit edit" data-mce-bogus="1"></div> ' +
+		toolbarHtml = '<div class="dashicons dashicons-edit edit" data-mce-bogus="1"></div>' +
 			'<div class="dashicons dashicons-no-alt remove" data-mce-bogus="1"></div>';
 
 		toolbar = dom.create( 'div', {

wp-includes/js/tinymce/skins/wordpress/wp-content.css

@@ -115,7 +115,7 @@ img::selection {
     border-top: 3px dotted #bbb;
 }
 
-/* Gallery, audio, vudeo placeholders */
+/* Gallery, audio, video placeholders */
 .mce-content-body img.wp-media {
 	border: 1px solid #aaa;
 	background-color: #f2f2f2;
@@ -149,16 +149,6 @@ img::selection {
 	background-image: url("images/playlist-video.png");
 }
 
-#wp-image-toolbar {
-	position: absolute;
-	background-color: #333;
-}
-
-#wp-image-toolbar .dashicons {
-	color: white;
-	cursor: pointer;
-}
-
 /* Image resize handles */
 .mce-content-body div.mce-resizehandle {
 	border-color: #777;
@@ -216,12 +206,9 @@ embed {
 /**
  * Media previews
  */
-.wpview-type-gallery,
+.wpview-wrap {
-.wpview-type-audio,
-.wpview-type-video {
     position: relative;
     margin-bottom: 16px;
-	cursor: pointer;
 	border: 1px solid transparent;
 }
 
@@ -252,45 +239,64 @@ embed {
     clear: both;
 }
 
-.wpview-type-gallery.selected,
+.wpview-wrap .toolbar {
-.wpview-type-audio,
-.wpview-type-video {
-	background-color: #f2f8ff;
-	border-color: #777;
-}
-
-.wpview-type-gallery .toolbar,
-.wpview-type-audio .toolbar,
-.wpview-type-video .toolbar {
 	position: absolute;
 	top: 0;
 	right: 0;
-	background-color: #333;
-	color: white;
 	display: none;
 	z-index: 100;
 }
 
-.wpview-type-video .toolbar div,
+#wp-image-toolbar {
-.wpview-type-gallery .toolbar div,
+	position: absolute;
+}
+
+.wpview-wrap .toolbar div,
 #wp-image-toolbar div {
-	margin: 5px;
+	margin-top: 7px;
+	margin-right: 7px;
+	padding: 2px;
+	width: 30px;
+	height: 30px;
+	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
+	background-color: #000;
+	background-color: rgba(0,0,0,0.9);
+	cursor: pointer;
+	color: white;
+	font-size: 30px;
 }
 
-.wpview-type-audio .toolbar div {
+.wpview-wrap .toolbar div:hover,
-	margin: 2px 5px;
+#wp-image-toolbar div:hover {
+	box-shadow: 0 1px 3px rgba(0,0,0,0.8);
+	background-color: #000;
+	color: #2ea2cc;
 }
 
+/* temporary overrides; still pending styling */
+.wpview-type-audio .toolbar div,
+.wont-play .toolbar div {
+	margin: 0;
+	padding: 3px;
+	width: 20px;
+	height: 20px;
+	box-shadow: none;
+	font-size: 20px;
+}
+
+.wpview-wrap.selected .toolbar,
 .wpview-type-audio .toolbar,
-.wpview-type-video .toolbar,
+.wpview-type-video .toolbar {
-.wpview-type-gallery.selected .toolbar {
 	display: block;
 }
 
-.wpview-type-audio .toolbar span,
+.wpview-type-gallery.selected,
-.wpview-type-video .toolbar span,
+.wpview-type-audio,
-.wpview-type-gallery .toolbar span {
+.wpview-type-video {
-	cursor: pointer;
+	background-color: #f2f8ff; /* fallback to old blue */
+	background-color: rgba(0,0,0,0.1);
+	border-color: #777;
+	border-color: rgba(0,0,0,0.3);
 }
 
 .gallery img[data-mce-selected]:focus {

wp-includes/media-template.php

@@ -941,8 +941,7 @@ function wp_print_media_templates() {
 	</script>
 	<script type="text/html" id="tmpl-editor-gallery">
 		<div class="toolbar">
-			<div class="dashicons dashicons-edit edit"></div>
+			<div class="dashicons dashicons-edit edit"></div><div class="dashicons dashicons-no-alt remove"></div>
-			<div class="dashicons dashicons-no-alt remove"></div>
 		</div>
 		<div class="gallery gallery-columns-{{{ data.columns }}}">
 			<# _.each( data.attachments, function( attachment, index ) { #>
@@ -964,7 +963,7 @@ function wp_print_media_templates() {
 
 	<script type="text/html" id="tmpl-editor-audio">
 		<div class="toolbar">
-			<div class="dashicons dashicons-format-audio edit"></div>
+			<div class="dashicons dashicons-edit edit"></div>
 			<div class="dashicons dashicons-no-alt remove"></div>
 		</div>
 		<?php wp_underscore_audio_template() ?>
@@ -972,7 +971,7 @@ function wp_print_media_templates() {
 
 	<script type="text/html" id="tmpl-editor-video">
 		<div class="toolbar">
-			<div class="dashicons dashicons-format-video edit"></div>
+			<div class="dashicons dashicons-edit edit"></div>
 			<div class="dashicons dashicons-no-alt remove"></div>
 		</div>
 		<?php wp_underscore_video_template() ?>

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '3.9-beta1-27615';
+$wp_version = '3.9-beta1-27628';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
@@ -18,7 +18,7 @@ $wp_db_version = 26691;
  *
  * @global string $tinymce_version
  */
-$tinymce_version = '4020-20140319';
+$tinymce_version = '4020-20140319a';
 
 /**
  * Holds the required PHP version