diff options
| author | lonkaars <loek@pipeframe.xyz> | 2021-06-29 20:50:26 +0200 |
|---|---|---|
| committer | lonkaars <loek@pipeframe.xyz> | 2021-06-29 20:50:26 +0200 |
| commit | 13d94996b2c039e28b00cc54e1458996f872d514 (patch) | |
| tree | 29363471abc918eaf96bd3c6e6f41d190bb755b7 /styles | |
| parent | a4cd3d988a5c04d9b26772a866d7fc28dff62472 (diff) | |
loop placement works better
Diffstat (limited to 'styles')
| -rw-r--r-- | styles/editor.css | 13 | ||||
| -rw-r--r-- | styles/keyframes.css | 24 |
2 files changed, 20 insertions, 17 deletions
diff --git a/styles/editor.css b/styles/editor.css index 949265d..4483c51 100644 --- a/styles/editor.css +++ b/styles/editor.css @@ -378,19 +378,6 @@ top: calc((var(--y) - 6) * 1px); } -.appGrid .timeline .ghostArea { - pointer-events: none; - line-height: 0; - transition-property: opacity; - transition-duration: 150ms; - opacity: 0; - color: var(--gruble); -} - -.appGrid .timeline:hover .ghostArea.active { - opacity: 1; -} - .appGrid .timeline .keyframes .frame { background-color: transparent; height: 100%; diff --git a/styles/keyframes.css b/styles/keyframes.css index fb3d728..935642f 100644 --- a/styles/keyframes.css +++ b/styles/keyframes.css @@ -59,14 +59,30 @@ #ghost { transform: translate(-16px, -16px); top: calc(var(--y) * 1px); - left: calc(var(--x) * 1px); + left: calc(var(--zoom) * var(--frame) * 1px); + + pointer-events: none; + line-height: 0; + color: var(--gruble); + transition-property: opacity; + transition-duration: 150ms; + opacity: 0; +} +.timeline:hover #ghost { + opacity: 1; } -#ghost.placed { left: calc(var(--zoom) * var(--frame) * 1px); } -.keyframeWrapper .loop.ghost { - width: calc((var(--frame-end) - var(--frame)) * var(--zoom) * 1px + 26px); +#ghost .keyframeWrapper .loop.ghost { + width: calc((var(--frame-end) - var(--frame)) * var(--zoom) * 1px + 24px); + + transition-property: transform; + transition-duration: 100ms; transform: translateX(100%); } +#ghost.placed .keyframeWrapper .loop.ghost { + transform: translateX(100%) translateX(10px); +} + .keyframeWrapper .loop.ghost .connector { height: 14px; margin: 0 5px; |