mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-06-09 12:39:23 -03:00
18577fa336
- Replace all remaining 'transition: all' with specific token-based transitions - Replace 80+ hardcoded box-shadow rgba values with semantic tokens - Add new tokens: --shadow-side, --shadow-elevated, --shadow-dialog, --shadow-inset-top - Update dark theme overrides for new shadow tokens - 32 files changed, net +8 lines (more consistent, less duplication)
58 lines
1.9 KiB
CSS
58 lines
1.9 KiB
CSS
:root {
|
|
--radius-none: 0px;
|
|
--radius-xs: 4px;
|
|
--radius-sm: 6px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-xl: 16px;
|
|
--radius-full: 9999px;
|
|
|
|
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
--shadow-lg: 0 3px 5px rgba(0, 0, 0, 0.08);
|
|
--shadow-xl: 0 4px 16px rgba(0, 0, 0, 0.15);
|
|
--shadow-2xl: 0 8px 32px rgba(0, 0, 0, 0.12);
|
|
--shadow-focus: 0 0 0 1px var(--color-accent);
|
|
--shadow-glow: 0 2px 6px var(--color-info-glow);
|
|
|
|
--shadow-card: var(--shadow-sm);
|
|
--shadow-dropdown: var(--shadow-md);
|
|
--shadow-modal: var(--shadow-lg);
|
|
--shadow-toast: var(--shadow-xl);
|
|
--shadow-header: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
--shadow-dark-lg: 0 4px 24px rgba(0, 0, 0, 0.4);
|
|
--shadow-side: 2px 0 8px rgba(0, 0, 0, 0.1);
|
|
--shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
--shadow-dialog: 0 10px 24px rgba(0, 0, 0, 0.25);
|
|
--shadow-inset-top: 0 -2px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
--transition-fast: 150ms ease;
|
|
--transition-base: 200ms ease;
|
|
--transition-slow: 300ms ease;
|
|
--transition-bounce: 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
|
|
--border-width-thin: 1px;
|
|
--border-width-thick: 2px;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
|
|
--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35);
|
|
--shadow-lg: 0 3px 5px rgba(0, 0, 0, 0.3);
|
|
--shadow-xl: 0 4px 16px rgba(0, 0, 0, 0.45);
|
|
--shadow-2xl: 0 8px 32px rgba(0, 0, 0, 0.35);
|
|
|
|
--shadow-card: var(--shadow-sm);
|
|
--shadow-dropdown: var(--shadow-md);
|
|
--shadow-modal: var(--shadow-lg);
|
|
--shadow-toast: var(--shadow-xl);
|
|
--shadow-header: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
--shadow-dark-lg: 0 4px 24px rgba(0, 0, 0, 0.6);
|
|
--shadow-side: 2px 0 8px rgba(0, 0, 0, 0.3);
|
|
--shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.35);
|
|
--shadow-dialog: 0 10px 24px rgba(0, 0, 0, 0.45);
|
|
--shadow-inset-top: 0 -2px 8px rgba(0, 0, 0, 0.3);
|
|
}
|