From 86738406f3119165054da5429338c7b98bd135da Mon Sep 17 00:00:00 2001 From: Revathy Venugopal <104772255+Revathyvenugopal162@users.noreply.github.com> Date: Thu, 26 Sep 2024 09:58:10 +0200 Subject: [PATCH] maint: styles for dark theme search bar (#511) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: pyansys-ci-bot <92810346+pyansys-ci-bot@users.noreply.github.com> Co-authored-by: Jorge Martínez <28702884+jorgepiloto@users.noreply.github.com> --- doc/changelog.d/511.fixed.md | 1 + .../components/ast-search-button.html | 6 ++++++ .../css/ansys-sphinx-theme-variable.css | 2 ++ .../static/css/fuse-search.css | 20 ++++++++++++------- .../static/js/fuse_extension.js | 4 ++++ 5 files changed, 26 insertions(+), 7 deletions(-) create mode 100644 doc/changelog.d/511.fixed.md diff --git a/doc/changelog.d/511.fixed.md b/doc/changelog.d/511.fixed.md new file mode 100644 index 00000000..aa5ff9ed --- /dev/null +++ b/doc/changelog.d/511.fixed.md @@ -0,0 +1 @@ +maint: styles for dark theme search bar \ No newline at end of file diff --git a/src/ansys_sphinx_theme/theme/ansys_sphinx_theme/components/ast-search-button.html b/src/ansys_sphinx_theme/theme/ansys_sphinx_theme/components/ast-search-button.html index da1a1d3d..54064d78 100644 --- a/src/ansys_sphinx_theme/theme/ansys_sphinx_theme/components/ast-search-button.html +++ b/src/ansys_sphinx_theme/theme/ansys_sphinx_theme/components/ast-search-button.html @@ -4,7 +4,13 @@ +{% 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) %} diff --git a/src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/ansys-sphinx-theme-variable.css b/src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/ansys-sphinx-theme-variable.css index 71f301bc..d1755d7d 100644 --- a/src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/ansys-sphinx-theme-variable.css +++ b/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 diff --git a/src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/fuse-search.css b/src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/fuse-search.css index bf4c683b..8b4bcece 100644 --- a/src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/fuse-search.css +++ b/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; +} diff --git a/src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/js/fuse_extension.js b/src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/js/fuse_extension.js index e23e46ee..e919dc15 100644 --- a/src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/js/fuse_extension.js +++ b/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"); } });