mirror of
https://github.com/WordPress/WordPress.git
synced 2024-06-25 06:14:58 +02:00
Improve styling and markup for gallery and attachment MCE views.
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
This commit is contained in:
Daryl Koopersmith
parent
2882da59b1
commit
24d9eefa46
|
|
@ -254,7 +254,8 @@ p img,
|
|||
.wp-caption {
|
||||
margin-top: 0.4em;
|
||||
}
|
||||
img {
|
||||
img,
|
||||
.editor-attachment {
|
||||
border: 1px solid #ddd;
|
||||
padding: 6px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1362,14 +1362,18 @@ function wp_print_media_templates( $attachment ) {
|
|||
</script>
|
||||
|
||||
<script type="text/html" id="tmpl-editor-attachment">
|
||||
<% if ( url ) { %>
|
||||
<img src="<%- url %>" width="<%- width %>" height="<%- height %>" draggable="false" />
|
||||
<% } %>
|
||||
<div class="editor-attachment-preview">
|
||||
<% if ( url ) { %>
|
||||
<img src="<%- url %>" width="<%- width %>" height="<%- height %>" draggable="false" />
|
||||
<% } %>
|
||||
|
||||
<% if ( uploading ) { %>
|
||||
<div class="media-progress-bar"><div></div></div>
|
||||
<% } %>
|
||||
<div class="close">×</div>
|
||||
<% if ( uploading ) { %>
|
||||
<div class="media-progress-bar"><div></div></div>
|
||||
<% } %>
|
||||
<div class="overlay">
|
||||
<div class="button close">×</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="describe"></div>
|
||||
</script>
|
||||
|
||||
|
|
@ -1377,7 +1381,11 @@ function wp_print_media_templates( $attachment ) {
|
|||
<% if ( url ) { %>
|
||||
<img src="<%- url %>" draggable="false" />
|
||||
<% } %>
|
||||
<div class="close">×</div>
|
||||
|
||||
<div class="overlay">
|
||||
<div class="button close">×</div>
|
||||
<div class="button edit"><?php _e('Edit'); ?></div>
|
||||
</div>
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user