diff options
| -rw-r--r-- | pages/editor.tsx | 4 | ||||
| -rw-r--r-- | styles/editor.css | 22 | ||||
| -rw-r--r-- | styles/keyframes.css | 34 |
3 files changed, 34 insertions, 26 deletions
diff --git a/pages/editor.tsx b/pages/editor.tsx index 03752d6..e001dfd 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -113,11 +113,11 @@ function TimelineKeyframe(props: { style={{ '--begin': spring.begin.toJSON() } as CSSProperties} className='loop' > - <span className='dispinbl start' ref={loopStartRef}> + <span className='dispinbl posabs l0 start' ref={loopStartRef}> <SlideKeyframe type='loop' /> </span> <div className='connector dispinbl' ref={dragRef} /> - <span className='dispinbl end' ref={loopEndRef}> + <span className='dispinbl posabs r0 end' ref={loopEndRef}> <SlideKeyframe type='loop' loopEnd /> </span> </div> diff --git a/styles/editor.css b/styles/editor.css index 3c30d68..9f1f8e5 100644 --- a/styles/editor.css +++ b/styles/editor.css @@ -183,22 +183,6 @@ display: none; } -.appGrid .timeline .keyframes .frame .keyframeWrapper { - line-height: 0; - top: 44px; - color: var(--gruble); - width: 24px; - height: 24px; -} - -.appGrid .timeline .keyframes .frame .keyframeWrapper.current { color: var(--piss); } -.appGrid .timeline .keyframes .frame .keyframeWrapper.current .loop .connector { background-color: var(--piss); } -.appGrid .timeline .keyframes .frame .keyframeWrapper , -.appGrid .timeline .keyframes .frame .keyframeWrapper .loop .connector { - transition-property: color, background-color; - transition-duration: .2s; -} - .appGrid .timeline .keyframes .frame:nth-child(30n) .timecode { color: var(--c700); font-weight: 500; @@ -229,10 +213,8 @@ opacity: .0; } -.timeline .scrubberJumpArea, -.timeline .keyframes .frame .keyframeWrapper { cursor: grab; } -.timeline .scrubberJumpArea:active, -.timeline .keyframes .frame .keyframeWrapper:active { cursor: grabbing; } +.timeline .scrubberJumpArea { cursor: grab; } +.timeline .scrubberJumpArea:active { cursor: grabbing; } .timeline .scrubber .head { fill: var(--blue); } .timeline .scrubber .needle { background-color: var(--blue); } diff --git a/styles/keyframes.css b/styles/keyframes.css index 750c7ba..c02698f 100644 --- a/styles/keyframes.css +++ b/styles/keyframes.css @@ -1,17 +1,43 @@ +.appGrid .timeline .keyframes .frame .keyframeWrapper { + --keyframe-color: var(--gruble); + color: var(--keyframe-color); + line-height: 0; + top: 44px; + width: 24px; + height: 24px; +} + +.appGrid .timeline .keyframes .frame .keyframeWrapper.current { color: var(--piss); } +.appGrid .timeline .keyframes .frame .keyframeWrapper.current .loop .connector { background-color: var(--piss); } +.appGrid .timeline .keyframes .frame .keyframeWrapper , +.appGrid .timeline .keyframes .frame .keyframeWrapper .loop .connector { + transition-property: color, background-color; + transition-duration: .2s; +} + +.timeline .keyframes .frame .keyframeWrapper { cursor: grab; } +.timeline .keyframes .frame .keyframeWrapper:active { cursor: grabbing; } + .loop .connector { height: 16px; - background-color: var(--gruble); + background-color: var(--keyframe-color); opacity: .25; - width: calc(100% - 26px); - margin: 4px -11px; + inset: 4px 13px; + position: absolute; } .loop { - width: calc((var(--frame) - var(--begin)) * var(--zoom) * 1px + 24px); position: absolute; + width: calc((var(--frame) - var(--begin)) * var(--zoom) * 1px + 24px); + height: 24px; right: 0; } +.loop .start, +.loop .end { + z-index: 1; +} + .keyframe > * { fill: currentColor; } |