content, css, client: search magnifying glass & hover cues

3 files changed, 65 insertions, 21 deletions

diff --git a/src/content/dependencies/generateSearchSidebarBox.js b/src/content/dependencies/generateSearchSidebarBox.js
index 8b18cfae..188a678f 100644
--- a/src/content/dependencies/generateSearchSidebarBox.js
+++ b/src/content/dependencies/generateSearchSidebarBox.js
@@ -14,12 +14,14 @@ export default {
         collapsible: false,
 
         content: [
-          html.tag('input', {class: 'wiki-search-input'},
-            {
-              placeholder:
-                language.$(capsule, 'placeholder').toString(),
-            },
-            {type: 'search'}),
+          html.tag('label', {class: 'wiki-search-label'},
+            html.tag('input', {class: 'wiki-search-input'},
+              {type: 'search'},
+
+              {
+                placeholder:
+                  language.$(capsule, 'placeholder').toString(),
+              })),
 
           html.tag('template', {class: 'wiki-search-preparing-string'},
             language.$(capsule, 'preparing')),
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 1cc8e185..cdb6014a 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -514,23 +514,73 @@ summary .group-name {
   filter: brightness(0.7);
 }
 
-.wiki-search-input {
+.wiki-search-label {
   width: calc(100% - 4px);
   padding: 2px 4px;
   margin: 2px 2px 3px 2px;
   box-sizing: border-box;
 
+  display: flex;
+  flex-direction: row;
+
   background: transparent;
   border: 1px solid var(--dim-color);
   border-radius: 3px;
+}
+
+.wiki-search-label::before {
+  display: inline-block;
+  padding-left: 3px;
+  padding-right: 3px;
+  margin-right: 3px;
+  width: 1.8em;
+  text-align: center;
+  content: '\1f50d\fe0e';
+}
+
+.wiki-search-input {
+  background: transparent;
+  border: transparent;
   color: inherit;
+  flex-grow: 1;
 }
 
-.wiki-search-input[disabled] {
+.wiki-search-label.disabled {
   opacity: 0.6;
+}
+
+.wiki-search-label.disabled,
+.wiki-search-input[disabled] {
   cursor: not-allowed;
 }
 
+.wiki-search-label:not(.disabled):hover,
+.wiki-search-label:focus-within {
+  background: var(--light-ghost-color);
+}
+
+.wiki-search-label:focus-within {
+  border-color: var(--primary-color);
+}
+
+.wiki-search-label:focus-within::before {
+  opacity: 0.7;
+}
+
+.wiki-search-input:focus {
+  border: none;
+  outline: none;
+}
+
+.wiki-search-input::placeholder {
+  color: var(--primary-color);
+  font-style: oblique;
+}
+
+.wiki-search-input:focus::placeholder {
+  color: var(--dim-color);
+}
+
 .wiki-search-sidebar-box hr {
   border-color: var(--primary-color);
   border-style: none none dotted none;
@@ -694,19 +744,6 @@ summary .group-name {
   border-color: var(--deep-color);
 }
 
-.wiki-search-input:focus {
-  border-color: var(--primary-color);
-}
-
-.wiki-search-input::placeholder {
-  color: var(--primary-color);
-  font-style: oblique;
-}
-
-.wiki-search-input:focus::placeholder {
-  color: var(--dim-color);
-}
-
 #content {
   overflow-wrap: anywhere;
 }
diff --git a/src/static/js/client.js b/src/static/js/client.js
index 935a9d87..3a4af8c1 100644
--- a/src/static/js/client.js
+++ b/src/static/js/client.js
@@ -3831,6 +3831,7 @@ const sidebarSearchInfo = initInfo('sidebarSearchInfo', {
 
   searchSidebarColumn: null,
   searchBox: null,
+  searchLabel: null,
   searchInput: null,
 
   progressRule: null,
@@ -3919,6 +3920,9 @@ function getSidebarSearchReferences() {
     return;
   }
 
+  info.searchLabel =
+    info.searchBox.querySelector('.wiki-search-label');
+
   info.searchInput =
     info.searchBox.querySelector('.wiki-search-input');
 
@@ -4360,6 +4364,7 @@ function showSidebarSearchFailed() {
   cssProp(info.failedRule, 'display', null);
   cssProp(info.failedContainer, 'display', null);
 
+  info.searchLabel.classList.add('disabled');
   info.searchInput.disabled = true;
 
   if (state.stoppedTypingTimeout) {