| |
| .toast-container { |
| position: fixed; |
| top: 24px; |
| left: 50%; |
| transform: translateX(-50%); |
| z-index: 100; |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| pointer-events: none; |
| align-items: center; |
| } |
|
|
| .toast { |
| background: #fff; |
| border: 0.5px solid var(--border); |
| border-radius: 6px; |
| padding: 12px 16px; |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| min-width: 300px; |
| max-width: 400px; |
| animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; |
| pointer-events: auto; |
| } |
|
|
| .toast.out { |
| animation: toastOut 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; |
| } |
|
|
| .toast-icon { |
| flex-shrink: 0; |
| width: 20px; |
| height: 20px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: 50%; |
| } |
|
|
| .toast-success .toast-icon { |
| background: #ecfdf5; |
| color: #059669; |
| } |
|
|
| .toast-error .toast-icon { |
| background: #fef2f2; |
| color: #dc2626; |
| } |
|
|
| .toast-content { |
| flex: 1; |
| font-size: 12px; |
| font-weight: 500; |
| } |
|
|
| @keyframes toastIn { |
| from { |
| opacity: 0; |
| transform: translateY(20px) scale(0.95); |
| } |
|
|
| to { |
| opacity: 1; |
| transform: translateY(0) scale(1); |
| } |
| } |
|
|
| @keyframes toastOut { |
| from { |
| opacity: 1; |
| transform: translateY(0) scale(1); |
| } |
|
|
| to { |
| opacity: 0; |
| transform: translateY(10px) scale(0.95); |
| } |
| } |
|
|
