alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-06-09 12:39:23 -03:00
Code Issues Packages Projects Releases Wiki Activity

refactor(phase-4): standardize remaining transitions and box-shadows

Browse Source 
- 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)
This commit is contained in:
Will Miao
2026-06-09 14:27:53 +08:00
parent 5797ce9408
commit 18577fa336
32 changed files with 177 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
static/css/components/alphabet-bar.css
View File

@@ -46,7 +46,7 @@
flex-direction: column;
gap: 6px;
align-items: center;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
box-shadow: var(--shadow-side);
max-height: 80vh;
overflow-y: auto;
scrollbar-width: thin;
@@ -75,7 +75,7 @@
width: 20px;
height: 40px;
align-self: center;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
box-shadow: var(--shadow-side);
}
.toggle-alphabet-bar:hover {
@@ -99,7 +99,7 @@
min-width: 24px;
text-align: center;
font-size: 0.85em;
transition: all 0.2s ease;
transition: var(--transition-base);
border: 1px solid var(--border-color);
}

4
static/css/components/banner.css
View File

@@ -68,7 +68,7 @@
text-decoration: none;
font-size: 0.85em;
font-weight: 500;
transition: all 0.2s ease;
transition: var(--transition-base);
white-space: nowrap;
border: 1px solid transparent;
}
@@ -133,7 +133,7 @@
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
transition: var(--transition-base);
font-size: 0.8em;
}

6
static/css/components/batch-import-modal.css
View File

@@ -76,7 +76,7 @@
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
transition: var(--transition-base);
background: var(--bg-color);
}
@@ -166,7 +166,7 @@
background: var(--card-bg);
color: var(--text-color);
cursor: pointer;
transition: all 0.2s;
transition: var(--transition-base);
}
.back-btn:hover {
@@ -237,7 +237,7 @@
padding: 8px 10px;
border-radius: var(--border-radius-xs);
cursor: pointer;
transition: all 0.2s;
transition: var(--transition-base);
border: 1px solid transparent;
}

46
static/css/components/duplicates.css
View File

@@ -11,8 +11,8 @@
border-bottom: 1px solid oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.4); /* Make bottom border stronger */
z-index: var(--z-overlay);
padding: 12px 0;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); /* Stronger shadow */
transition: all 0.3s ease;
box-shadow: var(--shadow-lg); /* Stronger shadow */
transition: var(--transition-slow);
margin-bottom: 20px;
}
@@ -65,7 +65,7 @@
align-items: center;
justify-content: center;
gap: 6px;
transition: all 0.2s ease;
transition: var(--transition-base);
}
.duplicates-banner button.btn-exit-mode:hover {
@@ -86,16 +86,16 @@
background: var(--card-bg);
color: var(--text-color);
font-size: 0.85em;
transition: all 0.2s ease;
transition: var(--transition-base);
cursor: pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: var(--shadow-xs);
}
.duplicates-banner button:hover {
border-color: var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h);
background: var(--bg-color);
transform: translateY(-1px);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
box-shadow: var(--shadow-sm);
}
.duplicates-banner button.btn-exit {
@@ -122,7 +122,7 @@
padding: 16px;
margin-bottom: 24px;
background: var(--card-bg);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); /* Add subtle shadow to groups */
box-shadow: var(--shadow-md); /* Add subtle shadow to groups */
/* Add responsive width settings to match banner */
max-width: 1400px;
margin-left: auto;
@@ -173,9 +173,9 @@
background: var(--card-bg);
color: var(--text-color);
font-size: 0.85em;
transition: all 0.2s ease;
transition: var(--transition-base);
cursor: pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: var(--shadow-xs);
margin-left: 8px;
}
@@ -183,7 +183,7 @@
border-color: var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h);
background: var(--bg-color);
transform: translateY(-1px);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
box-shadow: var(--shadow-sm);
}
.card-group-container {
@@ -230,20 +230,20 @@
justify-content: center;
cursor: pointer;
z-index: 1;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
box-shadow: var(--shadow-sm);
transition: var(--transition-base);
}
.group-toggle-btn:hover {
border-color: var(--lora-accent-l) var(--lora-accent-c) var (--lora-accent-h);
transform: translateY(-1px);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
box-shadow: var(--shadow-sm);
}
/* Duplicate card styling */
.model-card.duplicate {
position: relative;
transition: all 0.2s ease;
transition: var(--transition-base);
}
.model-card.duplicate:hover {
@@ -257,7 +257,7 @@
.model-card.duplicate-selected {
border: 2px solid oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h));
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
box-shadow: var(--shadow-md);
}
.model-card .selector-checkbox {
@@ -290,7 +290,7 @@
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-sm);
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
box-shadow: var(--shadow-lg);
padding: 10px;
z-index: 1000;
max-width: 350px;
@@ -432,7 +432,7 @@
border-radius: var(--border-radius-xs);
font-size: 0.85em;
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
}
.btn-verify-hashes:hover {
@@ -461,7 +461,7 @@
position: absolute;
top: -8px; /* Moved closer to button */
right: -8px; /* Moved closer to button */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); /* Softer shadow */
box-shadow: var(--shadow-sm); /* Softer shadow */
transition: transform 0.2s ease, opacity 0.2s ease;
}
@@ -493,7 +493,7 @@
cursor: help;
font-size: 16px;
margin-left: 8px;
transition: all 0.2s ease;
transition: var(--transition-base);
}
.help-icon:hover {
@@ -511,7 +511,7 @@
border: 1px solid var(--border-color);
border-radius: var(--border-radius-sm);
padding: 12px 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
box-shadow: var(--shadow-elevated);
z-index: var(--z-overlay);
font-size: 0.9em;
margin-top: 10px;
@@ -572,16 +572,16 @@
/* In dark mode, add additional distinction */
html[data-theme="dark"] .duplicates-banner {
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4); /* Stronger shadow in dark mode */
box-shadow: var(--shadow-dark-lg); /* Stronger shadow in dark mode */
background-color: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.15); /* Slightly stronger background in dark mode */
}
html[data-theme="dark"] .duplicate-group {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); /* Stronger shadow in dark mode */
box-shadow: var(--shadow-lg); /* Stronger shadow in dark mode */
}
html[data-theme="dark"] .help-tooltip {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
box-shadow: var(--shadow-elevated);
}
/* Styles for disabled controls during duplicates mode */

14
static/css/components/filter-indicator.css
View File

@@ -7,22 +7,22 @@
color: white;
border-radius: var(--border-radius-xs);
padding: 4px 10px;
transition: all 0.2s ease;
transition: var(--transition-base);
border: 1px solid var(--lora-accent);
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: var(--shadow-sm);
font-size: 0.85em;
}
.control-group .filter-active:hover {
opacity: 0.92;
transform: translateY(-1px);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
box-shadow: var(--shadow-md);
}
.control-group .filter-active:active {
transform: translateY(0);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: var(--shadow-sm);
}
.control-group .filter-active i.fa-filter {
@@ -59,9 +59,9 @@
/* Animation for filter indicator */
@keyframes filterPulse {
0% { transform: scale(1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
50% { transform: scale(1.03); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); }
100% { transform: scale(1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
0% { transform: scale(1); box-shadow: var(--shadow-sm); }
50% { transform: scale(1.03); box-shadow: var(--shadow-lg); }
100% { transform: scale(1); box-shadow: var(--shadow-sm); }
}
.filter-active.animate {

2
static/css/components/initialization.css
View File

@@ -176,7 +176,7 @@
background: rgba(var(--lora-accent), 0.05);
border-radius: var(--border-radius-base);
padding: var(--space-2);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
box-shadow: var(--shadow-sm);
}
.tips-header {

8
static/css/components/keyboard-nav.css
View File

@@ -11,7 +11,7 @@
border: 1px solid var(--border-color);
color: var(--text-color);
cursor: help;
transition: all 0.2s ease;
transition: var(--transition-base);
margin-left: 8px;
}
@@ -19,7 +19,7 @@
background: var(--lora-accent);
color: white;
transform: translateY(-2px);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
box-shadow: var(--shadow-sm);
}
.keyboard-nav-hint i {
@@ -46,7 +46,7 @@
transform: translateY(-15%); /* Vertically center */
opacity: 0;
transition: opacity 0.3s;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
box-shadow: var(--shadow-lg);
border: 1px solid var(--lora-border);
font-size: 0.85em;
line-height: 1.4;
@@ -92,5 +92,5 @@
border-radius: 3px;
padding: 1px 5px;
font-size: 0.8em;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
box-shadow: var(--shadow-xs);
}

8
static/css/components/lora-modal/lora-modal.css
View File

@@ -483,7 +483,7 @@
color: var(--text-color);
cursor: pointer;
font-size: 0.95em;
transition: all 0.2s;
transition: var(--transition-base);
opacity: 0.7;
position: relative;
}
@@ -893,7 +893,7 @@
border-radius: var(--border-radius-sm);
max-width: fit-content;
cursor: pointer;
transition: all 0.2s;
transition: var(--transition-base);
}
[data-theme="dark"] .creator-info,
@@ -965,7 +965,7 @@
cursor: pointer;
font-weight: 500;
font-size: 0.9em;
transition: all 0.2s;
transition: var(--transition-base);
}
.civitai-view i {
@@ -988,7 +988,7 @@
cursor: pointer;
font-weight: 500;
font-size: 0.9em;
transition: all 0.2s;
transition: var(--transition-base);
}
[data-theme="dark"] .modal-send-btn {

4
static/css/components/lora-modal/preset-tags.css
View File

@@ -28,7 +28,7 @@
border-radius: var(--border-radius-xs);
padding: calc(var(--space-1) * 0.5) var(--space-1);
gap: var(--space-1);
transition: all 0.2s ease;
transition: var(--transition-base);
}
.preset-tag span {
@@ -40,7 +40,7 @@
color: var(--text-color);
opacity: 0.5;
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
}
.preset-tag:hover {

16
static/css/components/lora-modal/showcase.css
View File

@@ -111,8 +111,8 @@
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
transition: var(--transition-base);
box-shadow: var(--shadow-md);
padding: 0;
position: relative;
overflow: hidden;
@@ -120,7 +120,7 @@
.media-control-btn:hover {
transform: translateY(-2px);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
box-shadow: var(--shadow-lg);
}
.media-control-btn.set-preview-btn:hover {
@@ -205,7 +205,7 @@
z-index: 5;
max-height: 50%; /* Reduced to take less space */
overflow-y: auto;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
box-shadow: var(--shadow-inset-top);
opacity: 0;
pointer-events: none;
}
@@ -220,7 +220,7 @@
/* Adjust to dark theme */
[data-theme="dark"] .image-metadata-panel {
background: var(--card-bg);
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
box-shadow: var(--shadow-inset-top);
}
.metadata-content {
@@ -312,7 +312,7 @@
opacity: 0.6;
cursor: pointer;
padding: 3px;
transition: all 0.2s ease;
transition: var(--transition-base);
}
.copy-prompt-btn:hover {
@@ -409,7 +409,7 @@
border-radius: var(--border-radius-sm);
padding: var(--space-4);
text-align: center;
transition: all 0.3s ease;
transition: var(--transition-slow);
background: var(--lora-surface);
cursor: pointer;
}
@@ -471,7 +471,7 @@
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
transition: var(--transition-base);
}
.select-files-btn:hover {

6
static/css/components/lora-modal/tag.css
View File

@@ -73,14 +73,14 @@
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-sm);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
box-shadow: var(--shadow-lg);
padding: 10px 14px;
max-width: 400px;
z-index: 10;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: all 0.2s ease;
transition: var(--transition-base);
pointer-events: none;
}
@@ -130,7 +130,7 @@
cursor: pointer;
padding: 2px 5px;
border-radius: var(--border-radius-xs);
transition: all 0.2s ease;
transition: var(--transition-base);
margin-left: var(--space-1);
}

2
static/css/components/lora-modal/triggerwords.css
View File

@@ -48,7 +48,7 @@
border-radius: var(--border-radius-xs);
padding: 4px 8px;
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
gap: 6px;
position: relative;
}

4
static/css/components/lora-modal/versions.css
View File

@@ -146,7 +146,7 @@
background: color-mix(in oklch, var(--card-bg) 92%, var(--bg-color) 8%);
border: 1px solid var(--lora-border);
border-radius: var(--border-radius-sm);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
box-shadow: var(--shadow-xs);
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
@@ -156,7 +156,7 @@
.model-version-row:hover {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
box-shadow: var(--shadow-xl);
}
.model-version-row.is-clickable {

2
static/css/components/media-viewer.css
View File

@@ -61,7 +61,7 @@
max-height: 85vh;
object-fit: contain;
border-radius: 4px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
box-shadow: var(--shadow-dark-lg);
}
.media-viewer-video {

2
static/css/components/menu.css
View File

@@ -164,7 +164,7 @@
border: 1px solid var(--border-color);
color: var(--text-color);
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
}
.nsfw-level-btn:hover {

2
static/css/components/modal/_base.css
View File

@@ -197,7 +197,7 @@ body.modal-open {
border: 1px solid var(--border-color);
border-radius: var(--border-radius-sm);
cursor: pointer;
transition: all 0.2s;
transition: var(--transition-base);
font-size: 0.95em;
}

26
static/css/components/modal/download-modal.css
View File

@@ -37,7 +37,7 @@
border: 1px solid var(--border-color);
border-radius: var(--border-radius-sm);
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
background: var(--bg-color);
margin: 1px;
position: relative;
@@ -45,7 +45,7 @@
.version-item:hover {
border-color: var(--lora-accent);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
box-shadow: var(--shadow-md);
z-index: 1;
}
@@ -156,7 +156,7 @@
background: var(--bg-color);
color: var(--text-color);
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
display: flex;
align-items: center;
justify-content: center;
@@ -225,7 +225,7 @@
padding: 4px 8px;
border-radius: var(--border-radius-xs);
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
color: var(--text-color);
opacity: 0.7;
text-decoration: none;
@@ -272,7 +272,7 @@
padding: 4px 8px;
cursor: pointer;
border-radius: var(--border-radius-xs);
transition: all 0.2s ease;
transition: var(--transition-base);
position: relative;
}
@@ -293,7 +293,7 @@
justify-content: center;
cursor: pointer;
border-radius: 2px;
transition: all 0.2s ease;
transition: var(--transition-base);
}
.tree-expand-icon:hover {
@@ -364,7 +364,7 @@
color: var(--text-color);
cursor: pointer;
font-size: 0.8em;
transition: all 0.2s ease;
transition: var(--transition-base);
}
.create-folder-form button.confirm {
@@ -453,7 +453,7 @@
right: 0;
bottom: 0;
background-color: var(--border-color);
transition: all 0.3s ease;
transition: var(--transition-slow);
border-radius: 18px;
}
@@ -465,9 +465,9 @@
left: 3px;
bottom: 3px;
background-color: white;
transition: all 0.3s ease;
transition: var(--transition-slow);
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: var(--shadow-xs);
}
.inline-toggle-container .toggle-switch input:checked+.toggle-slider {
@@ -516,7 +516,7 @@
font-size: inherit;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
border: 1px solid oklch(var(--lora-accent) / 0.35);
user-select: none;
box-shadow: 0 1px 2px oklch(var(--lora-accent) / 0.1);
@@ -577,13 +577,13 @@
border: 1px solid var(--border-color);
border-radius: var(--border-radius-sm);
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
background: var(--bg-color);
}
.file-option:hover {
border-color: var(--lora-accent);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
box-shadow: var(--shadow-sm);
}
.file-option.selected {

6
static/css/components/modal/example-access-modal.css
View File

@@ -20,12 +20,12 @@
border: 1px solid var(--lora-border);
background-color: var(--lora-surface);
cursor: pointer;
transition: all 0.2s;
transition: var(--transition-base);
}
.example-option-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
box-shadow: var(--shadow-md);
border-color: var(--lora-accent);
}
@@ -68,5 +68,5 @@
/* Dark theme adjustments */
[data-theme="dark"] .example-option-btn:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
box-shadow: var(--shadow-elevated);
}

12
static/css/components/modal/help-modal.css
View File

@@ -32,7 +32,7 @@
color: var(--text-color);
cursor: pointer;
font-weight: 500;
transition: all 0.2s;
transition: var(--transition-base);
opacity: 0.7;
}
@@ -150,7 +150,7 @@
margin-left: 8px;
vertical-align: middle;
animation: fadeIn 0.5s ease-in-out;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
box-shadow: var(--shadow-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
}
@@ -164,7 +164,7 @@
/* Dark theme adjustments for new content badge */
[data-theme="dark"] .new-content-badge {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: var(--shadow-lg);
}
/* Update video list styles */
@@ -210,7 +210,7 @@
margin-left: 10px;
vertical-align: middle;
animation: fadeIn 0.5s ease-in-out;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: var(--shadow-md);
}
.update-date-badge i {
@@ -225,7 +225,7 @@
/* Dark theme adjustments */
[data-theme="dark"] .update-date-badge {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
box-shadow: var(--shadow-md);
}
/* Privacy-friendly video embed styles */
@@ -281,7 +281,7 @@
border-radius: var(--border-radius-sm);
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
background-color: var(--lora-accent);
color: white;
text-decoration: none;

22
static/css/components/modal/settings-modal.css
View File

@@ -10,7 +10,7 @@
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
}
.settings-toggle:hover {
@@ -81,7 +81,7 @@
font-weight: 500;
cursor: pointer;
border-radius: var(--border-radius-xs);
transition: all 0.2s ease;
transition: var(--transition-base);
margin-bottom: 4px;
}
@@ -154,7 +154,7 @@
background-color: var(--lora-surface);
color: var(--text-color);
font-size: 0.9em;
transition: all 0.2s ease;
transition: var(--transition-base);
}
.settings-search-input:focus {
@@ -183,7 +183,7 @@
justify-content: center;
font-size: 0.7em;
opacity: 0.6;
transition: all 0.2s ease;
transition: var(--transition-base);
}
.settings-search-clear:hover {
@@ -289,7 +289,7 @@
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
text-decoration: none;
position: relative;
}
@@ -614,7 +614,7 @@
border-bottom: 2px solid transparent;
color: var(--text-color);
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
opacity: 0.7;
}
@@ -974,7 +974,7 @@ input:checked + .toggle-slider:before {
border-radius: var(--border-radius-xs);
cursor: pointer;
font-size: 0.9em;
transition: all 0.2s;
transition: var(--transition-base);
height: 32px; /* Match other control heights */
}
@@ -1030,7 +1030,7 @@ input:checked + .toggle-slider:before {
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
transition: var(--transition-base);
}
.remove-mapping-btn:hover {
@@ -1287,7 +1287,7 @@ input:checked + .toggle-slider:before {
pointer-events: none;
z-index: 10000;
line-height: 1.4;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
box-shadow: var(--shadow-elevated);
text-transform: none;
}
@@ -1309,7 +1309,7 @@ input:checked + .toggle-slider:before {
/* Dark theme adjustments for tooltip - Fully opaque */
[data-theme="dark"] .info-icon[data-tooltip]::after {
background: rgba(40, 40, 40, 0.95);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
box-shadow: var(--shadow-dark-lg);
}
/* Extra Folder Paths - Single input layout */
@@ -1361,7 +1361,7 @@ input:checked + .toggle-slider:before {
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
transition: var(--transition-base);
flex-shrink: 0;
}

22
static/css/components/modal/support-modal.css
View File

@@ -100,7 +100,7 @@
border-radius: var(--border-radius-sm);
text-decoration: none;
color: var(--text-color);
transition: all 0.2s ease;
transition: var(--transition-base);
}
.social-link:hover {
@@ -120,14 +120,14 @@
border-radius: var(--border-radius-sm);
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease;
transition: var(--transition-base);
margin-top: var(--space-1);
}
.kofi-button:hover {
background: #E04946;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
box-shadow: var(--shadow-md);
}
/* Patreon button style */
@@ -142,14 +142,14 @@
border-radius: var(--border-radius-sm);
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease;
transition: var(--transition-base);
margin-top: var(--space-1);
}
.patreon-button:hover {
background: #E04946;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
box-shadow: var(--shadow-md);
}
/* QR Code section styles */
@@ -189,7 +189,7 @@
max-width: 80%;
height: auto;
border-radius: var(--border-radius-sm);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
box-shadow: var(--shadow-md);
border: 1px solid var(--lora-border);
aspect-ratio: 1/1; /* Ensure proper aspect ratio for the square QR code */
}
@@ -212,7 +212,7 @@
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
}
.support-toggle:hover {
@@ -261,7 +261,7 @@
.update-link:hover,
.folder-item:hover {
border-color: var(--lora-accent);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: var(--shadow-md);
}
/* Supporters Section Styles */
@@ -347,14 +347,14 @@
border: 1px solid var(--border-color);
border-left: 3px solid var(--lora-accent);
border-radius: var(--border-radius-sm);
transition: all 0.2s ease;
transition: var(--transition-base);
cursor: default;
}
.supporter-special-card:hover {
border-color: var(--lora-accent);
border-left-color: var(--lora-accent);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
box-shadow: var(--shadow-header);
transform: translateX(4px);
}
@@ -439,7 +439,7 @@
font-size: 0.95em;
color: var(--text-color);
opacity: 0.85;
transition: all 0.2s ease;
transition: var(--transition-base);
white-space: nowrap;
cursor: default;
}

2
static/css/components/modal/update-modal.css
View File

@@ -160,7 +160,7 @@
border-radius: var(--border-radius-sm);
text-decoration: none;
color: var(--text-color);
transition: all 0.2s ease;
transition: var(--transition-base);
}
.update-link:hover {

2
static/css/components/progress-panel.css
View File

@@ -63,7 +63,7 @@
align-items: center;
justify-content: center;
opacity: 0.6;
transition: all 0.2s;
transition: var(--transition-base);
position: relative;
}

16
static/css/components/recipe-modal.css
View File

@@ -55,7 +55,7 @@
padding: 4px 8px;
margin-left: 8px;
border-radius: var(--border-radius-xs);
transition: all 0.2s;
transition: var(--transition-base);
flex-shrink: 0;
display: flex;
align-items: center;
@@ -183,7 +183,7 @@
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: all 0.2s ease;
transition: var(--transition-base);
pointer-events: none;
}
@@ -258,7 +258,7 @@
cursor: pointer;
font-weight: 500;
font-size: 0.9em;
transition: all 0.2s;
transition: var(--transition-base);
white-space: nowrap;
}
@@ -428,7 +428,7 @@
font-size: 0.85em;
cursor: pointer;
border: none;
transition: all 0.2s;
transition: var(--transition-base);
}
.source-url-cancel-btn {
@@ -548,7 +548,7 @@
cursor: pointer;
padding: 4px 8px;
border-radius: var(--border-radius-xs);
transition: all 0.2s;
transition: var(--transition-base);
}
.copy-btn:hover,
@@ -705,7 +705,7 @@
cursor: pointer;
padding: 4px 8px;
border-radius: var(--border-radius-xs);
transition: all 0.2s;
transition: var(--transition-base);
display: flex;
align-items: center;
justify-content: center;
@@ -725,7 +725,7 @@
cursor: pointer;
padding: 4px 8px;
border-radius: var(--border-radius-xs);
transition: all 0.2s;
transition: var(--transition-base);
display: flex;
align-items: center;
justify-content: center;
@@ -1086,7 +1086,7 @@
font-size: 0.85em;
cursor: pointer;
border: none;
transition: all 0.2s;
transition: var(--transition-base);
}
.reconnect-cancel-btn {

18
static/css/components/search-filter.css
View File

@@ -149,7 +149,7 @@
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-base);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
box-shadow: var(--shadow-md);
z-index: var(--z-overlay);
padding: 16px;
transition: transform 0.3s ease, opacity 0.3s ease;
@@ -243,7 +243,7 @@
color: var(--text-color);
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
user-select: none; /* Prevent text selection */
-webkit-user-select: none; /* For Safari */
-moz-user-select: none; /* For Firefox */
@@ -373,7 +373,7 @@
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
flex-shrink: 0;
}
@@ -402,7 +402,7 @@
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-base);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
box-shadow: var(--shadow-md);
z-index: var(--z-overlay);
padding: 16px;
transition: transform 0.3s ease, opacity 0.3s ease;
@@ -470,7 +470,7 @@
color: var(--text-color);
font-size: 13px; /* Slightly smaller font size */
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
user-select: none;
flex: 1;
text-align: center;
@@ -516,7 +516,7 @@
border-radius: var(--border-radius-sm);
background-color: var(--lora-surface);
border: 1px solid var(--border-color);
transition: all 0.2s ease;
transition: var(--transition-base);
cursor: pointer;
}
@@ -574,7 +574,7 @@
align-items: center;
justify-content: center;
font-size: 11px;
transition: all 0.2s ease;
transition: var(--transition-base);
margin-left: auto;
}
@@ -599,7 +599,7 @@
font-size: 14px;
border-radius: var(--border-radius-sm);
cursor: pointer;
transition: all 0.25s ease;
transition: var(--transition-base);
}
/* Enabled state - visual cue that button is actionable */
@@ -726,7 +726,7 @@
cursor: pointer;
color: var(--text-color);
opacity: 0.7;
transition: all 0.2s ease;
transition: var(--transition-base);
font-weight: 500;
}

10
static/css/components/shared/edit-metadata.css
View File

@@ -10,7 +10,7 @@
cursor: pointer;
padding: 2px 5px;
border-radius: var(--border-radius-xs);
transition: all 0.2s ease;
transition: var(--transition-base);
}
.metadata-edit-btn:hover {
@@ -101,7 +101,7 @@
}
.metadata-item-dragging {
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
box-shadow: var(--shadow-dialog);
cursor: grabbing;
opacity: 0.95;
transition: none;
@@ -178,7 +178,7 @@ body.metadata-drag-active * {
display: flex;
align-items: center;
gap: 4px;
transition: all 0.2s ease;
transition: var(--transition-base);
}
.metadata-edit-controls button:hover {
@@ -257,7 +257,7 @@ body.metadata-drag-active * {
border-radius: var(--border-radius-sm);
margin-top: 4px;
z-index: 100;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
box-shadow: var(--shadow-elevated);
overflow: hidden;
display: flex;
flex-direction: column;
@@ -299,7 +299,7 @@ body.metadata-drag-active * {
justify-content: space-between;
padding: 5px 10px;
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
border-radius: var(--border-radius-xs);
background: var(--lora-surface);
border: 1px solid var(--lora-border);

28
static/css/components/sidebar.css
View File

@@ -8,10 +8,10 @@
border: 1px solid var(--border-color);
border-radius: var(--border-radius-xs);
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: var(--transition-slow);
flex-shrink: 0;
z-index: var(--z-overlay);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
box-shadow: var(--shadow-header);
display: flex;
flex-direction: column;
backdrop-filter: blur(8px);
@@ -83,7 +83,7 @@
flex-shrink: 0;
border-bottom: 1px solid var(--border-color);
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
}
.sidebar-header:hover {
@@ -120,7 +120,7 @@
padding: 4px;
border-radius: 4px;
opacity: 0.6;
transition: all 0.2s ease;
transition: var(--transition-base);
width: 24px;
height: 24px;
display: flex;
@@ -174,7 +174,7 @@
align-items: center;
padding: 8px 16px;
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
font-size: 0.85em;
border-left: 3px solid transparent;
color: var(--text-color);
@@ -298,7 +298,7 @@
padding: 4px 8px;
border-radius: var(--border-radius-xs);
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
color: var(--text-muted);
position: relative;
}
@@ -331,7 +331,7 @@
margin-left: 6px;
color: inherit;
opacity: 0.6;
transition: all 0.2s ease;
transition: var(--transition-base);
pointer-events: none;
font-size: 0.9em;
}
@@ -364,7 +364,7 @@
background: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-xs);
box-shadow: 0 3px 8px rgba(0,0,0,0.15);
box-shadow: var(--shadow-lg);
z-index: calc(var(--z-overlay) + 20);
overflow-y: auto;
max-height: 450px;
@@ -382,7 +382,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.2s ease;
transition: var(--transition-base);
}
.breadcrumb-dropdown-item:hover {
@@ -406,7 +406,7 @@
align-items: center;
padding: 8px 16px;
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
font-size: 0.85em;
border-left: 3px solid transparent;
color: var(--text-color);
@@ -614,7 +614,7 @@
background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.08);
opacity: 0;
transform: translateY(10px);
transition: all 0.2s ease;
transition: var(--transition-base);
pointer-events: none;
z-index: 10;
}
@@ -649,7 +649,7 @@
background: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-xs);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
box-shadow: var(--shadow-lg);
z-index: 20;
animation: slideUp 0.2s ease;
}
@@ -685,7 +685,7 @@
color: var(--text-color);
font-size: 0.85em;
outline: none;
transition: all 0.2s ease;
transition: var(--transition-base);
}
.sidebar-create-folder-input:focus {
@@ -702,7 +702,7 @@
border: none;
border-radius: var(--border-radius-xs);
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
background: transparent;
color: var(--text-muted);
}

22
static/css/components/statistics.css
View File

@@ -17,13 +17,13 @@
border-radius: var(--border-radius-base);
padding: var(--space-2);
text-align: center;
transition: all 0.3s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: var(--transition-slow);
box-shadow: var(--shadow-sm);
}
.metric-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
box-shadow: var(--shadow-elevated);
}
.metric-card .metric-icon {
@@ -95,7 +95,7 @@
border: none;
padding: var(--space-2) var(--space-3);
cursor: pointer;
transition: all 0.3s ease;
transition: var(--transition-slow);
color: var(--text-color);
border-bottom: 3px solid transparent;
white-space: nowrap;
@@ -208,7 +208,7 @@
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-xs);
transition: all 0.2s ease;
transition: var(--transition-base);
}
.model-item:hover {
@@ -270,7 +270,7 @@
border-radius: var(--border-radius-xs);
font-size: 0.8rem;
border: 1px solid oklch(var(--lora-accent) / 0.2);
transition: all 0.2s ease;
transition: var(--transition-base);
cursor: pointer;
}
@@ -349,12 +349,12 @@
padding: var(--space-2);
border-radius: var(--border-radius-xs);
border: 1px solid var(--border-color);
transition: all 0.3s ease;
transition: var(--transition-slow);
}
.insight-card:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
box-shadow: var(--shadow-md);
}
.insight-card.type-success {
@@ -428,7 +428,7 @@
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-xs);
transition: all 0.2s ease;
transition: var(--transition-base);
}
.recommendation-item:hover {
@@ -534,9 +534,9 @@
}
[data-theme="dark"] .metric-card {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: var(--shadow-md);
}
[data-theme="dark"] .metric-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
box-shadow: var(--shadow-dark-lg);
}

2
static/css/components/toast.css
View File

@@ -25,7 +25,7 @@
color: var(--text-color);
padding: 12px 16px;
border-radius: var(--border-radius-sm);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
box-shadow: var(--shadow-toast);
z-index: calc(var(--z-overlay) + 10);
opacity: 0;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),

8
static/css/layout.css
View File

@@ -78,7 +78,7 @@
background: var(--card-bg);
color: var(--text-color);
font-size: 0.85em;
transition: all 0.2s ease;
transition: var(--transition-base);
cursor: pointer;
box-shadow: var(--shadow-xs);
}
@@ -186,7 +186,7 @@
color: var(--shortcut-text);
vertical-align: middle;
opacity: 0.8;
transition: all 0.2s ease;
transition: var(--transition-base);
}
.control-group button:hover .shortcut-key {
@@ -222,7 +222,7 @@
background-position: right 6px center;
background-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
box-shadow: var(--shadow-xs);
}
@@ -295,7 +295,7 @@
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
transition: var(--transition-slow);
z-index: var(--z-overlay);
box-shadow: var(--shadow-sm);
}

10
static/css/onboarding.css
View File

@@ -24,7 +24,7 @@
border-radius: var(--border-radius-base);
z-index: calc(var(--z-overlay) + 1);
pointer-events: none;
transition: all 0.3s ease;
transition: var(--transition-slow);
/* Add glow effect */
box-shadow:
0 0 0 2px rgba(24, 144, 255, 0.3),
@@ -53,7 +53,7 @@
min-width: 320px;
max-width: 400px;
z-index: calc(var(--z-overlay) + 3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
box-shadow: var(--shadow-2xl);
backdrop-filter: blur(10px);
}
@@ -98,7 +98,7 @@
color: var(--text-color);
cursor: pointer;
font-size: 0.9em;
transition: all 0.2s ease;
transition: var(--transition-base);
}
.onboarding-btn:hover {
@@ -138,7 +138,7 @@
padding: var(--space-3);
min-width: 510px;
text-align: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
box-shadow: var(--shadow-dark-lg);
backdrop-filter: blur(10px);
}
@@ -167,7 +167,7 @@
border-radius: var(--border-radius-sm);
background: var(--card-bg);
cursor: pointer;
transition: all 0.2s ease;
transition: var(--transition-base);
display: flex;
flex-direction: column;
align-items: center;

8
static/css/tokens/effects.css
View File

@@ -22,6 +22,10 @@
--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;
@@ -46,4 +50,8 @@
--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);
}