alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-08-20 12:31:27 -03:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): position toasts below header to avoid overlapping page controls

Browse Source
This commit is contained in:
Will Miao
2026-08-20 22:08:27 +08:00
parent 74254756ef
commit 86aa1d8059
2 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/components/header.css
+1 -1
View File
@@ -4,7 +4,7 @@
position: fixed; position: fixed;
top: 0; top: 0;
z-index: var(--z-header); z-index: var(--z-header);
height: 48px; height: var(--header-height, 48px);
/* Reduced height */ /* Reduced height */
width: 100%; width: 100%;
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
static/css/components/toast.css
+11 -11
View File
@@ -5,11 +5,11 @@
border: none; border: none;
padding: 8px 16px; padding: 8px 16px;
font-size: 0.9em; font-size: 0.9em;
transform: translateX(-50%) translateY(20px); transform: translateY(20px);
} }
.toast.toast-copy.show { .toast.toast-copy.show {
transform: translateX(-50%) translateY(0); transform: translateY(0);
} }
/* Toast Notifications */ /* Toast Notifications */
@@ -19,14 +19,15 @@
right: 20px; right: 20px;
left: auto; left: auto;
transform: translateX(120%); transform: translateX(120%);
min-width: 300px; box-sizing: border-box;
min-width: 200px;
max-width: 400px; max-width: 400px;
background: var(--lora-surface); background: var(--lora-surface);
color: var(--text-color); color: var(--text-color);
padding: 12px 16px; padding: 12px 16px;
border-radius: var(--border-radius-sm); border-radius: var(--border-radius-sm);
box-shadow: var(--shadow-toast); box-shadow: var(--shadow-toast);
z-index: calc(var(--z-overlay) + 10); z-index: var(--z-toast);
opacity: 0; opacity: 0;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -130,7 +131,6 @@
.toast { .toast {
width: calc(100% - 40px); width: calc(100% - 40px);
max-width: none; max-width: none;
right: 20px;
} }
} }
@@ -166,16 +166,17 @@
opacity: 1; opacity: 1;
} }
/* Toast Container for stacked notifications */ /* Toast Container for stacked notifications (top-right, flush below the header) */
.toast-container { .toast-container {
position: fixed; position: fixed;
top: 0; top: var(--header-height, 48px); /* Start right below the fixed header */
right: 0; right: 0;
z-index: calc(var(--z-overlay) + 10); z-index: var(--z-toast);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end;
gap: 10px; gap: 10px;
padding: 20px; padding: 8px 20px 0; /* Small breathing room below the header */
pointer-events: none; /* Allow clicking through the container */ pointer-events: none; /* Allow clicking through the container */
width: 400px; width: 400px;
max-width: 100%; max-width: 100%;
@@ -215,8 +216,7 @@
/* Responsive adjustments */ /* Responsive adjustments */
@media (max-width: 480px) { @media (max-width: 480px) {
.toast-container { .toast-container {
width: 100%; padding: 0 10px;
padding: 10px;
} }
.toast { .toast {