use button in results

Author: ArthurFlag

assets/css/utilities.css

@@ -250,7 +250,7 @@
   font-size: 90%;
 }
 @utility topbar-button {
-  @apply font-semibold min-h-10 px-2 bg-blue-400/50 rounded-md border-1 border-blue-300  inline-flex justify-center items-center gap-1.5 hover:bg-blue-400/70 hover:border-blue-200 transition-colors;
+  @apply text-white font-semibold min-h-10 px-2 bg-blue-400/50 rounded-md border-1 border-blue-300  inline-flex justify-center items-center gap-1.5 hover:bg-blue-400/70 hover:border-blue-200 transition-colors;
   svg {
    font-size: 19px;
   }

hugo_stats.json

@@ -170,7 +170,12 @@
       "bg-black/100",
       "bg-black/50",
       "bg-blue",
+      "bg-blue-300",
       "bg-blue-400",
+      "bg-blue-400/30",
+      "bg-blue-400/7",
+      "bg-blue-400/70",
+      "bg-blue-400/95",
       "bg-blue-500",
       "bg-gradient-to-br",
       "bg-gradient-to-r",
@@ -195,6 +200,8 @@
       "border-b",
       "border-b-4",
       "border-blue",
+      "border-blue-300",
+      "border-blue-400",
       "border-divider-light",
       "border-gray-200",
       "border-gray-400",
@@ -341,11 +348,15 @@
       "highlight",
       "hover:bg-blue",
       "hover:bg-blue-400",
+      "hover:bg-blue-400/70",
+      "hover:bg-blue-400/80",
+      "hover:bg-blue-400/90",
       "hover:bg-blue-500",
       "hover:bg-gray-100",
       "hover:bg-gray-200",
       "hover:bg-gray-50",
       "hover:bg-white/20",
+      "hover:border-blue-400",
       "hover:border-white/20",
       "hover:dark:bg-blue-500",
       "hover:dark:bg-gray-800",

layouts/_default/search.html

@@ -8,25 +8,16 @@ <h1 class="py-4">{{ .Title }}</h1>
     {{ .Content }}
     <div class="not-prose">
       <div class="flex flex-col justify-between gap-8 lg:flex-row">
-        <input
-          type="search"
-          id="search-page-input"
+        <input type="search" id="search-page-input"
           class="ring-3-gray-light-200 dark:ring-3-gray-dark-400 dark:bg-background-dark focus:ring-3-blue-light dark:focus:ring-3-blue-dark ring-3-[1.5px] w-full max-w-xl min-w-0 rounded-sm bg-white px-4 py-2 outline-hidden"
-          placeholder="Search…"
-          tabindex="0"
-        />
+          placeholder="Search…" tabindex="0" />
         <div class="flex min-w-fit flex-grow flex-col items-center">
-          <p>Not finding what you're looking for?</p>
-          <button
-            class="open-kapa-widget flex w-fit items-center gap-2 rounded-sm px-2 py-1 font-semibold hover:bg-gray-200 dark:hover:bg-gray-800"
-          >
-            <span>Try Ask AI</span>
-            <img
-              height="24px"
-              width="24px"
-              src="{{ (resources.Get "images/ai-stars.svg").Permalink }}"
-              alt="AI sparkles!"
-            />
+          <p class="mb-1">Not finding what you're looking for? Try</p>
+          <button class="topbar-button open-kapa-widget bg-blue-400/95 border-blue-300 hover:bg-blue-400/90">
+            <span>Ask&nbsp;AI</span>
+            <span class="icon-svg">
+              {{ partial "utils/svg.html" "/icons/sparkle.svg" }}
+            </span>
           </button>
         </div>
       </div>

layouts/partials/search-bar.html

@@ -35,7 +35,7 @@
             break;
           }
         }"
-    class="flex-grow px-2 order-1 min-w-0 border-none outline-none focus:outline-none"
+    class="flex-grow order-1 min-w-0 border-none outline-none focus:outline-none"
     tabindex="0"
   />
   <div id="search-bar-icon" class="order-2">