admin/cobalt
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

web/dialogs: moved backdrop to dialog holder, improved animation

Browse Source
This commit is contained in:
wukko
2024-07-21 13:41:14 +06:00
parent 8a080c55f6
commit 80300bf766
3 changed files with 36 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
web/src/components/dialog/SmallDialog.svelte
View File

@@ -84,7 +84,7 @@
</div>
</div>
<div id="dialog-backdrop" aria-hidden="true" on:click={() => close()}></div>
<div id="dialog-backdrop-close" aria-hidden="true" on:click={() => close()}></div>
</dialog>
<style>
@@ -230,29 +230,11 @@
}
}
#dialog-backdrop {
--backdrop-opacity: 0.4;
background-color: var(--popup-backdrop);
#dialog-backdrop-close {
position: inherit;
height: 100%;
width: 100%;
z-index: -1;
opacity: 0;
animation: backdrop-in 0.15s;
}
:global([data-reduce-transparency="true"]) #dialog-backdrop {
--backdrop-opacity: 0.5;
}
.open #dialog-backdrop {
opacity: var(--backdrop-opacity);
animation: backdrop-in 0.15s;
}
.closing #dialog-backdrop {
opacity: 0;
animation: backdrop-out 0.15s;
}
@keyframes modal-in {
@@ -282,24 +264,6 @@
}
}
@keyframes backdrop-in {
from {
opacity: 0;
}
to {
opacity: var(--backdrop-opacity);
}
}
@keyframes backdrop-out {
from {
opacity: var(--backdrop-opacity);
}
to {
opacity: 0;
}
}
@media screen and (max-width: 535px) {
dialog {
justify-content: end;