WildDragonLLC/dragonflight
1
0
Fork 0
Code Issues 18 Pull requests 3 Projects Releases Packages Wiki Activity Actions
dragonflight/services/premiere-plugin/css/styles.css

700 lines
13 KiB
CSS
Raw Normal View History

Phase 2: services/premiere-plugin/css/styles.css
2026-04-07 22:05:45 -04:00
/* Wild Dragon MAM Panel - Dark Theme Styles */
:root {
--bg-primary: #0f0f1e;
--bg-secondary: #1a1a2e;
--bg-tertiary: #16213e;
--accent: #e94560;
--accent-hover: #ff5a7e;
--text-primary: #ffffff;
--text-secondary: #b0b0c0;
--border: #2a2a3e;
--success: #00d084;
--error: #ff4444;
--warning: #ffb84d;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: var(--bg-primary);
color: var(--text-primary);
font-size: 12px;
}
/* Scrollbar styling */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
background: var(--accent);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-hover);
}
/* Main panel container */
#panel-container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
padding: 0;
}
/* Connection bar at top */
.connection-bar {
background-color: var(--bg-secondary);
border-bottom: 1px solid var(--border);
padding: 12px;
flex-shrink: 0;
}
.connection-controls {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 8px;
align-items: center;
}
.server-input-group {
display: flex;
align-items: center;
gap: 8px;
}
fix(premiere-plugin): v1.0.1 — actually load + connect under CEP 12 End-to-end debugging against a live Premiere Pro 2025 + auth-enabled mam-api surfaced four real bugs that made v1.0.0 install cleanly but never load, plus the missing auth flow. All four are fixed and the panel is verified connected (status dot green, Reconnect button shown, project list populated). - manifest.xml: a comment in the <Resources> block contained "--" (inside "--enable-nodejs"/"--mixed-context"), which is illegal per the XML spec. CEP 12's strict parser logged ERROR XPATH Double hyphen within comment and skipped the panel entirely. Comment rewritten without double hyphens. - manifest.xml: lacked the Version="X.Y" attribute on <ExtensionManifest> and used a non-standard AbstractionLayers/empty <ExtensionList/> structure. CEP rejected it with Unsupported Manifest version '' Manifest rewritten to the standard CSXS 7.0 schema (ExtensionList + DispatchInfoList + RequiredRuntimeList), matching the working AMPP panel template. - main.js: re-declared `const csInterface = new CSInterface()` at top level even though CSInterface.js already declared the same binding. CEP 12 shares script-realm lexical scope across <script> tags, so the second const threw Identifier 'csInterface' has already been declared The throw fired before setupEventListeners(), so the Connect button's click handler was never attached. This is the root cause of the original "clicking Connect does nothing" symptom; everything else was secondary. Removed the duplicate declaration; main.js now uses the binding from CSInterface.js. - No auth support against AUTH_ENABLED=true servers. mam-api supports Bearer tokens (POST /api/v1/tokens), so added: • API token input field (password-masked) next to Server URL • localStorage persistence on every keystroke • window.fetch monkey-patch that injects Authorization: Bearer <token> on every request whose URL starts with the configured server. Signed S3 download URLs are NOT touched. Drive-by fixes that came out of the same debugging pass: - Server URL input listener was 'change' (fires on blur); switched to 'input' so typing-then-clicking-Connect immediately commits. - restoreSettings() now strips trailing slashes from the stored URL so older saved values like 'http://host/' stop producing //api/v1 404s. - CSS selector `input[type="text"].server-url` didn't match the new password input → the token field was unstyled and effectively invisible. Generalized to `input.server-url`; restructured the connection bar into `.connection-controls--stacked` (flex column) of two `.server-input-row` rows so two input fields fit cleanly. - Build scripts now parse ExtensionBundleVersion from both element form (<ExtensionBundleVersion>X</...>) and attribute form (ExtensionBundleVersion="X"), since the manifest rewrite switched schemas. Version bumped 1.0.0 → 1.0.1. New artifacts committed at services/premiere-plugin/build/releases/v1.0.1/ (.exe 2 MB, .zxp 35 KB). v1.0.0 left in place so editors who downloaded it can verify they're on the broken version. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-23 19:24:10 -04:00
.connection-controls--stacked {
display: flex;
flex-direction: column;
gap: 8px;
}
.server-input-row {
display: flex;
align-items: center;
gap: 8px;
}
input.server-url {
Phase 2: services/premiere-plugin/css/styles.css
2026-04-07 22:05:45 -04:00
flex: 1;
min-width: 0;
background-color: var(--bg-tertiary);
border: 1px solid var(--border);
color: var(--text-primary);
padding: 6px 8px;
border-radius: 4px;
font-size: 11px;
transition: border-color 0.2s;
}
fix(premiere-plugin): v1.0.1 — actually load + connect under CEP 12 End-to-end debugging against a live Premiere Pro 2025 + auth-enabled mam-api surfaced four real bugs that made v1.0.0 install cleanly but never load, plus the missing auth flow. All four are fixed and the panel is verified connected (status dot green, Reconnect button shown, project list populated). - manifest.xml: a comment in the <Resources> block contained "--" (inside "--enable-nodejs"/"--mixed-context"), which is illegal per the XML spec. CEP 12's strict parser logged ERROR XPATH Double hyphen within comment and skipped the panel entirely. Comment rewritten without double hyphens. - manifest.xml: lacked the Version="X.Y" attribute on <ExtensionManifest> and used a non-standard AbstractionLayers/empty <ExtensionList/> structure. CEP rejected it with Unsupported Manifest version '' Manifest rewritten to the standard CSXS 7.0 schema (ExtensionList + DispatchInfoList + RequiredRuntimeList), matching the working AMPP panel template. - main.js: re-declared `const csInterface = new CSInterface()` at top level even though CSInterface.js already declared the same binding. CEP 12 shares script-realm lexical scope across <script> tags, so the second const threw Identifier 'csInterface' has already been declared The throw fired before setupEventListeners(), so the Connect button's click handler was never attached. This is the root cause of the original "clicking Connect does nothing" symptom; everything else was secondary. Removed the duplicate declaration; main.js now uses the binding from CSInterface.js. - No auth support against AUTH_ENABLED=true servers. mam-api supports Bearer tokens (POST /api/v1/tokens), so added: • API token input field (password-masked) next to Server URL • localStorage persistence on every keystroke • window.fetch monkey-patch that injects Authorization: Bearer <token> on every request whose URL starts with the configured server. Signed S3 download URLs are NOT touched. Drive-by fixes that came out of the same debugging pass: - Server URL input listener was 'change' (fires on blur); switched to 'input' so typing-then-clicking-Connect immediately commits. - restoreSettings() now strips trailing slashes from the stored URL so older saved values like 'http://host/' stop producing //api/v1 404s. - CSS selector `input[type="text"].server-url` didn't match the new password input → the token field was unstyled and effectively invisible. Generalized to `input.server-url`; restructured the connection bar into `.connection-controls--stacked` (flex column) of two `.server-input-row` rows so two input fields fit cleanly. - Build scripts now parse ExtensionBundleVersion from both element form (<ExtensionBundleVersion>X</...>) and attribute form (ExtensionBundleVersion="X"), since the manifest rewrite switched schemas. Version bumped 1.0.0 → 1.0.1. New artifacts committed at services/premiere-plugin/build/releases/v1.0.1/ (.exe 2 MB, .zxp 35 KB). v1.0.0 left in place so editors who downloaded it can verify they're on the broken version. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-23 19:24:10 -04:00
input.server-url:focus {
Phase 2: services/premiere-plugin/css/styles.css
2026-04-07 22:05:45 -04:00
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.1);
}
fix(premiere-plugin): v1.0.1 — actually load + connect under CEP 12 End-to-end debugging against a live Premiere Pro 2025 + auth-enabled mam-api surfaced four real bugs that made v1.0.0 install cleanly but never load, plus the missing auth flow. All four are fixed and the panel is verified connected (status dot green, Reconnect button shown, project list populated). - manifest.xml: a comment in the <Resources> block contained "--" (inside "--enable-nodejs"/"--mixed-context"), which is illegal per the XML spec. CEP 12's strict parser logged ERROR XPATH Double hyphen within comment and skipped the panel entirely. Comment rewritten without double hyphens. - manifest.xml: lacked the Version="X.Y" attribute on <ExtensionManifest> and used a non-standard AbstractionLayers/empty <ExtensionList/> structure. CEP rejected it with Unsupported Manifest version '' Manifest rewritten to the standard CSXS 7.0 schema (ExtensionList + DispatchInfoList + RequiredRuntimeList), matching the working AMPP panel template. - main.js: re-declared `const csInterface = new CSInterface()` at top level even though CSInterface.js already declared the same binding. CEP 12 shares script-realm lexical scope across <script> tags, so the second const threw Identifier 'csInterface' has already been declared The throw fired before setupEventListeners(), so the Connect button's click handler was never attached. This is the root cause of the original "clicking Connect does nothing" symptom; everything else was secondary. Removed the duplicate declaration; main.js now uses the binding from CSInterface.js. - No auth support against AUTH_ENABLED=true servers. mam-api supports Bearer tokens (POST /api/v1/tokens), so added: • API token input field (password-masked) next to Server URL • localStorage persistence on every keystroke • window.fetch monkey-patch that injects Authorization: Bearer <token> on every request whose URL starts with the configured server. Signed S3 download URLs are NOT touched. Drive-by fixes that came out of the same debugging pass: - Server URL input listener was 'change' (fires on blur); switched to 'input' so typing-then-clicking-Connect immediately commits. - restoreSettings() now strips trailing slashes from the stored URL so older saved values like 'http://host/' stop producing //api/v1 404s. - CSS selector `input[type="text"].server-url` didn't match the new password input → the token field was unstyled and effectively invisible. Generalized to `input.server-url`; restructured the connection bar into `.connection-controls--stacked` (flex column) of two `.server-input-row` rows so two input fields fit cleanly. - Build scripts now parse ExtensionBundleVersion from both element form (<ExtensionBundleVersion>X</...>) and attribute form (ExtensionBundleVersion="X"), since the manifest rewrite switched schemas. Version bumped 1.0.0 → 1.0.1. New artifacts committed at services/premiere-plugin/build/releases/v1.0.1/ (.exe 2 MB, .zxp 35 KB). v1.0.0 left in place so editors who downloaded it can verify they're on the broken version. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-23 19:24:10 -04:00
input.server-url::placeholder {
Phase 2: services/premiere-plugin/css/styles.css
2026-04-07 22:05:45 -04:00
color: var(--text-secondary);
}
.status-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--error);
transition: background-color 0.2s;
flex-shrink: 0;
}
.status-indicator.connected {
background-color: var(--success);
box-shadow: 0 0 6px rgba(0, 208, 132, 0.5);
}
.status-indicator.connecting {
background-color: var(--warning);
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* Buttons */
button {
background-color: var(--accent);
color: var(--text-primary);
border: none;
padding: 6px 12px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
flex-shrink: 0;
}
button:hover:not(:disabled) {
background-color: var(--accent-hover);
transform: translateY(-1px);
box-shadow: var(--shadow);
}
button:active:not(:disabled) {
transform: translateY(0);
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
button.secondary {
background-color: var(--bg-tertiary);
border: 1px solid var(--border);
color: var(--text-secondary);
}
button.secondary:hover:not(:disabled) {
background-color: var(--bg-secondary);
border-color: var(--accent);
color: var(--text-primary);
}
/* Search and filter area */
.search-filter-area {
background-color: var(--bg-secondary);
border-bottom: 1px solid var(--border);
padding: 12px;
flex-shrink: 0;
}
.search-bar {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
input[type="text"].search-input {
flex: 1;
background-color: var(--bg-tertiary);
border: 1px solid var(--border);
color: var(--text-primary);
padding: 8px 12px;
border-radius: 4px;
font-size: 12px;
transition: border-color 0.2s;
}
input[type="text"].search-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.1);
}
input[type="text"].search-input::placeholder {
color: var(--text-secondary);
}
.filter-controls {
display: flex;
gap: 8px;
}
select {
flex: 1;
background-color: var(--bg-tertiary);
border: 1px solid var(--border);
color: var(--text-primary);
padding: 6px 8px;
border-radius: 4px;
font-size: 11px;
cursor: pointer;
transition: border-color 0.2s;
}
select:focus {
outline: none;
border-color: var(--accent);
}
select option {
background-color: var(--bg-secondary);
color: var(--text-primary);
}
feat(plugin): add seq info bar, export panel, and 2-row action bar styles
2026-05-20 00:38:59 -04:00
/* Active sequence info bar */
.seq-info-bar {
background-color: var(--bg-tertiary);
border-bottom: 1px solid var(--border);
padding: 5px 12px;
flex-shrink: 0;
display: flex;
align-items: center;
gap: 6px;
}
.seq-info-bar.hidden {
display: none;
}
.seq-info-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--accent);
flex-shrink: 0;
}
.seq-info-name {
font-size: 11px;
font-weight: 600;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.seq-refresh-btn {
background: none;
border: none;
color: var(--text-secondary);
font-size: 14px;
padding: 0 2px;
cursor: pointer;
flex-shrink: 0;
line-height: 1;
}
.seq-refresh-btn:hover:not(:disabled) {
color: var(--accent);
transform: none;
box-shadow: none;
}
Phase 2: services/premiere-plugin/css/styles.css
2026-04-07 22:05:45 -04:00
/* Main content area */
.content-area {
display: flex;
flex: 1;
gap: 0;
min-height: 0;
}
/* Asset grid */
.asset-grid-container {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
border-right: 1px solid var(--border);
}
.asset-grid {
flex: 1;
overflow-y: auto;
padding: 12px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 12px;
}
.asset-card {
background-color: var(--bg-secondary);
border: 2px solid var(--border);
border-radius: 6px;
overflow: hidden;
cursor: pointer;
transition: all 0.2s;
display: flex;
flex-direction: column;
height: 160px;
}
.asset-card:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.asset-card.selected {
border-color: var(--accent);
background-color: var(--bg-tertiary);
box-shadow: 0 0 12px rgba(233, 69, 96, 0.3);
}
.asset-thumbnail {
width: 100%;
aspect-ratio: 16 / 9;
background-color: var(--bg-tertiary);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: var(--text-secondary);
overflow: hidden;
flex-shrink: 0;
}
.asset-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.asset-info {
padding: 8px;
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-height: 0;
}
.asset-filename {
font-weight: 600;
font-size: 11px;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.asset-meta {
display: flex;
gap: 4px;
font-size: 10px;
color: var(--text-secondary);
}
.asset-status-badge {
display: inline-block;
padding: 2px 6px;
border-radius: 3px;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
width: fit-content;
}
.status-badge.ready {
background-color: rgba(0, 208, 132, 0.2);
color: var(--success);
}
.status-badge.processing {
background-color: rgba(255, 184, 77, 0.2);
color: var(--warning);
animation: pulse 1.5s ease-in-out infinite;
}
.status-badge.error {
background-color: rgba(255, 68, 68, 0.2);
color: var(--error);
}
/* Empty state */
.empty-state {
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
text-align: center;
color: var(--text-secondary);
flex-direction: column;
gap: 12px;
}
.empty-state-icon {
font-size: 32px;
opacity: 0.5;
}
/* Details panel */
.details-panel {
width: 200px;
background-color: var(--bg-secondary);
border-left: 1px solid var(--border);
padding: 12px;
display: flex;
flex-direction: column;
gap: 12px;
overflow-y: auto;
}
.details-panel.hidden {
display: none;
}
.details-section {
display: flex;
flex-direction: column;
gap: 6px;
}
.details-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
color: var(--text-secondary);
letter-spacing: 0.5px;
}
.details-value {
font-size: 12px;
color: var(--text-primary);
word-break: break-word;
}
.tags-list {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.tag {
display: inline-block;
background-color: var(--bg-tertiary);
border: 1px solid var(--border);
color: var(--text-secondary);
padding: 4px 8px;
border-radius: 3px;
font-size: 10px;
}
.divider {
height: 1px;
background-color: var(--border);
}
/* Progress indicator */
.progress-container {
padding: 12px;
background-color: var(--bg-secondary);
border-bottom: 1px solid var(--border);
display: none;
}
.progress-container.visible {
display: block;
}
.progress-label {
font-size: 11px;
margin-bottom: 6px;
color: var(--text-secondary);
}
.progress-bar {
width: 100%;
height: 4px;
background-color: var(--bg-tertiary);
border-radius: 2px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background-color: var(--accent);
width: 0%;
transition: width 0.3s;
}
feat(plugin): add seq info bar, export panel, and 2-row action bar styles
2026-05-20 00:38:59 -04:00
/* Export timeline panel */
.export-panel {
background-color: var(--bg-secondary);
border-top: 2px solid var(--accent);
padding: 12px;
flex-shrink: 0;
}
.export-panel.hidden {
display: none;
}
.export-panel-title {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--accent);
margin-bottom: 10px;
}
.export-panel input[type="text"] {
width: 100%;
background-color: var(--bg-tertiary);
border: 1px solid var(--border);
color: var(--text-primary);
padding: 6px 8px;
border-radius: 4px;
font-size: 11px;
margin-bottom: 6px;
transition: border-color 0.2s;
}
.export-panel input[type="text"]:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.1);
}
.export-panel select {
width: 100%;
margin-bottom: 8px;
flex: none;
}
.export-clip-info {
font-size: 10px;
color: var(--text-secondary);
margin-bottom: 8px;
}
.export-panel-actions {
display: flex;
gap: 8px;
}
.export-panel-actions button {
flex: 1;
}
/* Action bar — two rows */
.action-bar {
background-color: var(--bg-secondary);
border-top: 1px solid var(--border);
padding: 10px 12px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.action-row {
display: flex;
gap: 8px;
}
.action-row button {
flex: 1;
}
Phase 2: services/premiere-plugin/css/styles.css
2026-04-07 22:05:45 -04:00
/* Loading spinner */
.spinner {
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Responsive layout for smaller panels */
@media (max-width: 500px) {
.asset-grid {
grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
gap: 10px;
padding: 10px;
}
.details-panel {
width: 150px;
padding: 10px;
}
.asset-card {
height: 150px;
}
.connection-controls {
grid-template-columns: 1fr;
}
.server-input-group {
grid-column: 1;
width: 100%;
}
button.connect-btn {
grid-column: 2 / 4;
}
}
/* Utility classes */
.hidden {
display: none !important;
}
.loading {
opacity: 0.6;
pointer-events: none;
}
.error-message {
background-color: rgba(255, 68, 68, 0.1);
border: 1px solid var(--error);
color: var(--error);
padding: 8px 12px;
border-radius: 4px;
font-size: 11px;
margin-bottom: 8px;
}
.success-message {
background-color: rgba(0, 208, 132, 0.1);
border: 1px solid var(--success);
color: var(--success);
padding: 8px 12px;
border-radius: 4px;
font-size: 11px;
margin-bottom: 8px;
}
.info-message {
background-color: rgba(233, 69, 96, 0.1);
border: 1px solid var(--accent);
color: var(--accent);
padding: 8px 12px;
border-radius: 4px;
font-size: 11px;
margin-bottom: 8px;
}
/* Text truncation */
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.truncate-lines-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
Reference in a new issue Copy permalink