loop keyframe + line in frame

2 files changed, 22 insertions, 8 deletions

diff --git a/styles/editor.css b/styles/editor.css
index 3005be7..62fa103 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -142,34 +142,42 @@
 	margin: 4px;
 }
 
+.appGrid .timeline {
+	--zoom: 4;
+}
+
 .appGrid .timeline .frames {
 	height: 100%;
 }
 
 .appGrid .timeline .frames .frame {
 	background-color: transparent;
-	margin-top: 28px;
 	height: 100%;
-	width: 4px;
+	width: calc(var(--zoom) * 1px);
 	display: inline-block;
 	border-radius: 2px 2px 0 0;
 	position: relative;
 	overflow: visible;
 }
 
+.appGrid .timeline .frames .frame:nth-child(30n) .line {
+	background-color: var(--c300);
+	top: 28px;
+	width: 2px;
+	border-radius: 2px 2px 0 0;
+}
+
 .appGrid .timeline .frames .frame .timecode {
 	display: none;
 }
 
 .appGrid .timeline .frames .frame .keyframeWrapper {
 	line-height: 0;
-	top: 16px;
+	top: 44px;
 	z-index: 999;
 	color: var(--gruble);
-}
-
-.appGrid .timeline .frames .frame:nth-child(30n) {
-	background-color: var(--c300);
+	width: 24px;
+	height: 24px;
 }
 
 .appGrid .timeline .frames .frame:nth-child(30n) .timecode {
@@ -177,7 +185,7 @@
 	font-weight: 500;
 	line-height: 1;
 	display: inline-block;
-	top: -16px;
+	top: 12px;
 }
 
 .appGrid .timeline {
diff --git a/styles/keyframes.css b/styles/keyframes.css
index 8e7e3d2..53fba20 100644
--- a/styles/keyframes.css
+++ b/styles/keyframes.css
@@ -6,6 +6,12 @@
 	margin: 4px -11px;
 }
 
+.loop {
+	width: calc(var(--loop-length) * var(--zoom) * 1px + 24px);
+	position: absolute;
+	right: 0;
+}
+
 .keyframe > * {
 	fill: currentColor;
 }