File size: 1,320 Bytes
8cdca00 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | /* Toast Notification */
.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);
}
}
|