mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-10-10 11:32:13 -03:00
fix(theme): use opaque surface tokens for modals and sticky layers
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:
@@ -65,6 +65,7 @@ body {
|
|||||||
|
|
||||||
--lora-accent: var(--color-accent);
|
--lora-accent: var(--color-accent);
|
||||||
--lora-surface: var(--bg-elevated);
|
--lora-surface: var(--bg-elevated);
|
||||||
|
--lora-surface-solid: var(--bg-elevated-solid);
|
||||||
--lora-border: var(--border-subtle);
|
--lora-border: var(--border-subtle);
|
||||||
--lora-text: var(--text-primary);
|
--lora-text: var(--text-primary);
|
||||||
--lora-error: var(--color-error);
|
--lora-error: var(--color-error);
|
||||||
@@ -93,6 +94,7 @@ body {
|
|||||||
|
|
||||||
--lora-accent: var(--color-accent);
|
--lora-accent: var(--color-accent);
|
||||||
--lora-surface: var(--bg-elevated);
|
--lora-surface: var(--bg-elevated);
|
||||||
|
--lora-surface-solid: var(--bg-elevated-solid);
|
||||||
--lora-border: var(--border-subtle);
|
--lora-border: var(--border-subtle);
|
||||||
--lora-text: var(--text-primary);
|
--lora-text: var(--text-primary);
|
||||||
--lora-error: var(--color-error);
|
--lora-error: var(--color-error);
|
||||||
|
|||||||
@@ -24,7 +24,10 @@
|
|||||||
position: sticky;
|
position: sticky;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
z-index: 1;
|
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);
|
border-top: 1px solid var(--lora-border);
|
||||||
padding-top: var(--space-2);
|
padding-top: var(--space-2);
|
||||||
padding-bottom: var(--space-1);
|
padding-bottom: var(--space-1);
|
||||||
|
|||||||
@@ -100,7 +100,9 @@
|
|||||||
.failure-table th {
|
.failure-table th {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
background: var(--lora-surface);
|
/* Solid surface: the sticky header must fully mask the rows scrolling
|
||||||
|
underneath; translucent --lora-surface would let them bleed through. */
|
||||||
|
background: var(--lora-surface-solid);
|
||||||
border-bottom: 1px solid var(--lora-border);
|
border-bottom: 1px solid var(--lora-border);
|
||||||
padding: var(--space-1) var(--space-2);
|
padding: var(--space-1) var(--space-2);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
@@ -163,7 +165,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="dark"] .failure-table th {
|
[data-theme="dark"] .failure-table th {
|
||||||
background: var(--lora-surface);
|
background: var(--lora-surface-solid);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="dark"] .failure-table td {
|
[data-theme="dark"] .failure-table td {
|
||||||
|
|||||||
@@ -37,7 +37,10 @@ body.modal-open {
|
|||||||
height: auto;
|
height: auto;
|
||||||
max-height: calc(100vh - var(--header-height, 48px) - 5.5rem); /* Subtract header height and modal margins */
|
max-height: calc(100vh - var(--header-height, 48px) - 5.5rem); /* Subtract header height and modal margins */
|
||||||
margin: 1rem auto; /* Keep reduced top margin */
|
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);
|
border-radius: var(--border-radius-base);
|
||||||
padding: var(--space-3);
|
padding: var(--space-3);
|
||||||
border: 1px solid var(--lora-border);
|
border: 1px solid var(--lora-border);
|
||||||
@@ -174,7 +177,7 @@ body.modal-open {
|
|||||||
|
|
||||||
/* Dark theme unified styles */
|
/* Dark theme unified styles */
|
||||||
[data-theme="dark"] .modal-content {
|
[data-theme="dark"] .modal-content {
|
||||||
background: var(--lora-surface);
|
background: var(--lora-surface-solid);
|
||||||
border: 1px solid var(--lora-border);
|
border: 1px solid var(--lora-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -789,7 +789,10 @@
|
|||||||
position: sticky;
|
position: sticky;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
z-index: 1;
|
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);
|
border-top: 1px solid var(--lora-border);
|
||||||
padding-top: var(--space-2);
|
padding-top: var(--space-2);
|
||||||
padding-bottom: var(--space-1);
|
padding-bottom: var(--space-1);
|
||||||
|
|||||||
@@ -82,6 +82,17 @@
|
|||||||
--favorite-glow: oklch(65% 0.15 85 / 0.5);
|
--favorite-glow: oklch(65% 0.15 85 / 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Opaque variants of the elevated surfaces. The elevated tokens are
|
||||||
|
translucent; a layer stacked on top of an elevated surface (sticky modal
|
||||||
|
footers, sticky table headers) must use the solid variant, otherwise the
|
||||||
|
translucent layer double-composites over the surface and shows as a
|
||||||
|
visible seam in light themes. Derived here so every theme/preset override
|
||||||
|
of the source tokens is picked up automatically. */
|
||||||
|
:root {
|
||||||
|
--bg-elevated-solid: oklch(from var(--bg-elevated) l c h / 1);
|
||||||
|
--surface-elevated-solid: oklch(from var(--surface-elevated) l c h / 1);
|
||||||
|
}
|
||||||
|
|
||||||
:root[data-theme="dark"] {
|
:root[data-theme="dark"] {
|
||||||
--bg-base: #1a1a1a;
|
--bg-base: #1a1a1a;
|
||||||
--bg-elevated: oklch(25% 0.02 256 / 0.98);
|
--bg-elevated: oklch(25% 0.02 256 / 0.98);
|
||||||
|
|||||||
Reference in New Issue
Block a user