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

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

77
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: 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;
text-decoration: underline;
}

58
static/js/script.js
View File

@@ -170,39 +170,41 @@ document.querySelectorAll('.lora-card').forEach(card => {
});
function showModal(lora) {
const modal = document.getElementById('loraModal');
modal.innerHTML = `
<div class="modal-content">
<h2>${lora.model.name}</h2>
<div class="carousel">
${lora.images.map(img => img.type === 'video' ? `<video controls autoplay muted loop><source src="${img.url}" type="video/mp4">Your browser does not support the video tag.</video>` : `<img src="${img.url}" alt="Preview">`).join('')}
</div>
<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() : ''}')">
const modal = document.getElementById('loraModal');
modal.innerHTML = `
<div class="modal-content">
<h2>${lora.model.name}</h2>
<div class="carousel">
${lora.images.map(img => img.type === 'video' ? `<video controls autoplay muted loop><source src="${img.url}" type="video/mp4">Your browser does not support the video tag.</video>` : `<img src="${img.url}" alt="Preview">`).join('')}
</div>
<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?.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>
</button>
` : ''}
</div>
<div class="model-link">
<a href="https://civitai.com/models/${lora.modelId}?modelVersionId=${lora.id}" target="_blank">more details on CivitAI</a>
</div>
<button class="close" onclick="closeModal()">&times;</button>
</div>
<div class="model-link">
<a href="https://civitai.com/models/${lora.modelId}?modelVersionId=${lora.id}" target="_blank">more details on CivitAI</a>
</div>
<button class="close" onclick="closeModal()">&times;</button>
</div>
`;
modal.style.display = 'block';
document.body.classList.add('modal-open');
`;
modal.style.display = 'block';
document.body.classList.add('modal-open');
// 添加点击事件监听器
modal.onclick = function(event) {
// 如果点击的是模态窗口的背景（不是内容区域），则关闭模态窗口
if (event.target === modal) {
closeModal();
}
};
// 添加点击事件监听器
modal.onclick = function (event) {
// 如果点击的是模态窗口的背景（不是内容区域），则关闭模态窗口
if (event.target === modal) {
closeModal();
}
};
}
function closeModal() {