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

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

No files matched your search

-1
View File
@@ -84,7 +84,6 @@
}
dialog { background:var(--panel); color:var(--text); border:1px solid var(--border);
border-radius:12px; padding:0; max-width:900px; width:92vw; }
dialog::backdrop { background:rgba(0,0,0,.6); }
/* A dialog takes the focus itself when it opens, rather than its first
button, which would light up as if tabbed to. */
dialog:focus { outline:none; }
@@ -15,13 +15,6 @@
.badge-ssh { flex:none; font-size:10px; font-weight:600; letter-spacing:.04em; padding:1px 5px; border-radius:4px;
background:#12202f; color:var(--accent); border:1px solid #1f3a57; }
dialog.sshdlg { max-width:460px; }
dialog.sshdlg[open] { animation:dlg-in .2s ease; }
dialog.sshdlg[open]::backdrop { animation:dlg-fade .2s ease; }
dialog.sshdlg.closing { animation:dlg-out .16s ease forwards; }
dialog.sshdlg.closing::backdrop { animation:dlg-fade .16s ease reverse forwards; }
@keyframes dlg-in { from { opacity:0; transform:translateY(10px) scale(.97); } }
@keyframes dlg-out { to { opacity:0; transform:translateY(6px) scale(.98); } }
@keyframes dlg-fade { from { opacity:0; } }
.sshdlg .dlg-h .ico { color:var(--accent); display:inline-flex; }
.sshdlg .dlg-b { display:grid; gap:12px; }
.sshdlg .f { display:grid; gap:5px; margin:0; }