tools button group

3 files changed, 57 insertions, 1 deletions

diff --git a/styles/editor.css b/styles/editor.css
index 8848b6a..3005be7 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -32,8 +32,56 @@
 	grid-column: 1;
 	grid-row: 3;
 	background-color: var(--c300);
+	padding: 8px;
 }
 
+.appGrid .tools .time {
+	line-height: 1;
+	height: 20px;
+}
+
+.appGrid .tools .time .framerate {
+	font-weight: 500;
+	color: var(--c700);
+}
+
+.appGrid .tools .time .timecode {
+	font-weight: 500;
+	color: var(--gruble);
+}
+
+.appGrid .tools .MuiButtonGroup-root {
+	margin-top: 8px;
+}
+
+.appGrid .tools .MuiButtonGroup-root .MuiButton-root {
+	border-width: 2px;
+	padding: 8px;
+	color: var(--c800);
+	border-color: var(--c400);
+	margin-right: -1px;
+}
+
+.appGrid .tools .MuiButtonGroup-root .MuiButton-root:first-child {
+	border-radius: 6px 0 0 6px;
+}
+
+.appGrid .tools .MuiButtonGroup-root .MuiButton-root:last-child {
+	border-radius: 0 6px 6px 0;
+}
+
+.appGrid .tools .MuiButtonGroup-root .MuiButton-root .loopStartEnd {
+	display: inline-block;
+	white-space: nowrap;
+	line-height: 0;
+	position: relative;
+	height: 24px;
+	width: 36px;
+}
+
+.appGrid .tools .MuiButtonGroup-root .MuiButton-root .loopStartEnd .start { left: -3px; }
+.appGrid .tools .MuiButtonGroup-root .MuiButton-root .loopStartEnd .end { right: -3px; }
+
 .appGrid .timeline {
 	grid-column: 2;
 	grid-row: 3;
@@ -117,7 +165,7 @@
 	line-height: 0;
 	top: 16px;
 	z-index: 999;
-
+	color: var(--gruble);
 }
 
 .appGrid .timeline .frames .frame:nth-child(30n) {
diff --git a/styles/globals.css b/styles/globals.css
index c45aa2d..f69cb97 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -14,6 +14,10 @@ h1 { font-size: 1.25rem; }
 h2 { font-size: 1.125rem; }
 h3 { font-size: 1rem; }
 
+h1, h2, h3 {
+	margin: 0;
+}
+
 .MuiSvgIcon-root {
 	font-size: 24px !important;
 }
diff --git a/styles/keyframes.css b/styles/keyframes.css
index 67b99eb..8e7e3d2 100644
--- a/styles/keyframes.css
+++ b/styles/keyframes.css
@@ -6,3 +6,7 @@
 	margin: 4px -11px;
 }
 
+.keyframe > * {
+	fill: currentColor;
+}
+