Changeset 21006

Timestamp:

06/05/2012 08:57:02 PM (12 years ago)

Author:

nacin

Message:

Darken the hover/on states for the customizer section titles. Switch Collapse arrow and label. Improve text contrast. props helenyhou. fixes #20828.

Location:

trunk/wp-admin

Files:

• css/customize-controls.dev.css (modified) (5 diffs)
• css/wp-admin-rtl.dev.css (modified) (2 diffs)
• css/wp-admin.dev.css (modified) (4 diffs)
• customize.php (modified) (1 diff)

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

@@ -11 +11 @@
     border-bottom: 1px solid #dfdfdf;
     margin: 0;
+}
+
+.control-section.customize-section:hover,
+.control-section.customize-section.open {
+    border-top-color: #808080;
+}
+
+.control-section.customize-section:hover {
+    border-bottom-color: #6d6d6d;
+}
+
+.customize-section.open:hover {
+    border-bottom-color: #dfdfdf;
 }
 
@@ -54 +67 @@
 }
 
-.control-section .customize-section-title:hover {
-    color: #222;
-    background-color: #e6e6e6;
-    background-image: -webkit-linear-gradient( top, #e9e9e9, #e4e4e4 );
-    background-image:    -moz-linear-gradient( top, #e9e9e9, #e4e4e4 );
-    background-image:     -ms-linear-gradient( top, #e9e9e9, #e4e4e4 );
-    background-image:      -o-linear-gradient( top, #e9e9e9, #e4e4e4 );
-    background-image:         linear-gradient( top, #e9e9e9, #e4e4e4 );
-}
-
+.control-section:hover .customize-section-title,
+.control-section .customize-section-title:hover,
 .control-section.open .customize-section-title {
-    border-bottom: 1px solid #e5e5e5;
-}
-
-.control-section.open .customize-section-title:hover {
-    border-bottom: 1px solid #dfdfdf;
+    color: #fff;
+    text-shadow: 0 -1px 0 #333;
+    background-color: #808080;
+    background-image: -webkit-linear-gradient( top, #808080, #6d6d6d );
+    background-image:    -moz-linear-gradient( top, #808080, #6d6d6d );
+    background-image:     -ms-linear-gradient( top, #808080, #6d6d6d );
+    background-image:      -o-linear-gradient( top, #808080, #6d6d6d );
+    background-image:         linear-gradient( top, #808080, #6d6d6d );
+}
+
+.control-section.open .customize-section-title {
+    border-bottom: 1px solid #6d6d6d;
 }
 
 .customize-section.open .customize-section-content {
     display: block;
-    background: #fff;
+    background: #fdfdfd;
 }
 
@@ -96 +108 @@
 .customize-section-title:hover:after {
     border-color: #aaa transparent;
+}
+
+.control-section .customize-section-title:hover:after {
+    border-color: #eee transparent;
 }
 
@@ -294 +310 @@
     display: none;
     max-width: 112px;
-    color: #999;
+    color: #777;
 }
 
@@ -413 +429 @@
 
     color: #777;
-    background: #fff;
+    background: #fdfdfd;
     border-color: #dfdfdf;
     -webkit-border-radius: 3px 3px 0 0;

trunk/wp-admin/css/wp-admin-rtl.dev.css

@@ -1592 +1592 @@
 /* Collapse Button */
 .wp-full-overlay .collapse-sidebar {
-    right: auto;
-    left: 15px;
+    right: 0;
+    left: auto;
+    margin-right: 15px;
 }
 
 .wp-full-overlay.collapsed .collapse-sidebar {
-    right: auto;
-    left: -45px;
+    right: 100%;
 }
 
 .wp-full-overlay .collapse-sidebar-arrow {
-    margin-left: 0;
     margin-right: 2px;
+    margin-left: 0;
     background: transparent url('../../wp-admin/images/arrows.png') no-repeat 0 -108px;
 }
@@ -1612 +1612 @@
 
 .wp-full-overlay .collapse-sidebar-label {
-    text-align: left;
-    right: auto;
-    left: 100%;
-    margin-right: 0;
-    margin-left: 10px;
+    right: 100%;
+    left: auto;
+    margin-right: 10px;
+    margin-left: 0;
 }
 

trunk/wp-admin/css/wp-admin.dev.css

@@ -5354 +5354 @@
     position: absolute;
     bottom: 12px;
-    right: 15px;
+    left: 0;
     z-index: 50;
     display: block;
     width: 19px;
     height: 19px;
+    margin-left: 15px;
     padding: 0;
     border-radius: 50%;
@@ -5366 +5367 @@
 .wp-full-overlay.collapsed .collapse-sidebar {
     position: absolute;
-    right: -35px;
+    left: 100%;
 }
 
 .wp-full-overlay .collapse-sidebar-arrow {
+    position: absolute;
     margin-top: 2px;
     margin-left: 2px;
@@ -5383 +5385 @@
 
 .wp-full-overlay .collapse-sidebar-label {
-    text-align: right;
     position: absolute;
-    right: 100%;
-    color: #aaa;
+    left: 100%;
+    color: #808080;
     line-height: 20px;
-    margin-right: 10px;
+    margin-left: 10px;
 }
 
@@ -5396 +5397 @@
 
 .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-label {
-    color: #999;
+    color: #666;
 }
 

trunk/wp-admin/customize.php

@@ -97 +97 @@
         <div id="customize-footer-actions" class="wp-full-overlay-footer">
             <a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>">
+                <span class="collapse-sidebar-arrow"></span>
                 <span class="collapse-sidebar-label"><?php _e('Collapse'); ?></span>
-                <span class="collapse-sidebar-arrow"></span>
             </a>
         </div>