fix css bug and improve search design #276 (#277)

* fix css bug and improve search design

* fix query text in dark mode

* adjust opacity of search buttons

Author: danabauer

src/css/custom.css

@@ -1,3 +1,4 @@
+
 /**
  * Any CSS included here will be global. The classic template
  * bundles Infima by default. Infima is a CSS framework designed to
@@ -20,7 +21,6 @@
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
-/* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='light'] {
   --ifm-color-primary: #2c2e7f;
   --ifm-color-primary-dark: #3a48b8;
@@ -52,21 +52,23 @@
 }
 
 [data-theme='light'] .DocSearch {
-  --docsearch-primary-color: var(--ifm-color-black);
-  --docsearch-text-color: var(--ifm-font-color-primary);
-  --docsearch-muted-color: var(--ifm-color-black);
-  --docsearch-container-background: rgba(94, 100, 112, 0.7);
+  --docsearch-primary-color: #3a48b8;
+  --docsearch-text-color: #1a1a2e;
+  --docsearch-muted-color: #495057;
+  --docsearch-container-background: rgba(0, 0, 0, 0.6);
   /* Modal */
-  --docsearch-modal-background: var(--ifm-color-black);
+  --docsearch-modal-background: #ffffff;
+  --docsearch-modal-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
   /* Search box */
-  --docsearch-searchbox-background: var(--ifm-background-color);
-  --docsearch-searchbox-focus-background: var(--ifm-color-white);
+  --docsearch-searchbox-background: #f1f3f5;
+  --docsearch-searchbox-focus-background: #ffffff;
   /* Hit */
-  --docsearch-hit-color: var(--ifm-font-color-base);
-  --docsearch-hit-active-color: var(--ifm-color-white);
-  --docsearch-hit-background: var(--ifm-color-white);
+  --docsearch-hit-color: #1a1a2e;
+  --docsearch-hit-active-color: #ffffff;
+  --docsearch-hit-background: #ffffff;
   /* Footer */
-  --docsearch-footer-background: var(--ifm-color-white);
+  --docsearch-footer-background: #ffffff;
+  --docsearch-footer-shadow: 0 -1px 0 0 #dee2e6;
 }
 
 [data-theme='dark'] .DocSearch {
@@ -92,7 +94,69 @@
   );
 }
 
-/* Header Icons */
+.DocSearch-Modal {
+  max-width: 800px;
+  margin: 10vh auto;
+}
+
+.DocSearch-Input {
+  font-size: 1.2rem;
+  padding: 0.75rem 1rem;
+  color: #1a1a2e;
+  font-weight: 500;
+}
+
+[data-theme='dark'] .DocSearch-Input {
+  color: #e6edf3;
+}
+
+.navbar .DocSearch-Button {
+  padding: 0.35rem 1rem;
+  border-radius: 8px;
+  border: none;
+  background: rgba(58, 72, 184, 0.8);
+  color: #ffffff;
+  box-shadow: 0 2px 8px rgba(58, 72, 184, 0.2);
+  transition: all 0.2s ease;
+}
+
+.navbar .DocSearch-Button:hover {
+  background: rgba(58, 72, 184, 0.9);
+  box-shadow: 0 4px 12px rgba(58, 72, 184, 0.3);
+  transform: translateY(-1px);
+}
+
+.navbar .DocSearch-Button-Placeholder {
+  font-size: 1rem;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.navbar .DocSearch-Search-Icon {
+  width: 18px;
+  height: 18px;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.navbar .DocSearch-Button-Keys kbd {
+  background: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: #ffffff;
+  box-shadow: none;
+}
+
+[data-theme='dark'] .navbar .DocSearch-Button {
+  background: rgba(58, 72, 184, 0.6);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+[data-theme='dark'] .navbar .DocSearch-Button:hover {
+  background: rgba(83, 98, 209, 0.75);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+/* =================================
+   HEADER ICONS
+   ================================= */
 
 .github-link {
   width: 32px;
@@ -120,9 +184,9 @@
     0 0 / contain;
 }
 
-/* =================================>>>>>>> REPLACE
+/* =================================
    SMART TABLE STYLING
-   ======================================== */
+   ================================= */
 
 /* Smart table container */
 .smart-table-container {
@@ -614,4 +678,4 @@
 [data-theme='dark'] .schema-fields-table .expand-button:hover {
   background-color: var(--ifm-color-primary-dark);
   color: var(--ifm-color-primary-lightest);
-}
+}