Spaces:
Sleeping
Sleeping
.toast-container { | |
position: fixed; | |
bottom: 20px; | |
right: 20px; | |
z-index: 9999; | |
display: flex; | |
flex-direction: column; | |
gap: 10px; | |
} | |
.toast { | |
background: rgba(99, 102, 241, 0.95); | |
backdrop-filter: blur(8px); | |
color: white; | |
padding: 1rem 1.5rem; | |
border-radius: 8px; | |
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); | |
display: flex; | |
align-items: center; | |
gap: 0.75rem; | |
font-size: 0.9rem; | |
transform: translateX(120%); | |
opacity: 0; | |
animation: slideIn 0.3s ease forwards, fadeOut 0.3s ease 2.7s forwards; | |
border: 1px solid rgba(255, 255, 255, 0.1); | |
width: auto; | |
max-width: 400px; | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
.toast.success { | |
background: rgba(34, 197, 94, 0.95); | |
} | |
.toast.error { | |
background: rgba(239, 68, 68, 0.95); | |
} | |
.toast svg { | |
font-size: 1.2rem; | |
} | |
@keyframes slideIn { | |
to { | |
transform: translateX(0); | |
opacity: 1; | |
} | |
} | |
@keyframes fadeOut { | |
to { | |
opacity: 0; | |
transform: translateX(120%); | |
} | |
} | |
/* Light theme adjustments */ | |
.light .toast { | |
background: rgba(99, 102, 241, 0.9); | |
color: white; | |
} |