client, css: highlight current search result

2 files changed, 16 insertions, 0 deletions

diff --git a/src/static/css/site.css b/src/static/css/site.css
index a9ff8529..aeba0d48 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -578,11 +578,26 @@ summary .group-name {
   display: none;
 }
 
+.wiki-search-result.current-result {
+  background: var(--light-ghost-color);
+  border-top: 1px solid var(--dim-color);
+  border-bottom: 1px solid var(--dim-color);
+}
+
 .wiki-search-result:hover::before {
   display: block;
   background: var(--light-ghost-color);
 }
 
+.wiki-search-result.current-result:hover {
+  background: none;
+  border-color: transparent;
+}
+
+.wiki-search-result.current-result:hover .wiki-search-current-result-text {
+  filter: saturate(0.8) brightness(1.4);
+}
+
 .wiki-search-result-text-area {
   align-self: center;
   flex-grow: 1;
diff --git a/src/static/js/client.js b/src/static/js/client.js
index 124c8414..1b70af0f 100644
--- a/src/static/js/client.js
+++ b/src/static/js/client.js
@@ -4342,6 +4342,7 @@ function generateSidebarSearchResultTemplate(slots) {
     const here = location.href.replace(/\/$/, '');
     const there = link.href.replace(/\/$/, '');
     if (here === there) {
+      link.classList.add('current-result');
       accentSpan = document.createElement('span');
       accentSpan.classList.add('wiki-search-current-result-text');
       accentSpan.appendChild(templateContent(info.currentResultString));