Ticket #28979: 28979.design.diff

src/wp-admin/css/customize-controls.css

@@ -32 +32 @@
         display: block;
 }
 
+#customize-header-actions {
+        border-bottom: 1px solid #ddd;
+}
+
 #customize-controls .wp-full-overlay-sidebar-content {
         overflow-y: auto;
         overflow-x: hidden;
@@ -90 +94 @@
 
 #customize-theme-controls .accordion-section-content {
         color: #555555;
-        background: white;
+        background: #fff;
 }
 
 #customize-info.open .accordion-section-title,
@@ -100 +104 @@
 #customize-theme-controls .control-section .accordion-section-title:hover,
 #customize-theme-controls .control-section.open .accordion-section-title,
 #customize-theme-controls .control-section .accordion-section-title:focus {
-        color: #555555;
-        background: #f5f5f5;
+        color: #222;
+        background: #eee;
 }
 
 .js .control-section:hover .accordion-section-title,
@@ -108 +112 @@
 .js .control-section .accordion-section-title:hover,
 .js .control-section.open .accordion-section-title,
 .js .control-section .accordion-section-title:focus {
-        background: #f5f5f5;
+        background: #eee;
 }
 
 #customize-theme-controls .control-section:hover > .accordion-section-title:after,
@@ -115 +119 @@
 #customize-theme-controls .control-section .accordion-section-title:hover:after,
 #customize-theme-controls .control-section.open .accordion-section-title:after,
 #customize-theme-controls .control-section .accordion-section-title:focus:after {
-        color: #555555;
+        color: #555;
 }
 
 #customize-info.open,
@@ -137 +141 @@
         margin: 0;
 }
 
+.control-section.control-panel > .accordion-section-title {
+        padding-right: 54px;
+}
+
 .control-section.control-panel > .accordion-section-title:after {
-        content: "\f139";
+        content: "\f345";
+        background: #f5f5f5;
+        color: #555;
+        width: 38px;
+        height: 100%;
+        margin: -11px -10px -11px 0;
+        line-height: 45px;
+        padding-left: 5px;
+        border-left: 1px solid #eee;
+        z-index: 0;
 }
 
 .rtl .control-section.control-panel > .accordion-section-title:after {
-        content: "\f141";
+        content: "\f341";
 }
 
+#customize-theme-controls .control-section.control-panel > h3.accordion-section-title:focus:after,
+#customize-theme-controls .control-section.control-panel > h3.accordion-section-title:hover:after {
+        background: #ddd;
+        color: #000;
+        border-left: 1px solid #d9d9d9;
+        border-top: 1px solid #d9d9d9;
+        border-bottom: 1px solid #d9d9d9;
+        margin-top: -12px;
+        line-height: 44px;
+        z-index: 1;
+}
+
 .accordion-sub-container.control-panel-content {
         display: none;
         position: absolute;