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/keyframes.css | |
| parent | a4cd3d988a5c04d9b26772a866d7fc28dff62472 (diff) | |
loop placement works better
Diffstat (limited to 'styles/keyframes.css')
| -rw-r--r-- | styles/keyframes.css | 24 |
1 files changed, 20 insertions, 4 deletions
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; |