digital-garbageandClaude Sonnet 5.5
aa31b95ea5
- Header: view toggles (Assets/Preview/Properties/Auto-hide) move to the top bar; progress, the prompt warning and scene actions (rate, upscale, interpolate) move to the row under the toolbar; the timeline head never wraps from 1000px up and never clips its controls. The top bar grows a line instead of spilling when it wraps. - Kit: every literal pixel size in element CSS is a token (the ratchet test is now zero); Composer's text box follows the viewport; the catalogue shows the component sizes. - test:viewport adds a fake ComfyUI queue and socket for the render-running state and asserts the header is one row. - Auto Montage removed (button, window, code, README/docs, tests). Saved projects holding pieces it made still load: the reused flag is kept. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
54 lines
2.8 KiB
CSS
54 lines
2.8 KiB
CSS
/* A real timeline: a ruler in seconds, clips as wide as they play for, and a
|
|
* playhead over both. Pixel-positioned rather than percent/flex-grow -- what
|
|
* makes the ruler's ticks and the clips underneath actually line up. */
|
|
.cx-track { overflow-x: auto; min-inline-size: 0; }
|
|
.cx-track-inner { position: relative; min-inline-size: 100%; }
|
|
|
|
.cx-track-ruler {
|
|
position: relative; block-size: var(--lh-8); min-inline-size: 100%;
|
|
border-block-end: var(--bw) solid var(--line-2);
|
|
}
|
|
.cx-track-tick {
|
|
position: absolute; inset-block-start: 0;
|
|
padding-inline-start: var(--sp-1);
|
|
border-inline-start: var(--bw) solid var(--line);
|
|
font-size: var(--fs-8); line-height: var(--lh-8); color: var(--faint);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* A fixed row height, not aspect-ratio off the clip's own width -- a clip's
|
|
width now tracks real duration and can run to hundreds of pixels, and
|
|
16:10 off THAT would make a half-minute scene taller than the window.
|
|
Positioned (not flex-flow) for the same reason each clip sets its own
|
|
insetInlineStart in JS: a clip under the pixel floor must not push every
|
|
clip after it out of step with the ruler and the playhead, which both
|
|
stay in pure seconds*pxPerSecond regardless of any floor. */
|
|
.cx-track-clips { position: relative; min-inline-size: 100%; block-size: var(--lane-h-audio); }
|
|
.cx-track-clip {
|
|
position: absolute; inset-block: 0; padding: 0;
|
|
border: var(--bw) solid var(--line); border-radius: var(--r-2);
|
|
background: var(--void); overflow: hidden; cursor: grab;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.cx-track-face { position: relative; inline-size: 100%; block-size: 100%; display: flex; align-items: center; justify-content: center; }
|
|
.cx-track-clip:hover { border-color: var(--accent); }
|
|
.cx-track-clip.cx-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
|
|
.cx-track-clip.cx-dragging { opacity: 0.4; cursor: grabbing; }
|
|
/* Still on the timeline, still there to bring back -- excluded from a batch
|
|
run reads as dimmed, not gone, the way a deleted scene would be. */
|
|
.cx-track-clip.cx-excluded { opacity: 0.45; }
|
|
/* A clip carries its rating as a colour on its edge -- the one thing about a
|
|
result you want to see without selecting it. */
|
|
.cx-track-clip.cx-rated { border-color: var(--muted); }
|
|
.cx-track-clip[data-rating="liked"] { border-color: var(--good); }
|
|
.cx-track-clip[data-rating="disliked"] { border-color: var(--danger); }
|
|
|
|
/* Spans both rows, so where the ruler reads and where the clip sits are
|
|
visibly the same point -- a plain marker on just one of them would not
|
|
read as "this is where you are" the way a line through both does. */
|
|
.cx-track-playhead {
|
|
position: absolute; inset-block: 0; inline-size: 0;
|
|
border-inline-start: var(--bw-2) solid var(--accent-hi);
|
|
pointer-events: none; z-index: 1;
|
|
}
|