Restyle the vomnibar to be more chrome-like (at least on OSX). Feedback welcome.

2 files changed, 48 insertions, 48 deletions

diff --git a/background_scripts/completion.js b/background_scripts/completion.js
index b31c4918..60125628 100644
--- a/background_scripts/completion.js
+++ b/background_scripts/completion.js
@@ -541,7 +541,7 @@ var completion = (function() {
     title = title || '';
     // sanitize input, it could come from a malicious web site
     title = title.length > 0 ? ' <span class="title">' + utils.escapeHtml(title) + '</span>' : '';
-    return '<em>' + type + '</em> ' + utils.escapeHtml(str) + title;
+    return '<span class="source">' + type + '</span> ' + utils.escapeHtml(str) + title;
   }
 
   /** Renders a completion by marking fuzzy-matched parts. */
diff --git a/vimium.css b/vimium.css
index b4c39799..eda684e2 100644
--- a/vimium.css
+++ b/vimium.css
@@ -297,42 +297,71 @@ body.vimiumFindMode ::selection {
   top: 70px !important;
   left: 50% !important;
   margin: 0 0 0 -40% !important;
-  background: black !important;
-  color: white !important;
   font-family: sans-serif !important;
-  font-size: 30px !important;
+
+  background: #F1F1F1 !important;
+  color: white !important;
   text-align: left !important;
-  padding: 7px 20px 7px 20px !important;
-  opacity: 0.9 !important;
-  border-radius: 10px !important;
-  box-shadow: 5px 5px 5px rgba(0,0,0,0.5) !important;
+  border-radius: 4px !important;
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.8) !important;
+  border: 1px solid #aaa;
   z-index: 99999998 !important;
 }
 
+#vomnibar input {
+  font-size: 20px !important;
+  padding: 4px !important;
+  font-family: inherit !important;
+  border-radius: 3px;
+  border: 1px solid #E8E8E8;
+  box-shadow: #444 0px 0px 1px;
+  width: 100% !important;
+  outline: none !important;
+  box-sizing: border-box;
+}
+
+#vomnibar .topHalf {
+  padding: 10px !important;
+  background-color: #F1F1F1;
+  border-radius: 4px 4px 0 0 !important;
+  border-bottom: 1px solid #C6C9CE;
+}
+
 #vomnibar ul {
+  background-color: white;
+  border-radius: 0 0 4px 4px !important;
   list-style: none !important;
-  padding: 7px 0 0 0 !important;
-  margin: 7px 0 0 0 !important;
-  border-top: 2px solid #444 !important;
+  padding: 10px 0 !important;
+  padding-top: 0 !important;
+  margin: 0 !important;
 }
 
 #vomnibar li {
-  border-bottom: 1px solid #111 !important;
+  border-bottom: 1px solid #ddd !important;
   line-height: 1.1em !important;
-  padding: 7px !important;
-  margin: 0 -7px 0 -7px !important;
-  font-size: 18px !important;
-  color: #ddd !important;
+  padding: 7px 10px !important;
+  font-size: 16px !important;
+  color: #222 !important;
+}
+
+#vomnibar li:last-of-type {
+  border-bottom: none !important;
 }
 
+#vomnibar li .source {
+  color: #999 !important;
+  margin-right: 4px !important;
+}
 #vomnibar li .fuzzyMatch {
-  color: red !important;
   font-size: inherit !important;
   font-family: inherit !important;
+  font-weight: bold !important;
+  color: black !important;
 }
 
 #vomnibar li em, #vomnibar li .title {
-  color: #444 !important;
+  color: #666 !important;
+  margin-left: 4px !important;
   font-weight: normal !important;
   font-size: inherit !important;
   font-family: inherit !important;
@@ -347,39 +376,10 @@ body.vimiumFindMode ::selection {
 }
 
 #vomnibar li.selected {
-  background: #222 !important;
-  color: #ccc !important;
-  border-radius: 4px !important;
+  background: #BBCEE9 !important;
   font-weight: normal !important;
   font-family: inherit !important;
 }
-#vomnibar li.selected em, #vomnibar li.selected .title {
-  color: #666 !important;
-}
-
-#vomnibar .input {
-  font-size: 28px !important;
-  padding: 0 !important;
-  margin: 0 !important;
-  font-size: inherit !important;
-  font-family: inherit !important;
-}
-
-#vomnibar .input .prompt {
-  color: orange !important;
-  font-size: inherit !important;
-  font-family: inherit !important;
-}
-
-#vomnibar .input .query {
-  font-size: inherit !important;
-  font-family: inherit !important;
-  color: inherit !important;
-  background: none !important;
-  outline: none !important;
-  border: none !important;
-  width: 90% !important;
-}
 
 div#vimiumFlash {
   box-shadow: 0px 0px 4px 2px #4183C4;