From 2e4ac35697bf16cd53ba549268bebb730bbfd6e9 Mon Sep 17 00:00:00 2001
From: Alexander_Kabui
Date: Tue, 14 Mar 2023 01:48:21 +0300
Subject: add shadow and border effect autocomplete

---
 wqflask/wqflask/static/new/css/autocomplete.css | 9 +++++++--
 wqflask/wqflask/templates/base.html             | 4 +++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/wqflask/wqflask/static/new/css/autocomplete.css b/wqflask/wqflask/static/new/css/autocomplete.css
index aba68e37..1501e280 100644
--- a/wqflask/wqflask/static/new/css/autocomplete.css
+++ b/wqflask/wqflask/static/new/css/autocomplete.css
@@ -2,6 +2,8 @@
     /*the container must be positioned relative:*/
     position: relative;
     display: inline-block;
+
+
 }
 
 input.autocomplete {
@@ -21,7 +23,6 @@ input[type=submit].autocomplete {
     color: #fff;
 }
 
-
 .autocomplete-items {
     position: absolute;
     border: 1px solid #d4d4d4;
@@ -32,13 +33,17 @@ input[type=submit].autocomplete {
     top: 100%;
     left: 0;
     right: 0;
+   border:1px solid black;
+   border-top:none;
+   box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+
 }
 
 .autocomplete-items div {
     padding: 10px;
     cursor: pointer;
     background-color: #fff;
-    border-bottom: 1px solid #d4d4d4;
+    border-bottom: 1px dotted #d4d4d4;
 }
 
 .autocomplete-items div:hover {
diff --git a/wqflask/wqflask/templates/base.html b/wqflask/wqflask/templates/base.html
index db2159e0..be241bc7 100644
--- a/wqflask/wqflask/templates/base.html
+++ b/wqflask/wqflask/templates/base.html
@@ -154,7 +154,9 @@
                     <div class="col-8  autocomplete" style="margin-left: 30px;margin-right: 10px;">
                         <input autocomplete="off" class="global_search_input" id="term" style="width:45vw;" type="text" required placeholder="enter you search term here" name="terms">
                     </div>
-                    <span><a style="text-decoration: none;color: darkblue;" target="_blank" href="https://issues.genenetwork.org/topics/xapian-search-queries"><strong>click for more search hints</strong></a></span>
+
+                    <!-- todo fix text overlap for this;;responsiveness-->
+                    <span><a style="text-decoration: none;color: darkblue;" target="_blank" href="https://issues.genenetwork.org/topics/xapian-search-queries"><strong>click for more search hints</strong></a><span/>
                 </div>
             </div>
         </form>
-- 
cgit 1.4.1