Changeset 20404

Timestamp:

04/08/2012 09:17:46 PM (7 years ago)

Author:

koopersmith

Message:

Theme Customizer: Add a 'previewing' notice by the theme name. Reduce padding and size on section titles, add a border between section titles and content to better indicate the title as a click target. see #19910.

Location:

trunk/wp-includes

Files:

• css/customize-controls.dev.css (modified) (4 diffs)
• customize-controls.php (modified) (1 diff)

trunk/wp-includes/css/customize-controls.dev.css

@@ -31 +31 @@
 .customize-section-content {
     display: none;
-    padding: 0 20px 15px;
+    padding: 10px 20px 15px;
     overflow: hidden;
+}
+
+.control-section {
+    border: 0;
+}
+
+.control-section .customize-section-title {
+    padding: 8px 20px;
+    border-top: 1px solid #fff;
+    border-bottom: 1px solid #dfdfdf;
+    font-size: 13px;
+}
+
+.control-section .customize-section-title:hover {
+    background: -webkit-linear-gradient( top, #f5f5f5, #eee );
+    box-shadow: inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 );
+}
+
+.control-section .customize-section-content {
+    border-top: 1px solid #fff;
+    border-bottom: 1px solid #dfdfdf;
 }
 
@@ -47 +68 @@
     border-width: 6px;
     position: absolute;
-    top: 20px;
+    top: 25px;
     right: 20px;
     z-index: 1;
@@ -53 +74 @@
 
 .customize-section.open .customize-section-title:after {
+    margin-top: -7px;
+    border-color: transparent transparent #ccc transparent;
+}
+
+.control-section .customize-section-title:after {
     top: 13px;
-    border-color: transparent transparent #ccc transparent;
 }
 
@@ -61 +86 @@
 }
 
+#customize-info .preview-notice {
+    font-size: 13px;
+    line-height: 24px;
+    color: #999;
+}
+
 #customize-info .theme-name {
-    font-size: 16px;
-    font-weight: bold;
+    font-size: 20px;
+    font-weight: 200;
     line-height: 24px;
     display: block;
+    text-shadow: 0 1px 0 #fff;
 }
 

trunk/wp-includes/customize-controls.php

@@ -55 +55 @@
         <div id="customize-info" class="customize-section">
             <div class="customize-section-title">
+                <span class="preview-notice"><?php _e('You are previewing'); ?></span>
                 <strong class="theme-name"><?php echo $theme['Name']; ?></strong>
-                <span class="theme-by"><?php printf( __( 'By %s' ), $theme['Author'] ); ?></span>
             </div>
             <div class="customize-section-content">