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

Add border radius variables and update styles for consistency across components

Browse Source
This commit is contained in:
Will Miao
2025-01-31 16:46:06 +08:00
parent 0e708e6583
commit 57a4694f28
1 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
static/css/style.css
View File

@@ -20,6 +20,11 @@
--z-base: 10; --z-base: 10;
--z-modal: 30; --z-modal: 30;
--z-overlay: 50; --z-overlay: 50;
/* Border Radius */
--border-radius-base: 12px;
--border-radius-sm: 8px;
--border-radius-xs: 4px;
} }
[data-theme="dark"] { [data-theme="dark"] {
@@ -61,7 +66,7 @@ body {
padding: 2px 8px; padding: 2px 8px;
margin: 2px; margin: 2px;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 3px; border-radius: var(--border-radius-xs);
display: inline-block; display: inline-block;
line-height: 1.2; line-height: 1.2;
font-size: 14px; font-size: 14px;
@@ -86,7 +91,7 @@ body {
.lora-card { .lora-card {
background: var(--lora-surface); background: var(--lora-surface);
border: 1px solid var(--lora-border); border: 1px solid var(--lora-border);
border-radius: 12px; border-radius: var(--border-radius-base);
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
transition: transform 160ms ease-out; transition: transform 160ms ease-out;
aspect-ratio: 896/1152; aspect-ratio: 896/1152;
@@ -130,18 +135,22 @@ body {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: var(--border-radius-base);
overflow: hidden; /* 添加此行以限制子元素不超出边界 */
} }
.card-preview img { .card-preview img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
border-radius: var(--border-radius-base); /* 与容器相同的圆角 */
} }
.card-preview video { .card-preview video {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
border-radius: var(--border-radius-base); /* 与容器相同的圆角 */
} }
.card-footer { .card-footer {
@@ -237,7 +246,7 @@ body {
display: inline-block; display: inline-block;
background: #f0f0f0; background: #f0f0f0;
padding: 2px 6px; padding: 2px 6px;
border-radius: 4px; border-radius: var(--border-radius-xs);
margin-right: 6px; margin-right: 6px;
} }
@@ -296,7 +305,7 @@ body.modal-open {
max-width: 800px; max-width: 800px;
margin: 2rem auto; margin: 2rem auto;
background: var(--lora-surface); background: var(--lora-surface);
border-radius: 12px; border-radius: var(--border-radius-base);
padding: var(--space-3); padding: var(--space-3);
border: 1px solid var(--lora-border); border: 1px solid var(--lora-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
@@ -316,7 +325,7 @@ body.modal-open {
.delete-model-info { .delete-model-info {
background: var(--lora-surface); background: var(--lora-surface);
border: 1px solid var(--lora-border); border: 1px solid var(--lora-border);
border-radius: 8px; border-radius: var(--border-radius-sm);
padding: var(--space-2); padding: var(--space-2);
margin: var(--space-2) 0; margin: var(--space-2) 0;
color: var(--text-color); color: var(--text-color);
@@ -355,7 +364,7 @@ body.modal-open {
/* Update info display styling */ /* Update info display styling */
background: var(--lora-surface); background: var(--lora-surface);
border: 1px solid var(--lora-border); border: 1px solid var(--lora-border);
border-radius: 8px; border-radius: var(--border-radius-sm);
padding: var(--space-2); padding: var(--space-2);
margin: var(--space-2) 0; margin: var(--space-2) 0;
color: var(--text-color); color: var(--text-color);
@@ -451,7 +460,7 @@ body.modal-open {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
padding: 2px var(--space-1); padding: 2px var(--space-1);
border-radius: 4px; border-radius: var(--border-radius-xs);
backdrop-filter: blur(2px); backdrop-filter: blur(2px);
font-size: 0.85em; font-size: 0.85em;
} }
@@ -473,7 +482,7 @@ body.modal-open {
background: var(--lora-surface); background: var(--lora-surface);
backdrop-filter: blur(24px); backdrop-filter: blur(24px);
padding: var(--space-3); padding: var(--space-3);
border-radius: 12px; border-radius: var(--border-radius-base);
text-align: center; text-align: center;
border: 1px solid var(--lora-border); border: 1px solid var(--lora-border);
} }
@@ -560,7 +569,7 @@ body.modal-open {
.trigger-words { .trigger-words {
background: var(--lora-surface); background: var(--lora-surface);
border: 1px solid var(--lora-border); border: 1px solid var(--lora-border);
border-radius: 8px; border-radius: var(--border-radius-sm);
padding: var(--space-2); padding: var(--space-2);
margin: var(--space-2) 0; margin: var(--space-2) 0;
} }
@@ -619,7 +628,7 @@ body.modal-open {
background: var(--lora-surface); background: var(--lora-surface);
color: var(--text-color); color: var(--text-color);
padding: 12px 24px; padding: 12px 24px;
border-radius: 8px; border-radius: var(--border-radius-sm);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: calc(var(--z-overlay) + 10); /* 确保 toast 显示在模态窗口之上 */ z-index: calc(var(--z-overlay) + 10); /* 确保 toast 显示在模态窗口之上 */
opacity: 0; opacity: 0;