From 02574c92b2ca87eb3192d550049eb23471066102 Mon Sep 17 00:00:00 2001 From: Clayton Collie Date: Wed, 8 Apr 2026 11:53:31 +0200 Subject: [PATCH 1/8] Fix search input clear button and hint container positioning Override third-party search plugin styles to properly position the clear button and keyboard shortcut hint inside the search input. Remove fragile exact-match searchHintContainer selector. --- src/css/homepage-search.css | 29 ++++++++++++++++++++++++----- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/src/css/homepage-search.css b/src/css/homepage-search.css index 595d495..dfdccd4 100644 --- a/src/css/homepage-search.css +++ b/src/css/homepage-search.css @@ -24,11 +24,6 @@ color: var(--ifm-color-content); } -.home__heroBanner - [class="searchHintContainer_node_modules-@easyops-cn-docusaurus-search-local-dist-client-client-theme-SearchBar-SearchBar-module"] { - display: none !important; -} - .home__heroBanner .navbar__search input { background-color: var(--ifm-input-background-color); border-radius: 0.75em; @@ -43,3 +38,27 @@ font-size: 1.125rem; color: var(--ifm-color-content); } + +[class^="searchBarContainer_"] [class^="searchClearButton_"] { + background: none; + border: none; + line-height: 1rem; + padding: 0; + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 7px; + text-align: right; +} + +[class^="searchHintContainer_"] { + align-items: center; + display: flex; + gap: 4px; + height: 100%; + justify-content: end; + pointer-events: none; + position: absolute; + right: 10px; + top: 0; +} From f7b46c095e2af685fff324b2de836ccee3332ee1 Mon Sep 17 00:00:00 2001 From: Clayton Collie Date: Wed, 8 Apr 2026 11:57:35 +0200 Subject: [PATCH 2/8] Increase specificity of search input CSS overrides Scope clear button and hint container selectors under .navbar__search to beat the package's CSS module specificity and cascade order. --- src/css/homepage-search.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/css/homepage-search.css b/src/css/homepage-search.css index dfdccd4..5416337 100644 --- a/src/css/homepage-search.css +++ b/src/css/homepage-search.css @@ -39,7 +39,7 @@ color: var(--ifm-color-content); } -[class^="searchBarContainer_"] [class^="searchClearButton_"] { +.navbar__search [class^="searchBarContainer_"] [class^="searchClearButton_"] { background: none; border: none; line-height: 1rem; @@ -51,7 +51,7 @@ text-align: right; } -[class^="searchHintContainer_"] { +.navbar__search [class^="searchHintContainer_"] { align-items: center; display: flex; gap: 4px; From 67f52f5d71547bc215b91492ae6b086f43b208ac Mon Sep 17 00:00:00 2001 From: Clayton Collie Date: Wed, 8 Apr 2026 11:59:33 +0200 Subject: [PATCH 3/8] Increase clear button selector specificity to beat package styles The package selector uses two classes (0,2,0), so our override needs three classes (0,3,0) to win regardless of cascade order. --- src/css/homepage-search.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/homepage-search.css b/src/css/homepage-search.css index 5416337..17cf7d8 100644 --- a/src/css/homepage-search.css +++ b/src/css/homepage-search.css @@ -39,7 +39,7 @@ color: var(--ifm-color-content); } -.navbar__search [class^="searchBarContainer_"] [class^="searchClearButton_"] { +.navbar .navbar__search [class^="searchBarContainer_"] [class^="searchClearButton_"] { background: none; border: none; line-height: 1rem; From 966315bf16ffe20276c9b1a9665a9975cc23a269 Mon Sep 17 00:00:00 2001 From: Clayton Collie Date: Wed, 8 Apr 2026 12:02:07 +0200 Subject: [PATCH 4/8] Use !important for search clear button overrides Specificity alone can't reliably beat the third-party package styles due to unpredictable cascade order. Use !important to guarantee our overrides apply. --- src/css/homepage-search.css | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/css/homepage-search.css b/src/css/homepage-search.css index 17cf7d8..bbe96c1 100644 --- a/src/css/homepage-search.css +++ b/src/css/homepage-search.css @@ -39,16 +39,16 @@ color: var(--ifm-color-content); } -.navbar .navbar__search [class^="searchBarContainer_"] [class^="searchClearButton_"] { - background: none; - border: none; - line-height: 1rem; - padding: 0; - position: absolute; - top: 50%; - transform: translateY(-50%); - right: 7px; - text-align: right; +[class^="searchBarContainer_"] [class^="searchClearButton_"] { + background: none !important; + border: none !important; + line-height: 1rem !important; + padding: 0 !important; + position: absolute !important; + top: 50% !important; + transform: translateY(-50%) !important; + right: 7px !important; + text-align: right !important; } .navbar__search [class^="searchHintContainer_"] { From d6d77c7274282a75c07dee521e7cedd663e58612 Mon Sep 17 00:00:00 2001 From: Clayton Collie Date: Wed, 8 Apr 2026 12:03:31 +0200 Subject: [PATCH 5/8] Simplify search hint container override to only change justify-content --- src/css/homepage-search.css | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/css/homepage-search.css b/src/css/homepage-search.css index bbe96c1..fa5026a 100644 --- a/src/css/homepage-search.css +++ b/src/css/homepage-search.css @@ -52,13 +52,5 @@ } .navbar__search [class^="searchHintContainer_"] { - align-items: center; - display: flex; - gap: 4px; - height: 100%; justify-content: end; - pointer-events: none; - position: absolute; - right: 10px; - top: 0; } From 17b5987397156b9085dccc59372ad00ae622fa26 Mon Sep 17 00:00:00 2001 From: Clayton Collie Date: Wed, 8 Apr 2026 12:03:49 +0200 Subject: [PATCH 6/8] Simplify search clear button override to only change right and text-align --- src/css/homepage-search.css | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/css/homepage-search.css b/src/css/homepage-search.css index fa5026a..2eec65a 100644 --- a/src/css/homepage-search.css +++ b/src/css/homepage-search.css @@ -40,13 +40,6 @@ } [class^="searchBarContainer_"] [class^="searchClearButton_"] { - background: none !important; - border: none !important; - line-height: 1rem !important; - padding: 0 !important; - position: absolute !important; - top: 50% !important; - transform: translateY(-50%) !important; right: 7px !important; text-align: right !important; } From 98473bac800c7626852c7557cdfb29ca32c6b782 Mon Sep 17 00:00:00 2001 From: Clayton Collie Date: Wed, 8 Apr 2026 12:04:15 +0200 Subject: [PATCH 7/8] Restore home__heroBanner searchHintContainer hide rule --- src/css/homepage-search.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/css/homepage-search.css b/src/css/homepage-search.css index 2eec65a..1b2622d 100644 --- a/src/css/homepage-search.css +++ b/src/css/homepage-search.css @@ -24,6 +24,11 @@ color: var(--ifm-color-content); } +.home__heroBanner + [class="searchHintContainer_node_modules-@easyops-cn-docusaurus-search-local-dist-client-client-theme-SearchBar-SearchBar-module"] { + display: none !important; +} + .home__heroBanner .navbar__search input { background-color: var(--ifm-input-background-color); border-radius: 0.75em; From a3f25b294825b6e354ff99e24c408c35a8b8241e Mon Sep 17 00:00:00 2001 From: Clayton Collie Date: Wed, 8 Apr 2026 12:05:34 +0200 Subject: [PATCH 8/8] Switch clear button selector from starts-with to contains The element may have multiple classes, so [class^=] fails when searchClearButton_ isn't the first class in the attribute. --- src/css/homepage-search.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/homepage-search.css b/src/css/homepage-search.css index 1b2622d..0617395 100644 --- a/src/css/homepage-search.css +++ b/src/css/homepage-search.css @@ -44,7 +44,7 @@ color: var(--ifm-color-content); } -[class^="searchBarContainer_"] [class^="searchClearButton_"] { +[class*="searchBarContainer_"] [class*="searchClearButton_"] { right: 7px !important; text-align: right !important; }