From 7b6aabf7952b668ddc5828f1513756129154b584 Mon Sep 17 00:00:00 2001
From: Helen Hou-Sandi <helen@git.wordpress.org>
Date: Mon, 25 Aug 2014 21:57:55 +0000
Subject: [PATCH] Better visual focus syling in customizer, theme preview, and
 attachment details modals.

props celloexpressions.
fixes #29147.


git-svn-id: https://develop.svn.wordpress.org/trunk@29608 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-controls.css |  6 ++++--
 src/wp-admin/css/media.css              | 12 +++++++++++-
 src/wp-admin/css/themes.css             | 22 ++++++++++++++++------
 3 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 5a312c07fb..2956e05122 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -232,7 +232,9 @@ body {
 .customize-controls-close:hover,
 .control-panel-back:focus,
 .control-panel-back:hover {
-	color: #2ea2cc;
+	background: #ddd;
+	border-color: #ccc;
+	color: #000;
 	outline: none;
 	-webkit-box-shadow: none;
 	box-shadow: none;
@@ -243,7 +245,7 @@ body {
 	content: "\f335";
 	position: relative;
 	top: 7px;
-	left: 12px;
+	left: 13px;
 }
 
 .control-panel-back:before {
diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css
index 2a09e7c136..2ba0ce4063 100644
--- a/src/wp-admin/css/media.css
+++ b/src/wp-admin/css/media.css
@@ -708,11 +708,20 @@ border color while dragging a file over the uploader drop area */
 	font-weight: 300;
 }
 
+.upload-php .media-modal-close:hover,
+.upload-php .media-modal-close:focus,
 .edit-attachment-frame .edit-media-header .left:hover,
 .edit-attachment-frame .edit-media-header .right:hover,
 .edit-attachment-frame .edit-media-header .left:focus,
 .edit-attachment-frame .edit-media-header .right:focus {
-	color: #2ea2cc;
+	background: #ddd;
+	border-color: #ccc;
+	color: #000;
+}
+
+.upload-php .media-modal-close:focus .media-modal-icon:before,
+.upload-php .media-modal-close:hover .media-modal-icon:before {
+	color: #000;
 }
 
 .edit-attachment-frame .edit-media-header .left:before,
@@ -732,6 +741,7 @@ border color while dragging a file over the uploader drop area */
 	color: #ccc;
 	background: inherit;
 	cursor: default;
+	pointer-events: none;
 }
 
 .edit-attachment-frame .media-frame-content,
diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index daa8eef0e0..1ee056ab02 100644
--- a/src/wp-admin/css/themes.css
+++ b/src/wp-admin/css/themes.css
@@ -455,18 +455,25 @@
 	transition: color .1s ease-in-out, background .1s ease-in-out;
 }
 
+.theme-overlay .theme-header .close:focus,
 .theme-overlay .theme-header .close:hover,
-.theme-overlay .theme-header .close:hover:before,
-.theme-overlay .theme-header .close:focus:before,
+.theme-overlay .theme-header .right:focus,
 .theme-overlay .theme-header .right:hover,
+.theme-overlay .theme-header .left:focus,
 .theme-overlay .theme-header .left:hover {
-	color: #2ea2cc;
+	background: #ddd;
+	border-color: #ccc;
+	color: #000;
+}
+
+.theme-overlay .theme-header .close:focus:before,
+.theme-overlay .theme-header .close:hover:before {
+	color: #000;
 }
 
 .theme-overlay .theme-header .close:focus,
 .theme-overlay .theme-header .right:focus,
 .theme-overlay .theme-header .left:focus {
-	color: #2ea2cc;
     -webkit-box-shadow:
     	0 0 0 1px #5b9dd9,
 		0 0 2px 1px rgba(30, 140, 190, .8);
@@ -1398,7 +1405,9 @@ body.full-overlay-active {
 .theme-install-overlay .previous-theme:focus,
 .theme-install-overlay .next-theme:hover,
 .theme-install-overlay .next-theme:focus {
-	color: #2ea2cc;
+	background: #ddd;
+	border-color: #ccc;
+	color: #000;
 	outline: none;
 	-webkit-box-shadow: none;
 	box-shadow: none;
@@ -1409,7 +1418,7 @@ body.full-overlay-active {
 	content: "\f335";
 	position: relative;
 	top: 7px;
-	left: 12px;
+	left: 13px;
 }
 
 .theme-install-overlay .previous-theme:before {
@@ -1437,6 +1446,7 @@ body.full-overlay-active {
 	color: #bbb;
 	background: #eee;
 	cursor: default;
+	pointer-events: none;
 }
 
 .rtl .theme-install-overlay .previous-theme:before {