Changeset 26929

Timestamp:

01/09/2014 04:35:22 PM (13 years ago)

Author:

helen

Message:

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.

Location:

trunk/src

Files:

• wp-admin/css/colors.css (modified) (1 diff)
• wp-includes/css/media-views.css (modified) (11 diffs)

trunk/src/wp-admin/css/colors.css

@@ -1843 +1843 @@
 
 /* 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 */

trunk/src/wp-includes/css/media-views.css

@@ -2 +2 @@
  * Base Styles
  */
+.media-modal * {
+        -webkit-box-sizing: content-box;
+        -moz-box-sizing:    content-box;
+        box-sizing:         content-box;
+}
+
 .media-modal,
 .media-frame {
@@ -174 +180 @@
         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;
 }
 
@@ -233 +240 @@
         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;
@@ -390 +397 @@
         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;
@@ -405 +414 @@
         line-height: 18px;
         font-size: 14px;
-        color: #21759B;
+        color: #0074a2;
         text-decoration: none;
 }
@@ -420 +429 @@
 .media-menu .active,
 .media-menu .active:hover {
-        color: #333;
+        color: #222;
         font-weight: bold;
 }
@@ -428 +437 @@
         margin: 12px 20px;
         padding: 0;
-        border-top: 1px solid #dfdfdf;
-        border-bottom: 1px solid #fff;
+        border-top: 1px solid #ddd;
 }
 
@@ -474 +482 @@
 .media-router > a.active:last-child {
         margin: -1px -1px 0;
+        background: #fff;
+        border: 1px solid #ddd;
+        border-bottom: none;
 }
 
@@ -529 +540 @@
         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;
 }
 
@@ -793 +803 @@
         right: -6px;
         outline: none;
+        background: #eee;
+        box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.4 );
 }
 
@@ -808 +820 @@
 .attachment.selected .check {
         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;
 }