timeline display in editor

2 files changed, 61 insertions, 0 deletions

diff --git a/styles/editor.css b/styles/editor.css
index a25108d..8848b6a 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -48,6 +48,7 @@
 .appGrid .viewer .player {
 	margin: 16px;
 	margin-bottom: 0px;
+	line-height: 0;
 }
 
 .appGrid .viewer .player .outer {
@@ -92,3 +93,48 @@
 	box-shadow: none;
 	margin: 4px;
 }
+
+.appGrid .timeline .frames {
+	height: 100%;
+}
+
+.appGrid .timeline .frames .frame {
+	background-color: transparent;
+	margin-top: 28px;
+	height: 100%;
+	width: 4px;
+	display: inline-block;
+	border-radius: 2px 2px 0 0;
+	position: relative;
+	overflow: visible;
+}
+
+.appGrid .timeline .frames .frame .timecode {
+	display: none;
+}
+
+.appGrid .timeline .frames .frame .keyframeWrapper {
+	line-height: 0;
+	top: 16px;
+	z-index: 999;
+
+}
+
+.appGrid .timeline .frames .frame:nth-child(30n) {
+	background-color: var(--c300);
+}
+
+.appGrid .timeline .frames .frame:nth-child(30n) .timecode {
+	color: var(--c700);
+	font-weight: 500;
+	line-height: 1;
+	display: inline-block;
+	top: -16px;
+}
+
+.appGrid .timeline {
+	overflow-y: hidden;
+	overflow-x: scroll;
+	white-space: nowrap;
+}
+
diff --git a/styles/globals.css b/styles/globals.css
index 9ed6119..c45aa2d 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -23,3 +23,18 @@ h3 { font-size: 1rem; }
 	font-family: "Inter", sans-serif;
 }
 
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-track-piece,
+::-webkit-scrollbar {
+	background-color: var(--c100);
+}
+
+::-webkit-scrollbar-thumb {
+	background-color: var(--c400);
+}
+
+::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+