Ticket #22610: 22610.4.diff

wp-includes/media.php

@@ -1507 +1507 @@
         <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 +1620 @@
                         <# } #>
 
                         <# 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 ) { #>

wp-includes/css/media-views-rtl.css

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

wp-includes/css/media-views.css

@@ -106 +106 @@
 .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 );
 }
 
-a.media-modal-close {
-        color: #fff;
-}
-
 .media-modal-title {
+        top: -40px;
         left: 0;
-        float: left;
         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 );
 }
 
 .media-modal-close {
+        top: -27px;
         right: 0;
-        float: right;
-        text-decoration: none;
-        font-size: 1.8em;
+        width: 15px;
+        background-position: -80px 0;
 }
 
-.media-modal-close:hover,
-.media-modal-close:focus {
-        color: #fff;
-        text-shadow: 0 0 16px rgba( 255, 255, 255, 0.8 );
-}
-
 .media-modal-close:active {
         outline: 0;
 }
@@ -154 +143 @@
         background: #fff;
 }
 
+.media-modal-icon {
+        background-image: url(../images/uploader-icons.png);
+        background-repeat: no-repeat;
+}
+
 /**
  * Toolbar
  */
@@ -607 +601 @@
 }
 
 .attachment .close {
+        display: none;
         position: absolute;
         top: 5px;
         right: 5px;
@@ -618 +613 @@
         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 +635 @@
         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 +649 @@
         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 +675 @@
         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;
@@ -703 +695 @@
 }
 
 /**
+ * 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
  */
 .media-frame .attachments-browser {