redtea/lpra
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dialogs open and close smoothly, the backdrop fading with them

Browse Source
This commit is contained in:
redtea committed 2026-10-15 10:38:02 +03:00
1 parent b47e824692
commit dbb46173a3
4 files changed
+14 -10
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

internal/server/web/static/app.css
+12
View File
@@ -145,6 +145,18 @@ dialog { background: var(--panel); color: var(--text); border: 1px solid var(--b
border-radius: 12px; padding: 0; max-width: 900px; width: 92vw; }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog:focus { outline: none; }
/* Dialogs come and go smoothly: rise and fade in, sink and fade out, the
backdrop with them. Browsers without the exit transition just close. */
dialog { opacity: 0; transform: translateY(10px) scale(.97);
transition: opacity .2s ease, transform .2s ease, overlay .2s ease allow-discrete, display .2s ease allow-discrete; }
dialog[open] { opacity: 1; transform: none; }
dialog::backdrop { opacity: 0; transition: opacity .2s ease, overlay .2s ease allow-discrete, display .2s ease allow-discrete; }
dialog[open]::backdrop { opacity: 1; }
@starting-style {
dialog[open] { opacity: 0; transform: translateY(10px) scale(.97); }
dialog[open]::backdrop { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { dialog, dialog::backdrop { transition: none; } }
.dlg-h { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.dlg-b { padding: 16px 18px; }
/* The account button in the top bar, and its dialog. */