ghost for adding keyframes :tada:

2 files changed, 17 insertions, 1 deletions

diff --git a/styles/editor.css b/styles/editor.css
index 1a1a91f..7eda309 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -169,6 +169,19 @@
 	width: calc(var(--zoom) * var(--total-frames) * 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 49c8e4e..8a4f06f 100644
--- a/styles/keyframes.css
+++ b/styles/keyframes.css
@@ -39,7 +39,10 @@
 	z-index: 1;
 }
 
-.keyframe > * {
+.keyframe {
+	line-height: 0;
 	fill: currentColor;
 }
 
+.keyframe.ghost .background { opacity: .2; }
+.keyframe.ghost .outline { opacity: .7; }