style: change the search shortcut style

assets/main/scss/_top-app-bar.scss

@@ -74,10 +74,10 @@ $header-caret-width: 0.35em;
     .search-input {
       padding-left: 2rem;
     }
-  }
 
-  .search-button {
-    color: var(--#{$prefix}on-primary-secondary);
+    .search-shortcut {
+      margin-top: 0.35rem;
+    }
   }
 
   .dropdown-item-icon {

layouts/partials/functions/search-input-placeholder.html

@@ -1,9 +1,5 @@
 {{- $placeholder := "search_input_placeholder" | i18n }}
-{{- $shortcut := slice "/" }}
-{{- if isset site.Params.search "shortcut" }}
-  {{- $shortcut = cond (gt (len site.Params.search.shortcut) 0) site.Params.search.shortcut slice }}
-{{- end }}
-{{- with $shortcut }}
+{{- with partialCached "functions/search-shortcut" . }}
   {{- $placeholder = i18n "search_shortcut" (dict "Shortcut" (delimit . "+")) }}
 {{- end }}
 {{- return $placeholder -}}

layouts/partials/functions/search-shortcut.html

@@ -0,0 +1,5 @@
+{{- $shortcut := slice "/" }}
+{{- if isset site.Params.search "shortcut" }}
+  {{- $shortcut = cond (gt (len site.Params.search.shortcut) 0) site.Params.search.shortcut slice }}
+{{- end }}
+{{- return $shortcut -}}

layouts/partials/header/search-bar.html

@@ -1,20 +1,27 @@
 {{- if .Site.Params.searchBar }}
   {{- $page := .Site.GetPage "/search" }}
   {{- if ne $page.RelPermalink .RelPermalink -}}
-    {{- $placeholder := partialCached "functions/search-input-placeholder" . . }}
+    {{- $shortcut := partialCached "functions/search-shortcut" . }}
     <hr class="d-xxl-none">
     <form class="search-bar ms-auto my-1" action="{{ with $page }}{{ .RelPermalink }}{{ end }}" novalidate>
       <div class="input-group input-group-sm align-items-center">
         <span class="btn btn-search disabled position-absolute left-0 border-0 px-1">
           <i class="fas fa-fw fa-search fa-lg"></i>
         </span>
         <input
-          class="my-1 form-control border-white rounded search-input bg-body"
+          class="my-1 form-control border-white rounded-5 search-input bg-body"
           name="q"
           type="search"
-          placeholder="{{ $placeholder }}"
+          placeholder="{{ i18n `search` }}"
           aria-label="Search"
           required>
+          {{- with $shortcut }}
+          <span class="search-shortcut position-absolute end-0 top-0 me-2">
+            {{- range . }}
+            <kbd class="bg-primary rounded shadow">{{ . }}</kbd>
+            {{- end }}
+          </span>
+          {{- end }}
       </div>
     </form>
   {{- end }}