Changeset 22144

Timestamp:

10/09/2012 02:56:39 AM (14 years ago)

Author:

koopersmith

Message:

Improve media modal title bar styling. props helenyhou, see #21390.

Location:

trunk/wp-includes

Files:

• css/media-views.css (modified) (2 diffs)
• media.php (modified) (1 diff)

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

@@ -4 +4 @@
 .media-modal {
         position: fixed;
-        top: 60px;
+        top: 40px;
         left: 60px;
         right: 60px;
         bottom: 60px;
-        background: #fff;
         z-index: 125000;
 }
@@ -29 +28 @@
         right: 0;
         height: 28px;
-        background: #f1f1f1;
 }
 
 .media-modal-header h3 {
         float: left;
-        padding: 0 0 0 10px;
+        padding: 0;
         margin: 0;
-        line-height: 28px;
+        font-size: 1.4em;
+}
+
+.media-modal-header h3,
+.media-modal-close {
+        line-height: 40px;
+        color: #fff;
+        font-weight: 200;
+        text-shadow: 0 0 16px rgba( 0, 0, 0, 0.6 );
 }
 
 .media-modal-close {
         float: right;
-        padding-right: 10px;
-        line-height: 28px;
+        text-decoration: none;
+        font-size: 1.8em;
+}
+
+.media-modal-close:hover,
+.media-modal-close:focus {
+        color: #fff;
+        text-shadow: 0 0 16px rgba( 255, 255, 255, 0.8 );
 }
 
 .media-modal-content {
         position: absolute;
-        top: 28px;
+        top: 40px;
         left: 0;
         right: 0;
         bottom: 0;
         overflow: auto;
+        background: #fff;
 }
 

trunk/wp-includes/media.php

@@ -1299 +1299 @@
                         <div class="media-modal-header">
                                 <h3><%- title %></h3>
-                                <a class="media-modal-close" href="" title="<?php esc_attr_e('Close'); ?>"><?php echo 'Close'; ?></a>
+                                <a class="media-modal-close" href="" title="<?php esc_attr_e('Close'); ?>">&times;</a>
                         </div>
                         <div class="media-modal-content"></div>