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

Refactor modal styles for improved consistency and responsiveness; adjust padding and background for dark theme support

Browse Source
This commit is contained in:
Will Miao
2025-03-06 21:09:31 +08:00
parent c9c86d8c0f
commit fb75757d6c
3 changed files with 42 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,3 @@
/* Lora Modal Header */
.modal-header {
display: flex;
@@ -19,11 +18,17 @@
.info-item {
padding: var(--space-2);
background: var(--lora-surface);
border: 1px solid var(--lora-border);
background: rgba(0, 0, 0, 0.03);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: var(--border-radius-sm);
}
/* 调整深色主题下的样式 */
[data-theme="dark"] .info-item {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--lora-border);
}
.info-item.full-width {
grid-column: 1 / -1;
}
@@ -146,11 +151,17 @@
/* Update Trigger Words styles */
.info-item.trigger-words {
padding: var(--space-2);
background: var(--lora-surface);
border: 1px solid var(--lora-border);
background: rgba(0, 0, 0, 0.03);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: var(--border-radius-sm);
}
/* 调整 trigger words 样式 */
[data-theme="dark"] .info-item.trigger-words {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--lora-border);
}
.trigger-words-tags {
display: flex;
flex-wrap: wrap;

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

@@ -25,14 +25,14 @@ body.modal-open {
height: auto;
max-height: 90vh;
margin: 2rem auto;
background: #ffffff; /* 使用纯白色背景 */
background: var(--lora-surface);
border-radius: var(--border-radius-base);
padding: var(--space-3);
border: 1px solid rgba(0, 0, 0, 0.1); /* 更细腻的边框 */
border: 1px solid var(--lora-border);
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); /* 多层阴影创造深度 */
0 10px 15px -3px rgba(0, 0, 0, 0.05);
overflow-y: auto;
overflow-x: hidden; /* 防止水平滚动条 */
}
@@ -298,14 +298,22 @@ body.modal-open {
margin-top: 4px;
}
/* 调整深色主题 */
/* 统一各个 section 的样式 */
.support-section,
.changelog-section,
.update-info,
.info-item,
.path-preview {
background: rgba(0, 0, 0, 0.03);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: var(--border-radius-sm);
padding: var(--space-2);
}
/* 深色主题统一样式 */
[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,
@@ -315,14 +323,4 @@ body.modal-open {
[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);
}

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

@@ -33,27 +33,27 @@
.support-content {
display: flex;
flex-direction: column;
gap: var(--space-3);
gap: var(--space-2);
}
.support-content > p {
font-size: 1.1em;
text-align: center;
margin-bottom: var(--space-2);
margin-bottom: var(--space-1);
}
.support-section {
background: rgba(0, 0, 0, 0.02); /* 轻微的灰色背景 */
border: 1px solid rgba(0, 0, 0, 0.08); /* 更明显的边框 */
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-3);
padding: var(--space-2);
margin-bottom: var(--space-2);
}
.support-section h3 {
display: flex;
align-items: center;
gap: 10px;
gap: 8px;
margin-top: 0;
margin-bottom: var(--space-1);
font-size: 1.1em;
@@ -65,8 +65,8 @@
}
.support-section p {
margin-top: 6px;
margin-bottom: var(--space-2);
margin-top: 4px;
margin-bottom: var(--space-1);
color: var(--text-color);
opacity: 0.9;
}
@@ -74,7 +74,7 @@
.support-links {
display: flex;
gap: var(--space-2);
margin-top: var(--space-2);
margin-top: var(--space-1);
}
.social-link {
@@ -119,7 +119,7 @@
.support-footer {
text-align: center;
margin-top: var(--space-2);
margin-top: var(--space-1);
font-style: italic;
color: var(--text-color);
}