3f203f326e
UI consolidation: - One Export entry (rail) opens a popup menu: Conform Timeline -> MAM and Local Export. Retires the standalone Export & Conform / Fetch & Relink dock buttons and the plain "Push Timeline" flow. - Remove Import All. - New "Upload to MAM" dock button. Upload: reads the highlighted project-panel item(s) via the premierepro API (best-effort, guarded) and falls back to a native file picker. Pushes via /upload/simple (small) or chunked init/part/complete (large). Local Export: batch-trim the timeline's hi-res clips server-side (FFMPEG), poll trim-status, download each temp-segment-url, relink in Premiere. Relink keys on source media path (last-wins for multi-use sources). Conform + Local Export auto-upload any timeline sources not yet in the MAM before proceeding (renders from the hi-res original, available post-upload). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
670 lines
21 KiB
CSS
670 lines
21 KiB
CSS
/* Dragonflight UXP panel — redesign (icon rail · full-width grid · dock)
|
|
* Hex tokens only (UXP's CSS engine predates oklch). Blue accent kept for
|
|
* continuity with the web UI. No external font loads — UXP has no network
|
|
* for @font-face, so we lean on the host system stack. */
|
|
|
|
:root {
|
|
/* Surfaces — cool near-black blues */
|
|
--bg-deep: #090B0F;
|
|
--bg-base: #0E1117;
|
|
--bg-panel: #14171F;
|
|
--bg-surface: #1B1F28;
|
|
--bg-raised: #232834;
|
|
--bg-hover: #2C313E;
|
|
|
|
/* Accent */
|
|
--accent: #5B7CFA;
|
|
--accent-hover: #7B96FB;
|
|
--accent-bright: #9DB0FC;
|
|
--accent-subtle: rgba(91, 124, 250, 0.14);
|
|
--accent-border: rgba(91, 124, 250, 0.42);
|
|
|
|
/* Text */
|
|
--text-1: #EEF0F4;
|
|
--text-2: #A6ACBA;
|
|
--text-3: #6E7585;
|
|
--text-4: #474D5B;
|
|
|
|
/* Borders + hover overlays (tinted neutrals via white overlay) */
|
|
--border-faint: rgba(255, 255, 255, 0.05);
|
|
--border: rgba(255, 255, 255, 0.09);
|
|
--border-strong: rgba(255, 255, 255, 0.16);
|
|
--hover: rgba(255, 255, 255, 0.04);
|
|
--hover-strong: rgba(255, 255, 255, 0.07);
|
|
|
|
/* Signals */
|
|
--success: #2DD4A8;
|
|
--warning: #F5A623;
|
|
--danger: #FF5B5B;
|
|
--info: #4AA3FF;
|
|
--live: #FF3B30;
|
|
--danger-soft: rgba(255, 91, 91, 0.14);
|
|
--success-soft: rgba(45, 212, 168, 0.14);
|
|
|
|
/* Legacy aliases — older rules / dynamic markup still resolve these */
|
|
--ok: var(--success);
|
|
--warn: var(--warning);
|
|
--bg-1: var(--bg-base);
|
|
--bg-2: var(--bg-surface);
|
|
--bg-3: var(--bg-raised);
|
|
|
|
--font-sans: -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;
|
|
--font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace;
|
|
|
|
--t-fast: 90ms;
|
|
--t-med: 150ms;
|
|
--ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quart */
|
|
|
|
--shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
html, body {
|
|
background: var(--bg-panel);
|
|
color: var(--text-1);
|
|
font: 12px/1.4 var(--font-sans);
|
|
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;
|
|
overflow: hidden;
|
|
}
|
|
.pane.hidden { display: none; }
|
|
.pane-connect { padding: 10px 16px 0; }
|
|
|
|
/* ── connect screen ─────────────────────────────────────────────── */
|
|
.brand {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 22px 0 20px;
|
|
}
|
|
.brand-icon { color: var(--accent); opacity: 0.9; }
|
|
.brand-title { font-size: 17px; font-weight: 700; color: var(--text-1); letter-spacing: -0.01em; }
|
|
.brand-tag {
|
|
font-size: 9px;
|
|
font-weight: 600;
|
|
color: var(--text-3);
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
.brand-version {
|
|
font-family: var(--font-mono);
|
|
font-size: 9.5px;
|
|
color: var(--text-4);
|
|
margin-top: 6px;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.field-label {
|
|
display: block;
|
|
font-size: 9.5px;
|
|
font-weight: 600;
|
|
color: var(--text-3);
|
|
letter-spacing: 0.07em;
|
|
text-transform: uppercase;
|
|
margin: 10px 0 4px;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="search"],
|
|
select {
|
|
width: 100%;
|
|
background: var(--bg-deep);
|
|
color: var(--text-1);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
padding: 7px 9px;
|
|
font: 400 12px/1.2 var(--font-sans);
|
|
outline: none;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
input:focus, select:focus {
|
|
border-color: var(--accent-border);
|
|
box-shadow: 0 0 0 2px var(--accent-subtle);
|
|
}
|
|
input[type="search"]::-webkit-search-cancel-button { display: none; }
|
|
|
|
/* ── buttons (connect + slide panels) ───────────────────────────── */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
font: 600 11.5px/1 var(--font-sans);
|
|
padding: 7px 11px;
|
|
border: 1px solid transparent;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
background: var(--bg-raised);
|
|
color: var(--text-1);
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
|
|
}
|
|
.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-hover); border-color: var(--accent-hover); }
|
|
.btn-secondary { background: var(--bg-surface); border-color: var(--border); }
|
|
.btn-secondary:not(:disabled):hover { background: var(--bg-hover); }
|
|
.btn-icon { padding: 5px 8px; background: var(--bg-surface); border-color: var(--border); }
|
|
.btn-icon:hover { background: var(--bg-hover); }
|
|
|
|
#connect-btn { margin-top: 16px; width: 100%; padding: 9px; }
|
|
|
|
/* ── status msg ─────────────────────────────────────────────────── */
|
|
.status-msg { font-size: 11px; margin-top: 8px; min-height: 16px; text-align: center; }
|
|
.status-msg.error { color: var(--danger); }
|
|
.status-msg.muted { color: var(--text-3); }
|
|
|
|
/* ── app shell ──────────────────────────────────────────────────── */
|
|
.app { display: flex; flex-direction: column; height: 100%; min-height: 0; }
|
|
|
|
.statusbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
height: 30px;
|
|
padding: 0 8px 0 10px;
|
|
background: var(--bg-base);
|
|
border-bottom: 1px solid var(--border-faint);
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
.signal-dot {
|
|
width: 7px; height: 7px;
|
|
border-radius: 50%;
|
|
background: var(--success);
|
|
box-shadow: 0 0 6px var(--success);
|
|
flex-shrink: 0;
|
|
}
|
|
.connected-host {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font: 500 11px/1 var(--font-mono);
|
|
color: var(--text-2);
|
|
letter-spacing: -0.01em;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.panel-version {
|
|
font-family: var(--font-mono);
|
|
font-size: 9.5px;
|
|
color: var(--text-4);
|
|
letter-spacing: 0.04em;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* overflow menu */
|
|
.menu {
|
|
position: absolute;
|
|
top: 30px;
|
|
right: 6px;
|
|
min-width: 132px;
|
|
background: var(--bg-raised);
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: 7px;
|
|
box-shadow: var(--shadow);
|
|
padding: 4px;
|
|
z-index: 50;
|
|
}
|
|
/* Floating variant: coordinates are set in JS (rail Export menu), so the
|
|
default top/right anchoring is cleared and it sits above everything. */
|
|
.menu--float { top: auto; right: auto; min-width: 184px; z-index: 1000; }
|
|
.menu-item {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: left;
|
|
padding: 7px 10px;
|
|
font: 500 11.5px/1 var(--font-sans);
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-1);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.menu-item:hover { background: var(--hover-strong); }
|
|
|
|
.workspace { display: flex; flex: 1; min-height: 0; }
|
|
|
|
/* ── icon rail ──────────────────────────────────────────────────── */
|
|
.rail {
|
|
width: 44px;
|
|
flex-shrink: 0;
|
|
background: var(--bg-base);
|
|
border-right: 1px solid var(--border-faint);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 8px 0;
|
|
gap: 2px;
|
|
}
|
|
/* Rail/dock controls are <div role="button"> (not <button>): UXP renders
|
|
native button chrome that ignores `background` and won't draw SVG-only
|
|
content. Divs honor backgrounds and render SVG children correctly. */
|
|
.rail-btn {
|
|
position: relative;
|
|
width: 34px;
|
|
height: 34px;
|
|
background: transparent;
|
|
border-radius: 8px;
|
|
color: var(--text-3);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
|
|
}
|
|
.rail-btn:hover { background: var(--bg-hover); color: var(--text-1); }
|
|
.rail-btn.active { background: var(--accent-subtle); color: var(--accent-bright); }
|
|
.rail-btn svg { width: 18px; height: 18px; }
|
|
.rail-btn[disabled] { opacity: 0.32; cursor: default; pointer-events: none; }
|
|
.rail-btn--accent { color: var(--accent-bright); }
|
|
.rail-btn--accent:hover { background: var(--accent-subtle); }
|
|
.rail-spacer { flex: 1; }
|
|
|
|
.rail-count {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 0;
|
|
right: 0;
|
|
min-width: 15px;
|
|
height: 15px;
|
|
padding: 0 4px;
|
|
border-radius: 8px;
|
|
background: var(--live);
|
|
box-shadow: 0 0 0 2px var(--bg-base);
|
|
color: #fff;
|
|
font: 700 9px/15px var(--font-sans);
|
|
text-align: center;
|
|
}
|
|
|
|
/* ── main column ────────────────────────────────────────────────── */
|
|
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px;
|
|
border-bottom: 1px solid var(--border-faint);
|
|
flex-shrink: 0;
|
|
}
|
|
.search {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
height: 28px;
|
|
padding: 0 9px;
|
|
background: var(--bg-deep);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
|
|
}
|
|
.search:focus-within { border-color: var(--accent-border); box-shadow: 0 0 0 2px var(--accent-subtle); }
|
|
.search svg { width: 13px; height: 13px; color: var(--text-3); flex-shrink: 0; }
|
|
.search input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
height: 100%;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
outline: none;
|
|
box-shadow: none;
|
|
color: var(--text-1);
|
|
font: 400 12px/1 var(--font-sans);
|
|
}
|
|
.search input:focus { box-shadow: none; }
|
|
.search input::placeholder { color: var(--text-3); }
|
|
|
|
.filter-select {
|
|
flex: 0 0 96px;
|
|
height: 28px;
|
|
padding: 0 8px;
|
|
font-size: 11px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* ── seq info bar ───────────────────────────────────────────────── */
|
|
.seq-info-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin: 8px 8px 0;
|
|
padding: 5px 8px;
|
|
background: var(--bg-base);
|
|
border: 1px solid var(--border-faint);
|
|
border-radius: 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: 700 9px/1 var(--font-sans);
|
|
padding: 3px 5px;
|
|
border-radius: 4px;
|
|
letter-spacing: 0.05em;
|
|
flex-shrink: 0;
|
|
}
|
|
.chip-ok { background: var(--success); color: #06120d; }
|
|
|
|
/* ── grid ───────────────────────────────────────────────────────── */
|
|
.grid-container { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
|
|
.grid-container.hidden { display: none; }
|
|
|
|
/* UXP has no aspect-ratio + flaky auto-fill grid → flex-wrap, fixed sizes. */
|
|
.asset-grid {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
padding: 10px;
|
|
align-content: flex-start;
|
|
}
|
|
.asset-card {
|
|
flex: 1 1 calc(50% - 4px);
|
|
min-width: 0;
|
|
max-width: calc(50% - 4px);
|
|
background: var(--bg-base);
|
|
border: 1px solid var(--border-faint);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
transition: border-color var(--t-fast) var(--ease);
|
|
}
|
|
.asset-card:hover { border-color: var(--border-strong); }
|
|
.asset-card.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
|
|
|
|
.asset-thumb {
|
|
width: 100%;
|
|
height: 78px;
|
|
object-fit: cover;
|
|
background: var(--bg-deep);
|
|
display: block;
|
|
flex-shrink: 0;
|
|
}
|
|
.asset-thumb-placeholder {
|
|
width: 100%;
|
|
height: 78px;
|
|
background: var(--bg-deep);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-3);
|
|
font-size: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
.asset-info { padding: 6px 7px 7px; display: flex; flex-direction: column; gap: 3px; }
|
|
.asset-name {
|
|
font: 500 10.5px/1.3 var(--font-sans);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: var(--text-1);
|
|
}
|
|
.asset-meta {
|
|
font: 400 9px/1.3 var(--font-mono);
|
|
color: var(--text-3);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Status as a corner pip rather than a loud full badge */
|
|
.asset-status {
|
|
position: absolute;
|
|
top: 6px;
|
|
left: 6px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font: 700 8.5px/1 var(--font-sans);
|
|
padding: 3px 5px;
|
|
border-radius: 4px;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
}
|
|
.status-live { background: var(--live); color: #fff; }
|
|
.status-ingesting { background: var(--info); color: #04121f; }
|
|
.status-processing{ background: var(--info); color: #04121f; }
|
|
.status-ready { background: var(--success); color: #06120d; }
|
|
.status-error { background: var(--danger); color: #fff; }
|
|
|
|
/* ── compact list view (toolbar toggle) ─────────────────────────── */
|
|
.asset-grid.list-view { gap: 2px; padding: 6px 8px; }
|
|
.asset-grid.list-view .asset-card {
|
|
flex: 1 1 100%;
|
|
max-width: 100%;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 9px;
|
|
padding: 3px 8px 3px 3px;
|
|
border-radius: 6px;
|
|
}
|
|
.asset-grid.list-view .asset-thumb,
|
|
.asset-grid.list-view .asset-thumb-placeholder {
|
|
width: 50px;
|
|
height: 28px;
|
|
border-radius: 4px;
|
|
}
|
|
.asset-grid.list-view .asset-thumb-placeholder { font-size: 0; }
|
|
.asset-grid.list-view .asset-info {
|
|
order: 1;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
padding: 0;
|
|
gap: 1px;
|
|
}
|
|
.asset-grid.list-view .asset-status {
|
|
order: 2;
|
|
position: static;
|
|
margin-left: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ── action dock ────────────────────────────────────────────────── */
|
|
.dock {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 7px 8px;
|
|
border-top: 1px solid var(--border-faint);
|
|
background: var(--bg-base);
|
|
}
|
|
.dock-sep {
|
|
width: 1px;
|
|
height: 18px;
|
|
margin: 0 3px;
|
|
background: var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ── icon button ────────────────────────────────────────────────── */
|
|
.iconbtn {
|
|
position: relative;
|
|
width: 30px;
|
|
height: 30px;
|
|
flex-shrink: 0;
|
|
background: transparent;
|
|
border-radius: 7px;
|
|
color: var(--text-2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
|
|
}
|
|
.iconbtn:hover { background: var(--bg-hover); color: var(--text-1); }
|
|
.iconbtn svg { width: 16px; height: 16px; }
|
|
.iconbtn[disabled] { opacity: 0.32; cursor: default; pointer-events: none; }
|
|
.iconbtn--sm { width: 24px; height: 24px; border-radius: 6px; color: var(--text-3); }
|
|
.iconbtn--sm svg { width: 15px; height: 15px; }
|
|
.iconbtn--primary { background: var(--accent); color: #fff; }
|
|
.iconbtn--primary:not([disabled]):hover { background: var(--accent-hover); }
|
|
|
|
/* ── progress ───────────────────────────────────────────────────── */
|
|
.progress-row { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 0; flex-shrink: 0; }
|
|
.progress-bar { height: 5px; background: var(--bg-raised); border-radius: 3px; overflow: hidden; }
|
|
#progress-fill { height: 100%; background: var(--accent); width: 0%; transition: width 120ms linear; }
|
|
.progress-label { font: 400 10px/1.3 var(--font-sans); color: var(--text-3); }
|
|
|
|
/* ── toast ──────────────────────────────────────────────────────── */
|
|
.toast {
|
|
margin: 8px 10px 0;
|
|
padding: 6px 9px;
|
|
border-radius: 6px;
|
|
font-size: 11px;
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-1);
|
|
flex-shrink: 0;
|
|
}
|
|
.toast.ok { border-color: var(--success); }
|
|
.toast.error { border-color: var(--danger); background: var(--danger-soft); }
|
|
|
|
/* ── slide panels ───────────────────────────────────────────────── */
|
|
.slide-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 10; }
|
|
.slide-panel {
|
|
position: fixed;
|
|
bottom: 0; left: 0; right: 0;
|
|
background: var(--bg-panel);
|
|
border-top: 1px solid var(--border);
|
|
border-radius: 12px 12px 0 0;
|
|
box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.45);
|
|
z-index: 11;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 82%;
|
|
}
|
|
.slide-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 12px 10px;
|
|
border-bottom: 1px solid var(--border-faint);
|
|
flex-shrink: 0;
|
|
}
|
|
.slide-title { flex: 1; font: 700 13px/1 var(--font-sans); color: var(--text-1); }
|
|
.slide-body {
|
|
padding: 12px;
|
|
overflow-y: auto;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
.slide-footer {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding: 10px 12px;
|
|
border-top: 1px solid var(--border-faint);
|
|
flex-shrink: 0;
|
|
}
|
|
.slide-footer .btn { flex: 1; padding: 9px; }
|
|
|
|
/* ── preset list ────────────────────────────────────────────────── */
|
|
/* Single column (no flex-wrap): UXP miscomputes wrapped-flex height, which
|
|
collapsed the old 2-col grid and let the fields below overlap it. */
|
|
.preset-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 2px; }
|
|
.preset-card {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
background: var(--bg-base);
|
|
border: 1px solid var(--border-faint);
|
|
border-radius: 7px;
|
|
padding: 9px 11px;
|
|
cursor: pointer;
|
|
transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
|
|
}
|
|
.preset-card:hover { border-color: var(--border-strong); }
|
|
.preset-card.selected { border-color: var(--accent); background: var(--accent-subtle); }
|
|
.pc-title { font: 700 11.5px/1.2 var(--font-sans); color: var(--text-1); flex-shrink: 0; }
|
|
.pc-desc { font: 400 10px/1.3 var(--font-mono); color: var(--text-3); margin-left: auto; text-align: right; }
|
|
.custom-fields.hidden { display: none; }
|
|
|
|
/* ── clip info / list (relink) ──────────────────────────────────── */
|
|
.clip-info { font-size: 11px; color: var(--text-2); padding: 6px 0 2px; }
|
|
.clip-list { display: flex; flex-direction: column; gap: 5px; }
|
|
.clip-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 8px;
|
|
background: var(--bg-base);
|
|
border: 1px solid var(--border-faint);
|
|
border-radius: 7px;
|
|
font-size: 11px;
|
|
}
|
|
.clip-item input[type="checkbox"] { flex-shrink: 0; }
|
|
.clip-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-1); }
|
|
.clip-item-status { flex-shrink: 0; font-size: 10px; color: var(--text-3); }
|
|
.clip-item.matched { border-color: var(--success); }
|
|
.clip-item.unmatched { opacity: 0.5; }
|
|
.relink-summary {
|
|
margin-top: 8px;
|
|
padding: 8px;
|
|
background: var(--bg-base);
|
|
border: 1px solid var(--border-faint);
|
|
border-radius: 7px;
|
|
font-size: 11px;
|
|
color: var(--text-2);
|
|
}
|
|
|
|
/* ── empty / misc ───────────────────────────────────────────────── */
|
|
.empty { padding: 24px; text-align: center; font-size: 12px; width: 100%; }
|
|
.muted { color: var(--text-3); }
|
|
.hidden { display: none !important; }
|
|
|
|
/* ── hover tooltip bubble (driven by src/tooltip.js) ────────────── */
|
|
.tip-bubble {
|
|
/* UXP's engine does not reliably support position:fixed; absolute on a
|
|
body-level node maps to the same coords because the panel body never
|
|
scrolls (only .asset-grid scrolls internally). */
|
|
position: absolute;
|
|
z-index: 1000;
|
|
display: none;
|
|
pointer-events: none;
|
|
white-space: nowrap;
|
|
background: var(--bg-raised);
|
|
color: var(--text-1);
|
|
border: 1px solid var(--border-strong);
|
|
box-shadow: var(--shadow);
|
|
font: 500 11px/1 var(--font-sans);
|
|
padding: 5px 8px;
|
|
border-radius: 6px;
|
|
opacity: 0;
|
|
transition: opacity var(--t-fast) var(--ease);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
|
|
}
|