mirror of
https://github.com/MasterAcnolo/Freedom-Loader.git
synced 2026-09-27 20:11:15 +02:00
refactor: toast notification style
This commit is contained in:
MasterAcnolo
@@ -13,6 +13,7 @@
|
||||
<link rel="stylesheet" href="styles/styles.css">
|
||||
<link rel="stylesheet" href="styles/layout/topbar.css">
|
||||
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
@@ -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 = `
|
||||
<span class="toast-icon">${icon}</span>
|
||||
<span class="toast-icon material-icons-round">${icon}</span>
|
||||
<span class="toast-message">${message}</span>
|
||||
<button class="toast-close" title="Close">×</button>
|
||||
<div class="toast-progress"></div>
|
||||
`;
|
||||
|
||||
const closeBtn = toast.querySelector(".toast-close");
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user