Replace the under-stage filmstrip with a Library modal and stage eye.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Towsty
2026-09-28 20:11:14 -05:00
co-authored by Cursor
parent e06afe4a17
commit 7242d0faef
5 changed files with 601 additions and 221 deletions
+49 -37
View File
@@ -332,7 +332,7 @@
flex-direction: column;
}
/* Stage: fills center column above filmstrip + transport */
/* Stage: fills center column above transport */
.viewer-frame {
position: relative;
display: flex;
@@ -356,31 +356,65 @@
object-position: center;
}
.eye-viewer {
.stage-chrome {
position: absolute;
top: 10px;
right: 10px;
left: 10px;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
pointer-events: none;
}
.stage-chrome > * {
pointer-events: auto;
}
.stage-library {
display: inline-flex;
min-height: 44px;
align-items: center;
gap: 6px;
border: 1px solid var(--line);
border-radius: 8px;
background: #000a;
padding: 0 14px;
color: var(--text);
font: inherit;
font-weight: 600;
cursor: pointer;
}
.stage-library:hover {
border-color: var(--amber);
}
.stage-library-count {
color: var(--muted);
font-weight: 500;
}
.eye-viewer {
display: grid;
width: 28px;
height: 28px;
width: 44px;
height: 44px;
flex-shrink: 0;
place-items: center;
border: 1px solid var(--line);
border-radius: 6px;
border-radius: 8px;
background: #000a;
cursor: pointer;
}
.eye-viewer:hover {
border-color: var(--amber);
}
.filmstrip {
display: flex;
flex-shrink: 0;
gap: 8px;
height: 80px;
align-items: center;
overflow-x: auto;
border-top: 1px solid var(--line);
padding: 8px 10px;
background: var(--panel);
display: none;
}
.tile {
@@ -396,7 +430,6 @@
@media (min-width: 1440px) {
.tile { width: 120px; height: 80px; }
.filmstrip { height: 96px; }
}
.tile[data-active='true'] {
@@ -438,28 +471,7 @@
.tile .tile-trash { right: 22px; }
.strip-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
flex-shrink: 0;
border-top: 1px solid var(--line);
padding: 8px 10px;
background: var(--panel);
}
.strip-actions button {
border: 1px solid var(--line);
border-radius: 6px;
background: transparent;
color: var(--text);
padding: 4px 10px;
font-size: var(--type-sm);
cursor: pointer;
}
.strip-actions button:hover {
border-color: var(--amber);
color: var(--amber);
display: none;
}
.neg-add-row {