Media JS: Improve markup and CSS of the modal view's title.
Also improves the accuracy of closing the modal when the backdrop is clicked (which became error-prone around the title bar in [22144]). see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22158 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
parent
b2c3153b90
commit
2a3859aced
|
@ -3,7 +3,7 @@
|
|||
*/
|
||||
.media-modal {
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
top: 80px;
|
||||
left: 60px;
|
||||
right: 60px;
|
||||
bottom: 60px;
|
||||
|
@ -21,30 +21,28 @@
|
|||
z-index: 120000;
|
||||
}
|
||||
|
||||
.media-modal-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.media-modal-header h3 {
|
||||
float: left;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.media-modal-header h3,
|
||||
.media-modal-title,
|
||||
.media-modal-close {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
height: 40px;
|
||||
|
||||
line-height: 40px;
|
||||
color: #fff;
|
||||
font-weight: 200;
|
||||
text-shadow: 0 0 16px rgba( 0, 0, 0, 0.6 );
|
||||
}
|
||||
|
||||
.media-modal-title {
|
||||
left: 0;
|
||||
float: left;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.media-modal-close {
|
||||
right: 0;
|
||||
float: right;
|
||||
text-decoration: none;
|
||||
font-size: 1.8em;
|
||||
|
@ -58,7 +56,7 @@
|
|||
|
||||
.media-modal-content {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
|
|
@ -1296,10 +1296,8 @@ function wp_print_media_templates( $attachment ) {
|
|||
?>
|
||||
<script type="text/html" id="tmpl-media-modal">
|
||||
<div class="media-modal">
|
||||
<div class="media-modal-header">
|
||||
<h3><%- title %></h3>
|
||||
<h3 class="media-modal-title"><%- title %></h3>
|
||||
<a class="media-modal-close" href="" title="<?php esc_attr_e('Close'); ?>">×</a>
|
||||
</div>
|
||||
<div class="media-modal-content"></div>
|
||||
</div>
|
||||
<div class="media-modal-backdrop"></div>
|
||||
|
|
Loading…
Reference in New Issue