gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-29 04:21:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

Added nice background effect to command palette

Browse Source
This commit is contained in:
Ian Donahue 2023-03-10 18:41:33 +01:00
parent 609c2a896a
commit 3673bd3c28
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/lib/components/CommandPalette.svelte
View File

@ -179,18 +179,23 @@
{#if showCommand}
<div class="relative z-10" role="dialog" aria-modal="true">
<div
class="fixed inset-0 bg-zinc-500 bg-opacity-25 transition-opacity"
class="fixed inset-0 bg-zinc-900 bg-opacity-80 transition-opacity"
in:fade={{ duration: 50 }}
out:fade={{ duration: 50 }}
/>
<div class="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
<div class="command-palette-modal fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
<div
bind:this={palette}
in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }}
class="mx-auto max-w-2xl transform divide-y divide-zinc-500 divide-opacity-20 overflow-hidden rounded-xl bg-zinc-900 shadow-2xl transition-all border border-zinc-700"
style="border-width: 0.5px;"
style="
border-width: 0.5px;
-webkit-backdrop-filter: blur(20px) saturate(190%) contrast(70%) brightness(80%);
backdrop-filter: blur(20px) saturate(190%) contrast(70%) brightness(80%);
background-color: rgba(24, 24, 27, 0.60);
border: 0.5px solid rgba(63, 63, 70, 0.50);"
>
<div class="relative">
<svg