Icons for select, deselect, and window close in the media modal.
Props JerrySarcastic, helenyhou, ocean90, lessbloat fixes #22610 git-svn-id: https://develop.svn.wordpress.org/trunk@22920 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Ryan Boren
parent
3ad110f078
commit
49b230b82a
|
|
@ -4,13 +4,11 @@
|
|||
.media-modal-title {
|
||||
left: auto;
|
||||
right: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.media-modal-close {
|
||||
right: auto;
|
||||
left: 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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'); ?>">×</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="#">×</a>
|
||||
<a class="close media-modal-icon" href="#" title="<?php _e('Remove'); ?>"></a>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.buttons.check ) { #>
|
||||
<a class="check" href="#"><span>✓</span><span class="dash">–</span></a>
|
||||
<a class="check" href="#" title="<?php _e('Deselect'); ?>"><div class="media-modal-icon"></div></a>
|
||||
<# } #>
|
||||
</div>
|
||||
<# if ( data.describe ) { #>
|
||||
|
|
|
|||
Loading…
Reference in New Issue