alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-21 21:22:11 -03:00
Code Issues Packages Projects Releases Wiki Activity

Add help modal functionality and update related UI components

Browse Source
This commit is contained in:
Will Miao
2025-06-09 14:55:18 +08:00
parent d8ddacde38
commit 4e5c8b2dd0
9 changed files with 522 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
static/css/components/modal.css
View File

@@ -544,7 +544,7 @@ input:checked + .toggle-slider:before {
gap: 8px;
padding: 8px 16px;
background-color: var(--card-bg);
color: var(--text-color);
color: var (--text-color);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-sm);
cursor: pointer;
@@ -718,4 +718,204 @@ input:checked + .toggle-slider:before {
.density-description li {
margin-bottom: 4px;
}
/* Help Modal styles */
.help-modal {
max-width: 850px;
}
.help-header {
display: flex;
align-items: center;
margin-bottom: var(--space-2);
}
.modal-help-icon {
font-size: 24px;
color: var(--lora-accent);
margin-right: var(--space-2);
vertical-align: text-bottom;
}
/* Tab navigation styles */
.help-tabs {
display: flex;
border-bottom: 1px solid var(--lora-border);
margin-bottom: var(--space-2);
gap: 8px;
}
.tab-btn {
padding: 8px 16px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: var(--text-color);
cursor: pointer;
font-weight: 500;
transition: all 0.2s;
opacity: 0.7;
}
.tab-btn:hover {
background-color: rgba(0, 0, 0, 0.05);
opacity: 0.9;
}
.tab-btn.active {
color: var(--lora-accent);
border-bottom: 2px solid var(--lora-accent);
opacity: 1;
}
/* Tab content styles */
.help-content {
padding: var(--space-1) 0;
overflow-y: auto;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
/* Video embed styles */
.video-embed {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
max-width: 100%;
margin-bottom: var(--space-2);
border-radius: var(--border-radius-sm);
}
.video-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-embed.small {
max-width: 100%;
margin-bottom: var(--space-1);
}
.help-text {
margin: var(--space-2) 0;
}
.help-text ul {
padding-left: 20px;
margin-top: 8px;
}
.help-text li {
margin-bottom: 8px;
}
/* Documentation link styles */
.docs-section {
margin-bottom: var(--space-3);
}
.docs-section h4 {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: var(--space-1);
}
.docs-links {
list-style-type: none;
padding-left: var(--space-3);
}
.docs-links li {
margin-bottom: var(--space-1);
position: relative;
}
.docs-links li:before {
content: "•";
position: absolute;
left: -15px;
color: var(--lora-accent);
}
.docs-links a {
color: var(--lora-accent);
text-decoration: none;
transition: color 0.2s;
}
.docs-links a:hover {
text-decoration: underline;
}
/* Update video list styles */
.video-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.video-item {
display: flex;
flex-direction: column;
}
.video-info {
padding: var(--space-1);
}
.video-info h4 {
margin-bottom: var(--space-1);
}
.video-info p {
font-size: 0.9em;
opacity: 0.8;
}
/* Dark theme adjustments */
[data-theme="dark"] .tab-btn:hover {
background-color: rgba(255, 255, 255, 0.05);
}
/* Update date badge styles */
.update-date-badge {
display: inline-flex;
align-items: center;
font-size: 0.75em;
font-weight: 500;
background-color: var(--lora-accent);
color: var(--lora-text);
padding: 4px 8px;
border-radius: 12px;
margin-left: 10px;
vertical-align: middle;
animation: fadeIn 0.5s ease-in-out;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.update-date-badge i {
margin-right: 5px;
font-size: 0.9em;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
/* Dark theme adjustments */
[data-theme="dark"] .update-date-badge {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}