mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-09-21 11:11:26 -03:00
Will Miao
726fc178f1
- Bind R=refresh, F=fetch metadata, D=download in PageControls via eventManager (plain letters only, skipped while typing or when a modal is open); triggers reuse the buttons' existing click handlers - Show key-hint chips on the refresh/fetch/download/bulk toolbar buttons; convert the bulk chip to a semantic <kbd> - Redesign shortcut hints as a neutral theme-adaptive keycap: --shortcut-* variables in base.css now derive from --text-muted with a bottom-edge shadow, shared by the toolbar chips, the header search cue, the help-modal cheat sheet, and onboarding key hints - Add shared isTypingContext() helper to uiHelpers - Add an Actions group (R/F/D) to the Shortcuts cheat-sheet tab Verified with vitest (926 passing, incl. 6 new shortcut cases) and a sandboxed E2E run in real Chrome (light/dark rendering, hover state, '?' opening the Shortcuts tab, clean console)
156 lines
4.2 KiB
CSS
156 lines
4.2 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-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;
|
|
}
|
|
|
|
: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;
|
|
}
|
|
}
|