From 49b230b82a045eb1a57e9686ca17575a56ea2c82 Mon Sep 17 00:00:00 2001
From: Ryan Boren <ryan@git.wordpress.org>
Date: Thu, 29 Nov 2012 14:36:12 +0000
Subject: [PATCH] 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
---
 wp-includes/css/media-views-rtl.css |  2 -
 wp-includes/css/media-views.css     | 95 +++++++++++++++--------------
 wp-includes/media.php               |  6 +-
 3 files changed, 53 insertions(+), 50 deletions(-)

diff --git a/wp-includes/css/media-views-rtl.css b/wp-includes/css/media-views-rtl.css
index 762d647539..8ca1b37091 100644
--- a/wp-includes/css/media-views-rtl.css
+++ b/wp-includes/css/media-views-rtl.css
@@ -4,13 +4,11 @@
 .media-modal-title {
 	left: auto;
 	right: 0;
-	float: right;
 }
 
 .media-modal-close {
 	right: auto;
 	left: 0;
-	float: left;
 }
 
 /**
diff --git a/wp-includes/css/media-views.css b/wp-includes/css/media-views.css
index d71e9b9104..f350c816e3 100644
--- a/wp-includes/css/media-views.css
+++ b/wp-includes/css/media-views.css
@@ -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
  */
diff --git a/wp-includes/media.php b/wp-includes/media.php
index 661909ead9..d203fd2429 100644
--- a/wp-includes/media.php
+++ b/wp-includes/media.php
@@ -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 ) { #>