Linus-Enjoyer/Freedom-Loader
1
1
Fork 0
mirror of https://github.com/MasterAcnolo/Freedom-Loader.git synced 2026-09-28 04:21:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: toast notification style

Browse Source
This commit is contained in:
MasterAcnolo
2026-09-13 15:53:21 +02:00
parent 58b6637eeb
commit 2c0f5b315b
3 changed files with 84 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@@ -13,6 +13,7 @@
<link rel="stylesheet" href="styles/styles.css"> <link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/layout/topbar.css"> <link rel="stylesheet" href="styles/layout/topbar.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
</head> </head>
<body> <body>

12
public/script/toast.js
View File

@@ -17,18 +17,20 @@ window.showToast = function (message, type = "info", duration = 4000) {
toast.classList.add("toast", type); toast.classList.add("toast", type);
const icons = { const icons = {
success: "✓", success: "check_circle",
error: "✕", error: "error",
warning: "⚠", warning: "warning",
info: "ℹ" info: "info"
}; };
const icon = icons[type] || icons.info; const icon = icons[type] || icons.info;
toast.style.setProperty("--toast-duration", `${duration}ms`);
toast.innerHTML = ` toast.innerHTML = `
<span class="toast-icon">${icon}</span> <span class="toast-icon material-icons-round">${icon}</span>
<span class="toast-message">${message}</span> <span class="toast-message">${message}</span>
<button class="toast-close" title="Close">×</button> <button class="toast-close" title="Close">×</button>
<div class="toast-progress"></div>
`; `;
const closeBtn = toast.querySelector(".toast-close"); const closeBtn = toast.querySelector(".toast-close");

126
public/styles/components/toast.css
View File

@@ -5,73 +5,70 @@
right: 20px; right: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 12px;
z-index: 9999; z-index: 9999;
pointer-events: none; pointer-events: none;
} }
/* Toast */ /* Toast */
.toast { .toast {
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 12px;
padding: 10px 14px; padding: 14px 16px;
background-color: rgba(50, 50, 50, 0.9); background-color: rgba(30, 30, 30, 0.9);
border-radius: 6px; backdrop-filter: blur(12px);
color: #ffffff; -webkit-backdrop-filter: blur(12px);
font-size: 0.9rem; border: 1px solid rgba(255, 255, 255, 0.08);
max-width: 220px; border-radius: 10px;
min-width: 100px; color: #f3f4f6;
animation: slideIn 0.25s ease-out; 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; pointer-events: auto;
backdrop-filter: blur(8px); overflow: hidden;
}
.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);
} }
/* Toast Icon */ /* Toast Icon */
.toast-icon { .toast-icon {
flex-shrink: 0; flex-shrink: 0;
font-size: 18px; font-size: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.toast-icon svg {
width: 100%;
height: 100%;
}
.toast.success .toast-icon { .toast.success .toast-icon {
color: #28a745; color: #22c55e;
} }
.toast.error .toast-icon { .toast.error .toast-icon {
color: #dc3545; color: #ef4444;
} }
.toast.warning .toast-icon { .toast.warning .toast-icon {
color: #ffc107; color: #f59e0b;
} }
.toast.info .toast-icon { .toast.info .toast-icon {
color: #17a2b8; color: #0ea5e9;
} }
/* Toast Message */ /* Toast Message */
.toast-message { .toast-message {
flex: 1; flex: 1;
font-weight: 500; font-weight: 400;
line-height: 1.4;
word-break: break-word;
} }
/* Toast Close Button */ /* Toast Close Button */
@@ -79,58 +76,87 @@
flex-shrink: 0; flex-shrink: 0;
background: none; background: none;
border: none; border: none;
color: currentColor; color: #9ca3af;
cursor: pointer; cursor: pointer;
font-size: 18px; font-size: 16px;
padding: 0; width: 24px;
height: 24px;
border-radius: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
opacity: 0.5; transition: background-color 0.15s ease, color 0.15s ease;
transition: opacity 0.2s ease;
} }
.toast-close:hover { .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 */ /* Animations */
@keyframes slideIn { @keyframes slideIn {
from { from {
transform: translateX(350px); transform: translateY(-20px);
opacity: 0; opacity: 0;
} }
to { to {
transform: translateX(0); transform: translateY(0);
opacity: 1; opacity: 1;
} }
} }
@keyframes slideOut { @keyframes slideOut {
from { from {
transform: translateX(0); transform: translateY(0);
opacity: 1; opacity: 1;
} }
to { to {
transform: translateX(350px); transform: translateY(-20px);
opacity: 0; opacity: 0;
} }
} }
.toast.removing { @keyframes progress {
animation: slideOut 0.25s ease-out; from {
width: 100%;
}
to {
width: 0%;
}
}
.toast.removing {
animation: slideOut 0.25s ease-in forwards;
} }
/* Responsive */
@media (max-width: 480px) { @media (max-width: 480px) {
#toast-container { #toast-container {
bottom: 12px; top: auto;
right: 12px; bottom: 16px;
left: 12px; right: 16px;
left: 16px;
} }
.toast { .toast {
max-width: none; max-width: none;
min-width: auto; min-width: auto;
} }
} }