From fb6b9187770c408ca939cddd916fd65818327d89 Mon Sep 17 00:00:00 2001
From: asciimoo <asciimoo@gmail.com>
Date: Fri, 1 Nov 2013 15:33:53 +0100
Subject: [PATCH] [enh] search input "design"

---
 searx/static/css/style.css  | 30 ++++++++++++++++++++++++++++++
 searx/templates/search.html |  6 ++++--
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/searx/static/css/style.css b/searx/static/css/style.css
index b6836c183..c6eb20c4e 100644
--- a/searx/static/css/style.css
+++ b/searx/static/css/style.css
@@ -97,3 +97,33 @@ a { text-decoration: none; }
 .percentage div { background: #444444; }
 td { padding: 0 4px; }
 tr:hover td { background: #DDDDDD; }
+
+
+#search_wrapper { position: relative; max-width: 600px; margin: 10px; }
+.center #search_wrapper { margin-left: auto; margin-right: auto; }
+.q {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #c8c8c8;
+  border-bottom-color: #d2e2e7;
+  -webkit-border-radius: 1px;
+  -moz-border-radius: 1px;
+  border-radius: 1px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.4), 0 0 0 4px #dddddd;
+  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.4), 0 0 0 4px #dddddd;
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4), 0 0 0 4px #dddddd;
+  -webkit-transition: all 0.4s linear;
+  -moz-transition: all 0.4s linear;
+  transition: all 0.4s linear;
+}
+.q:focus {
+  outline: none;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 0 0 4px #dddddd;
+  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 0 0 4px #dddddd;
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 0 0 4px #dddddd;
+}
+#search_submit { position: absolute; top: 3px; right: 3px; border: 0; padding: 6px; border-left: 4px solid #dddddd; }
+
+#results { margin-left: 10px; }
diff --git a/searx/templates/search.html b/searx/templates/search.html
index a7225e017..479f3abcb 100644
--- a/searx/templates/search.html
+++ b/searx/templates/search.html
@@ -1,6 +1,8 @@
-<form method="post" action="/">
+<form method="post" action="/" id="search_form">
+<div id="search_wrapper">
     <input type="text" class="q" name="q" tabindex="1" autocomplete="off" {% if q %}value="{{ q }}"{% endif %}/>
-    <input type="submit" value="search" />
+    <input type="submit" value="search" id="search_submit" />
+</div>
     <p>
     {% for category in categories %}
         <div class="checkbox_container">