diff --git a/public/index.html b/public/index.html
index 2d1a1bc..aec5bf2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,6 +13,7 @@
+
diff --git a/public/script/toast.js b/public/script/toast.js
index 56afa60..d4b6406 100644
--- a/public/script/toast.js
+++ b/public/script/toast.js
@@ -17,18 +17,20 @@ window.showToast = function (message, type = "info", duration = 4000) {
toast.classList.add("toast", type);
const icons = {
- success: "✓",
- error: "✕",
- warning: "⚠",
- info: "ℹ"
+ success: "check_circle",
+ error: "error",
+ warning: "warning",
+ info: "info"
};
const icon = icons[type] || icons.info;
+ toast.style.setProperty("--toast-duration", `${duration}ms`);
toast.innerHTML = `
- ${icon}
+ ${icon}
${message}
+
`;
const closeBtn = toast.querySelector(".toast-close");
diff --git a/public/styles/components/toast.css b/public/styles/components/toast.css
index 5972c0b..efde624 100644
--- a/public/styles/components/toast.css
+++ b/public/styles/components/toast.css
@@ -5,73 +5,70 @@
right: 20px;
display: flex;
flex-direction: column;
- gap: 8px;
+ gap: 12px;
z-index: 9999;
pointer-events: none;
}
/* Toast */
.toast {
+ position: relative;
display: flex;
align-items: center;
- gap: 10px;
- padding: 10px 14px;
- background-color: rgba(50, 50, 50, 0.9);
- border-radius: 6px;
- color: #ffffff;
- font-size: 0.9rem;
- max-width: 220px;
- min-width: 100px;
- animation: slideIn 0.25s ease-out;
+ gap: 12px;
+ padding: 14px 16px;
+ background-color: rgba(30, 30, 30, 0.9);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ border-radius: 10px;
+ color: #f3f4f6;
+ font-family: inherit;
+ font-size: 0.875rem;
+ max-width: 320px;
+ min-width: 220px;
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
+ animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
pointer-events: auto;
- backdrop-filter: blur(8px);
-}
-
-.toast.success {
- background-color: rgba(40, 167, 69, 0.15);
-}
-
-.toast.error {
- background-color: rgba(220, 53, 69, 0.15);
-}
-
-.toast.warning {
- background-color: rgba(255, 193, 7, 0.15);
-}
-
-.toast.info {
- background-color: rgba(23, 162, 184, 0.15);
+ overflow: hidden;
}
/* Toast Icon */
.toast-icon {
flex-shrink: 0;
- font-size: 18px;
+ font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
}
+.toast-icon svg {
+ width: 100%;
+ height: 100%;
+}
+
.toast.success .toast-icon {
- color: #28a745;
+ color: #22c55e;
}
.toast.error .toast-icon {
- color: #dc3545;
+ color: #ef4444;
}
.toast.warning .toast-icon {
- color: #ffc107;
+ color: #f59e0b;
}
.toast.info .toast-icon {
- color: #17a2b8;
+ color: #0ea5e9;
}
/* Toast Message */
.toast-message {
flex: 1;
- font-weight: 500;
+ font-weight: 400;
+ line-height: 1.4;
+ word-break: break-word;
}
/* Toast Close Button */
@@ -79,58 +76,87 @@
flex-shrink: 0;
background: none;
border: none;
- color: currentColor;
+ color: #9ca3af;
cursor: pointer;
- font-size: 18px;
- padding: 0;
+ font-size: 16px;
+ width: 24px;
+ height: 24px;
+ border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
- opacity: 0.5;
- transition: opacity 0.2s ease;
+ transition: background-color 0.15s ease, color 0.15s ease;
}
.toast-close:hover {
- opacity: 1;
+ background-color: rgba(255, 255, 255, 0.1);
+ color: #ffffff;
+}
+
+.toast-progress {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ height: 3px;
+ width: 100%;
+ background-color: rgba(255, 255, 255, 0.1);
+ animation: progress var(--toast-duration, 4000ms) linear forwards;
+}
+
+.toast.success .toast-progress {
+ background-color: #22c55e;
+}
+
+.toast.error .toast-progress {
+ background-color: #ef4444;
}
/* Animations */
@keyframes slideIn {
from {
- transform: translateX(350px);
+ transform: translateY(-20px);
opacity: 0;
}
to {
- transform: translateX(0);
+ transform: translateY(0);
opacity: 1;
}
}
@keyframes slideOut {
from {
- transform: translateX(0);
+ transform: translateY(0);
opacity: 1;
}
to {
- transform: translateX(350px);
+ transform: translateY(-20px);
opacity: 0;
}
}
-.toast.removing {
- animation: slideOut 0.25s ease-out;
+@keyframes progress {
+ from {
+ width: 100%;
+ }
+ to {
+ width: 0%;
+ }
+}
+
+.toast.removing {
+ animation: slideOut 0.25s ease-in forwards;
}
-/* Responsive */
@media (max-width: 480px) {
#toast-container {
- bottom: 12px;
- right: 12px;
- left: 12px;
+ top: auto;
+ bottom: 16px;
+ right: 16px;
+ left: 16px;
}
.toast {
max-width: none;
min-width: auto;
}
-}
+}
\ No newline at end of file