From 24d9eefa46ae04be41f7a7465ca8e8bf2a36c2d6 Mon Sep 17 00:00:00 2001 From: Daryl Koopersmith Date: Wed, 10 Oct 2012 06:47:22 +0000 Subject: [PATCH] Improve styling and markup for gallery and attachment MCE views. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Attachment views can now inherit from the theme's `editor-style.css` — just have any rules that apply to the `img` tag apply to `.editor-attachment` as well. Adds a non-functional edit button to gallery views. see #21390, #21813, #21815. git-svn-id: http://core.svn.wordpress.org/trunk@22154 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- .../themes/twentyeleven/editor-style.css | 3 +- .../themes/twentytwelve/editor-style.css | 3 +- .../advanced/skins/wp_theme/content.css | 127 ++++++++++++++---- wp-includes/media.php | 24 ++-- 4 files changed, 122 insertions(+), 35 deletions(-) diff --git a/wp-content/themes/twentyeleven/editor-style.css b/wp-content/themes/twentyeleven/editor-style.css index e866925a94..234bb9c216 100644 --- a/wp-content/themes/twentyeleven/editor-style.css +++ b/wp-content/themes/twentyeleven/editor-style.css @@ -254,7 +254,8 @@ p img, .wp-caption { margin-top: 0.4em; } -img { +img, +.editor-attachment { border: 1px solid #ddd; padding: 6px; } diff --git a/wp-content/themes/twentytwelve/editor-style.css b/wp-content/themes/twentytwelve/editor-style.css index 4185347605..6b3ce02f90 100644 --- a/wp-content/themes/twentytwelve/editor-style.css +++ b/wp-content/themes/twentytwelve/editor-style.css @@ -289,7 +289,8 @@ td { /* =Images -------------------------------------------------------------- */ -img { +img, +.editor-attachment { border: 0; border-radius: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); diff --git a/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css b/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css index ed8fe5ae10..39102bfd7a 100644 --- a/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css +++ b/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css @@ -142,40 +142,112 @@ img.wp-oembed { } /* WordPress TinyMCE Previews */ -div.wp-view-wrap, -div.wp-view { +.wp-view-wrap { position: relative; display: inline-block; } -div.wp-view-wrap img { +.wp-view-wrap * { + font-family: sans-serif; + font-weight: normal; +} + +.wp-view-wrap img { display: block; border: 0; padding: 0; margin: 0; + border-radius: 0; + box-shadow: none; } -.spinner { +.wp-view-wrap .overlay { + opacity: 0; + display: block; + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + box-shadow: inset 0 0 45px rgba( 0, 0, 0, 0.3 ); + /*box-shadow: + inset 0 60px 30px -30px rgba( 0, 0, 0, 0.2 ), + inset 0 -60px 30px -30px rgba( 0, 0, 0, 0.2 );*/ + overflow: hidden; + + -webkit-transition: opacity 100ms ease-in-out; + -moz-transition: opacity 100ms ease-in-out; + -ms-transition: opacity 100ms ease-in-out; + -o-transition: opacity 100ms ease-in-out; + transition: opacity 100ms ease-in-out; +} + +.wp-view-wrap:hover .overlay { + opacity: 1; +} + +.wp-view-wrap .spinner { background: #fff url("../../../../../../../wp-admin/images/wpspin_light.gif") no-repeat center center; } -.close { - display: none; +.wp-view-wrap .button { position: absolute; - top: 0; - right: 0; - height: 26px; - width: 26px; - font-size: 26px; + height: 22px; line-height: 22px; + font-size: 14px; text-align: center; cursor: pointer; color: #464646; + + background: #f3f3f3; + background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4)); + background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4); + background-image: -moz-linear-gradient(top, #fefefe, #f4f4f4); + background-image: -ms-linear-gradient(top, #fefefe, #f4f4f4); + background-image: -o-linear-gradient(top, #fefefe, #f4f4f4); + background-image: linear-gradient(to bottom, #fefefe, #f4f4f4); + + box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 ); + border-radius: 2px; +} + +.wp-view-wrap .button:hover { + box-shadow: + 0 0 0 1px rgba( 0, 0, 0, 0.6 ), + 0 0 10px rgba( 255, 255, 255, 0.4 ); background: #fff; + background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3)); + background-image: -webkit-linear-gradient(top, #fff, #f3f3f3); + background-image: -moz-linear-gradient(top, #fff, #f3f3f3); + background-image: -ms-linear-gradient(top, #fff, #f3f3f3); + background-image: -o-linear-gradient(top, #fff, #f3f3f3); + background-image: linear-gradient(to bottom, #fff, #f3f3f3); + color: #333; +} + +.wp-view-wrap .close, +.wp-view-wrap .edit { + display: none; +} + +.wp-view-wrap .close { + top: 5px; + right: 5px; + width: 22px; + font-size: 22px; + line-height: 20px; +} + +.wp-view-wrap .edit { + bottom: 5px; + right: 5px; + padding: 0 10px; } .editor-attachment:hover .close, -.editor-gallery:hover .close { +.editor-gallery:hover .close, +.editor-gallery:hover .edit { display: block; } @@ -183,8 +255,7 @@ div.wp-view-wrap img { position: relative; margin-top: 10px; margin-right: 10px; - padding: 4px; - border: 1px solid #dfdfdf; + overflow: hidden; } .editor-attachment, @@ -193,19 +264,25 @@ div.wp-view-wrap img { min-width: 100px; } +.editor-attachment img, +.editor-attachment .overlay { + border-radius: inherit; +} + +.editor-attachment-preview { + position: relative; +} + .editor-gallery { + position: relative; min-height: 150px; min-width: 150px; - margin: 1px; - border: 4px solid #fff; + margin: 5px 15px 15px 5px; box-shadow: - 0 0 0 1px #ccc, - 5px 5px 0 0 #fff, - 5px 5px 0 1px #ccc, - 10px 10px 0 0 #fff, - 10px 10px 0 1px #ccc; + 0 0 0 4px #fff, + 0 0 0 5px #ccc, + 5px 5px 0 4px #fff, + 5px 5px 0 5px #ccc, + 10px 10px 0 4px #fff, + 10px 10px 0 5px #ccc; } -.editor-gallery .close { - top: 1px; - right: 1px; -} \ No newline at end of file diff --git a/wp-includes/media.php b/wp-includes/media.php index 08ebf729ed..5594bce53e 100644 --- a/wp-includes/media.php +++ b/wp-includes/media.php @@ -1362,14 +1362,18 @@ function wp_print_media_templates( $attachment ) { @@ -1377,7 +1381,11 @@ function wp_print_media_templates( $attachment ) { <% if ( url ) { %> <% } %> -
×
+ +
+
×
+
+