mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-22 05:32:12 -03:00
035ad4b473
Update the --lora-border CSS custom property to use a darker, more opaque color. The previous border color was too subtle and lacked sufficient contrast against the background. This change improves visual hierarchy and makes interface elements more distinguishable.
119 lines
3.1 KiB
CSS
119 lines
3.1 KiB
CSS
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
overflow: hidden; /* Disable default scrolling */
|
|
}
|
|
|
|
/* 针对Firefox */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--border-color) transparent;
|
|
}
|
|
|
|
/* 针对Webkit browsers (Chrome, Safari等) */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
margin-top: 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--border-color);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
:root {
|
|
--bg-color: #ffffff;
|
|
--text-color: #333333;
|
|
--text-muted: #6c757d;
|
|
--card-bg: #ffffff;
|
|
--border-color: #e0e0e0;
|
|
--header-height: 48px;
|
|
|
|
/* Color Components */
|
|
--lora-accent-l: 68%;
|
|
--lora-accent-c: 0.28;
|
|
--lora-accent-h: 256;
|
|
--lora-warning-l: 75%;
|
|
--lora-warning-c: 0.25;
|
|
--lora-warning-h: 80;
|
|
--lora-success-l: 70%;
|
|
--lora-success-c: 0.2;
|
|
--lora-success-h: 140;
|
|
|
|
/* Composed Colors */
|
|
--lora-accent: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h));
|
|
--lora-surface: oklch(97% 0 0 / 0.95);
|
|
--lora-border: oklch(72% 0.03 256 / 0.45);
|
|
--lora-text: oklch(95% 0.02 256);
|
|
--lora-error: oklch(75% 0.32 29);
|
|
--lora-warning: oklch(var(--lora-warning-l) var(--lora-warning-c) var(--lora-warning-h));
|
|
--lora-success: oklch(var(--lora-success-l) var(--lora-success-c) var(--lora-success-h));
|
|
--badge-update-bg: oklch(72% 0.2 220);
|
|
--badge-update-text: oklch(28% 0.03 220);
|
|
--badge-update-glow: oklch(72% 0.2 220 / 0.28);
|
|
|
|
/* Spacing Scale */
|
|
--space-1: calc(8px * 1);
|
|
--space-2: calc(8px * 2);
|
|
--space-3: calc(8px * 3);
|
|
|
|
/* Z-index Scale */
|
|
--z-base: 10;
|
|
--z-header: 100;
|
|
--z-modal: 1000;
|
|
--z-overlay: 2000;
|
|
|
|
/* Border Radius */
|
|
--border-radius-base: 12px;
|
|
--border-radius-sm: 8px;
|
|
--border-radius-xs: 4px;
|
|
|
|
--scrollbar-width: 8px; /* 添加滚动条宽度变量 */
|
|
|
|
/* Shortcut styles */
|
|
--shortcut-bg: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.12);
|
|
--shortcut-border: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.25);
|
|
--shortcut-text: var(--text-color);
|
|
}
|
|
|
|
html[data-theme="dark"] {
|
|
background-color: #1a1a1a !important;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
html[data-theme="light"] {
|
|
background-color: #ffffff !important;
|
|
color-scheme: light;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--bg-color: #1a1a1a;
|
|
--text-color: #e0e0e0;
|
|
--text-muted: #a0a0a0;
|
|
--card-bg: #2d2d2d;
|
|
--border-color: #404040;
|
|
|
|
--lora-accent: oklch(68% 0.28 256);
|
|
--lora-surface: oklch(25% 0.02 256 / 0.98);
|
|
--lora-border: oklch(90% 0.02 256 / 0.15);
|
|
--lora-text: oklch(98% 0.02 256);
|
|
--lora-warning: oklch(75% 0.25 80); /* Modified to be used with oklch() */
|
|
--badge-update-bg: oklch(62% 0.18 220);
|
|
--badge-update-text: oklch(98% 0.02 240);
|
|
--badge-update-glow: oklch(62% 0.18 220 / 0.4);
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', sans-serif;
|
|
background: var(--bg-color);
|
|
color: var(--text-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 0; /* Remove the padding-top */
|
|
}
|