From fa7285660b1f046b51993642bc42802e06cfd154 Mon Sep 17 00:00:00 2001
From: Philipp A <flying-sheep@web.de>
Date: Fri, 12 Jan 2024 15:05:04 +0100
Subject: [PATCH] Override the search keyboard combination, too (#128)

---
 .../theme/static/scripts/rtd-sphinx-search.js | 37 ++++++++++---------
 src/scanpydoc/theme/static/styles/scanpy.css  | 17 ++++++++-
 2 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/scanpydoc/theme/static/scripts/rtd-sphinx-search.js b/src/scanpydoc/theme/static/scripts/rtd-sphinx-search.js
index 1464921..4083fc9 100644
--- a/src/scanpydoc/theme/static/scripts/rtd-sphinx-search.js
+++ b/src/scanpydoc/theme/static/scripts/rtd-sphinx-search.js
@@ -2,25 +2,28 @@
  * This JS is only included when the RTD Sphinx search is active.
  */
 
-setTimeout(overrideSearchButton, 0)
-
-function overrideSearchButton() {
-    /** @type {HTMLDivElement} */
-    const search_backdrop = document.querySelector(".search__backdrop")
-    if (!search_backdrop) {
-        setTimeout(overrideSearchButton, 500)
-        return
+// wire up the search key combination
+addEventListener("keydown", ({ key, metaKey, ctrlKey }) => {
+    if (key === "k" && (metaKey || ctrlKey)) {
+        showSearchModal()
     }
-    search_backdrop.style.zIndex = "1020"
+})
+
+// start attempting to override the search popup and to wire up the search button
+setTimeout(overrideSearch, 0)
 
+function overrideSearch() {
+    /** @type {HTMLDivElement} */
+    const theme_popup = document.querySelector(".search-button__wrapper")
     /** @type {HTMLButtonElement} */
     const search_button = document.querySelector("button[aria-label='Search']")
-    search_button.addEventListener("click", () => {
-        showSearchModal()
-
-        // hide the theme’s search popup
-        /** @type {HTMLDivElement} */
-        const theme_popup = document.querySelector(".search-button__wrapper")
-        theme_popup.style.display = "none"
-    })
+    if (!theme_popup || !search_button) {
+        // try again later
+        setTimeout(overrideSearch, 500)
+        return
+    }
+    // Hide the pydata theme’s search popup.
+    theme_popup.style.display = "none"
+    // wire up the search button
+    search_button.addEventListener("click", () => showSearchModal())
 }
diff --git a/src/scanpydoc/theme/static/styles/scanpy.css b/src/scanpydoc/theme/static/styles/scanpy.css
index 8205c14..9780630 100644
--- a/src/scanpydoc/theme/static/styles/scanpy.css
+++ b/src/scanpydoc/theme/static/styles/scanpy.css
@@ -21,7 +21,22 @@ dl.citation > dt {
     font-size: 70% !important;
 }
 
-/* for the search */
+/* Fix pydata theme search button changing size */
+.search-button-field {
+    border: 0;
+    outline: 1px solid var(--pst-color-border);
+}
+.search-button-field:hover {
+    border: 0;
+    outline: 2px solid var(--pst-color-link-hover);
+}
+
+/* Make the readthedocs-sphinx-search popup adapt to the theme */
+/*backdrop*/
+html[data-theme] .search__backdrop {
+    z-index: 1020;
+    backdrop-filter: saturate(150%) blur(20px);
+}
 /*container*/
 html[data-theme] :is(.search__outer, .rtd__search__credits) {
     font-family: var(--pst-font-family-base);