From 35bc32d45fa16e9a44c848a8992353a24dce36fa Mon Sep 17 00:00:00 2001 From: Andrew Nacin Date: Tue, 5 Jun 2012 20:57:02 +0000 Subject: [PATCH] Darken the hover/on states for the customizer section titles. Switch Collapse arrow and label. Improve text contrast. props helenyhou. fixes #20828. git-svn-id: https://develop.svn.wordpress.org/trunk@21006 602fd350-edb4-49c9-b593-d223f7449a82 --- wp-admin/css/customize-controls.dev.css | 48 ++++++++++++++++--------- wp-admin/css/wp-admin-rtl.dev.css | 19 +++++----- wp-admin/css/wp-admin.dev.css | 15 ++++---- wp-admin/customize.php | 2 +- 4 files changed, 50 insertions(+), 34 deletions(-) diff --git a/wp-admin/css/customize-controls.dev.css b/wp-admin/css/customize-controls.dev.css index d456c9cfa7..5196d82d21 100644 --- a/wp-admin/css/customize-controls.dev.css +++ b/wp-admin/css/customize-controls.dev.css @@ -12,6 +12,19 @@ body { 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; +} + .customize-section:last-child { box-shadow: 0 1px 0 0px #fff; } @@ -53,27 +66,26 @@ body { background-image: linear-gradient( top, #f5f5f5, #eee ); } -.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 { + 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 #e5e5e5; -} - -.control-section.open .customize-section-title:hover { - border-bottom: 1px solid #dfdfdf; + border-bottom: 1px solid #6d6d6d; } .customize-section.open .customize-section-content { display: block; - background: #fff; + background: #fdfdfd; } .customize-section-title:after { @@ -97,6 +109,10 @@ body { border-color: #aaa transparent; } +.control-section .customize-section-title:hover:after { + border-color: #eee transparent; +} + .control-section .customize-section-title:after { top: 15px; } @@ -293,7 +309,7 @@ body { .customize-control .dropdown-status { display: none; max-width: 112px; - color: #999; + color: #777; } /* @@ -412,7 +428,7 @@ body { padding-bottom: 4px; color: #777; - background: #fff; + background: #fdfdfd; border-color: #dfdfdf; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0 ; diff --git a/wp-admin/css/wp-admin-rtl.dev.css b/wp-admin/css/wp-admin-rtl.dev.css index 094764e680..94ee2ad596 100644 --- a/wp-admin/css/wp-admin-rtl.dev.css +++ b/wp-admin/css/wp-admin-rtl.dev.css @@ -1591,18 +1591,18 @@ table .column-rating { /* 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; } @@ -1611,11 +1611,10 @@ table .column-rating { } .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; } /*------------------------------------------------------------------------------ diff --git a/wp-admin/css/wp-admin.dev.css b/wp-admin/css/wp-admin.dev.css index c46b34dd49..a0f8651076 100644 --- a/wp-admin/css/wp-admin.dev.css +++ b/wp-admin/css/wp-admin.dev.css @@ -5353,11 +5353,12 @@ body.full-overlay-active { .wp-full-overlay .collapse-sidebar { 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%; text-decoration: none; @@ -5365,10 +5366,11 @@ body.full-overlay-active { .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; display: block; @@ -5382,12 +5384,11 @@ body.full-overlay-active { } .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; } .wp-full-overlay.collapsed .collapse-sidebar-label { @@ -5395,7 +5396,7 @@ body.full-overlay-active { } .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-label { - color: #999; + color: #666; } /* Animations */ diff --git a/wp-admin/customize.php b/wp-admin/customize.php index 9bb28a2d73..8a13b36322 100644 --- a/wp-admin/customize.php +++ b/wp-admin/customize.php @@ -96,8 +96,8 @@ do_action( 'customize_controls_print_scripts' );