add visual indication for search shortcut

Author: MAX-786

docs/_static/custom.css

@@ -177,6 +177,16 @@ div.admonition.admonition-todo>.admonition-title::before {
 
 /* Search */
 
+#search-shortcut-page {
+  position: absolute;
+  right: 9.375rem;
+  top: 0.1875rem;
+  border-radius: 0.25em;
+  background: #d9eef9;
+  padding: 0.2em;
+  color: #4a4a4a;
+}
+
 /* Show search form. It is hidden by default. */
 #search-documentation,
 #search-documentation~form,
@@ -305,13 +315,26 @@ div.sidebar:not(.margin) .admonition {
   margin-right: .5em;
   background-color: #ffffff;
 }
+#search-shortcut-sidebar {
+  position: absolute;
+  right: 1.25rem;
+  border-radius: 0.25em;
+  background: #d9eef9;
+  padding: 0.2em;
+  color: #4a4a4a;
+  font-size: 1rem;
+}
 
 @media (min-width:768px) {
   div.sidebar:not(.margin) {
     width: 50%;
     margin-left: 1.5em;
     margin-right: -28%;
   }
+
+  #search-shortcut-sidebar {
+    font-size: inherit;
+  }
 }
 
 

docs/_templates/page.html

@@ -19,6 +19,7 @@
                 $('#search-input').focus();
             }
         });
+        if (navigator.platform.indexOf('Mac') === -1) $('#search-shortcut-sidebar').html("^K"); // if OS isn't Mac change Visual indication of search field
     </script>
 
 {% endblock %}

docs/_templates/search-field.html

@@ -0,0 +1,5 @@
+<form class="bd-search d-flex align-items-center" action="{{ pathto('search') }}" method="get">
+    <i class="icon fas fa-search"></i>
+    <input type="search" class="form-control" name="q" id="search-input" placeholder="{{ _(theme_search_bar_text) }}" aria-label="{{ theme_search_bar_text }}" autocomplete="off" >
+    <span id="search-shortcut-sidebar">⌘K</span>
+  </form>

docs/_templates/search.html

@@ -53,6 +53,7 @@ <h1 id="search-documentation">{{ _('Search') }}</h1>
             class="form-control"
             placeholder="Search the docs…"
             aria-labelledby="search-documentation" value="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/>
+            <span id="search-shortcut-page">⌘K</span>
           <label for="q" class="sr-only">Search string</label>
           <div class="input-group-append">
             <button type="submit" class="btn btn-primary">{{ _('search') }}</button>
@@ -122,6 +123,15 @@ <h1 id="search-documentation">{{ _('Search') }}</h1>
                 $(".topbar-contents .bd-toc").css("visibility", "hidden");
             }
         });
+        
+      $('form.bd-search').css('visibility','hidden'); // Hide Sidebar Search field
+      if (navigator.platform.indexOf('Mac') === -1) $('#search-shortcut-page').html("^K"); // if OS isn't Mac change Visual indication of search field
+      $(document).keydown(function(event) {
+          if ((event.ctrlKey || event.metaKey) && event.key == "k") {
+            event.preventDefault();
+            $('#q').focus();
+          }
+      });
     </script>
 
 {% endblock %}