style: update search bar design (#9)

gnolang · Mar 22, 2024 · 460e63b · 460e63b
1 parent aaaefd6
commit 460e63b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 .netlify
+docs
diff --git a/docusaurus/src/css/custom.css b/docusaurus/src/css/custom.css
@@ -15,6 +15,7 @@
   --ifm-color-primary-lighter: #efefef;
   --ifm-color-primary-lightest: #ffffff;
   --ifm-font-color-base: #6f6f6f;
+  --ifm-color-content-secondary: #6f6f6f;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
   --ifm-global-radius: 1rem;
@@ -38,6 +39,16 @@
 
   --ifm-menu-link-sublist-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjk2OTY3IDE1LjUzMDNDMy42NzY3OCAxNS4yMzc0IDMuNjc2NzggMTQuNzYyNiAzLjk2OTY3IDE0LjQ2OTdMMTEuNDY5NyA2Ljk2OTY3QzExLjc2MjYgNi42NzY3OCAxMi4yMzc0IDYuNjc2NzggMTIuNTMwMyA2Ljk2OTY3TDIwLjAzMDMgMTQuNDY5N0MyMC4zMjMyIDE0Ljc2MjYgMjAuMzIzMiAxNS4yMzc0IDIwLjAzMDMgMTUuNTMwM0MxOS43Mzc0IDE1LjgyMzIgMTkuMjYyNiAxNS44MjMyIDE4Ljk2OTcgMTUuNTMwM0wxMiA4LjU2MDY2TDUuMDMwMzMgMTUuNTMwM0M0LjczNzQ0IDE1LjgyMzIgNC4yNjI1NiAxNS44MjMyIDMuOTY5NjcgMTUuNTMwM1oiIGZpbGw9IiMxQzFDMUMiLz4KPC9zdmc+Cg==");
   --content-max-w: 50rem;
+
+  --docsearch-primary-color: var(--ifm-color-content-secondary) !important;
+  --docsearch-key-gradient: var(--ifm-links-background-color) !important;
+  --docsearch-key-shadow: var(--ifm-heading-color) !important;
+  --docsearch-modal-background: var(--ifm-navbar-background-color) !important;
+  --docsearch-footer-background: var(--ifm-navbar-background-color) !important;
+  --docsearch-highlight-color: var(--ifm-color-secondary) !important;
+  --docsearch-searchbox-shadow: var(--ifm-color-primary-light) !important;
+  --docsearch-searchbox-focus-background: var(--ifm-color-primary-lighter) !important;
+  --docsearch-hit-color: var(--ifm-color-primary) !important;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -59,6 +70,9 @@
   --ifm-toc-background-color: var(--ifm-color-primary-darker);
   --ifm-links-background-color: var(--ifm-color-primary-darker);
   --ifm-links-hover-background-color: var(--ifm-color-primary-light);
+  --docsearch-primary-color: var(--ifm-color-primary-light);
+
+  --docsearch-searchbox-focus-background: var(--docusaurus-highlighted-code-line-bg) !important;
 }
 
 /* Generic */
@@ -341,3 +355,8 @@ a.footer__link-item > svg {
     font-size: 0.8em;
   }
 }
+
+/* Search bar */
+html .docsearch-modal-search-input-form {
+  box-shadow: var(--ifm-color-secondary) 0px 0px 0px 2px inset;
+}