feat: add StabilityMatrix-style Model Manager service
New FastAPI container (port 8189) to download and manage models: - Installed Models, Add/Download (CivitAI/HuggingFace/direct URL), Settings views - Persistent SQLite storage for API keys and download history (./sparkyui-data) - Downloads land in ./models, auto-sorted into ComfyUI's standard subfolders - Default COMFYUI_HOST_PATH and SPARKYUI_DATA_PATH to the project root - Wire docker-compose service, env defaults, gitignore, README docs Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,292 @@
|
||||
"use strict";
|
||||
|
||||
const $ = (sel) => document.querySelector(sel);
|
||||
const $$ = (sel) => Array.from(document.querySelectorAll(sel));
|
||||
|
||||
let MODEL_TYPES = [];
|
||||
let downloadsTimer = null;
|
||||
|
||||
// ---- helpers --------------------------------------------------------------
|
||||
|
||||
async function api(path, opts) {
|
||||
const resp = await fetch(path, opts);
|
||||
const ct = resp.headers.get("content-type") || "";
|
||||
const data = ct.includes("application/json") ? await resp.json() : null;
|
||||
if (!resp.ok) {
|
||||
const msg = (data && data.detail) ? data.detail : `HTTP ${resp.status}`;
|
||||
throw new Error(msg);
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
function fmtBytes(n) {
|
||||
if (!n) return "0 B";
|
||||
const units = ["B", "KB", "MB", "GB", "TB"];
|
||||
let i = 0;
|
||||
while (n >= 1024 && i < units.length - 1) { n /= 1024; i++; }
|
||||
return `${n.toFixed(n < 10 && i > 0 ? 1 : 0)} ${units[i]}`;
|
||||
}
|
||||
|
||||
function fmtDate(epoch) {
|
||||
if (!epoch) return "";
|
||||
return new Date(epoch * 1000).toLocaleString();
|
||||
}
|
||||
|
||||
// ---- navigation -----------------------------------------------------------
|
||||
|
||||
function showView(name) {
|
||||
$$(".nav-item").forEach((b) => b.classList.toggle("active", b.dataset.view === name));
|
||||
$$(".view").forEach((v) => v.classList.toggle("active", v.id === `view-${name}`));
|
||||
if (name === "installed") loadModels();
|
||||
if (name === "download") { loadDownloads(); startDownloadsPolling(); }
|
||||
else stopDownloadsPolling();
|
||||
if (name === "settings") loadSettings();
|
||||
}
|
||||
|
||||
$$(".nav-item").forEach((btn) =>
|
||||
btn.addEventListener("click", () => showView(btn.dataset.view)));
|
||||
|
||||
// ---- model types ----------------------------------------------------------
|
||||
|
||||
async function loadModelTypes() {
|
||||
MODEL_TYPES = await api("/api/model-types");
|
||||
const sel = $("#dlType");
|
||||
sel.innerHTML = "";
|
||||
for (const t of MODEL_TYPES) {
|
||||
const opt = document.createElement("option");
|
||||
opt.value = t.key;
|
||||
opt.textContent = t.label;
|
||||
sel.appendChild(opt);
|
||||
}
|
||||
}
|
||||
|
||||
// ---- installed models -----------------------------------------------------
|
||||
|
||||
async function loadModels() {
|
||||
const container = $("#modelsContainer");
|
||||
try {
|
||||
const models = await api("/api/models");
|
||||
renderModels(models);
|
||||
} catch (err) {
|
||||
container.innerHTML = `<p class="empty">Error: ${err.message}</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderModels(models) {
|
||||
const container = $("#modelsContainer");
|
||||
const filter = $("#modelSearch").value.trim().toLowerCase();
|
||||
const shown = filter
|
||||
? models.filter((m) => m.name.toLowerCase().includes(filter))
|
||||
: models;
|
||||
|
||||
if (!shown.length) {
|
||||
container.innerHTML = `<p class="empty">${
|
||||
models.length ? "No models match your filter." : "No models installed yet. Use Add / Download."
|
||||
}</p>`;
|
||||
return;
|
||||
}
|
||||
|
||||
const groups = {};
|
||||
for (const m of shown) (groups[m.type_label] ||= []).push(m);
|
||||
|
||||
container.innerHTML = "";
|
||||
for (const label of Object.keys(groups).sort()) {
|
||||
const group = document.createElement("div");
|
||||
group.className = "type-group";
|
||||
group.innerHTML = `<h3>${label} · ${groups[label].length}</h3>`;
|
||||
const grid = document.createElement("div");
|
||||
grid.className = "model-grid";
|
||||
for (const m of groups[label]) {
|
||||
const card = document.createElement("div");
|
||||
card.className = "model-card";
|
||||
card.innerHTML = `
|
||||
<div class="name"></div>
|
||||
<div class="meta">${fmtBytes(m.size)} · ${fmtDate(m.mtime)}</div>
|
||||
<div class="card-foot">
|
||||
<span class="meta">${m.folder}/</span>
|
||||
<button class="btn danger">Delete</button>
|
||||
</div>`;
|
||||
card.querySelector(".name").textContent = m.name;
|
||||
card.querySelector(".danger").addEventListener("click", () => deleteModel(m));
|
||||
grid.appendChild(card);
|
||||
}
|
||||
group.appendChild(grid);
|
||||
container.appendChild(group);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteModel(m) {
|
||||
if (!confirm(`Delete ${m.name}?`)) return;
|
||||
try {
|
||||
await api("/api/models", {
|
||||
method: "DELETE",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ folder: m.folder, name: m.name }),
|
||||
});
|
||||
loadModels();
|
||||
} catch (err) {
|
||||
alert(`Delete failed: ${err.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
$("#refreshModels").addEventListener("click", loadModels);
|
||||
$("#modelSearch").addEventListener("input", () => loadModels());
|
||||
|
||||
// ---- downloads ------------------------------------------------------------
|
||||
|
||||
function detectSource(url) {
|
||||
url = url.toLowerCase();
|
||||
if (url.includes("civitai.com")) return "CivitAI (type auto-detected, API key used)";
|
||||
if (url.includes("huggingface.co") || url.includes("hf.co")) return "HuggingFace (token used)";
|
||||
if (url) return "Direct download";
|
||||
return "";
|
||||
}
|
||||
|
||||
$("#dlUrl").addEventListener("input", (e) => {
|
||||
$("#sourceHint").textContent = detectSource(e.target.value.trim());
|
||||
});
|
||||
|
||||
$("#startDownload").addEventListener("click", async () => {
|
||||
const url = $("#dlUrl").value.trim();
|
||||
const msg = $("#dlMsg");
|
||||
if (!url) { msg.className = "form-msg err"; msg.textContent = "Enter a URL."; return; }
|
||||
const btn = $("#startDownload");
|
||||
btn.disabled = true;
|
||||
msg.className = "form-msg"; msg.textContent = "Starting…";
|
||||
try {
|
||||
await api("/api/downloads", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
url,
|
||||
model_type: $("#dlType").value || null,
|
||||
filename: $("#dlFilename").value.trim() || null,
|
||||
}),
|
||||
});
|
||||
msg.className = "form-msg ok"; msg.textContent = "Download started.";
|
||||
$("#dlUrl").value = ""; $("#dlFilename").value = ""; $("#sourceHint").textContent = "";
|
||||
loadDownloads();
|
||||
startDownloadsPolling();
|
||||
} catch (err) {
|
||||
msg.className = "form-msg err"; msg.textContent = err.message;
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
async function loadDownloads() {
|
||||
let rows;
|
||||
try {
|
||||
rows = await api("/api/downloads");
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
renderDownloads(rows);
|
||||
|
||||
const active = rows.some((r) => r.status === "downloading" || r.status === "queued");
|
||||
if (!active) stopDownloadsPolling();
|
||||
}
|
||||
|
||||
function renderDownloads(rows) {
|
||||
const container = $("#downloadsContainer");
|
||||
if (!rows.length) {
|
||||
container.innerHTML = `<p class="empty">No downloads yet.</p>`;
|
||||
return;
|
||||
}
|
||||
container.innerHTML = "";
|
||||
for (const r of rows) {
|
||||
const pct = r.bytes_total ? Math.floor((r.bytes_done / r.bytes_total) * 100) : 0;
|
||||
const row = document.createElement("div");
|
||||
row.className = "dl-row";
|
||||
const sizeText = r.bytes_total
|
||||
? `${fmtBytes(r.bytes_done)} / ${fmtBytes(r.bytes_total)} (${pct}%)`
|
||||
: fmtBytes(r.bytes_done);
|
||||
const sub = r.status === "failed" && r.error ? r.error
|
||||
: `${r.source} · ${r.model_type} · ${sizeText}`;
|
||||
row.innerHTML = `
|
||||
<div class="dl-top">
|
||||
<div>
|
||||
<div class="dl-name"></div>
|
||||
<div class="dl-sub"></div>
|
||||
</div>
|
||||
<div class="dl-actions">
|
||||
<span class="dl-status ${r.status}">${r.status}</span>
|
||||
<button class="btn danger"></button>
|
||||
</div>
|
||||
</div>
|
||||
${r.status === "downloading"
|
||||
? `<div class="progress"><span style="width:${pct}%"></span></div>` : ""}`;
|
||||
row.querySelector(".dl-name").textContent = r.filename || r.url;
|
||||
row.querySelector(".dl-sub").textContent = sub;
|
||||
const actionBtn = row.querySelector(".danger");
|
||||
const active = r.status === "downloading" || r.status === "queued";
|
||||
actionBtn.textContent = active ? "Cancel" : "Remove";
|
||||
actionBtn.addEventListener("click", () => removeDownload(r.id));
|
||||
container.appendChild(row);
|
||||
}
|
||||
}
|
||||
|
||||
async function removeDownload(id) {
|
||||
try {
|
||||
await api(`/api/downloads/${id}`, { method: "DELETE" });
|
||||
loadDownloads();
|
||||
} catch (err) {
|
||||
alert(`Failed: ${err.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
function startDownloadsPolling() {
|
||||
if (downloadsTimer) return;
|
||||
downloadsTimer = setInterval(loadDownloads, 1000);
|
||||
}
|
||||
function stopDownloadsPolling() {
|
||||
if (downloadsTimer) { clearInterval(downloadsTimer); downloadsTimer = null; }
|
||||
}
|
||||
|
||||
// ---- settings -------------------------------------------------------------
|
||||
|
||||
async function loadSettings() {
|
||||
try {
|
||||
const s = await api("/api/settings");
|
||||
setBadge($("#civitaiBadge"), s.civitai_api_key_set);
|
||||
setBadge($("#hfBadge"), s.huggingface_token_set);
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
function setBadge(el, isSet) {
|
||||
el.textContent = isSet ? "configured" : "not set";
|
||||
el.className = `badge ${isSet ? "set" : "unset"}`;
|
||||
}
|
||||
|
||||
$("#saveSettings").addEventListener("click", async () => {
|
||||
const msg = $("#settingsMsg");
|
||||
const body = {};
|
||||
const civ = $("#civitaiKey").value;
|
||||
const hf = $("#hfToken").value;
|
||||
// Only send fields the user actually typed into (blank = leave unchanged).
|
||||
if (civ !== "") body.civitai_api_key = civ;
|
||||
if (hf !== "") body.huggingface_token = hf;
|
||||
if (!Object.keys(body).length) {
|
||||
msg.className = "form-msg"; msg.textContent = "Nothing to save.";
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await api("/api/settings", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
msg.className = "form-msg ok"; msg.textContent = "Saved.";
|
||||
$("#civitaiKey").value = ""; $("#hfToken").value = "";
|
||||
loadSettings();
|
||||
} catch (err) {
|
||||
msg.className = "form-msg err"; msg.textContent = err.message;
|
||||
}
|
||||
});
|
||||
|
||||
// ---- boot -----------------------------------------------------------------
|
||||
|
||||
(async function init() {
|
||||
await loadModelTypes();
|
||||
showView("installed");
|
||||
})();
|
||||
@@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>SparkyUI · Model Manager</title>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<aside class="sidebar">
|
||||
<div class="brand">
|
||||
<span class="spark">⚡</span>
|
||||
<div>
|
||||
<div class="brand-title">SparkyUI</div>
|
||||
<div class="brand-sub">Model Manager</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav>
|
||||
<button class="nav-item active" data-view="installed">
|
||||
<span class="nav-ico">▦</span> Installed Models
|
||||
</button>
|
||||
<button class="nav-item" data-view="download">
|
||||
<span class="nav-ico">↓</span> Add / Download
|
||||
</button>
|
||||
<button class="nav-item" data-view="settings">
|
||||
<span class="nav-ico">⚙</span> Settings
|
||||
</button>
|
||||
</nav>
|
||||
<div class="sidebar-foot" id="modelsDir"></div>
|
||||
</aside>
|
||||
|
||||
<main class="content">
|
||||
<!-- Installed Models -->
|
||||
<section class="view active" id="view-installed">
|
||||
<header class="view-head">
|
||||
<h1>Installed Models</h1>
|
||||
<div class="head-actions">
|
||||
<input type="search" id="modelSearch" placeholder="Filter…" />
|
||||
<button class="btn" id="refreshModels">Refresh</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="modelsContainer" class="models-container">
|
||||
<p class="empty">Loading…</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Add / Download -->
|
||||
<section class="view" id="view-download">
|
||||
<header class="view-head"><h1>Add / Download Model</h1></header>
|
||||
<div class="card form-card">
|
||||
<label>Download URL</label>
|
||||
<input type="text" id="dlUrl"
|
||||
placeholder="Direct URL, CivitAI model link, or HuggingFace resolve URL" />
|
||||
<div class="source-hint" id="sourceHint"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<label>Model type</label>
|
||||
<select id="dlType"></select>
|
||||
<div class="hint">CivitAI links auto-detect type; leave as-is to use it.</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label>Filename (optional)</label>
|
||||
<input type="text" id="dlFilename" placeholder="Auto-detected if blank" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn primary" id="startDownload">Start Download</button>
|
||||
<span class="form-msg" id="dlMsg"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="subhead">Downloads</h2>
|
||||
<div id="downloadsContainer" class="downloads-container">
|
||||
<p class="empty">No downloads yet.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Settings -->
|
||||
<section class="view" id="view-settings">
|
||||
<header class="view-head"><h1>Settings</h1></header>
|
||||
<div class="card form-card">
|
||||
<h2 class="subhead first">API Keys</h2>
|
||||
<p class="hint">
|
||||
Stored persistently and sent as auth headers when downloading from the
|
||||
matching site. Leave blank to keep the existing value.
|
||||
</p>
|
||||
|
||||
<label>CivitAI API Key <span class="badge" id="civitaiBadge"></span></label>
|
||||
<input type="password" id="civitaiKey" placeholder="••••••••" autocomplete="off" />
|
||||
|
||||
<label>HuggingFace Token <span class="badge" id="hfBadge"></span></label>
|
||||
<input type="password" id="hfToken" placeholder="••••••••" autocomplete="off" />
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn primary" id="saveSettings">Save</button>
|
||||
<span class="form-msg" id="settingsMsg"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card form-card">
|
||||
<h2 class="subhead first">Model Storage</h2>
|
||||
<p class="hint">
|
||||
Models are saved into the project <code>models/</code> directory, sorted into
|
||||
ComfyUI's standard sub-folders by type. ComfyUI reads from the same folder.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
<script src="/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,152 @@
|
||||
:root {
|
||||
--bg: #14161c;
|
||||
--bg-2: #1b1e27;
|
||||
--bg-3: #232735;
|
||||
--border: #2c3142;
|
||||
--text: #e6e8ee;
|
||||
--text-dim: #99a0b3;
|
||||
--accent: #6c8cff;
|
||||
--accent-2: #8a6cff;
|
||||
--green: #36c98b;
|
||||
--red: #ef5d6b;
|
||||
--amber: #f0b400;
|
||||
--radius: 10px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.app { display: flex; height: 100vh; }
|
||||
|
||||
/* ---- sidebar ---- */
|
||||
.sidebar {
|
||||
width: 240px;
|
||||
flex-shrink: 0;
|
||||
background: var(--bg-2);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 18px 14px;
|
||||
}
|
||||
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 6px 22px; }
|
||||
.brand .spark { font-size: 26px; }
|
||||
.brand-title { font-weight: 700; font-size: 16px; }
|
||||
.brand-sub { color: var(--text-dim); font-size: 12px; }
|
||||
|
||||
nav { display: flex; flex-direction: column; gap: 4px; }
|
||||
.nav-item {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
background: transparent; color: var(--text-dim);
|
||||
border: none; border-radius: 8px;
|
||||
padding: 10px 12px; font-size: 14px; text-align: left;
|
||||
cursor: pointer; transition: background .12s, color .12s;
|
||||
}
|
||||
.nav-item:hover { background: var(--bg-3); color: var(--text); }
|
||||
.nav-item.active {
|
||||
background: linear-gradient(90deg, rgba(108,140,255,.18), rgba(138,108,255,.12));
|
||||
color: var(--text);
|
||||
}
|
||||
.nav-ico { width: 18px; text-align: center; opacity: .85; }
|
||||
.sidebar-foot {
|
||||
margin-top: auto; color: var(--text-dim); font-size: 11px;
|
||||
word-break: break-all; padding: 8px 6px 0;
|
||||
}
|
||||
|
||||
/* ---- content ---- */
|
||||
.content { flex: 1; overflow-y: auto; padding: 26px 32px; }
|
||||
.view { display: none; }
|
||||
.view.active { display: block; }
|
||||
.view-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
|
||||
.view-head h1 { font-size: 22px; margin: 0; }
|
||||
.head-actions { display: flex; gap: 10px; }
|
||||
.subhead { font-size: 15px; color: var(--text-dim); margin: 28px 0 12px; }
|
||||
.subhead.first { margin-top: 0; }
|
||||
|
||||
/* ---- inputs/buttons ---- */
|
||||
input, select {
|
||||
background: var(--bg-3); color: var(--text);
|
||||
border: 1px solid var(--border); border-radius: 8px;
|
||||
padding: 9px 11px; font-size: 14px; width: 100%;
|
||||
}
|
||||
input:focus, select:focus { outline: none; border-color: var(--accent); }
|
||||
input[type=search] { width: 200px; }
|
||||
label { display: block; margin: 14px 0 6px; color: var(--text-dim); font-size: 13px; }
|
||||
|
||||
.btn {
|
||||
background: var(--bg-3); color: var(--text);
|
||||
border: 1px solid var(--border); border-radius: 8px;
|
||||
padding: 9px 16px; font-size: 14px; cursor: pointer;
|
||||
transition: background .12s, border-color .12s;
|
||||
}
|
||||
.btn:hover { background: #2a3042; }
|
||||
.btn.primary { background: var(--accent); border-color: var(--accent); color: #0c1020; font-weight: 600; }
|
||||
.btn.primary:hover { background: #5b7dff; }
|
||||
.btn.danger { color: var(--red); border-color: transparent; background: transparent; padding: 6px 10px; }
|
||||
.btn.danger:hover { background: rgba(239,93,107,.12); }
|
||||
.btn:disabled { opacity: .5; cursor: not-allowed; }
|
||||
|
||||
/* ---- cards ---- */
|
||||
.card {
|
||||
background: var(--bg-2); border: 1px solid var(--border);
|
||||
border-radius: var(--radius); padding: 20px; margin-bottom: 18px;
|
||||
}
|
||||
.form-card { max-width: 720px; }
|
||||
.row { display: flex; gap: 18px; }
|
||||
.col { flex: 1; }
|
||||
.hint { color: var(--text-dim); font-size: 12px; margin-top: 6px; }
|
||||
.source-hint { font-size: 12px; margin-top: 8px; min-height: 16px; color: var(--accent); }
|
||||
.form-actions { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
|
||||
.form-msg { font-size: 13px; }
|
||||
.form-msg.ok { color: var(--green); }
|
||||
.form-msg.err { color: var(--red); }
|
||||
.badge { font-size: 11px; padding: 1px 8px; border-radius: 10px; margin-left: 6px; }
|
||||
.badge.set { background: rgba(54,201,139,.18); color: var(--green); }
|
||||
.badge.unset { background: var(--bg-3); color: var(--text-dim); }
|
||||
code { background: var(--bg-3); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
|
||||
|
||||
/* ---- installed models ---- */
|
||||
.models-container { display: flex; flex-direction: column; gap: 22px; }
|
||||
.type-group h3 {
|
||||
font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
|
||||
color: var(--text-dim); margin: 0 0 10px; font-weight: 600;
|
||||
}
|
||||
.model-grid {
|
||||
display: grid; gap: 12px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
}
|
||||
.model-card {
|
||||
background: var(--bg-2); border: 1px solid var(--border);
|
||||
border-radius: var(--radius); padding: 14px;
|
||||
display: flex; flex-direction: column; gap: 6px;
|
||||
}
|
||||
.model-card .name { font-weight: 600; word-break: break-all; }
|
||||
.model-card .meta { color: var(--text-dim); font-size: 12px; }
|
||||
.model-card .card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
|
||||
.empty { color: var(--text-dim); }
|
||||
|
||||
/* ---- downloads ---- */
|
||||
.downloads-container { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
|
||||
.dl-row {
|
||||
background: var(--bg-2); border: 1px solid var(--border);
|
||||
border-radius: var(--radius); padding: 12px 14px;
|
||||
}
|
||||
.dl-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
|
||||
.dl-name { font-weight: 600; word-break: break-all; }
|
||||
.dl-sub { color: var(--text-dim); font-size: 12px; margin-top: 2px; }
|
||||
.dl-status { font-size: 12px; padding: 2px 9px; border-radius: 10px; white-space: nowrap; }
|
||||
.dl-status.downloading { background: rgba(108,140,255,.18); color: var(--accent); }
|
||||
.dl-status.completed { background: rgba(54,201,139,.18); color: var(--green); }
|
||||
.dl-status.failed { background: rgba(239,93,107,.18); color: var(--red); }
|
||||
.dl-status.canceled { background: var(--bg-3); color: var(--text-dim); }
|
||||
.dl-status.queued { background: rgba(240,180,0,.16); color: var(--amber); }
|
||||
.progress { height: 6px; background: var(--bg-3); border-radius: 4px; margin-top: 10px; overflow: hidden; }
|
||||
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); width: 0; transition: width .3s; }
|
||||
.dl-actions { display: flex; align-items: center; gap: 8px; }
|
||||
Reference in New Issue
Block a user