mirror of
https://github.com/imfing/hextra.git
synced 2025-06-19 07:37:39 -04:00
a44de285b2
* Adapted theme's layout to [Hugo v0.146.0](https://gohugo.io/templates/new-templatesystem-overview/) * Bumped minimal Hugo version to v0.146.0
27 lines
2.0 KiB
HTML
27 lines
2.0 KiB
HTML
{{- $placeholder := (T "searchPlaceholder") | default "Search..." -}}
|
|
|
|
|
|
<div class="search-wrapper hx:relative hx:md:w-64">
|
|
<div class="hx:relative hx:flex hx:items-center hx:text-gray-900 hx:contrast-more:text-gray-800 hx:dark:text-gray-300 hx:contrast-more:dark:text-gray-300">
|
|
<input
|
|
placeholder="{{ $placeholder }}"
|
|
class="search-input hx:block hx:w-full hx:appearance-none hx:rounded-lg hx:px-3 hx:py-2 hx:transition-colors hx:text-base hx:leading-tight hx:md:text-sm hx:bg-black/[.05] hx:dark:bg-gray-50/10 hx:focus:bg-white hx:dark:focus:bg-dark hx:placeholder:text-gray-500 hx:dark:placeholder:text-gray-400 hx:contrast-more:border hx:contrast-more:border-current"
|
|
type="search"
|
|
value=""
|
|
spellcheck="false"
|
|
/>
|
|
<kbd
|
|
class="hx:absolute hx:my-1.5 hx:select-none hx:ltr:right-1.5 hx:rtl:left-1.5 hx:h-5 hx:rounded-sm hx:bg-white hx:px-1.5 hx:font-mono hx:text-[10px] hx:font-medium hx:text-gray-500 hx:border hx:border-gray-200 hx:dark:border-gray-100/20 hx:dark:bg-dark/50 hx:contrast-more:border-current hx:contrast-more:text-current hx:contrast-more:dark:border-current hx:items-center hx:gap-1 hx:transition-opacity hx:pointer-events-none hx:hidden hx:sm:flex"
|
|
>
|
|
CTRL K
|
|
</kbd>
|
|
</div>
|
|
|
|
<div>
|
|
<ul
|
|
class="search-results hextra-scrollbar hx:hidden hx:border hx:border-gray-200 hx:bg-white hx:text-gray-100 hx:dark:border-neutral-800 hx:dark:bg-neutral-900 hx:absolute hx:top-full hx:z-20 hx:mt-2 hx:overflow-auto hx:overscroll-contain hx:rounded-xl hx:py-2.5 hx:shadow-xl hx:max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)] hx:md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)] hx:inset-x-0 hx:ltr:md:left-auto hx:rtl:md:right-auto hx:contrast-more:border hx:contrast-more:border-gray-900 hx:contrast-more:dark:border-gray-50 hx:w-screen hx:min-h-[100px] hx:max-w-[min(calc(100vw-2rem),calc(100%+20rem))]"
|
|
style="transition: max-height 0.2s ease 0s;"
|
|
></ul>
|
|
</div>
|
|
</div>
|