even better selection :tada:

2 files changed, 16 insertions, 2 deletions

diff --git a/styles/editor.css b/styles/editor.css
index 792db3f..8461a5a 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -108,6 +108,8 @@
 	grid-row: 3;
 	background-color: var(--c100);
 	overflow: hidden;
+
+	--debug-hitbox-opacity: 0;
 }
 
 .appGrid .viewer {
@@ -169,7 +171,10 @@
 	width: calc(var(--zoom) * var(--total-frames) * 1px);
 }
 
-.appGrid .timeline .keyframes .selectionarea { width: calc(var(--zoom) * var(--total-frames) * 1px); }
+.appGrid .timeline .keyframes .selectionarea {
+	width: calc(var(--zoom) * var(--total-frames) * 1px);
+	background-color: rgba(0, 0, 255, var(--debug-hitbox-opacity));
+}
 #selection { pointer-events: none; }
 
 .appGrid .timeline .ghostArea {
@@ -193,6 +198,9 @@
 	border-radius: 2px 2px 0 0;
 	overflow: visible;
 	left: calc(var(--zoom) * (var(--frame)) * 1px);
+
+	pointer-events: none;
+	background-color: rgba(255, 0, 0, var(--debug-hitbox-opacity));
 }
 
 .appGrid .timeline .keyframes .frame:nth-child(30n) .line {
@@ -240,7 +248,10 @@
 	opacity: .0;
 }
 
-.timeline .scrubberJumpArea { cursor: grab; }
+.timeline .scrubberJumpArea {
+	cursor: grab;
+	background-color: rgba(0, 255, 0, var(--debug-hitbox-opacity));
+}
 .timeline .scrubberJumpArea:active { cursor: grabbing; }
 
 .timeline .scrubber .head { fill: var(--blue); }
diff --git a/styles/keyframes.css b/styles/keyframes.css
index 8ef8f32..1eb0a41 100644
--- a/styles/keyframes.css
+++ b/styles/keyframes.css
@@ -4,6 +4,9 @@
 	line-height: 0;
 	width: 24px;
 	height: 24px;
+
+	background-color: rgba(255, 0, 255, var(--debug-hitbox-opacity));
+	pointer-events: initial;
 }
 
 .appGrid .timeline .keyframes .frame.current .keyframeWrapper { color: var(--piss); }