diff options
Diffstat (limited to 'styles')
| -rw-r--r-- | styles/editor.css | 22 | ||||
| -rw-r--r-- | styles/keyframes.css | 34 |
2 files changed, 32 insertions, 24 deletions
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; } |