Move media modal colors out of colors.css and into media-views.css, as the modal can be triggered on the front end. props avryl, props collinsinternet for the initial patch. see #26677 for trunk.

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


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

wp-admin/css/colors-rtl.css

@@ -1843,64 +1843,6 @@ h2.nav-tab-wrapper, h3.nav-tab-wrapper {
 
 /* End Press This and Image editing icons */
 
-/* Media Manager */
-
-.media-modal-content {
-	background: #fcfcfc;
-	box-shadow: 0 5px 15px rgba(0,0,0,0.7);
-}
-
-.media-menu {
-	background: #f3f3f3;
-	border-left-color: #ccc;
-}
-
-.media-menu > a {
-	color: #0074a2;
-}
-
-.media-menu .active,
-.media-menu .active:hover {
-	color: #222;
-}
-
-.media-frame-content {
-	background: #fff;
-	border-top-color: #ddd;
-	border-bottom-color: #ddd;
-}
-
-.media-menu .separator {
-	border-top-color: #ddd;
-	border-bottom: none;
-}
-
-.media-sidebar {
-	background: #f3f3f3;
-	border-color: #ddd;
-}
-
-.media-router .active,
-.media-router > a.active:last-child {
-	background: #fff;
-	border: 1px solid #ddd;
-	border-bottom: none;
-}
-
-.details.attachment {
-	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 {
-	background-color: #1e8cbe;
-	box-shadow: 0 0 0 1px #fff, 0 0 0 2px #1e8cbe;
-}
-
 /* TinyMCE modal */
 
 .clearlooks2 {

wp-admin/css/colors.css

@@ -1843,64 +1843,6 @@ h2.nav-tab-wrapper, h3.nav-tab-wrapper {
 
 /* End Press This and Image editing icons */
 
-/* Media Manager */
-
-.media-modal-content {
-	background: #fcfcfc;
-	box-shadow: 0 5px 15px rgba(0,0,0,0.7);
-}
-
-.media-menu {
-	background: #f3f3f3;
-	border-right-color: #ccc;
-}
-
-.media-menu > a {
-	color: #0074a2;
-}
-
-.media-menu .active,
-.media-menu .active:hover {
-	color: #222;
-}
-
-.media-frame-content {
-	background: #fff;
-	border-top-color: #ddd;
-	border-bottom-color: #ddd;
-}
-
-.media-menu .separator {
-	border-top-color: #ddd;
-	border-bottom: none;
-}
-
-.media-sidebar {
-	background: #f3f3f3;
-	border-color: #ddd;
-}
-
-.media-router .active,
-.media-router > a.active:last-child {
-	background: #fff;
-	border: 1px solid #ddd;
-	border-bottom: none;
-}
-
-.details.attachment {
-	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 {
-	background-color: #1e8cbe;
-	box-shadow: 0 0 0 1px #fff, 0 0 0 2px #1e8cbe;
-}
-
 /* TinyMCE modal */
 
 .clearlooks2 {

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

@@ -1,6 +1,12 @@
 /**
  * Base Styles
  */
+.media-modal * {
+	-webkit-box-sizing: content-box;
+	-moz-box-sizing:    content-box;
+	box-sizing:         content-box;
+}
+
 .media-modal,
 .media-frame {
 	font-family: "Open Sans", sans-serif;
@@ -173,8 +179,9 @@
 	bottom: 0;
 	overflow: auto;
 	min-height: 300px;
-	background: #fff;
-	-webkit-font-smoothing: subpixel-antialiased; 
+	box-shadow: 0 5px 15px rgba(0,0,0,0.7);
+	background: #fcfcfc;
+	-webkit-font-smoothing: subpixel-antialiased;
 }
 
 .media-modal-icon {
@@ -232,8 +239,8 @@
 	width: 267px;
 	padding: 0 16px 24px;
 	z-index: 75;
-	background: #f5f5f5;
-	border-right: 1px solid #dfdfdf;
+	background: #f3f3f3;
+	border-right: 1px solid #ddd;
 	overflow: auto;
 	-webkit-overflow-scrolling: touch;
 }
@@ -389,8 +396,10 @@
 	bottom: 0;
 	margin: 0;
 	padding: 16px 0;
+	background: #f3f3f3;
 	border-left-width: 1px;
 	border-left-style: solid;
+	border-left-color: #ccc;
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
@@ -404,7 +413,7 @@
 	margin: 0;
 	line-height: 18px;
 	font-size: 14px;
-	color: #21759B;
+	color: #0074a2;
 	text-decoration: none;
 }
 
@@ -419,7 +428,7 @@
 
 .media-menu .active,
 .media-menu .active:hover {
-	color: #333;
+	color: #222;
 	font-weight: bold;
 }
 
@@ -427,8 +436,7 @@
 	height: 0;
 	margin: 12px 20px;
 	padding: 0;
-	border-top: 1px solid #dfdfdf;
-	border-bottom: 1px solid #fff;
+	border-top: 1px solid #ddd;
 }
 
 /**
@@ -473,6 +481,9 @@
 .media-router .active,
 .media-router > a.active:last-child {
 	margin: -1px -1px 0;
+	background: #fff;
+	border: 1px solid #ddd;
+	border-bottom: none;
 }
 
 .media-router .active:after {
@@ -528,10 +539,9 @@
 	width: auto;
 	margin: 0;
 	overflow: auto;
-	border-top-width: 1px;
-	border-top-style: solid;
-	border-bottom-width: 1px;
-	border-bottom-style: solid;
+	background: #fff;
+	border-top: 1px solid #ddd;
+	border-bottom: 1px solid #ddd;
 }
 
 .media-frame-toolbar {
@@ -792,6 +802,8 @@
 	top: -6px;
 	left: -6px;
 	outline: none;
+	background: #eee;
+	box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.4 );
 }
 
 .attachment .check div {
@@ -809,6 +821,17 @@
 	display: block;
 }
 
+.attachment.details {
+	box-shadow: 0 0 0 1px #fff,
+				0 0 0 5px #1e8cbe;
+}
+
+.attachment.details .check {
+	background-color: #1e8cbe;
+	box-shadow: 0 0 0 1px #fff,
+				0 0 0 2px #1e8cbe;
+}
+
 .attachment.details .check div {
 	background-position: -21px 0;
 }

wp-includes/css/media-views.css

@@ -1,6 +1,12 @@
 /**
  * Base Styles
  */
+.media-modal * {
+	-webkit-box-sizing: content-box;
+	-moz-box-sizing:    content-box;
+	box-sizing:         content-box;
+}
+
 .media-modal,
 .media-frame {
 	font-family: "Open Sans", sans-serif;
@@ -173,8 +179,9 @@
 	bottom: 0;
 	overflow: auto;
 	min-height: 300px;
-	background: #fff;
-	-webkit-font-smoothing: subpixel-antialiased; 
+	box-shadow: 0 5px 15px rgba(0,0,0,0.7);
+	background: #fcfcfc;
+	-webkit-font-smoothing: subpixel-antialiased;
 }
 
 .media-modal-icon {
@@ -232,8 +239,8 @@
 	width: 267px;
 	padding: 0 16px 24px;
 	z-index: 75;
-	background: #f5f5f5;
-	border-left: 1px solid #dfdfdf;
+	background: #f3f3f3;
+	border-left: 1px solid #ddd;
 	overflow: auto;
 	-webkit-overflow-scrolling: touch;
 }
@@ -389,8 +396,10 @@
 	bottom: 0;
 	margin: 0;
 	padding: 16px 0;
+	background: #f3f3f3;
 	border-right-width: 1px;
 	border-right-style: solid;
+	border-right-color: #ccc;
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
@@ -404,7 +413,7 @@
 	margin: 0;
 	line-height: 18px;
 	font-size: 14px;
-	color: #21759B;
+	color: #0074a2;
 	text-decoration: none;
 }
 
@@ -419,7 +428,7 @@
 
 .media-menu .active,
 .media-menu .active:hover {
-	color: #333;
+	color: #222;
 	font-weight: bold;
 }
 
@@ -427,8 +436,7 @@
 	height: 0;
 	margin: 12px 20px;
 	padding: 0;
-	border-top: 1px solid #dfdfdf;
-	border-bottom: 1px solid #fff;
+	border-top: 1px solid #ddd;
 }
 
 /**
@@ -473,6 +481,9 @@
 .media-router .active,
 .media-router > a.active:last-child {
 	margin: -1px -1px 0;
+	background: #fff;
+	border: 1px solid #ddd;
+	border-bottom: none;
 }
 
 .media-router .active:after {
@@ -528,10 +539,9 @@
 	width: auto;
 	margin: 0;
 	overflow: auto;
-	border-top-width: 1px;
-	border-top-style: solid;
-	border-bottom-width: 1px;
-	border-bottom-style: solid;
+	background: #fff;
+	border-top: 1px solid #ddd;
+	border-bottom: 1px solid #ddd;
 }
 
 .media-frame-toolbar {
@@ -792,6 +802,8 @@
 	top: -6px;
 	right: -6px;
 	outline: none;
+	background: #eee;
+	box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.4 );
 }
 
 .attachment .check div {
@@ -809,6 +821,17 @@
 	display: block;
 }
 
+.attachment.details {
+	box-shadow: 0 0 0 1px #fff,
+				0 0 0 5px #1e8cbe;
+}
+
+.attachment.details .check {
+	background-color: #1e8cbe;
+	box-shadow: 0 0 0 1px #fff,
+				0 0 0 2px #1e8cbe;
+}
+
 .attachment.details .check div {
 	background-position: -21px 0;
 }