c3b087020d
UPIA stacks every install in its own
C:\Program Files\...\UXP\Plugins\External\net.wilddragon.dragonflight.uxp_<version>\
folder without removing prior versions. After 10 deploys today there are
11 of them coexisting, and Premiere's loader can pick the wrong one,
which is why v2.1.8 didn't appear to land.
This change makes the running version visible at a glance:
- main.js reads manifest.json at runtime via require('uxp').storage
.localFileSystem.getPluginFolder() so the displayed version is
whatever Premiere actually loaded — never a hand-edited constant
that could drift.
- index.html adds #panel-version inside the status strip (between
host and ⋯) and #brand-version below the brand tag on connect.
- styles.css: small mono chip in --text-4, low key but readable.
If the chip ever shows the wrong version we know the loader picked
a stale dir; if it shows nothing the manifest read itself failed.
The install script needs to remove old _<version> dirs going forward;
the next commit will add that cleanup step to the deploy.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
634 lines
18 KiB
CSS
634 lines
18 KiB
CSS
/* Dragonflight UXP panel — v2.1.8 */
|
|
/* Tokens mirror services/web-ui DESIGN.md (canonical) */
|
|
|
|
:root {
|
|
/* Surfaces */
|
|
--bg-0: #0B0D11;
|
|
--bg-1: #14171E;
|
|
--bg-2: #1B1F27;
|
|
--bg-3: #232833;
|
|
--bg-4: #2D3340;
|
|
|
|
/* Borders + hover overlays */
|
|
--border: rgba(255, 255, 255, 0.06);
|
|
--border-strong: rgba(255, 255, 255, 0.10);
|
|
--border-stronger: rgba(255, 255, 255, 0.14);
|
|
--hover: rgba(255, 255, 255, 0.04);
|
|
--hover-strong: rgba(255, 255, 255, 0.07);
|
|
|
|
/* Text */
|
|
--text-1: #F2F3F6;
|
|
--text-2: #A8AEBC;
|
|
--text-3: #6B7280;
|
|
--text-4: #4B5260;
|
|
|
|
/* Accent + status (canonical from DESIGN.md) */
|
|
--accent: #5B7CFA;
|
|
--accent-h: #6B89FB;
|
|
--accent-soft: rgba(91, 124, 250, 0.14);
|
|
--accent-soft-2: rgba(91, 124, 250, 0.22);
|
|
--accent-text: #B4C3FF;
|
|
|
|
--success: #2DD4A8;
|
|
--warning: #F5A623;
|
|
--danger: #FF5B5B;
|
|
--live: #FF3B30;
|
|
|
|
--danger-soft: rgba(255, 91, 91, 0.14);
|
|
--success-soft: rgba(45, 212, 168, 0.14);
|
|
|
|
/* Legacy aliases — keep so v2.1.x rules using them still resolve */
|
|
--ok: var(--success);
|
|
--warn: var(--warning);
|
|
|
|
/* Type */
|
|
--font-sans: "Geist", -apple-system, "Segoe UI", system-ui, sans-serif;
|
|
--font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
|
|
|
|
--t-fast: 80ms;
|
|
--t-med: 120ms;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
html, body {
|
|
background: var(--bg-0);
|
|
color: var(--text-1);
|
|
font: 12px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#root {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── panes ──────────────────────────────────────────────────────── */
|
|
.pane {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
padding: 10px 10px 0;
|
|
overflow: hidden;
|
|
}
|
|
.pane.hidden { display: none; }
|
|
|
|
/* ── connect screen ─────────────────────────────────────────────── */
|
|
.brand {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 12px 0 16px;
|
|
}
|
|
.brand-icon { color: var(--accent); opacity: 0.85; }
|
|
.brand-title { font-size: 16px; font-weight: 700; color: var(--text-1); }
|
|
.brand-tag {
|
|
font-size: 9px;
|
|
font-weight: 600;
|
|
color: var(--text-3);
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.field-label {
|
|
display: block;
|
|
font-size: 9.5px;
|
|
font-weight: 600;
|
|
color: var(--text-3);
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
margin: 8px 0 3px;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="search"],
|
|
select {
|
|
width: 100%;
|
|
background: var(--bg-3);
|
|
color: var(--text-1);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
padding: 6px 8px;
|
|
font-size: 12px;
|
|
outline: none;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
input:focus, select:focus { border-color: var(--accent); }
|
|
input[type="search"]::-webkit-search-cancel-button { display: none; }
|
|
|
|
/* ── buttons ────────────────────────────────────────────────────── */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
font-size: 11.5px;
|
|
font-weight: 600;
|
|
padding: 6px 10px;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
background: var(--bg-3);
|
|
color: var(--text-1);
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
}
|
|
.btn:disabled { opacity: 0.38; cursor: default; pointer-events: none; }
|
|
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
|
|
.btn-primary:not(:disabled):hover { background: var(--accent-h); border-color: var(--accent-h); }
|
|
.btn-secondary { background: var(--bg-3); border-color: var(--border); }
|
|
.btn-secondary:not(:disabled):hover { background: var(--bg-2); }
|
|
.btn-link { background: transparent; color: var(--text-3); border-color: transparent; padding: 3px 6px; font-weight: 500; }
|
|
.btn-link:hover { color: var(--text-1); }
|
|
.btn-icon { padding: 4px 7px; background: var(--bg-2); border-color: var(--border); }
|
|
.btn-icon:hover { background: var(--bg-3); }
|
|
.btn-sm { font-size: 11px; padding: 5px 8px; }
|
|
|
|
#connect-btn { margin-top: 12px; width: 100%; padding: 8px; }
|
|
|
|
/* ── status msg ──────────────────────────────────────────────────── */
|
|
.status-msg { font-size: 11px; margin-top: 6px; min-height: 16px; }
|
|
.status-msg.error { color: var(--danger); }
|
|
.status-msg.muted { color: var(--text-3); }
|
|
|
|
/* ── dot indicators ──────────────────────────────────────────────── */
|
|
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
|
|
.dot-ok { background: var(--ok); }
|
|
.dot-bad { background: var(--danger); }
|
|
.dot-warn { background: var(--warn); }
|
|
|
|
/* ── status strip + overflow menu (v2.1.8 redesign) ──────────────── */
|
|
/* 24px-tall identity bar. Disconnect lives behind ⋯ — out of the way
|
|
but discoverable. Legacy `.connected-bar` rule is kept as an alias
|
|
so any markup that still uses the old class falls through cleanly. */
|
|
.connected-bar,
|
|
.status-strip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 8px;
|
|
height: 24px;
|
|
background: var(--bg-1);
|
|
border-bottom: 1px solid var(--border);
|
|
margin-bottom: 6px;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
.signal-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--success);
|
|
flex-shrink: 0;
|
|
}
|
|
.connected-host {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--text-2);
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.btn-ghost {
|
|
width: 22px;
|
|
height: 22px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
color: var(--text-3);
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
transition: background var(--t-fast), color var(--t-fast);
|
|
}
|
|
.btn-ghost:hover { background: var(--hover); color: var(--text-1); }
|
|
.menu {
|
|
position: absolute;
|
|
top: 24px;
|
|
right: 4px;
|
|
min-width: 130px;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: 6px;
|
|
padding: 4px;
|
|
z-index: 50;
|
|
}
|
|
.menu-item {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: left;
|
|
padding: 6px 10px;
|
|
font-size: 11.5px;
|
|
font-family: inherit;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-1);
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
}
|
|
.menu-item:hover { background: var(--hover-strong); }
|
|
|
|
/* Tiny version chip — verifies which build is actually running. Lives in
|
|
the status strip (between host and ⋯) and on the connect-pane brand. */
|
|
.panel-version {
|
|
font-family: var(--font-mono);
|
|
font-size: 9.5px;
|
|
color: var(--text-4);
|
|
letter-spacing: 0.04em;
|
|
flex-shrink: 0;
|
|
padding-right: 2px;
|
|
}
|
|
.brand-version {
|
|
font-family: var(--font-mono);
|
|
font-size: 9.5px;
|
|
color: var(--text-4);
|
|
margin-top: 6px;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
/* ── tabs ────────────────────────────────────────────────────────── */
|
|
.tab-nav {
|
|
display: flex;
|
|
gap: 2px;
|
|
margin-bottom: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
.tab-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 5px 10px;
|
|
font-size: 11.5px;
|
|
font-weight: 600;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
color: var(--text-3);
|
|
cursor: pointer;
|
|
}
|
|
.tab-btn:hover { color: var(--text-2); background: var(--bg-2); }
|
|
.tab-btn.active { background: var(--bg-2); color: var(--text-1); border-color: var(--border); }
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 16px;
|
|
height: 16px;
|
|
padding: 0 4px;
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
border-radius: 8px;
|
|
background: var(--danger);
|
|
color: #fff;
|
|
}
|
|
|
|
/* ── search row ──────────────────────────────────────────────────── */
|
|
.search-row {
|
|
display: flex;
|
|
gap: 4px;
|
|
margin-bottom: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
.search-row input { flex: 1; min-width: 0; }
|
|
.search-row select { flex: 0 0 100px; min-width: 0; font-size: 11px; }
|
|
|
|
/* ── seq info bar ────────────────────────────────────────────────── */
|
|
.seq-info-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 8px;
|
|
background: var(--bg-1);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
margin-bottom: 6px;
|
|
font-size: 11px;
|
|
flex-shrink: 0;
|
|
}
|
|
.seq-info-name { color: var(--text-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.chip {
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
padding: 2px 5px;
|
|
border-radius: 3px;
|
|
letter-spacing: 0.05em;
|
|
flex-shrink: 0;
|
|
}
|
|
.chip-ok { background: var(--ok); color: #000; }
|
|
|
|
/* ── grid container ──────────────────────────────────────────────── */
|
|
.grid-container {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.grid-container.hidden { display: none; }
|
|
|
|
/* ── asset grid ──────────────────────────────────────────────────── */
|
|
/* UXP: no auto-fill grid, no aspect-ratio → flex-wrap + fixed sizes */
|
|
.asset-grid {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
padding: 2px;
|
|
align-content: flex-start;
|
|
}
|
|
|
|
.asset-card {
|
|
flex: 0 0 130px;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
.asset-card:hover { border-color: var(--text-3); }
|
|
.asset-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
|
|
|
|
.asset-thumb {
|
|
width: 100%;
|
|
height: 75px;
|
|
object-fit: cover;
|
|
background: var(--bg-3);
|
|
display: block;
|
|
flex-shrink: 0;
|
|
}
|
|
.asset-thumb-placeholder {
|
|
width: 100%;
|
|
height: 75px;
|
|
background: var(--bg-3);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-3);
|
|
font-size: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.asset-info { padding: 4px 5px 5px; display: flex; flex-direction: column; gap: 2px; }
|
|
.asset-name {
|
|
font-size: 10.5px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: var(--text-1);
|
|
}
|
|
.asset-meta { font-size: 9.5px; color: var(--text-3); display: flex; gap: 5px; }
|
|
.asset-status {
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 4px;
|
|
font-size: 8.5px;
|
|
font-weight: 700;
|
|
padding: 1px 4px;
|
|
border-radius: 3px;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
.status-live { background: var(--live); color: #fff; }
|
|
.status-ingesting { background: var(--warn); color: #000; }
|
|
.status-processing { background: var(--warn); color: #000; }
|
|
.status-ready { background: var(--ok); color: #000; }
|
|
.status-error { background: var(--danger); color: #fff; }
|
|
|
|
/* ── details panel ───────────────────────────────────────────────── */
|
|
.details-panel {
|
|
flex-shrink: 0;
|
|
background: var(--bg-1);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
padding: 6px 8px;
|
|
margin-top: 5px;
|
|
}
|
|
.details-panel.hidden { display: none; }
|
|
.details-header {
|
|
font-size: 9.5px;
|
|
font-weight: 700;
|
|
color: var(--text-3);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.07em;
|
|
margin-bottom: 5px;
|
|
}
|
|
.details-row {
|
|
display: flex;
|
|
gap: 6px;
|
|
font-size: 11px;
|
|
margin-bottom: 2px;
|
|
min-height: 15px;
|
|
}
|
|
.dl { color: var(--text-3); flex: 0 0 66px; }
|
|
.dv { color: var(--text-1); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.tags-row { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; }
|
|
.tag {
|
|
font-size: 9.5px;
|
|
padding: 1px 5px;
|
|
background: var(--bg-3);
|
|
border: 1px solid var(--border);
|
|
border-radius: 3px;
|
|
color: var(--text-2);
|
|
}
|
|
|
|
/* ── actions / footer ────────────────────────────────────────────── */
|
|
.actions {
|
|
flex-shrink: 0;
|
|
border-top: 1px solid var(--border);
|
|
padding: 6px 0 0;
|
|
margin-top: 5px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
.action-row { display: flex; gap: 4px; }
|
|
/* Compact action buttons (v2.1.8 density): 22px tall, smaller type, less
|
|
padding. Operators have many actions visible at once — shrink the chrome
|
|
per DESIGN.md "density over whitespace". */
|
|
.action-row .btn {
|
|
flex: 1;
|
|
height: 22px;
|
|
padding: 0 8px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.01em;
|
|
white-space: nowrap;
|
|
}
|
|
.advanced-section .action-row .btn {
|
|
height: 20px;
|
|
font-size: 10.5px;
|
|
}
|
|
|
|
/* ── advanced section ────────────────────────────────────────────── */
|
|
.advanced-section {
|
|
flex-shrink: 0;
|
|
border-top: 1px solid var(--border);
|
|
padding: 6px 0 8px;
|
|
margin-top: 4px;
|
|
}
|
|
.advanced-title {
|
|
font-size: 9.5px;
|
|
font-weight: 700;
|
|
color: var(--text-3);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.07em;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
/* ── progress ────────────────────────────────────────────────────── */
|
|
.progress-row { display: flex; flex-direction: column; gap: 3px; }
|
|
.progress-bar {
|
|
height: 5px;
|
|
background: var(--bg-3);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
#progress-fill {
|
|
height: 100%;
|
|
background: var(--accent);
|
|
width: 0%;
|
|
transition: width 100ms linear;
|
|
}
|
|
.progress-label { font-size: 10px; color: var(--text-3); }
|
|
|
|
/* ── toast ───────────────────────────────────────────────────────── */
|
|
.toast {
|
|
padding: 5px 8px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-1);
|
|
}
|
|
.toast.ok { border-color: var(--ok); }
|
|
.toast.error { border-color: var(--danger); background: var(--danger-soft); }
|
|
|
|
/* ── slide panels ────────────────────────────────────────────────── */
|
|
.slide-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 10;
|
|
}
|
|
.slide-panel {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--bg-1);
|
|
border-top: 1px solid var(--border);
|
|
border-radius: 8px 8px 0 0;
|
|
z-index: 11;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 80%;
|
|
}
|
|
.slide-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 12px 8px;
|
|
border-bottom: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
.slide-title { flex: 1; font-size: 13px; font-weight: 700; color: var(--text-1); }
|
|
.slide-body {
|
|
padding: 10px 12px;
|
|
overflow-y: auto;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
.slide-footer {
|
|
display: flex;
|
|
gap: 6px;
|
|
padding: 8px 12px;
|
|
border-top: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
.slide-footer .btn { flex: 1; }
|
|
|
|
/* ── preset cards ────────────────────────────────────────────────── */
|
|
.preset-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.preset-card {
|
|
flex: 0 0 calc(50% - 2px);
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
padding: 6px 8px;
|
|
cursor: pointer;
|
|
}
|
|
.preset-card:hover { border-color: var(--text-3); }
|
|
.preset-card.selected { border-color: var(--accent); background: rgba(79,124,255,0.08); }
|
|
.pc-title { font-size: 11.5px; font-weight: 700; color: var(--text-1); }
|
|
.pc-desc { font-size: 10px; color: var(--text-3); margin-top: 2px; }
|
|
|
|
/* ── clip info ───────────────────────────────────────────────────── */
|
|
.clip-info {
|
|
font-size: 11px;
|
|
color: var(--text-2);
|
|
padding: 6px 0 2px;
|
|
}
|
|
|
|
/* ── clip list (relink) ──────────────────────────────────────────── */
|
|
.clip-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
.clip-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 5px 7px;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
}
|
|
.clip-item input[type="checkbox"] { flex-shrink: 0; }
|
|
.clip-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.clip-item-status { flex-shrink: 0; font-size: 10px; color: var(--text-3); }
|
|
.clip-item.matched { border-color: var(--ok); }
|
|
.clip-item.unmatched { opacity: 0.5; }
|
|
|
|
.relink-summary {
|
|
margin-top: 8px;
|
|
padding: 8px;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
color: var(--text-2);
|
|
}
|
|
|
|
/* ── empty state ──────────────────────────────────────────────────── */
|
|
.empty { padding: 20px; text-align: center; font-size: 12px; }
|
|
.muted { color: var(--text-3); }
|
|
|
|
/* ── misc ────────────────────────────────────────────────────────── */
|
|
.hidden { display: none !important; }
|