alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-10-10 19:42:13 -03:00
Code Issues Packages Projects Releases Wiki Activity

fix(theme): use opaque surface tokens for modals and sticky layers

Browse Source 
The elevated surface tokens (--bg-elevated / --surface-elevated) are
translucent, so sticky modal footers and table headers double-composited
over the modal surface and showed a visible lighter seam in light themes.

Add derived opaque tokens (--bg-elevated-solid / --surface-elevated-solid,
aliased as --lora-surface-solid) and use them for .modal-content, the
download/import modal sticky action footers, and the refresh result
table's sticky header, so the modal surface and its sticky layers always
share one opaque color across every theme and preset.
This commit is contained in:
Will Miao
2026-10-10 19:58:54 +08:00
parent a8941f453f
commit 3d165f92e0
6 changed files with 30 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/components/modal/_base.css
+5 -2
View File
@@ -37,7 +37,10 @@ body.modal-open {
height: auto;
max-height: calc(100vh - var(--header-height, 48px) - 5.5rem); /* Subtract header height and modal margins */
margin: 1rem auto; /* Keep reduced top margin */
background: var(--lora-surface);
/* Opaque surface: the modal stacks above the backdrop, and sticky layers
inside (action footers, table headers) share this same solid token so
they cannot double-composite into a visible seam (light themes). */
background: var(--lora-surface-solid);
border-radius: var(--border-radius-base);
padding: var(--space-3);
border: 1px solid var(--lora-border);
@@ -174,7 +177,7 @@ body.modal-open {
/* Dark theme unified styles */
[data-theme="dark"] .modal-content {
background: var(--lora-surface);
background: var(--lora-surface-solid);
border: 1px solid var(--lora-border);
}
static/css/components/modal/download-modal.css
+4 -1
View File
@@ -789,7 +789,10 @@
position: sticky;
bottom: 0;
z-index: 1;
background: var(--lora-surface);
/* Solid surface: must fully mask the step content scrolling underneath;
the translucent --lora-surface would double-composite over the modal
surface and show a seam in light themes. */
background: var(--lora-surface-solid);
border-top: 1px solid var(--lora-border);
padding-top: var(--space-2);
padding-bottom: var(--space-1);