Icons for select, deselect, and window close in the media modal.

Props JerrySarcastic, helenyhou, ocean90, lessbloat
fixes #22610


git-svn-id: http://core.svn.wordpress.org/trunk@22920 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Ryan Boren 2012-11-29 14:36:12 +00:00
parent 7188bff165
commit ce2c38fda6
3 changed files with 53 additions and 50 deletions

View File

@ -4,13 +4,11 @@
.media-modal-title {
left: auto;
right: 0;
float: right;
}
.media-modal-close {
right: auto;
left: 0;
float: left;
}
/**

View File

@ -106,38 +106,27 @@
.media-modal-title,
.media-modal-close {
position: absolute;
top: -40px;
height: 40px;
}
.media-modal-title {
top: -40px;
left: 0;
padding: 0;
margin: 0;
line-height: 40px;
color: #fff;
font-size: 16px;
font-weight: 200;
text-shadow: 0 0 16px rgba( 0, 0, 0, 0.6 );
}
a.media-modal-close {
color: #fff;
}
.media-modal-title {
left: 0;
float: left;
padding: 0;
margin: 0;
font-size: 16px;
}
.media-modal-close {
top: -27px;
right: 0;
float: right;
text-decoration: none;
font-size: 1.8em;
}
.media-modal-close:hover,
.media-modal-close:focus {
color: #fff;
text-shadow: 0 0 16px rgba( 255, 255, 255, 0.8 );
width: 15px;
background-position: -80px 0;
}
.media-modal-close:active {
@ -154,6 +143,11 @@ a.media-modal-close {
background: #fff;
}
.media-modal-icon {
background-image: url(../images/uploader-icons.png);
background-repeat: no-repeat;
}
/**
* Toolbar
*/
@ -607,6 +601,7 @@ a.media-modal-close {
}
.attachment .close {
display: none;
position: absolute;
top: 5px;
right: 5px;
@ -618,19 +613,17 @@ a.media-modal-close {
text-align: center;
text-decoration: none;
color: #464646;
background: #fff;
background-color: #fff;
background-position: -96px 4px;
border-width: 0;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
}
.attachment .button:hover {
.attachment .close:hover {
box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
}
.attachment .close {
display: none;
}
.attachment:hover .close {
display: block;
}
@ -642,16 +635,10 @@ a.media-modal-close {
position: absolute;
top: -7px;
right: -7px;
line-height: 24px;
font-size: 16px;
text-align: center;
text-decoration: none;
outline: none;
color: #333;
border: 1px solid #fff;
border-radius: 3px;
text-shadow: 0 1px 0 #fff;
box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.4 );
background: #f1f1f1;
@ -662,25 +649,22 @@ a.media-modal-close {
background-image: linear-gradient(to bottom, #f1f1f1, #e1e1e1);
}
.attachment .check .dash {
font-weight: bold;
font-size: 18px;
line-height: 22px;
.attachment .check div {
background-position: -1px 0;
height: 15px;
width: 15px;
margin: 5px;
}
.attachment .check .dash,
.attachment .check:hover span {
display: none;
.attachment .check:hover div {
background-position: -40px 0;
}
.attachment.selected .check,
.attachment .check:hover .dash {
.attachment.selected .check {
display: block;
}
.attachment.details .check {
color: #fff;
text-shadow: 0 1px 0 rgba( 0, 0, 0, 0.5 );
box-shadow: 0 0 0 1px #1e8cbe;
background: #1e8cbe;
@ -691,6 +675,14 @@ a.media-modal-close {
background-image: linear-gradient(to bottom, #1e8cbe, #0074a2);
}
.attachment.details .check div {
background-position: -21px 0;
}
.attachment.details .check:hover div {
background-position: -60px 0;
}
.media-frame .describe {
position: relative;
display: block;
@ -702,6 +694,19 @@ a.media-modal-close {
border-radius: 0;
}
/**
* HiDPI Displays
*/
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
.media-modal-icon {
background-image: url(../images/uploader-icons-2x.png);
background-size: 134px 15px;
}
}
/**
* Attachments Browser
*/

View File

@ -1507,7 +1507,7 @@ function wp_print_media_templates() {
<script type="text/html" id="tmpl-media-modal">
<div class="media-modal">
<h3 class="media-modal-title">{{ data.title }}</h3>
<a class="media-modal-close" href="" title="<?php esc_attr_e('Close'); ?>">&times;</a>
<a class="media-modal-close media-modal-icon" href="#" title="<?php esc_attr_e('Close'); ?>"></a>
</div>
<div class="media-modal-backdrop">
<div></div>
@ -1620,11 +1620,11 @@ function wp_print_media_templates() {
<# } #>
<# if ( data.buttons.close ) { #>
<a class="close button" href="#">&times;</a>
<a class="close media-modal-icon" href="#" title="<?php _e('Remove'); ?>"></a>
<# } #>
<# if ( data.buttons.check ) { #>
<a class="check" href="#"><span>&#10003;</span><span class="dash">&ndash;</span></a>
<a class="check" href="#" title="<?php _e('Deselect'); ?>"><div class="media-modal-icon"></div></a>
<# } #>
</div>
<# if ( data.describe ) { #>