oleh/astrolabe-nvc
1
0
Fork 0
mirror of https://github.com/olehomelchenko/astrolabe-nvc.git synced 2025-12-22 21:52:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement toast notification system for user feedback

Browse Source
This commit is contained in:
Oleh Omelchenko
2025-10-16 17:21:51 +03:00
parent c85d0604a9
commit 17d480a2df
5 changed files with 139 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/styles.css
View File

@@ -322,3 +322,21 @@ body { font-family: var(--font-main); height: 100vh; overflow: hidden; backgroun
.help-shortcuts-table td { padding: 12px 8px; font-size: 12px; }
.shortcut-key { font-family: var(--font-mono); font-weight: bold; background: var(--bg-light); border: 1px solid var(--win-gray-dark); padding: 6px 10px; border-radius: 2px; white-space: nowrap; width: 180px; }
.shortcut-desc { color: var(--win-gray-darker); }
/* Toast Notifications */
#toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column-reverse; gap: 10px; max-width: 400px; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--win-gray); border: 2px outset var(--win-gray); box-shadow: 4px 4px 8px rgba(0,0,0,0.3); font-size: 12px; min-width: 300px; opacity: 0; transform: translateX(400px); transition: all 0.3s ease; }
.toast-show { opacity: 1; transform: translateX(0); }
.toast-hide { opacity: 0; transform: translateX(400px); }
.toast-icon { font-size: 16px; flex-shrink: 0; }
.toast-message { flex: 1; line-height: 1.4; color: #000; }
.toast-close { background: none; border: none; font-size: 18px; cursor: pointer; padding: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--win-gray-darker); flex-shrink: 0; }
.toast-close:hover { background: var(--win-gray-dark); color: var(--bg-white); }
.toast-error { background: #ffebee; border-color: #c62828; }
.toast-error .toast-message { color: #b71c1c; }
.toast-success { background: #e8f5e9; border-color: #2e7d32; }
.toast-success .toast-message { color: #1b5e20; }
.toast-warning { background: #fff3cd; border-color: #ffc107; }
.toast-warning .toast-message { color: #856404; }
.toast-info { background: #e3f2fd; border-color: #1976d2; }
.toast-info .toast-message { color: #0d47a1; }