Apply new style to search

assets/style.css

@@ -329,13 +329,13 @@ article ul.search-results {
     display: block;
     color: inherit;
     text-decoration: none;
-    border: 1px solid #ccc;
-    padding: 8px;
+    padding: 8px 16px;
+    background: white;
+    color: black;
 }
 .search-result a:hover, .search-result a:focus {
-    background: #0074D9;
-    border-color: #0074D9;
-    color: white;
+    background: var(--theme-main);
+    color: var(--theme-text);
 }
 
 .search {
@@ -354,7 +354,6 @@ input[type="search"] {
     box-sizing: border-box;
     width: 100%;
     max-width: 300px;
-    transition: max-width 200ms;
 
     padding: 0 16px;
     margin: 0;
@@ -367,23 +366,16 @@ input[type="search"] {
     line-height: 32px;
     height: 34px;
 
-    border-radius: 2px;
     text-overflow: ellipsis;
 }
 
-.search input:focus, .search.focus input {
-    max-width: 300px;
-    border-color: #999;
-}
-
 .search .live-results {
     text-align: left;
 
     box-sizing: border-box;
     width: 100%;
-    max-width: 266px; /* 300px - padding - border */
+    max-width: 300px;
 
-    background: white;
     padding: 0;
     margin: 0 auto;
 
@@ -393,6 +385,16 @@ input[type="search"] {
     max-height: 0px;
 }
 
+.search-widget-container {
+    background: white;
+    border-radius: 2px;
+    overflow: hidden;
+
+    width: 100%;
+    max-width: 300px;
+    display: inline-block;
+}
+
 .live-results.show {
     max-height: 500px;
 }
@@ -400,13 +402,8 @@ input[type="search"] {
 .live-results .search-result {
     margin: 0;
 }
-.live-results a {
-    border-top: none;
-}
 
 .live-results .search-result.error {
-    border: 1px solid #ccc;
-    border-top: none;
     padding: 8px;
     color: #888;
 }
@@ -414,16 +411,24 @@ input[type="search"] {
 @media (min-width: 630px) {
     .search {
         text-align: right;
+        height: 38px;
+        position: relative;
     }
 
-    .search input {
-        max-width: 125px;
+    .search-widget-container {
+        position: absolute;
+        right: 0;
+        width: 300px;
+        box-shadow: 0 0 0 rgba(0,0,0,0.2);
+        transition: all 0.2s ease-in-out;
+    }
+
+    .focus .search-widget-container {
+        box-shadow: 0 5px 20px rgba(0,0,0,0.2);
     }
 
     .search .live-results {
-        position: absolute;
-        right: 8px;
-        margin: 0 16px;
+        width: 100%;
         max-height: 0px;
     }
 

templates/search_input.html

@@ -1,8 +1,10 @@
 <div class="search-container">
 <form class="search keyboard-focus-control" action=_search method=GET>
+    <div class="search-widget-container">
         <input data-focusindex="0" type=search name=q placeholder=search autocomplete=off>
         <ul class="live-results search-results">
         </ul>
+    </div>
 </form>
 <ul id="search-result-prototype" class="prototype"><li class="search-result"><a tabindex="0" class="link" href=""><span class="title"></span> &ndash; <span class="snippet"></span></a></li></ul>
 <script src="_assets/search-{{search_js_checksum()}}.js" defer></script>