refactor: enhance onboarding modal backdrop and pointer event handling for improved user interaction
This commit is contained in:
@@ -26,19 +26,16 @@
|
||||
x-init="init()"
|
||||
x-cloak>
|
||||
<div x-show="open"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
style="position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; pointer-events: auto;">
|
||||
style="position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; pointer-events: none;"
|
||||
x-cloak>
|
||||
|
||||
<div class="absolute inset-0"
|
||||
:style="showBackdrop ? 'background-color: rgba(0,0,0,0.55);' : 'background-color: rgba(0,0,0,0.15);'"
|
||||
<div class="absolute inset-0 transition-opacity duration-300 ease-out pointer-events-auto"
|
||||
:style="open
|
||||
? (showBackdrop ? 'background-color: rgba(0,0,0,0.65); opacity: 1;' : 'background-color: rgba(0,0,0,0.35); opacity: 1;')
|
||||
: 'opacity: 0;'"
|
||||
@click="finish()"></div>
|
||||
|
||||
<div class="bg-background-secondary border border-neutral rounded-2xl shadow-2xl"
|
||||
<div class="bg-background-secondary border border-neutral rounded-2xl shadow-2xl pointer-events-auto"
|
||||
style="position: relative; width: min(32rem, calc(100% - 2rem)); pointer-events: auto; z-index: 10;"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 scale-90"
|
||||
|
||||
Reference in New Issue
Block a user