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

Enhance modal styling and improve trigger words display logic

Browse Source
This commit is contained in:
Will Miao
2025-01-29 23:48:32 +08:00
parent 4abcc75092
commit 9656f136c6
2 changed files with 101 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
static/css/style.css
View File

@@ -6,7 +6,7 @@
/* Color System */
--lora-accent: oklch(68% 0.28 256);
--lora-surface: oklch(100% 0 0 / 0.4);
--lora-surface: oklch(100% 0 0 / 0.95);
--lora-border: oklch(90% 0.02 256 / 0.15);
--lora-text: oklch(95% 0.02 256);
--lora-error: oklch(75% 0.32 29);
@@ -299,6 +299,7 @@ body.modal-open {
border-radius: 12px;
padding: var(--space-3);
border: 1px solid var(--lora-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.carousel {
@@ -424,15 +425,79 @@ body.modal-open {
}
.model-link a {
color: #34b4eb;
color: var(--lora-accent);
text-decoration: none;
font-size: 1.3em;
opacity: 0.9;
font-size: 1.1em;
transition: opacity 0.2s;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
text-shadow: none;
}
.model-link a:hover {
opacity: 1;
text-decoration: underline;
opacity: 0.8;
text-decoration: none;
}
.modal-content h2 {
color: var(--text-color);
margin-bottom: var(--space-2);
font-size: 1.5em;
}
.description {
color: var(--text-color);
margin: var(--space-2) 0;
line-height: 1.4;
}
.trigger-words {
background: var(--lora-surface);
border: 1px solid var(--lora-border);
border-radius: 8px;
padding: var(--space-2);
margin: var(--space-2) 0;
}
.trigger-words strong {
display: block;
margin-bottom: var(--space-1);
color: var(--text-color);
}
.word-list {
color: var(--lora-accent);
font-size: 1.1em;
font-weight: 500;
letter-spacing: 0.02em;
}
.copy-btn {
background: transparent;
border: none;
cursor: pointer;
padding: var(--space-1);
margin-left: var(--space-1);
color: var(--lora-accent);
opacity: 0.8;
transition: opacity 0.2s;
}
.copy-btn:hover {
opacity: 1;
}
.close {
position: absolute;
top: var(--space-2);
right: var(--space-2);
background: transparent;
border: none;
color: var(--text-color);
font-size: 1.5em;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s;
}
.close:hover {
opacity: 1;
}

6
static/js/script.js
View File

@@ -180,12 +180,14 @@ function showModal(lora) {
<div class="description">About this version: ${lora.description ? lora.description : 'N/A'}</div>
<div class="trigger-words">
<strong>Trigger Words:</strong>
<span class="word-list">${lora.trainedWords ? lora.trainedWords.join(', ').toUpperCase() : 'N/A'}</span>
<button class="copy-btn" onclick="navigator.clipboard.writeText('${lora.trainedWords ? lora.trainedWords.join(', ').toUpperCase() : ''}')">
<span class="word-list">${lora.trainedWords?.length ? lora.trainedWords.join(', ').toUpperCase() : 'N/A'}</span>
${lora.trainedWords?.length ? `
<button class="copy-btn" onclick="navigator.clipboard.writeText('${lora.trainedWords.join(', ').toUpperCase()}')">
<svg width="16" height="16" viewBox="0 0 24 24">
<path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
</svg>
</button>
` : ''}
</div>
<div class="model-link">
<a href="https://civitai.com/models/${lora.modelId}?modelVersionId=${lora.id}" target="_blank">more details on CivitAI</a>