Add search form

2 files changed, 48 insertions, 3 deletions

diff --git a/ui/static/css/black.css b/ui/static/css/black.css
index 0f8bd3a..c280687 100644
--- a/ui/static/css/black.css
+++ b/ui/static/css/black.css
@@ -17,6 +17,7 @@ a:hover {
     color: #ddd;
 }
 
+/* Header and main menu */
 .header li {
     border-color: #333;
 }
@@ -36,10 +37,12 @@ a:hover {
     color: rgba(82, 168, 236, 0.85);
 }
 
+/* Page header */
 .page-header h1 {
     border-color: #333;
 }
 
+/* Logo */
 .logo a:hover span {
     color: #555;
 }
@@ -61,6 +64,7 @@ tr:hover {
 }
 
 /* Forms */
+input[type="search"],
 input[type="url"],
 input[type="password"],
 input[type="text"] {
@@ -69,6 +73,7 @@ input[type="text"] {
     color: #ccc;
 }
 
+input[type="search"]:focus,
 input[type="url"]:focus,
 input[type="password"]:focus,
 input[type="text"]:focus {
diff --git a/ui/static/css/common.css b/ui/static/css/common.css
index 1b1adaa..d27965b 100644
--- a/ui/static/css/common.css
+++ b/ui/static/css/common.css
@@ -37,9 +37,9 @@ a:hover {
     text-decoration: none;
 }
 
+/* Header and main menu */
 .header {
     margin-top: 10px;
-    margin-bottom: 20px;
 }
 
 .header nav ul {
@@ -74,6 +74,7 @@ a:hover {
     color: #888;
 }
 
+/* Page header */
 .page-header {
     margin-bottom: 25px;
 }
@@ -92,6 +93,7 @@ a:hover {
     line-height: 1.8em;
 }
 
+/* Logo */
 .logo {
     cursor: pointer;
     text-align: center;
@@ -114,6 +116,16 @@ a:hover {
     color: #000;
 }
 
+/* Search form */
+.search {
+    text-align: center;
+    display: none;
+}
+
+.search-toggle-switch {
+    display: none;
+}
+
 @media (min-width: 600px) {
     body {
         margin: auto;
@@ -124,6 +136,7 @@ a:hover {
         text-align: left;
         float: left;
         margin-right: 15px;
+        margin-left: 5px;
     }
 
     .header nav ul {
@@ -147,6 +160,30 @@ a:hover {
         display: inline;
         padding-right: 15px;
     }
+
+    /* Search form */
+    .search {
+        text-align: right;
+        display: block;
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+
+    .search-toggle-switch {
+        display: block;
+    }
+
+    .search-form {
+        display: none;
+    }
+
+    .search-toggle-switch.has-search-query {
+        display: none;
+    }
+
+    .search-form.has-search-query {
+        display: block;
+    }
 }
 
 /* Tables */
@@ -217,6 +254,7 @@ select {
     margin-bottom: 15px;
 }
 
+input[type="search"],
 input[type="url"],
 input[type="password"],
 input[type="text"] {
@@ -230,6 +268,7 @@ input[type="text"] {
     -webkit-appearance: none;
 }
 
+input[type="search"]:focus,
 input[type="url"]:focus,
 input[type="password"]:focus,
 input[type="text"]:focus {
@@ -377,7 +416,7 @@ a.button {
     top: 0;
     left: 0;
     bottom: 0;
-    width: 350px;
+    width: 360px;
     overflow: auto;
     background: #f0f0f0;
     box-shadow: 2px 0 5px 0 #ccc;
@@ -387,6 +426,7 @@ a.button {
 
 #modal-left h3 {
     font-weight: 400;
+    margin: 0;
 }
 
 .btn-close-modal {
@@ -577,7 +617,7 @@ article.feed-parsing-error {
 .entry header h1 {
     font-size: 2.0em;
     line-height: 1.25em;
-    margin: 30px 0;
+    margin: 5px 0 30px 0;
 }
 
 .entry header h1 a {