mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-10-11 03:52:13 -03:00
Will Miao
c0165919b3
Solid-accent buttons used the page text color (--lora-text) or white, which falls below WCAG AA on the mid-bright accent (L 52-72%) in every theme/preset — e.g. ~1.7:1 in dark+solarized, making primary buttons hard to read. Add --color-accent-contrast (dark, low-chroma, same hue, derived per preset) aliased as --text-on-accent, and switch ~90 accent-background selectors (primary/confirm buttons, nav items, chips, badges, checkmarks) to it. Also define the previously dangling --lora-accent-l/c/h, --lora-accent-hover and --lora-accent-light aliases (fixing ~40 dead declarations), replace the hardcoded rgba(--lora-accent-rgb, 79 70 229) fallbacks with oklch channel syntax, and add the missing margin above .template-custom-input in settings.
180 lines
5.5 KiB
CSS
180 lines
5.5 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);
|
|
/* Channel aliases: referenced across components (oklch tints, focus
|
|
rings); previously undeclared, so those declarations silently dropped. */
|
|
--lora-accent-l: var(--color-accent-l);
|
|
--lora-accent-c: var(--color-accent-c);
|
|
--lora-accent-h: var(--color-accent-h);
|
|
--lora-accent-hover: var(--color-accent-hover);
|
|
--lora-accent-light: var(--color-accent-subtle);
|
|
--text-on-accent: var(--color-accent-contrast);
|
|
--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);
|
|
/* Channel aliases: referenced across components (oklch tints, focus
|
|
rings); previously undeclared, so those declarations silently dropped. */
|
|
--lora-accent-l: var(--color-accent-l);
|
|
--lora-accent-c: var(--color-accent-c);
|
|
--lora-accent-h: var(--color-accent-h);
|
|
--lora-accent-hover: var(--color-accent-hover);
|
|
--lora-accent-light: var(--color-accent-subtle);
|
|
--text-on-accent: var(--color-accent-contrast);
|
|
--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;
|
|
}
|
|
}
|