mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-06-09 12:39:23 -03:00
f51f125cf1
- Add semantic OKLch color tokens with light/dark themes - Add typography, spacing, effects, breakpoints, z-index tokens - Refactor base.css with backward-compatible aliases - Add prefers-reduced-motion support - Add MIGRATION.md for Phase 2 component audit
136 lines
3.5 KiB
CSS
136 lines
3.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;
|
|
|
|
--shortcut-bg: var(--color-accent-subtle);
|
|
--shortcut-border: var(--color-accent-border);
|
|
--shortcut-text: var(--text-primary);
|
|
|
|
--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-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);
|
|
}
|
|
|
|
[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-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);
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|