diff --git a/services/premiere-plugin/css/styles.css b/services/premiere-plugin/css/styles.css index 2914fbb..ec96877 100644 --- a/services/premiere-plugin/css/styles.css +++ b/services/premiere-plugin/css/styles.css @@ -229,6 +229,56 @@ select option { color: var(--text-primary); } +/* 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; +} + /* Main content area */ .content-area { display: flex; @@ -423,20 +473,6 @@ select option { background-color: var(--border); } -/* Action bar at bottom */ -.action-bar { - background-color: var(--bg-secondary); - border-top: 1px solid var(--border); - padding: 12px; - flex-shrink: 0; - display: flex; - gap: 8px; -} - -.action-bar button { - flex: 1; -} - /* Progress indicator */ .progress-container { padding: 12px; @@ -470,6 +506,86 @@ select option { transition: width 0.3s; } +/* 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; +} + /* Loading spinner */ .spinner { display: inline-block;