From 13d94996b2c039e28b00cc54e1458996f872d514 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Tue, 29 Jun 2021 20:50:26 +0200 Subject: loop placement works better --- styles/editor.css | 13 ------------- styles/keyframes.css | 24 ++++++++++++++++++++---- 2 files changed, 20 insertions(+), 17 deletions(-) (limited to 'styles') 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; -- cgit v1.2.3