Update the media upload interfaces to match new admin design:

* Replace separate progress bar designs on media-new.php and modal media uploader with a single consistent design
* Remove side borders from list of uploads on media-new.php
* Restyle the selected photo border and checkbox on modal media uploader
* Add a Media Uploader section to color schemes with progress bar and selected photo styles

Fixes #26147. Props melchoyce, iammattthomas.


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


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

wp-admin/css/color-schemes/_admin.scss

@@ -364,6 +364,23 @@ ul#adminmenu > li.current > a.current:after {
 }
 
 
+/* Media Uploader */
+
+.media-item .bar,
+.media-progress-bar div {
+	background-color: $highlight-color;
+}
+
+.details.attachment {
+	box-shadow: 0 0 0 1px #fff, 0 0 0 5px $highlight-color;
+}
+
+.attachment.details .check {
+	background-color: $highlight-color;
+	box-shadow: 0 0 0 1px $highlight-color;
+}
+
+
 /* Responsive Component */
 
 div#moby6-toggle a:before {

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

@@ -240,6 +240,17 @@ ul#adminmenu a.wp-has-current-submenu:after, ul#adminmenu > li.current > a.curre
 .wp-pointer.wp-pointer-top .wp-pointer-arrow, .wp-pointer.wp-pointer-undefined .wp-pointer-arrow {
   border-bottom-color: #096484; }
 
+/* Media Uploader */
+.media-item .bar, .media-progress-bar div {
+  background-color: #096484; }
+
+.details.attachment {
+  box-shadow: 0 0 0 1px white, 0 0 0 5px #096484; }
+
+.attachment.details .check {
+  background-color: #096484;
+  box-shadow: 0 0 0 1px #096484; }
+
 /* Responsive Component */
 div#moby6-toggle a:before {
   color: #e5f8ff; }

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

@@ -240,6 +240,17 @@ ul#adminmenu a.wp-has-current-submenu:after, ul#adminmenu > li.current > a.curre
 .wp-pointer.wp-pointer-top .wp-pointer-arrow, .wp-pointer.wp-pointer-undefined .wp-pointer-arrow {
   border-bottom-color: #04a4cc; }
 
+/* Media Uploader */
+.media-item .bar, .media-progress-bar div {
+  background-color: #04a4cc; }
+
+.details.attachment {
+  box-shadow: 0 0 0 1px white, 0 0 0 5px #04a4cc; }
+
+.attachment.details .check {
+  background-color: #04a4cc;
+  box-shadow: 0 0 0 1px #04a4cc; }
+
 /* Responsive Component */
 div#moby6-toggle a:before {
   color: #999999; }

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

@@ -240,6 +240,17 @@ ul#adminmenu a.wp-has-current-submenu:after, ul#adminmenu > li.current > a.curre
 .wp-pointer.wp-pointer-top .wp-pointer-arrow, .wp-pointer.wp-pointer-undefined .wp-pointer-arrow {
   border-bottom-color: #e14d43; }
 
+/* Media Uploader */
+.media-item .bar, .media-progress-bar div {
+  background-color: #e14d43; }
+
+.details.attachment {
+  box-shadow: 0 0 0 1px white, 0 0 0 5px #e14d43; }
+
+.attachment.details .check {
+  background-color: #e14d43;
+  box-shadow: 0 0 0 1px #e14d43; }
+
 /* Responsive Component */
 div#moby6-toggle a:before {
   color: #f1f2f3; }

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

@@ -1913,17 +1913,17 @@ h2.nav-tab-wrapper, h3.nav-tab-wrapper {
 }
 
 .details.attachment {
-	box-shadow: 0 0 0 1px #fff, 0 0 0 5px #2ea2cc;
+	box-shadow: 0 0 0 1px #fff, 0 0 0 5px #1e8cbe;
 }
 
 .attachment .check {
 	background: #eee;
+	box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.4 );
 }
 
 .attachment.details .check {
-	box-shadow: 0 0 0 1px #2ea2cc;
+	background-color: #1e8cbe;
-	background: #0074a2;
+	box-shadow: 0 0 0 1px #fff, 0 0 0 2px #1e8cbe;
-	background-image: none;
 }
 
 /* TinyMCE modal */

wp-admin/css/colors-fresh.css

@@ -1913,17 +1913,17 @@ h2.nav-tab-wrapper, h3.nav-tab-wrapper {
 }
 
 .details.attachment {
-	box-shadow: 0 0 0 1px #fff, 0 0 0 5px #2ea2cc;
+	box-shadow: 0 0 0 1px #fff, 0 0 0 5px #1e8cbe;
 }
 
 .attachment .check {
 	background: #eee;
+	box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.4 );
 }
 
 .attachment.details .check {
-	box-shadow: 0 0 0 1px #2ea2cc;
+	background-color: #1e8cbe;
-	background: #0074a2;
+	box-shadow: 0 0 0 1px #fff, 0 0 0 2px #1e8cbe;
-	background-image: none;
 }
 
 /* TinyMCE modal */

wp-admin/css/wp-admin-rtl.css

@@ -5529,7 +5529,6 @@ abbr.required {
 	display: block;
 	line-height: 36px;
 	float: left;
-	margin-left: 15px;
 }
 
 .media-item .describe-toggle-off,
@@ -5542,11 +5541,10 @@ abbr.required {
 }
 
 #media-items .media-item {
-	border-style: solid;
+	border-bottom-style: solid;
-	border-width: 1px;
+	border-bottom-width: 1px;
 	min-height: 36px;
 	position: relative;
-	margin-top: -1px;
 	width: 100%;
 }
 
@@ -5565,7 +5563,6 @@ abbr.required {
 .media-item .filename {
 	line-height: 36px;
 	overflow: hidden;
-	padding: 0 10px;
 }
 
 .media-item .error-div {
@@ -5574,7 +5571,7 @@ abbr.required {
 
 .media-item .pinkynail {
 	float: right;
-	margin: 2px 2px 0;
+	margin: 2px 0 0 10px;
 	max-width: 40px;
 	max-height: 32px;
 }
@@ -5592,38 +5589,24 @@ abbr.required {
 .media-item .progress {
 	float: left;
 	height: 22px;
-	margin: 6px 0 0 10px;
+	margin: 7px 0 0;
 	width: 200px;
 	line-height: 2em;
 	padding: 0;
 	overflow: hidden;
 	margin-bottom: 2px;
-	border: 1px solid #d1d1d1;
+	border-radius: 22px;
-	background: #f7f7f7;
+	background: #ddd;
-	background-image: -webkit-gradient(linear, right bottom, right top, from(#fff), to(#f7f7f7));
+	-webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
-	background-image: -webkit-linear-gradient(bottom, #fff, #f7f7f7);
+	box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
-	background-image:    -moz-linear-gradient(bottom, #fff, #f7f7f7);
-	background-image:      -o-linear-gradient(bottom, #fff, #f7f7f7);
-	background-image: linear-gradient(to top, #fff, #f7f7f7);
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
-	-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.1);
-	box-shadow: inset 0 0 3px rgba(0,0,0,0.1);
 }
 
 .media-item .bar {
 	z-index: 9;
 	width: 0;
 	height: 100%;
-	margin-top: -24px;
+	margin-top: -22px;
-	background-color: #8cc1e9;
+	background-color: #1e8cbe;
-	background-image: -webkit-gradient(linear, right bottom, right top, from(#72a7cf), to(#8cc1e9));
-	background-image: -webkit-linear-gradient(bottom, #72a7cf, #8cc1e9);
-	background-image:    -moz-linear-gradient(bottom, #72a7cf, #8cc1e9);
-	background-image:      -o-linear-gradient(bottom, #72a7cf, #8cc1e9);
-	background-image: linear-gradient(to top, #72a7cf, #8cc1e9);
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
 	-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.3);
 	box-shadow: 0 0 3px rgba(0,0,0,0.3);
 }
@@ -5632,8 +5615,12 @@ abbr.required {
 	z-index: 10;
 	position: relative;
 	width: 200px;
-	padding: 0 8px;
+	padding: 0;
-	color: rgba(0,0,0,0.6);
+	color: #fff;
+	text-align: center;
+	line-height: 22px;
+	font-weight: 400;
+	text-shadow: 0px 1px 2px rgba(0,0,0,0.2);
 }
 
 .upload-php .fixed .column-parent {

wp-admin/css/wp-admin.css

@@ -5533,7 +5533,6 @@ abbr.required {
 	display: block;
 	line-height: 36px;
 	float: right;
-	margin-right: 15px;
 }
 
 .media-item .describe-toggle-off,
@@ -5546,11 +5545,10 @@ abbr.required {
 }
 
 #media-items .media-item {
-	border-style: solid;
+	border-bottom-style: solid;
-	border-width: 1px;
+	border-bottom-width: 1px;
 	min-height: 36px;
 	position: relative;
-	margin-top: -1px;
 	width: 100%;
 }
 
@@ -5569,7 +5567,6 @@ abbr.required {
 .media-item .filename {
 	line-height: 36px;
 	overflow: hidden;
-	padding: 0 10px;
 }
 
 .media-item .error-div {
@@ -5578,7 +5575,7 @@ abbr.required {
 
 .media-item .pinkynail {
 	float: left;
-	margin: 2px 2px 0;
+	margin: 2px 10px 0 0;
 	max-width: 40px;
 	max-height: 32px;
 }
@@ -5596,38 +5593,24 @@ abbr.required {
 .media-item .progress {
 	float: right;
 	height: 22px;
-	margin: 6px 10px 0 0;
+	margin: 7px 0 0;
 	width: 200px;
 	line-height: 2em;
 	padding: 0;
 	overflow: hidden;
 	margin-bottom: 2px;
-	border: 1px solid #d1d1d1;
+	border-radius: 22px;
-	background: #f7f7f7;
+	background: #ddd;
-	background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#f7f7f7));
+	-webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
-	background-image: -webkit-linear-gradient(bottom, #fff, #f7f7f7);
+	box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
-	background-image:    -moz-linear-gradient(bottom, #fff, #f7f7f7);
-	background-image:      -o-linear-gradient(bottom, #fff, #f7f7f7);
-	background-image: linear-gradient(to top, #fff, #f7f7f7);
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
-	-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.1);
-	box-shadow: inset 0 0 3px rgba(0,0,0,0.1);
 }
 
 .media-item .bar {
 	z-index: 9;
 	width: 0;
 	height: 100%;
-	margin-top: -24px;
+	margin-top: -22px;
-	background-color: #8cc1e9;
+	background-color: #1e8cbe;
-	background-image: -webkit-gradient(linear, left bottom, left top, from(#72a7cf), to(#8cc1e9));
-	background-image: -webkit-linear-gradient(bottom, #72a7cf, #8cc1e9);
-	background-image:    -moz-linear-gradient(bottom, #72a7cf, #8cc1e9);
-	background-image:      -o-linear-gradient(bottom, #72a7cf, #8cc1e9);
-	background-image: linear-gradient(to top, #72a7cf, #8cc1e9);
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
 	-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.3);
 	box-shadow: 0 0 3px rgba(0,0,0,0.3);
 }
@@ -5636,8 +5619,12 @@ abbr.required {
 	z-index: 10;
 	position: relative;
 	width: 200px;
-	padding: 0 8px;
+	padding: 0;
-	color: rgba(0,0,0,0.6);
+	color: #fff;
+	text-align: center;
+	line-height: 22px;
+	font-weight: 400;
+	text-shadow: 0px 1px 2px rgba(0,0,0,0.2);
 }
 
 .upload-php .fixed .column-parent {

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

@@ -768,12 +768,9 @@
 	height: 24px;
 	width: 24px;
 	position: absolute;
-	top: -7px;
+	top: -6px;
-	left: -7px;
+	left: -6px;
 	outline: none;
-
-	border: 1px solid #fff;
-	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.4 );
 }
 
 .attachment .check div {
@@ -791,17 +788,6 @@
 	display: block;
 }
 
-.attachment.details .check {
-	box-shadow: 0 0 0 1px #1e8cbe;
-
-	background: #1e8cbe;
-	background-image: -webkit-gradient(linear, right top, right bottom, from(#1e8cbe), to(#0074a2));
-	background-image: -webkit-linear-gradient(top, #1e8cbe, #0074a2);
-	background-image:    -moz-linear-gradient(top, #1e8cbe, #0074a2);
-	background-image:      -o-linear-gradient(top, #1e8cbe, #0074a2);
-	background-image:   linear-gradient(to bottom, #1e8cbe, #0074a2);
-}
-
 .attachment.details .check div {
 	background-position: -21px 0;
 }
@@ -877,8 +863,7 @@
 	height: 10px;
 	min-width: 20px;
 	width: 0;
-	background: #aaa;
+	background: #1e8cbe;
-	background: rgba( 0, 0, 0, 0.2 );
 	border-radius: 10px;
 	-webkit-transition: width 300ms;
 	-moz-transition:    width 300ms;

wp-includes/css/media-views.css

@@ -768,12 +768,9 @@
 	height: 24px;
 	width: 24px;
 	position: absolute;
-	top: -7px;
+	top: -6px;
-	right: -7px;
+	right: -6px;
 	outline: none;
-
-	border: 1px solid #fff;
-	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.4 );
 }
 
 .attachment .check div {
@@ -791,17 +788,6 @@
 	display: block;
 }
 
-.attachment.details .check {
-	box-shadow: 0 0 0 1px #1e8cbe;
-
-	background: #1e8cbe;
-	background-image: -webkit-gradient(linear, left top, left bottom, from(#1e8cbe), to(#0074a2));
-	background-image: -webkit-linear-gradient(top, #1e8cbe, #0074a2);
-	background-image:    -moz-linear-gradient(top, #1e8cbe, #0074a2);
-	background-image:      -o-linear-gradient(top, #1e8cbe, #0074a2);
-	background-image:   linear-gradient(to bottom, #1e8cbe, #0074a2);
-}
-
 .attachment.details .check div {
 	background-position: -21px 0;
 }
@@ -877,8 +863,7 @@
 	height: 10px;
 	min-width: 20px;
 	width: 0;
-	background: #aaa;
+	background: #1e8cbe;
-	background: rgba( 0, 0, 0, 0.2 );
 	border-radius: 10px;
 	-webkit-transition: width 300ms;
 	-moz-transition:    width 300ms;