refactor: streamline example images download functionality and UI updates

This commit is contained in:
Will Miao
2025-04-30 13:20:44 +08:00
parent cb876cf77e
commit 26d9a9caa6
7 changed files with 235 additions and 198 deletions

View File

@@ -502,7 +502,7 @@ input:checked + .toggle-slider:before {
gap: var(--space-2);
}
.download-buttons .primary-btn {
.primary-btn {
display: flex;
align-items: center;
gap: 8px;
@@ -516,30 +516,80 @@ input:checked + .toggle-slider:before {
font-size: 0.95em;
}
.download-buttons .primary-btn:hover {
background-color: oklch(var(--lora-accent) / 0.9);
.primary-btn:hover {
background-color: oklch(from var(--lora-accent) l c h / 85%);
color: var(--lora-text);
}
.path-browser-control {
/* Secondary button styles */
.secondary-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background-color: var(--card-bg);
color: var(--text-color);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-sm);
cursor: pointer;
transition: all 0.2s;
font-size: 0.95em;
}
.secondary-btn:hover {
background-color: var(--border-color);
color: var(--text-color);
}
/* Disabled button styles */
.primary-btn.disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: var(--lora-accent);
color: var(--lora-text);
pointer-events: none;
}
.secondary-btn.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Dark theme specific button adjustments */
[data-theme="dark"] .primary-btn:hover {
background-color: oklch(from var(--lora-accent) l c h / 75%);
}
[data-theme="dark"] .secondary-btn {
background-color: var(--lora-surface);
}
[data-theme="dark"] .secondary-btn:hover {
background-color: oklch(35% 0.02 256 / 0.98);
}
.primary-btn.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.path-control {
display: flex;
gap: 8px;
align-items: center;
width: 100%;
}
.path-browser-control input[type="text"] {
.path-control input[type="text"] {
flex: 1;
}
.browse-btn {
white-space: nowrap;
padding: 6px 12px;
background-color: var(--button-bg);
padding: 6px 10px;
border-radius: var(--border-radius-xs);
border: 1px solid var(--border-color);
border-radius: 4px;
cursor: pointer;
}
.browse-btn:hover {
background-color: var(--button-hover-bg);
background-color: var(--lora-surface);
color: var(--text-color);
font-size: 0.95em;
height: 32px;
}
.primary-btn.disabled {