diff --git a/web/linker.js b/web/linker.js
index 63692e9..7325d2e 100644
--- a/web/linker.js
+++ b/web/linker.js
@@ -239,12 +239,14 @@ class LinkerManagerDialog extends ComfyDialog {
const modelCardUrl = downloadSource.model_url || this.getModelCardUrl(downloadSource.url);
let html = `
`;
- html += `
`;
+ html += ``;
+ html += `
`;
html += `☁ Download${sizeDisplay ? ` (${sizeDisplay})` : ''}`;
html += ` `;
if (isCivitaiSource && modelCardUrl) {
- html += `
Open on CivitAI `;
+ html += `
Open on CivitAI `;
}
+ html += `
`;
html += ``;
html += `${isFromWorkflow ? 'URL from workflow' : sourceLabel} `;
if (modelCardUrl) {
@@ -252,9 +254,6 @@ class LinkerManagerDialog extends ComfyDialog {
} else {
html += `${formattedDownloadName.display} `;
}
- if (isCivitaiSource) {
- html += `Direct CivitAI download can require an API key for some models. `;
- }
html += `
`;
html += this.renderDownloadTargetControls(missing, downloadSource.directory || downloadSource.category || 'checkpoints');
html += ` `;
@@ -305,7 +304,7 @@ class LinkerManagerDialog extends ComfyDialog {
html += ``;
html += this.getConfidenceBadge(match.confidence);
html += `${formattedPath.display} `;
- html += ``;
+ html += ``;
html += `🔗 Link`;
html += ` `;
html += `
`;
@@ -323,7 +322,7 @@ class LinkerManagerDialog extends ComfyDialog {
html += ``;
html += this.getConfidenceBadge(match.confidence);
html += `${match.filename || match.path?.split(/[/\\]/).pop()} `;
- html += `🔗 Link `;
+ html += `🔗 Link `;
html += `
`;
}
html += ``;
@@ -1308,8 +1307,8 @@ class LinkerManagerDialog extends ComfyDialog {
background: var(--ml-card-bg);
border: 1px solid transparent;
border-radius: var(--ml-radius-lg);
- padding: 12px;
- margin-bottom: 10px;
+ padding: 10px 12px;
+ margin-bottom: 4px;
transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.018);
font-family: "Segoe UI Variable", "Segoe UI", sans-serif;
@@ -1331,17 +1330,17 @@ class LinkerManagerDialog extends ComfyDialog {
align-items: flex-start;
justify-content: space-between;
gap: 10px;
- margin-bottom: 8px;
+ margin-bottom: 6px;
}
.ml-card-title-wrap {
min-width: 0;
flex: 1;
display: grid;
- gap: 6px;
+ gap: 4px;
}
.ml-card-title-meta {
display: grid;
- gap: 4px;
+ gap: 2px;
}
.ml-card-title {
font-size: 15px;
@@ -1446,7 +1445,7 @@ class LinkerManagerDialog extends ComfyDialog {
.ml-columns {
display: grid;
grid-template-columns: 1fr 1fr;
- gap: 10px;
+ gap: 8px;
}
@media (max-width: 700px) {
.ml-missing-summary {
@@ -1468,7 +1467,7 @@ class LinkerManagerDialog extends ComfyDialog {
background: var(--ml-panel-bg);
border: 1px solid transparent;
border-radius: var(--ml-radius-md);
- padding: 12px;
+ padding: 10px;
box-shadow: inset 0 0 0 1px rgba(148,163,184,0.06);
}
.ml-column-header {
@@ -1477,8 +1476,8 @@ class LinkerManagerDialog extends ComfyDialog {
color: var(--ml-text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
- margin-bottom: 10px;
- padding-bottom: 8px;
+ margin-bottom: 8px;
+ padding-bottom: 6px;
border-bottom: 1px solid var(--ml-divider);
}
.ml-muted-note,
@@ -1557,9 +1556,9 @@ class LinkerManagerDialog extends ComfyDialog {
display: flex;
align-items: center;
gap: 8px;
- padding: 8px 10px;
+ padding: 6px 8px;
border-radius: var(--ml-radius-sm);
- margin-bottom: 6px;
+ margin-bottom: 4px;
background: rgba(255,255,255,0.016);
border: 1px solid transparent;
transition: background 0.15s ease, box-shadow 0.15s ease;
@@ -1649,10 +1648,10 @@ class LinkerManagerDialog extends ComfyDialog {
background: #d32f2f;
}
.ml-btn-sm {
- min-height: 28px;
- padding: 3px 8px;
- font-size: 10px;
- border-radius: 9px;
+ min-height: 24px;
+ padding: 2px 7px;
+ font-size: 9px;
+ border-radius: 8px;
}
.ml-btn-ghost {
background: rgba(255,255,255,0.018);
@@ -1666,14 +1665,20 @@ class LinkerManagerDialog extends ComfyDialog {
border-color: rgba(255,255,255,0.14);
}
.ml-btn-utility {
- padding-inline: 8px;
+ padding-inline: 6px;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--ml-text-soft);
}
+ .ml-btn-link-compact {
+ min-width: 58px;
+ gap: 4px;
+ padding-inline: 5px;
+ font-size: 8.75px;
+ }
.ml-btn-icon-only {
- width: 28px;
- min-width: 28px;
+ width: 24px;
+ min-width: 24px;
padding: 0;
aspect-ratio: 1;
}
@@ -1683,7 +1688,7 @@ class LinkerManagerDialog extends ComfyDialog {
.ml-card-actions .ml-btn,
.ml-match-row .ml-btn,
.ml-combo-row .ml-btn {
- min-height: 28px;
+ min-height: 24px;
}
.ml-search-source-btn {
border-radius: 999px;
@@ -1697,13 +1702,28 @@ class LinkerManagerDialog extends ComfyDialog {
/* Download Section */
.ml-download-section {
display: grid;
- gap: 10px;
- padding: 11px;
+ gap: 8px;
+ padding: 10px;
background: var(--ml-surface-elevated);
border-radius: var(--ml-radius-md);
border: 1px solid transparent;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
+ .ml-download-actions {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 8px;
+ align-items: center;
+ }
+ .ml-btn-download-main {
+ justify-content: flex-start;
+ padding-inline: 10px;
+ font-size: 8.9px;
+ }
+ .ml-btn-download-side {
+ min-width: 132px;
+ font-size: 8.6px;
+ }
.ml-status-inline {
display: flex;
align-items: center;
@@ -1736,15 +1756,15 @@ class LinkerManagerDialog extends ComfyDialog {
}
.ml-combo-section {
position: relative;
- margin-top: 12px;
- padding-top: 12px;
+ margin-top: 8px;
+ padding-top: 8px;
border-top: 1px solid var(--ml-divider);
}
.ml-combo-row {
display: flex;
align-items: center;
gap: 6px;
- margin-bottom: 6px;
+ margin-bottom: 4px;
}
.ml-combo-label {
opacity: 0.9;
@@ -1758,8 +1778,8 @@ class LinkerManagerDialog extends ComfyDialog {
.ml-combo-input {
flex: 1;
min-width: 0;
- min-height: 34px;
- padding: 7px 11px;
+ min-height: 30px;
+ padding: 5px 10px;
background: rgba(12,16,22,0.5);
color: var(--ml-text);
border: 1px solid rgba(255,255,255,0.1);
@@ -1931,6 +1951,7 @@ class LinkerManagerDialog extends ComfyDialog {
linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.005) 100%);
position: relative;
z-index: 2;
+ border-bottom: 1px solid var(--ml-border);
}
.ml-tab {
position: relative;
@@ -1958,11 +1979,11 @@ class LinkerManagerDialog extends ComfyDialog {
}
.ml-tab.ml-tab-active {
color: var(--ml-text, #eef2f7);
- background: #1e1e1e;
+ background: var(--ml-bg);
border-color: rgba(255,255,255,0.16);
box-shadow:
- 0 -10px 24px rgba(0,0,0,0.12),
- 0 10px 20px rgba(0,0,0,0.14),
+ 0 -8px 18px rgba(0,0,0,0.1),
+ 0 6px 10px rgba(0,0,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.03);
transform: translateY(1px);
opacity: 1;
@@ -1975,7 +1996,7 @@ class LinkerManagerDialog extends ComfyDialog {
right: 0;
bottom: -6px;
height: 8px;
- background: #1e1e1e;
+ background: var(--ml-bg);
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}