diff --git a/css/style.css b/css/style.css index a08a59c..f15b100 100644 --- a/css/style.css +++ b/css/style.css @@ -25,9 +25,9 @@ body { .toast { padding:0.7rem 1.2rem; border-radius:0.8rem; font-size:0.85rem; animation:slideIn 0.3s ease; color:#fff; } .toast.error { background:var(--danger); } .toast.success { background:var(--success); } -.toast { display:flex; align-items:center; gap:0.6rem; } -.toast-action { background:rgba(255,255,255,0.25); border:none; color:#fff; font-weight:700; font-size:0.75rem; padding:0.25rem 0.6rem; border-radius:1rem; cursor:pointer; white-space:nowrap; transition:0.15s; } -.toast-action:hover { background:rgba(255,255,255,0.4); } +.toast { display:flex; align-items:center; gap:0.6rem; max-width:400px; } +.toast-action { background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.4); color:#fff; font-weight:700; font-size:0.8rem; padding:0.25rem 0.7rem; border-radius:1rem; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:0.15s; } +.toast-action:hover { background:rgba(0,0,0,0.5); } @keyframes slideIn { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } } .vault { diff --git a/js/app.js b/js/app.js index a8f1353..eae1c5c 100644 --- a/js/app.js +++ b/js/app.js @@ -1326,10 +1326,13 @@ if (token && curUser) { if (!id) return; const ids = selectedIds.has(id) && selectedIds.size > 1 ? [...selectedIds] : [id]; for (const sid of ids) await delEntry(sid, true); - toast('📦 Moved ' + ids.length + ' entries to trash'); - playSound('delete'); clearSelection(); await loadEntries(); + toast('📦 Moved ' + ids.length + ' entries to trash', 'success', { + label: '↩ Undo', + cb: async () => { for (const sid of ids) await restoreEntry(sid, true); await loadEntries(); toast('↩ Restored ' + ids.length + ' entries'); playSound('success'); } + }); + playSound('delete'); }); } })();