mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-10-10 11:32:13 -03:00
Will Miao
3d165f92e0
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.
164 lines
4.7 KiB
CSS
164 lines
4.7 KiB
CSS
@import 'tokens/index.css';
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--border-base) transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: var(--scrollbar-width, 8px);
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
margin-top: 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--border-base);
|
|
border-radius: var(--radius-xs);
|
|
}
|
|
|
|
:root {
|
|
--header-height: 48px;
|
|
--scrollbar-width: 8px;
|
|
|
|
/* Neutral "keycap" style for keyboard shortcut hints (GitHub/Linear-like).
|
|
Derived from --text-muted so it adapts to every theme/preset. */
|
|
--shortcut-bg: color-mix(in oklch, var(--text-muted) 10%, transparent);
|
|
--shortcut-bg-hover: color-mix(in oklch, var(--text-muted) 16%, transparent);
|
|
--shortcut-border: color-mix(in oklch, var(--text-muted) 30%, transparent);
|
|
--shortcut-border-hover: color-mix(in oklch, var(--text-muted) 45%, transparent);
|
|
--shortcut-text: var(--text-muted);
|
|
--shortcut-shadow: 0 1.5px 0 color-mix(in oklch, var(--text-muted) 30%, transparent);
|
|
|
|
--lora-accent-transparent: var(--color-accent-transparent);
|
|
|
|
/* Legacy spacing aliases: 8px base grid to match existing component usage */
|
|
--space-1: 8px;
|
|
--space-2: 16px;
|
|
--space-3: 24px;
|
|
--space-4: 32px;
|
|
|
|
/* Legacy border-radius aliases to match existing component usage */
|
|
--border-radius-xs: 4px;
|
|
--border-radius-sm: 6px;
|
|
--border-radius-base: 8px;
|
|
--border-radius-md: 12px;
|
|
--border-radius-lg: 16px;
|
|
}
|
|
|
|
:root {
|
|
--bg-color: var(--bg-base);
|
|
--text-color: var(--text-primary);
|
|
--text-muted: var(--text-secondary);
|
|
--card-bg: var(--surface-base);
|
|
--border-color: var(--border-base);
|
|
|
|
--lora-accent: var(--color-accent);
|
|
--lora-surface: var(--bg-elevated);
|
|
--lora-surface-solid: var(--bg-elevated-solid);
|
|
--lora-border: var(--border-subtle);
|
|
--lora-text: var(--text-primary);
|
|
--lora-error: var(--color-error);
|
|
--lora-error-bg: var(--color-error-bg);
|
|
--lora-error-border: var(--color-error-border);
|
|
--lora-warning: var(--color-warning);
|
|
--lora-success: var(--color-success);
|
|
|
|
--badge-update-bg: var(--color-info-bg);
|
|
--badge-update-text: var(--color-info-text);
|
|
--badge-update-glow: var(--color-info-glow);
|
|
--badge-skip-refresh-bg: var(--color-skip-refresh-bg);
|
|
--badge-skip-refresh-text: var(--color-skip-refresh-text);
|
|
--badge-skip-refresh-glow: var(--color-skip-refresh-glow);
|
|
--badge-workflow-bg: var(--color-workflow-bg);
|
|
--badge-workflow-text: var(--color-workflow-text);
|
|
--badge-workflow-glow: var(--color-workflow-glow);
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
--bg-color: var(--bg-base);
|
|
--text-color: var(--text-primary);
|
|
--text-muted: var(--text-secondary);
|
|
--card-bg: var(--surface-base);
|
|
--border-color: var(--border-base);
|
|
|
|
--lora-accent: var(--color-accent);
|
|
--lora-surface: var(--bg-elevated);
|
|
--lora-surface-solid: var(--bg-elevated-solid);
|
|
--lora-border: var(--border-subtle);
|
|
--lora-text: var(--text-primary);
|
|
--lora-error: var(--color-error);
|
|
--lora-error-bg: var(--color-error-bg);
|
|
--lora-error-border: var(--color-error-border);
|
|
--lora-warning: var(--color-warning);
|
|
--lora-success: var(--color-success);
|
|
|
|
--badge-update-bg: var(--color-info-bg);
|
|
--badge-update-text: var(--color-info-text);
|
|
--badge-update-glow: var(--color-info-glow);
|
|
--badge-skip-refresh-bg: var(--color-skip-refresh-bg);
|
|
--badge-skip-refresh-text: var(--color-skip-refresh-text);
|
|
--badge-skip-refresh-glow: var(--color-skip-refresh-glow);
|
|
--badge-workflow-bg: var(--color-workflow-bg);
|
|
--badge-workflow-text: var(--color-workflow-text);
|
|
--badge-workflow-glow: var(--color-workflow-glow);
|
|
}
|
|
|
|
html[data-theme="dark"] {
|
|
background-color: var(--bg-base) !important;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
html[data-theme="light"] {
|
|
background-color: var(--bg-base) !important;
|
|
color-scheme: light;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
background: var(--bg-base);
|
|
color: var(--text-primary);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
button:focus:not(:focus-visible),
|
|
input:focus:not(:focus-visible),
|
|
select:focus:not(:focus-visible) {
|
|
outline: none;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|