sitoctt/layouts/partials/search-applet.html

39 lines
1.6 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div
id="search-wrapper"
class="fixed flex top-0 w-100 vh-100 inset-0 flex-col pa4 bg-neutral-500/50 p-4 dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh]"
data-url="{{ "" | absLangURL }}"
style="word-break:break-word; visibility:hidden; z-index:500; background-color:rgb(253, 244, 255, 0.9); backdrop-filter:blur(8px);"
>
<div
id="search-modal"
class="flex flex-column w-100 max-w-3xl min-h-0 mx-auto border rounded-md shadow-lg top-20 border-neutral-200 bg-neutral dark:border-neutral-700 dark:bg-neutral-800"
>
<header class="relative z-10 flex items-center justify-between flex-none px-2">
<form class="flex items-center flex-auto min-w-0">
<div class="flex items-center justify-center w-8 h-8 text-neutral-400">
{{/* partial "icon.html" "search" */}}
</div>
<input
type="search"
id="search-query"
class="flex flex-auto h2 mx-1 bg-transparent appearance-none focus:outline-dotted focus:outline-2 focus:outline-transparent"
placeholder="{{ i18n "search" }}... 🔎"
tabindex="0"
/>
</form>
<button
id="close-search-button"
class="flex items-center justify-center w2 h2 text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"
title="{{ i18n "search.close_button_title" }}"
> ❌️
{{/* partial "icon.html" "xmark" */}}
</button>
</header>
<section class="flex-auto px-2 overflow-auto" tabindex="-1">
<ul id="search-results" class="pa0 ph2">
</ul>
</section>
</div>
</div>
<script src="/site-search.js"></script>