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

Enhance modal styles for better visibility and responsiveness; add initialization logic to sync modal state

Browse Source
This commit is contained in:
Will Miao
2025-03-06 18:37:13 +08:00
parent cfcc954ffe
commit 5c521e40d4
2 changed files with 76 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
background: rgba(0, 0, 0, 0.2); /* 调整为更淡的半透明黑色 */
z-index: var(--z-modal);
overflow: hidden; /* 改为 hidden，防止双滚动条 */
}
@@ -25,11 +25,14 @@ body.modal-open {
height: auto;
max-height: 90vh;
margin: 2rem auto;
background: var(--lora-surface);
background: #ffffff; /* 使用纯白色背景 */
border-radius: var(--border-radius-base);
padding: var(--space-3);
border: 1px solid var(--lora-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.1); /* 更细腻的边框 */
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06),
0 10px 15px -3px rgba(0, 0, 0, 0.05); /* 多层阴影创造深度 */
overflow-y: auto;
overflow-x: hidden; /* 防止水平滚动条 */
}
@@ -1019,10 +1022,11 @@ body.modal-open {
}
.support-section {
background: var(--bg-color);
border: 1px solid var(--lora-border);
background: rgba(0, 0, 0, 0.02); /* 轻微的灰色背景 */
border: 1px solid rgba(0, 0, 0, 0.08); /* 更明显的边框 */
border-radius: var(--border-radius-sm);
padding: var(--space-2);
padding: var(--space-3);
margin-bottom: var(--space-2);
}
.support-section h3 {
@@ -1172,10 +1176,10 @@ body.modal-open {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--bg-color);
border: 1px solid var(--lora-border);
background: rgba(0, 0, 0, 0.02); /* 轻微的灰色背景 */
border: 1px solid rgba(0, 0, 0, 0.08); /* 更明显的边框 */
border-radius: var(--border-radius-sm);
padding: var(--space-2);
padding: var(--space-3);
}
.version-info {
@@ -1225,10 +1229,10 @@ body.modal-open {
}
.changelog-section {
background: var(--bg-color);
border: 1px solid var(--lora-border);
background: rgba(0, 0, 0, 0.02); /* 轻微的灰色背景 */
border: 1px solid rgba(0, 0, 0, 0.08); /* 更明显的边框 */
border-radius: var(--border-radius-sm);
padding: var(--space-2);
padding: var(--space-3);
}
.changelog-section h3 {
@@ -1359,4 +1363,39 @@ input:checked + .toggle-slider:before {
color: white; /* Icon color changes to white on hover */
}
/* ...existing code... */
/* 增强hover状态的视觉反馈 */
.social-link:hover,
.update-link:hover,
.folder-item:hover {
border-color: var(--lora-accent);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 调整深色主题 */
[data-theme="dark"] .modal-content {
background: var(--lora-surface);
border: 1px solid var(--lora-border);
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.2),
0 2px 4px -1px rgba(0, 0, 0, 0.15),
0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] .support-section,
[data-theme="dark"] .changelog-section,
[data-theme="dark"] .update-info,
[data-theme="dark"] .info-item,
[data-theme="dark"] .path-preview {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--lora-border);
}
/* 调整内容区域的间距，增加呼吸感 */
.support-section,
.changelog-section,
.update-info,
.info-item {
padding: var(--space-3);
margin-bottom: var(--space-2);
border-radius: var(--border-radius-sm);
}