maint: styles for dark theme search bar (#511)

Co-authored-by: pyansys-ci-bot <[email protected]>
Co-authored-by: Jorge Martínez <[email protected]>

Author: 3 people

doc/changelog.d/511.fixed.md

@@ -0,0 +1 @@
+maint: styles for dark theme search bar

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/components/ast-search-button.html

@@ -4,7 +4,13 @@
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
 
+{% if theme_static_search %}
+
 {% set theme_static_search = theme_static_search | default({}) %}
+{% else %}
+{% set theme_static_search = {'keys': ['title', 'text'], 'threshold': 0.5, 'shouldSort': 'True', 'ignoreLocation': 'False', 'useExtendedSearch': 'True'} %}
+{% endif %}
+
 {% set theme_limit = theme_static_search.limit | default(10) %}
 {% set min_chars_for_search = theme_static_search.min_chars_for_search | default(1) %}
 

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/ansys-sphinx-theme-variable.css

@@ -220,6 +220,7 @@ html[data-theme="light"] {
   --ast-catagory-header-text: #353535;
   --ast-catagory-suggestion-text: #8e8e8e;
   --ast-suggestion-text-color: #000000;
+  --ast-hover-suggestion-text-background: #ececec;
 
   /**
   * dropdown header
@@ -375,6 +376,7 @@ html[data-theme="dark"] {
   --ast-catagory-header-text: #ececec;
   --ast-catagory-suggestion-text: #686868;
   --ast-suggestion-text-color: #ffffff;
+  --ast-hover-suggestion-text-background: #3d3d3d;
 
   /**
   * dropdown header

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/fuse-search.css

@@ -1,14 +1,15 @@
+@import "ansys-sphinx-theme-variable.css";
 .results {
   display: flex;
   flex-direction: column;
   align-content: flex-start;
   justify-content: center;
   position: absolute;
-  background-color: white;
+  background-color: var(--ast-search-bar-enable-background);
   width: 700px;
   padding: 10px;
-  border: 1px solid #ddd; /* Optional: Add border for better visibility */
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for better visibility */
+  border: 1px solid var(--ast-search-bar-enable-border);
+  box-shadow: var(--ast-box-shadow-active);
   overflow: auto;
   height: 500px;
 }
@@ -24,8 +25,9 @@
 .result-title {
   font-size: 1em;
   font-weight: bold;
-  background-color: #f3f4f5;
+  background-color: var(--ast-suggestion-header-background);
   font-family: "Open Sans", sans-serif;
+  color: var(--ast-catagory-header-text);
 }
 
 .result-title:focus,
@@ -55,18 +57,17 @@
 
 .result-item:hover {
   background-color: var(
-    --ast-color-hover-card-background
+    --ast-hover-suggestion-text-background
   ); /* Background when hovered */
 }
 
 .no-results {
   font-style: italic;
-  color: #777;
+  color: var(--ast-color-text);
   font-family: "Open Sans", sans-serif;
 }
 
 html[data-theme="light"] .highlight {
-  background-color: #ececec;
   color: var(--ast-highlight-color);
 }
 
@@ -160,3 +161,8 @@ html[data-theme="light"] .highlight {
 .search-icon {
   cursor: pointer;
 }
+
+.bd-main.blurred {
+  opacity: 0.5;
+  transition: opacity 0.3s ease;
+}

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/js/fuse_extension.js

@@ -1,10 +1,12 @@
 const searchBar = document.getElementById("search-bar");
 const searchBarBox = searchBar.querySelector(".bd-search input");
 resultsContainer = document.getElementById("results");
+const content = document.querySelector(".bd-main");
 
 // Function to expand the search bar and display results
 function expandSearchBox() {
   searchBarBox.classList.add("expanded");
+  content.classList.add("blurred");
   searchBarBox.focus();
 
   if (searchBarBox.value.trim().length >= parseInt(min_chars_for_search)) {
@@ -26,6 +28,7 @@ document.addEventListener("keydown", function (event) {
     case "Escape":
       resultsContainer.style.display = "none";
       searchBarBox.classList.remove("expanded");
+      content.classList.remove("blurred");
       break;
   }
 });
@@ -38,5 +41,6 @@ document.addEventListener("click", function (event) {
   ) {
     resultsContainer.style.display = "none";
     searchBarBox.classList.remove("expanded");
+    content.classList.remove("blurred");
   }
 });