forked from drowl87/hextra_mirror
16 lines
1.7 KiB
HTML
16 lines
1.7 KiB
HTML
{{- $placeholder := .params.placeholder | default "Search..." -}}
|
|
|
|
|
|
<div id="search-wrapper" class="search-wrapper relative md:w-64 hidden md:inline-block mx-min-w-[200px]">
|
|
<div class="relative flex items-center text-gray-900 contrast-more:text-gray-800 dark:text-gray-300 contrast-more:dark:text-gray-300">
|
|
<input id="search-input" placeholder="{{ $placeholder }}" class="block w-full appearance-none rounded-lg px-3 py-2 transition-colors text-base leading-tight md:text-sm bg-black/[.05] dark:bg-gray-50/10 focus:bg-white dark:focus:bg-dark placeholder:text-gray-500 dark:placeholder:text-gray-400 contrast-more:border contrast-more:border-current" type="search" value="" spellcheck="false" />
|
|
<kbd class="absolute my-1.5 select-none ltr:right-1.5 rtl:left-1.5 h-5 rounded bg-white px-1.5 font-mono text-[10px] font-medium text-gray-500 border dark:border-gray-100/20 dark:bg-dark/50 contrast-more:border-current contrast-more:text-current contrast-more:dark:border-current items-center gap-1 transition-opacity pointer-events-none hidden sm:flex"> <span class="text-xs">⌘</span>K </kbd>
|
|
</div>
|
|
|
|
<div>
|
|
<ul id="search-results" class="hidden border border-gray-200 bg-white text-gray-100 dark:border-neutral-800 dark:bg-neutral-900 absolute top-full z-20 mt-2 overflow-auto overscroll-contain rounded-xl py-2.5 shadow-xl max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)] md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)] inset-x-0 ltr:md:left-auto rtl:md:right-auto contrast-more:border contrast-more:border-gray-900 contrast-more:dark:border-gray-50 w-screen min-h-[100px] max-w-[min(calc(100vw-2rem),calc(100%+20rem))]"
|
|
style="transition: max-height 0.2s ease 0s;"
|
|
></ul>
|
|
</div>
|
|
</div>
|