feat(plugin): add seq info bar, export panel, and 2-row action bar styles

This commit is contained in:
Zac Gaetano 2026-05-20 00:38:59 -04:00
parent 9ba3bf6f83
commit ede55a8a5f

View file

@ -229,6 +229,56 @@ select option {
color: var(--text-primary); 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 */ /* Main content area */
.content-area { .content-area {
display: flex; display: flex;
@ -423,20 +473,6 @@ select option {
background-color: var(--border); 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 indicator */
.progress-container { .progress-container {
padding: 12px; padding: 12px;
@ -470,6 +506,86 @@ select option {
transition: width 0.3s; 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 */ /* Loading spinner */
.spinner { .spinner {
display: inline-block; display: inline-block;