loop drag start/end hitbox larger

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;
 }