Updated autocomplete styling

Added dark theme specific stylesheet to use if dark mode is active

app/routes.py

@@ -141,6 +141,7 @@ def search():
         'display.html',
         query=urlparse.unquote(q),
         search_type=search_type,
+        dark_mode=g.user_config.dark,
         response=formatted_results,
         search_header=render_template(
             'header.html',

app/static/css/search-dark.css

@@ -0,0 +1,35 @@
+.autocomplete {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+}
+
+.autocomplete-items {
+    position: absolute;
+    border: 1px solid #685e79;
+    border-bottom: none;
+    border-top: none;
+    z-index: 99;
+
+    /*position the autocomplete items to be the same width as the container:*/
+    top: 100%;
+    left: 0;
+    right: 0;
+}
+
+.autocomplete-items div {
+    padding: 10px;
+    cursor: pointer;
+    color: #fff;
+    background-color: #000;
+    border-bottom: 1px solid #242424;
+}
+
+.autocomplete-items div:hover {
+    background-color: #404040;
+}
+
+.autocomplete-active {
+    background-color: #685e79 !important;
+    color: #ffffff;
+}

app/templates/display.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta name="referrer" content="no-referrer">
         <script type="text/javascript" src="/static/js/autocomplete.js"></script>
-        <link rel="stylesheet" href="/static/css/search.css">
+        <link rel="stylesheet" href="/static/css/{{ 'search-dark' if dark_mode else 'search' }}.css">
         <link rel="stylesheet" href="/static/css/header.css">
         <title>{{ query }} - Whoogle Search</title>
     </head>

app/templates/index.html

@@ -21,7 +21,7 @@
         <script type="text/javascript" src="/static/js/controller.js"></script>
         <link rel="search" href="/opensearch.xml" type="application/opensearchdescription+xml" title="Whoogle Search">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="/static/css/search.css">
+        <link rel="stylesheet" href="/static/css/{{ 'search-dark' if dark_mode else 'search' }}.css">
         <link rel="stylesheet" href="/static/css/main.css">
 	<title>Whoogle Search</title>
     </head>