diff --git a/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js b/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js index 8add98837c..d7e20c33d9 100644 --- a/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js +++ b/src/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 = '
' + + toolbarHtml = '
' + '
'; toolbar = dom.create( 'div', { diff --git a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css index d90dc9386d..6ee1e2f931 100644 --- a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css +++ b/src/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-type-audio, -.wpview-type-video { +.wpview-wrap { position: relative; margin-bottom: 16px; - cursor: pointer; border: 1px solid transparent; } @@ -252,45 +239,64 @@ embed { clear: both; } -.wpview-type-gallery.selected, -.wpview-type-audio, -.wpview-type-video { - background-color: #f2f8ff; - border-color: #777; -} - -.wpview-type-gallery .toolbar, -.wpview-type-audio .toolbar, -.wpview-type-video .toolbar { +.wpview-wrap .toolbar { position: absolute; top: 0; right: 0; - background-color: #333; - color: white; display: none; z-index: 100; } -.wpview-type-video .toolbar div, -.wpview-type-gallery .toolbar div, +#wp-image-toolbar { + 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 { - margin: 2px 5px; +.wpview-wrap .toolbar div:hover, +#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-gallery.selected .toolbar { +.wpview-type-video .toolbar { display: block; } -.wpview-type-audio .toolbar span, -.wpview-type-video .toolbar span, -.wpview-type-gallery .toolbar span { - cursor: pointer; +.wpview-type-gallery.selected, +.wpview-type-audio, +.wpview-type-video { + 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 { diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php index 6fa1d550c1..9f72f176f6 100644 --- a/src/wp-includes/media-template.php +++ b/src/wp-includes/media-template.php @@ -941,8 +941,7 @@ function wp_print_media_templates() {