From 84ff844f17ed0a43e20d70635819dbf69ff7b443 Mon Sep 17 00:00:00 2001
From: Justin Palmer <justin@github.com>
Date: Wed, 13 Feb 2013 12:38:17 -0800
Subject: [PATCH] styles for preview list header

---
 static/command-panel.css              | 23 +++++++++++------
 themes/atom-dark-ui/command-panel.css | 36 +++++++++++++++++++++++++--
 2 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/static/command-panel.css b/static/command-panel.css
index 40e34e0aa..e149f9d35 100644
--- a/static/command-panel.css
+++ b/static/command-panel.css
@@ -25,13 +25,22 @@
   cursor: default;
 }
 
-.command-panel .preview-count {
-  font-size: 11px;
-  text-align: right;
-  position: absolute;
-  right: 15px;
-  top: 15px;
-  z-index: 9999;
+.command-panel .header:after {
+  content: ".";
+  display: block;
+  visibility: hidden;
+  clear: both;
+  height: 0;
+}
+
+.command-panel .expand-collapse {
+  float: right;
+  display: inline-block;
+}
+
+.command-panel .expand-collapse li {
+  display: inline-block;
+  padding: 5px;
 }
 
 .command-panel .preview-list .path {
diff --git a/themes/atom-dark-ui/command-panel.css b/themes/atom-dark-ui/command-panel.css
index 75039fc54..bcb522f98 100644
--- a/themes/atom-dark-ui/command-panel.css
+++ b/themes/atom-dark-ui/command-panel.css
@@ -6,6 +6,18 @@
   padding: 10px;
 }
 
+.command-panel .header {
+  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  padding: 5px;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.05),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.02);
+  margin-bottom: 0;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+
 .command-panel .preview-list {
   background-color: #19191b;
   color: #6d736f;
@@ -15,10 +27,30 @@
 }
 
 .command-panel .preview-count {
+  display: inline-block;
+  margin-top: 5px;
   color: #969696;
-  background: #161719;
-  padding: 5px;
+  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.05);
+}
+
+.command-panel .expand-collapse {
+  color: #969696;
+}
+
+.command-panel .expand-collapse li {
+  background: -webkit-linear-gradient(#19191a, #1a1b1c);
+  margin-left: 5px;
+  padding: 5px 10px;
+  cursor: pointer;
+  font-size: 11px;
   border-radius: 3px;
+  box-shadow:
+    inset -1px -1px 0 rgba(255, 255, 255, 0.1),
+    inset 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+.command-panel .expand-collapse li:hover {
+  color: #fff;
 }
 
 .command-panel .preview-list li.selected,