From 4ca86901e7d8380467178b1db5451b801f23f341 Mon Sep 17 00:00:00 2001
From: Aryan Shah <aryanashah11@gmail.com>
Date: Tue, 5 Aug 2025 20:51:29 +0530
Subject: [PATCH] Fixed the searchbar on focus

Signed-off-by: Aryan Shah <aryanashah11@gmail.com>
---
 assets/scss/_search_project.scss | 42 ++++++++++++++++++++++----------
 layouts/partials/hotkey.html     |  7 +-----
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/assets/scss/_search_project.scss b/assets/scss/_search_project.scss
index 2ca14e3dd..142ee7ecd 100644
--- a/assets/scss/_search_project.scss
+++ b/assets/scss/_search_project.scss
@@ -86,17 +86,11 @@
 }
 
 // Offline search
-
 .td-search--offline {
   &:focus-within {
-    // Don't hide the search icon on focus: this gives better UX when user
-    // explores content of search-results popup and focus is lost.
-
+    // Keep the search icon visible but maintain consistent styling
     .td-search__icon {
       display: flex;
-      color: $input-placeholder-color;
-      background-color: var(--bs-body-bg);
-      padding-right: 0.2rem;      
     }
   }
 }
@@ -142,11 +136,11 @@
   .navbar-brand {
     margin: 1.25rem;
   }
+
   .td-search {
     display: flex;
     justify-content: center;
     align-content: center;
-    // background-color: #EBC017;
     background-color: #2e2e31;
     border-radius: 1rem;
 
@@ -154,28 +148,50 @@
       width: 100%;
       text-indent: 1.25em;
       border-radius: 1rem;
+      background: transparent;
+      border: none;
+      color: inherit;
     }
+
     .td-search__input:not(:focus) {
       background: transparent;
       border-radius: 1rem;
     }
+
+    // Make focused state identical to non-focused state
     .td-search__input.form-control:focus {
-      color: inherit;
+      background: transparent !important;
+      border: none !important;
+      color: inherit !important;
+      box-shadow: none !important;
+      outline: none !important;
+      border-radius: 1rem;
+    }
+
+    // Ensure search icon maintains consistent styling in navbar
+    .td-search__icon {
+      color: $navbar-dark-color !important;
+
+      // Override any focus-within changes for navbar specifically
+      .td-search--offline:focus-within & {
+        color: $navbar-dark-color !important;
+        background-color: transparent !important;
+        padding-right: 0 !important;
+      }
     }
-  }
-  .td-search__input.form-control:focus {
-    // background-color: #EBC017;
   }
 }
 
 .form-control {
   border: 1px solid #ced4da;
 }
+
 input[type="search"]::-webkit-search-cancel-button {
   filter: invert(55%) sepia(75%) saturate(380%) hue-rotate(135deg) brightness(95%) contrast(90%);
   cursor: pointer;
   transform: scale(1.1);
 }
+
 input[type="search"]::-webkit-search-cancel-button:hover {
   filter: invert(60%) sepia(95%) saturate(500%) hue-rotate(140deg) brightness(100%) contrast(100%);
-}
+}
\ No newline at end of file
diff --git a/layouts/partials/hotkey.html b/layouts/partials/hotkey.html
index cdfa5c75b..aeebba7b0 100644
--- a/layouts/partials/hotkey.html
+++ b/layouts/partials/hotkey.html
@@ -25,12 +25,7 @@
         event.preventDefault();
         focusSearchBar();
       });
-      
-      var searchBar = document.querySelector(".td-search__input");
-      if (searchBar) {
-        searchBar.focus();
-      }
-      
+
       var searchElement = document.querySelector(".td-search__input");
       if (searchElement) {
         searchElement.appendChild(searchKey);