More consistent icons in place of some buttons for the Customizer and theme install preview.

* Use a single close icon instead of a context-changing cancel/close button in the Customizer. In user testing, this small distinction in language was overlooked, and we use an AYS now instead. This also makes it consistent with the back arrow in Customizer panels.
* Use the same close icon as well as the previous/next arrows from the theme details browser in the theme install preview.

props celloexpressions. fixes #28655.

Built from https://develop.svn.wordpress.org/trunk@29031


git-svn-id: http://core.svn.wordpress.org/trunk@28819 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/colors/_admin.scss

@@ -453,6 +453,16 @@ body.more-filters-opened .more-filters:focus:before {
 	color: $menu-highlight-text;
 }
 
+.theme-install-overlay .close-full-overlay:hover,
+.theme-install-overlay .close-full-overlay:focus,
+.theme-install-overlay .previous-theme:hover,
+.theme-install-overlay .previous-theme:focus,
+.theme-install-overlay .next-theme:hover,
+.theme-install-overlay .next-theme:focus {
+	background-color: $menu-highlight-background;
+	color: $menu-highlight-text;
+}
+
 /* Widgets */
 
 .widgets-chooser li.widgets-chooser-selected {
@@ -472,6 +482,8 @@ body.more-filters-opened .more-filters:focus:before {
 	color: $menu-highlight-text;
 }
 
+.customize-controls-close:focus,
+.customize-controls-close:hover,
 .control-panel-back:focus,
 .control-panel-back:hover {
 	background-color: $menu-highlight-background;

wp-admin/css/colors/blue/colors-rtl.css

@@ -288,6 +288,10 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #096484;
   color: #fff; }
 
+.theme-install-overlay .close-full-overlay:hover, .theme-install-overlay .close-full-overlay:focus, .theme-install-overlay .previous-theme:hover, .theme-install-overlay .previous-theme:focus, .theme-install-overlay .next-theme:hover, .theme-install-overlay .next-theme:focus {
+  background-color: #096484;
+  color: #fff; }
+
 /* Widgets */
 .widgets-chooser li.widgets-chooser-selected {
   background-color: #096484;
@@ -301,7 +305,7 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #096484;
   color: #fff; }
 
-.control-panel-back:focus, .control-panel-back:hover {
+.customize-controls-close:focus, .customize-controls-close:hover, .control-panel-back:focus, .control-panel-back:hover {
   background-color: #096484;
   color: #fff; }
 

wp-admin/css/colors/blue/colors.css

@@ -288,6 +288,10 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #096484;
   color: #fff; }
 
+.theme-install-overlay .close-full-overlay:hover, .theme-install-overlay .close-full-overlay:focus, .theme-install-overlay .previous-theme:hover, .theme-install-overlay .previous-theme:focus, .theme-install-overlay .next-theme:hover, .theme-install-overlay .next-theme:focus {
+  background-color: #096484;
+  color: #fff; }
+
 /* Widgets */
 .widgets-chooser li.widgets-chooser-selected {
   background-color: #096484;
@@ -301,7 +305,7 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #096484;
   color: #fff; }
 
-.control-panel-back:focus, .control-panel-back:hover {
+.customize-controls-close:focus, .customize-controls-close:hover, .control-panel-back:focus, .control-panel-back:hover {
   background-color: #096484;
   color: #fff; }
 

wp-admin/css/colors/coffee/colors-rtl.css

@@ -288,6 +288,10 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #c7a589;
   color: #fff; }
 
+.theme-install-overlay .close-full-overlay:hover, .theme-install-overlay .close-full-overlay:focus, .theme-install-overlay .previous-theme:hover, .theme-install-overlay .previous-theme:focus, .theme-install-overlay .next-theme:hover, .theme-install-overlay .next-theme:focus {
+  background-color: #c7a589;
+  color: #fff; }
+
 /* Widgets */
 .widgets-chooser li.widgets-chooser-selected {
   background-color: #c7a589;
@@ -301,7 +305,7 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #c7a589;
   color: #fff; }
 
-.control-panel-back:focus, .control-panel-back:hover {
+.customize-controls-close:focus, .customize-controls-close:hover, .control-panel-back:focus, .control-panel-back:hover {
   background-color: #c7a589;
   color: #fff; }
 

wp-admin/css/colors/coffee/colors.css

@@ -288,6 +288,10 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #c7a589;
   color: #fff; }
 
+.theme-install-overlay .close-full-overlay:hover, .theme-install-overlay .close-full-overlay:focus, .theme-install-overlay .previous-theme:hover, .theme-install-overlay .previous-theme:focus, .theme-install-overlay .next-theme:hover, .theme-install-overlay .next-theme:focus {
+  background-color: #c7a589;
+  color: #fff; }
+
 /* Widgets */
 .widgets-chooser li.widgets-chooser-selected {
   background-color: #c7a589;
@@ -301,7 +305,7 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #c7a589;
   color: #fff; }
 
-.control-panel-back:focus, .control-panel-back:hover {
+.customize-controls-close:focus, .customize-controls-close:hover, .control-panel-back:focus, .control-panel-back:hover {
   background-color: #c7a589;
   color: #fff; }
 

wp-admin/css/colors/ectoplasm/colors-rtl.css

@@ -288,6 +288,10 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #a3b745;
   color: #fff; }
 
+.theme-install-overlay .close-full-overlay:hover, .theme-install-overlay .close-full-overlay:focus, .theme-install-overlay .previous-theme:hover, .theme-install-overlay .previous-theme:focus, .theme-install-overlay .next-theme:hover, .theme-install-overlay .next-theme:focus {
+  background-color: #a3b745;
+  color: #fff; }
+
 /* Widgets */
 .widgets-chooser li.widgets-chooser-selected {
   background-color: #a3b745;
@@ -301,7 +305,7 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #a3b745;
   color: #fff; }
 
-.control-panel-back:focus, .control-panel-back:hover {
+.customize-controls-close:focus, .customize-controls-close:hover, .control-panel-back:focus, .control-panel-back:hover {
   background-color: #a3b745;
   color: #fff; }
 

wp-admin/css/colors/ectoplasm/colors.css

@@ -288,6 +288,10 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #a3b745;
   color: #fff; }
 
+.theme-install-overlay .close-full-overlay:hover, .theme-install-overlay .close-full-overlay:focus, .theme-install-overlay .previous-theme:hover, .theme-install-overlay .previous-theme:focus, .theme-install-overlay .next-theme:hover, .theme-install-overlay .next-theme:focus {
+  background-color: #a3b745;
+  color: #fff; }
+
 /* Widgets */
 .widgets-chooser li.widgets-chooser-selected {
   background-color: #a3b745;
@@ -301,7 +305,7 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #a3b745;
   color: #fff; }
 
-.control-panel-back:focus, .control-panel-back:hover {
+.customize-controls-close:focus, .customize-controls-close:hover, .control-panel-back:focus, .control-panel-back:hover {
   background-color: #a3b745;
   color: #fff; }
 

wp-admin/css/colors/light/colors-rtl.css

@@ -288,6 +288,10 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #888;
   color: #fff; }
 
+.theme-install-overlay .close-full-overlay:hover, .theme-install-overlay .close-full-overlay:focus, .theme-install-overlay .previous-theme:hover, .theme-install-overlay .previous-theme:focus, .theme-install-overlay .next-theme:hover, .theme-install-overlay .next-theme:focus {
+  background-color: #888;
+  color: #fff; }
+
 /* Widgets */
 .widgets-chooser li.widgets-chooser-selected {
   background-color: #888;
@@ -301,7 +305,7 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #888;
   color: #fff; }
 
-.control-panel-back:focus, .control-panel-back:hover {
+.customize-controls-close:focus, .customize-controls-close:hover, .control-panel-back:focus, .control-panel-back:hover {
   background-color: #888;
   color: #fff; }
 

wp-admin/css/colors/light/colors.css

@@ -288,6 +288,10 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #888;
   color: #fff; }
 
+.theme-install-overlay .close-full-overlay:hover, .theme-install-overlay .close-full-overlay:focus, .theme-install-overlay .previous-theme:hover, .theme-install-overlay .previous-theme:focus, .theme-install-overlay .next-theme:hover, .theme-install-overlay .next-theme:focus {
+  background-color: #888;
+  color: #fff; }
+
 /* Widgets */
 .widgets-chooser li.widgets-chooser-selected {
   background-color: #888;
@@ -301,7 +305,7 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #888;
   color: #fff; }
 
-.control-panel-back:focus, .control-panel-back:hover {
+.customize-controls-close:focus, .customize-controls-close:hover, .control-panel-back:focus, .control-panel-back:hover {
   background-color: #888;
   color: #fff; }
 

wp-admin/css/colors/midnight/colors-rtl.css

@@ -288,6 +288,10 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #e14d43;
   color: #fff; }
 
+.theme-install-overlay .close-full-overlay:hover, .theme-install-overlay .close-full-overlay:focus, .theme-install-overlay .previous-theme:hover, .theme-install-overlay .previous-theme:focus, .theme-install-overlay .next-theme:hover, .theme-install-overlay .next-theme:focus {
+  background-color: #e14d43;
+  color: #fff; }
+
 /* Widgets */
 .widgets-chooser li.widgets-chooser-selected {
   background-color: #e14d43;
@@ -301,7 +305,7 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #e14d43;
   color: #fff; }
 
-.control-panel-back:focus, .control-panel-back:hover {
+.customize-controls-close:focus, .customize-controls-close:hover, .control-panel-back:focus, .control-panel-back:hover {
   background-color: #e14d43;
   color: #fff; }
 

wp-admin/css/colors/midnight/colors.css

@@ -288,6 +288,10 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #e14d43;
   color: #fff; }
 
+.theme-install-overlay .close-full-overlay:hover, .theme-install-overlay .close-full-overlay:focus, .theme-install-overlay .previous-theme:hover, .theme-install-overlay .previous-theme:focus, .theme-install-overlay .next-theme:hover, .theme-install-overlay .next-theme:focus {
+  background-color: #e14d43;
+  color: #fff; }
+
 /* Widgets */
 .widgets-chooser li.widgets-chooser-selected {
   background-color: #e14d43;
@@ -301,7 +305,7 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #e14d43;
   color: #fff; }
 
-.control-panel-back:focus, .control-panel-back:hover {
+.customize-controls-close:focus, .customize-controls-close:hover, .control-panel-back:focus, .control-panel-back:hover {
   background-color: #e14d43;
   color: #fff; }
 

wp-admin/css/colors/ocean/colors-rtl.css

@@ -288,6 +288,10 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #9ebaa0;
   color: #fff; }
 
+.theme-install-overlay .close-full-overlay:hover, .theme-install-overlay .close-full-overlay:focus, .theme-install-overlay .previous-theme:hover, .theme-install-overlay .previous-theme:focus, .theme-install-overlay .next-theme:hover, .theme-install-overlay .next-theme:focus {
+  background-color: #9ebaa0;
+  color: #fff; }
+
 /* Widgets */
 .widgets-chooser li.widgets-chooser-selected {
   background-color: #9ebaa0;
@@ -301,7 +305,7 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #9ebaa0;
   color: #fff; }
 
-.control-panel-back:focus, .control-panel-back:hover {
+.customize-controls-close:focus, .customize-controls-close:hover, .control-panel-back:focus, .control-panel-back:hover {
   background-color: #9ebaa0;
   color: #fff; }
 

wp-admin/css/colors/ocean/colors.css

@@ -288,6 +288,10 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #9ebaa0;
   color: #fff; }
 
+.theme-install-overlay .close-full-overlay:hover, .theme-install-overlay .close-full-overlay:focus, .theme-install-overlay .previous-theme:hover, .theme-install-overlay .previous-theme:focus, .theme-install-overlay .next-theme:hover, .theme-install-overlay .next-theme:focus {
+  background-color: #9ebaa0;
+  color: #fff; }
+
 /* Widgets */
 .widgets-chooser li.widgets-chooser-selected {
   background-color: #9ebaa0;
@@ -301,7 +305,7 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #9ebaa0;
   color: #fff; }
 
-.control-panel-back:focus, .control-panel-back:hover {
+.customize-controls-close:focus, .customize-controls-close:hover, .control-panel-back:focus, .control-panel-back:hover {
   background-color: #9ebaa0;
   color: #fff; }
 

wp-admin/css/colors/sunrise/colors-rtl.css

@@ -288,6 +288,10 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #dd823b;
   color: #fff; }
 
+.theme-install-overlay .close-full-overlay:hover, .theme-install-overlay .close-full-overlay:focus, .theme-install-overlay .previous-theme:hover, .theme-install-overlay .previous-theme:focus, .theme-install-overlay .next-theme:hover, .theme-install-overlay .next-theme:focus {
+  background-color: #dd823b;
+  color: #fff; }
+
 /* Widgets */
 .widgets-chooser li.widgets-chooser-selected {
   background-color: #dd823b;
@@ -301,7 +305,7 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #dd823b;
   color: #fff; }
 
-.control-panel-back:focus, .control-panel-back:hover {
+.customize-controls-close:focus, .customize-controls-close:hover, .control-panel-back:focus, .control-panel-back:hover {
   background-color: #dd823b;
   color: #fff; }
 

wp-admin/css/colors/sunrise/colors.css

@@ -288,6 +288,10 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #dd823b;
   color: #fff; }
 
+.theme-install-overlay .close-full-overlay:hover, .theme-install-overlay .close-full-overlay:focus, .theme-install-overlay .previous-theme:hover, .theme-install-overlay .previous-theme:focus, .theme-install-overlay .next-theme:hover, .theme-install-overlay .next-theme:focus {
+  background-color: #dd823b;
+  color: #fff; }
+
 /* Widgets */
 .widgets-chooser li.widgets-chooser-selected {
   background-color: #dd823b;
@@ -301,7 +305,7 @@ body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-fil
   background-color: #dd823b;
   color: #fff; }
 
-.control-panel-back:focus, .control-panel-back:hover {
+.customize-controls-close:focus, .customize-controls-close:hover, .control-panel-back:focus, .control-panel-back:hover {
   background-color: #dd823b;
   color: #fff; }
 

wp-admin/css/customize-controls-rtl.css

@@ -170,6 +170,22 @@ body {
 	width: 100%;
 }
 
+.customize-controls-close {
+	display: block;
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 45px;
+	height: 45px;
+	padding-left: 2px;
+	background: #eee;
+	border-left: 1px solid #ddd;
+	color: #444;
+	cursor: pointer;
+	-webkit-transition: color ease-in .1s;
+	transition: color ease-in .1s;
+}
+
 .control-panel-back {
 	display: block;
 	position: fixed;
@@ -190,11 +206,23 @@ body {
 	display: none;
 }
 
+.customize-controls-close:focus,
+.customize-controls-close:hover,
 .control-panel-back:focus,
 .control-panel-back:hover {
 	background-color: #0074a2;
 	color: #fff;
 	outline: none;
+	-webkit-box-shadow: none;
+	box-shadow: none;
+}
+
+.customize-controls-close:before {
+	font: normal 32px/1 dashicons;
+	content: "\f335";
+	position: relative;
+	top: 8px;
+	right: 8px;
 }
 
 .control-panel-back:before {
@@ -217,17 +245,6 @@ body {
 	height: 22px;
 }
 
-#customize-header-actions a.back {
-	position: relative;
-	right: 0;
-	-webkit-transition: right ease-in-out .18s;
-	transition: right ease-in-out .18s;
-}
-
-.in-sub-panel #customize-header-actions a.back {
-	right: -120px;
-}
-
 .wp-full-overlay-sidebar .wp-full-overlay-header {
 	-webkit-transition: padding ease-in-out .18s;
 	transition: padding ease-in-out .18s;

wp-admin/css/customize-controls.css

@@ -170,6 +170,22 @@ body {
 	width: 100%;
 }
 
+.customize-controls-close {
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 45px;
+	height: 45px;
+	padding-right: 2px;
+	background: #eee;
+	border-right: 1px solid #ddd;
+	color: #444;
+	cursor: pointer;
+	-webkit-transition: color ease-in .1s;
+	transition: color ease-in .1s;
+}
+
 .control-panel-back {
 	display: block;
 	position: fixed;
@@ -190,11 +206,23 @@ body {
 	display: none;
 }
 
+.customize-controls-close:focus,
+.customize-controls-close:hover,
 .control-panel-back:focus,
 .control-panel-back:hover {
 	background-color: #0074a2;
 	color: #fff;
 	outline: none;
+	-webkit-box-shadow: none;
+	box-shadow: none;
+}
+
+.customize-controls-close:before {
+	font: normal 32px/1 dashicons;
+	content: "\f335";
+	position: relative;
+	top: 8px;
+	left: 8px;
 }
 
 .control-panel-back:before {
@@ -217,17 +245,6 @@ body {
 	height: 22px;
 }
 
-#customize-header-actions a.back {
-	position: relative;
-	left: 0;
-	-webkit-transition: left ease-in-out .18s;
-	transition: left ease-in-out .18s;
-}
-
-.in-sub-panel #customize-header-actions a.back {
-	left: -120px;
-}
-
 .wp-full-overlay-sidebar .wp-full-overlay-header {
 	-webkit-transition: padding ease-in-out .18s;
 	transition: padding ease-in-out .18s;

wp-admin/css/themes-rtl.css

@@ -1617,9 +1617,83 @@ body.full-overlay-active {
 	overflow: auto;
 }
 
-/* Close Link */
+/* Close & Navigation Links */
-.wp-full-overlay .close-full-overlay {
+.theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header {
+	padding: 0;
+}
+
+.theme-install-overlay .close-full-overlay,
+.theme-install-overlay .previous-theme,
+.theme-install-overlay .next-theme {
+	display: block;
+	position: relative;
+	float: right;
+	width: 45px;
+	height: 45px;
+	padding-left: 2px;
+	background: #eee;
+	border-left: 1px solid #ddd;
+	color: #444;
+	cursor: pointer;
 	text-decoration: none;
+	-webkit-transition: color ease-in .1s;
+	transition: color ease-in .1s;
+}
+
+.theme-install-overlay .close-full-overlay:hover,
+.theme-install-overlay .close-full-overlay:focus,
+.theme-install-overlay .previous-theme:hover,
+.theme-install-overlay .previous-theme:focus,
+.theme-install-overlay .next-theme:hover,
+.theme-install-overlay .next-theme:focus {
+	background-color: #0074a2;
+	color: #fff;
+	outline: none;
+	-webkit-box-shadow: none;
+	box-shadow: none;
+}
+
+.theme-install-overlay .close-full-overlay:before {
+	font: normal 30px/1 dashicons;
+	content: "\f335";
+	position: relative;
+	top: 9px;
+	right: 9px;
+}
+
+.theme-install-overlay .previous-theme:before {
+	font: normal 20px/1 dashicons;
+	content: "\f340";
+	position: relative;
+	top: 6px;
+	right: 14px;
+}
+
+.theme-install-overlay .next-theme:before {
+	font: normal 20px/1 dashicons;
+	content: "\f344";
+	position: relative;
+	top: 6px;
+	right: 13px;
+}
+
+.theme-install-overlay .previous-theme.disabled,
+.theme-install-overlay .next-theme.disabled,
+.theme-install-overlay .previous-theme.disabled:hover,
+.theme-install-overlay .previous-theme.disabled:focus,
+.theme-install-overlay .next-theme.disabled:hover,
+.theme-install-overlay .next-theme.disabled:focus {
+	color: #bbb;
+	background: #eee;
+	cursor: default;
+}
+
+.rtl .theme-install-overlay .previous-theme:before {
+	content: "\f344";
+}
+
+.rtl .theme-install-overlay .next-theme:before {
+	content: "\f340";
 }
 
 /* Collapse Button */
@@ -1704,19 +1778,6 @@ body.full-overlay-active {
 	display: none;
 }
 
-.wp-full-overlay .theme-navigation {
-	padding: 10px 20px;
-	position: absolute;
-		bottom: 10px;
-	text-align: right;
-}
-.wp-full-overlay .theme-navigation .next-theme {
-	float: left;
-}
-.wp-full-overlay.no-navigation .theme-navigation {
-	display: none;
-}
-
 /* Animations */
 .wp-full-overlay,
 .wp-full-overlay-sidebar,
@@ -1845,19 +1906,22 @@ body.full-overlay-active {
 	max-width: 100%;
 }
 
-.theme-install-overlay .wp-full-overlay-header {
-	margin-top: 9px;
-}
-
 .theme-install-overlay .wp-full-overlay-header .theme-install {
 	float: left;
+	margin: 8px 0 0 10px;
 	/* For when .theme-install is a span rather than a.button-primary (already installed theme) */
 	line-height: 26px;
 }
 
 .theme-install-overlay .wp-full-overlay-sidebar {
-	background: #EEE;
+	background: #eee;
-	border-left: 1px solid #DDD;
+	border-left: 1px solid #ddd;
+}
+
+.theme-install-overlay .wp-full-overlay-sidebar-content {
+	background: #fff;
+	border-top: 1px solid #ddd;
+	border-bottom: 1px solid #ddd;
 }
 
 .theme-install-overlay .wp-full-overlay-main {

wp-admin/css/themes.css

@@ -1617,9 +1617,83 @@ body.full-overlay-active {
 	overflow: auto;
 }
 
-/* Close Link */
+/* Close & Navigation Links */
-.wp-full-overlay .close-full-overlay {
+.theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header {
+	padding: 0;
+}
+
+.theme-install-overlay .close-full-overlay,
+.theme-install-overlay .previous-theme,
+.theme-install-overlay .next-theme {
+	display: block;
+	position: relative;
+	float: left;
+	width: 45px;
+	height: 45px;
+	padding-right: 2px;
+	background: #eee;
+	border-right: 1px solid #ddd;
+	color: #444;
+	cursor: pointer;
 	text-decoration: none;
+	-webkit-transition: color ease-in .1s;
+	transition: color ease-in .1s;
+}
+
+.theme-install-overlay .close-full-overlay:hover,
+.theme-install-overlay .close-full-overlay:focus,
+.theme-install-overlay .previous-theme:hover,
+.theme-install-overlay .previous-theme:focus,
+.theme-install-overlay .next-theme:hover,
+.theme-install-overlay .next-theme:focus {
+	background-color: #0074a2;
+	color: #fff;
+	outline: none;
+	-webkit-box-shadow: none;
+	box-shadow: none;
+}
+
+.theme-install-overlay .close-full-overlay:before {
+	font: normal 30px/1 dashicons;
+	content: "\f335";
+	position: relative;
+	top: 9px;
+	left: 9px;
+}
+
+.theme-install-overlay .previous-theme:before {
+	font: normal 20px/1 dashicons;
+	content: "\f340";
+	position: relative;
+	top: 6px;
+	left: 14px;
+}
+
+.theme-install-overlay .next-theme:before {
+	font: normal 20px/1 dashicons;
+	content: "\f344";
+	position: relative;
+	top: 6px;
+	left: 13px;
+}
+
+.theme-install-overlay .previous-theme.disabled,
+.theme-install-overlay .next-theme.disabled,
+.theme-install-overlay .previous-theme.disabled:hover,
+.theme-install-overlay .previous-theme.disabled:focus,
+.theme-install-overlay .next-theme.disabled:hover,
+.theme-install-overlay .next-theme.disabled:focus {
+	color: #bbb;
+	background: #eee;
+	cursor: default;
+}
+
+.rtl .theme-install-overlay .previous-theme:before {
+	content: "\f344";
+}
+
+.rtl .theme-install-overlay .next-theme:before {
+	content: "\f340";
 }
 
 /* Collapse Button */
@@ -1704,19 +1778,6 @@ body.full-overlay-active {
 	display: none;
 }
 
-.wp-full-overlay .theme-navigation {
-	padding: 10px 20px;
-	position: absolute;
-		bottom: 10px;
-	text-align: left;
-}
-.wp-full-overlay .theme-navigation .next-theme {
-	float: right;
-}
-.wp-full-overlay.no-navigation .theme-navigation {
-	display: none;
-}
-
 /* Animations */
 .wp-full-overlay,
 .wp-full-overlay-sidebar,
@@ -1845,19 +1906,22 @@ body.full-overlay-active {
 	max-width: 100%;
 }
 
-.theme-install-overlay .wp-full-overlay-header {
-	margin-top: 9px;
-}
-
 .theme-install-overlay .wp-full-overlay-header .theme-install {
 	float: right;
+	margin: 8px 10px 0 0;
 	/* For when .theme-install is a span rather than a.button-primary (already installed theme) */
 	line-height: 26px;
 }
 
 .theme-install-overlay .wp-full-overlay-sidebar {
-	background: #EEE;
+	background: #eee;
-	border-right: 1px solid #DDD;
+	border-right: 1px solid #ddd;
+}
+
+.theme-install-overlay .wp-full-overlay-sidebar-content {
+	background: #fff;
+	border-top: 1px solid #ddd;
+	border-bottom: 1px solid #ddd;
 }
 
 .theme-install-overlay .wp-full-overlay-main {

wp-admin/customize.php

@@ -112,8 +112,8 @@ do_action( 'customize_controls_print_scripts' );
 				submit_button( $save_text, 'primary save', 'save', false );
 			?>
 			<span class="spinner"></span>
-			<a class="back button" href="<?php echo esc_url( $return ? $return : admin_url( 'themes.php' ) ); ?>">
+			<a class="customize-controls-close" href="<?php echo esc_url( $return ? $return : admin_url( 'themes.php' ) ); ?>">
-				<?php _e( 'Cancel' ); ?>
+				<span class="screen-reader-text"><?php _e( 'Cancel' ); ?></span>
 			</a>
 		</div>
 

wp-admin/js/customize-controls.js

@@ -916,7 +916,7 @@
 		var previewer, parent, topFocus,
 			body = $( document.body ),
 			overlay = body.children( '.wp-full-overlay' ),
-			backBtn = $( '.back' ),
+			closeBtn = $( '.customize-controls-close' ),
 			saveBtn = $( '#save' );
 
 		// Prevent the form from saving when enter is pressed on an input or select element.
@@ -1044,15 +1044,15 @@
 			state.bind( 'change', function() {
 				if ( ! activated() ) {
 					saveBtn.val( api.l10n.activate ).prop( 'disabled', false );
-					backBtn.text( api.l10n.cancel );
+					closeBtn.find( '.screen-reader-text' ).text( api.l10n.cancel );
 
 				} else if ( saved() ) {
 					saveBtn.val( api.l10n.saved ).prop( 'disabled', true );
-					backBtn.text( api.l10n.close );
+					closeBtn.find( '.screen-reader-text' ).text( api.l10n.close );
 
 				} else {
 					saveBtn.val( api.l10n.save ).prop( 'disabled', false );
-					backBtn.text( api.l10n.cancel );
+					closeBtn.find( '.screen-reader-text' ).text( api.l10n.cancel );
 				}
 			});
 
@@ -1091,7 +1091,7 @@
 			event.preventDefault();
 		});
 
-		backBtn.keydown( function( event ) {
+		closeBtn.keydown( function( event ) {
 			if ( 9 === event.which ) // tab
 				return;
 			if ( 13 === event.which ) // enter
@@ -1121,7 +1121,7 @@
 		// If we receive a 'back' event, we're inside an iframe.
 		// Send any clicks to the 'Return' link to the parent page.
 		parent.bind( 'back', function() {
-			backBtn.on( 'click.back', function( event ) {
+			closeBtn.on( 'click.customize-controls-close', function( event ) {
 				event.preventDefault();
 				parent.send( 'close' );
 			});
@@ -1206,7 +1206,7 @@
 		api.trigger( 'ready' );
 
 		// Make sure left column gets focus
-		topFocus = backBtn;
+		topFocus = closeBtn;
 		topFocus.focus();
 		setTimeout(function () {
 			topFocus.focus();

wp-admin/theme-install.php

@@ -225,7 +225,9 @@ if ( $tab ) {
 <script id="tmpl-theme-preview" type="text/template">
 	<div class="wp-full-overlay-sidebar">
 		<div class="wp-full-overlay-header">
-			<a href="#" class="close-full-overlay button-secondary"><?php _e( 'Close' ); ?></a>
+			<a href="#" class="close-full-overlay"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></a>
+			<a href="#" class="previous-theme"><span class="screen-reader-text"><?php _ex( 'Previous', 'Button label for a theme' ); ?></span></a>
+			<a href="#" class="next-theme"><span class="screen-reader-text"><?php _ex( 'Next', 'Button label for a theme' ); ?></span></a>
 		<# if ( data.installed ) { #>
 			<a href="#" class="button button-primary theme-install disabled"><?php _ex( 'Installed', 'theme' ); ?></a>
 		<# } else { #>
@@ -262,10 +264,6 @@ if ( $tab ) {
 				<span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
 				<span class="collapse-sidebar-arrow"></span>
 			</a>
-			<div class="theme-navigation">
-				<a class="previous-theme button" href="#"><?php _ex( 'Previous', 'Button label for a theme' ); ?></a>
-				<a class="next-theme button" href="#"><?php _ex( 'Next', 'Button label for a theme' ); ?></a>
-			</div>
 		</div>
 	</div>
 	<div class="wp-full-overlay-main">