ready state / disabled tools

1 files changed, 39 insertions, 0 deletions

diff --git a/styles/editor.css b/styles/editor.css
index a14adb3..95cff49 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -167,6 +167,18 @@
 	color: var(--gruble);
 }
 
+.tools .time .framerate,
+.tools .time .timecode {
+	transition-property: opacity, color;
+	transition-duration: 150ms;
+}
+
+.tools .time.disabled .framerate,
+.tools .time.disabled .timecode {
+	opacity: .6;
+	color: var(--c700);
+}
+
 .appGrid .tools .MuiToggleButtonGroup-root,
 .appGrid .tools .zoom {
 	margin-top: 8px;
@@ -185,12 +197,39 @@
 	color: var(--gruble);
 }
 
+.zoom .MuiSlider-root,
+.zoom .MuiSvgIcon-root {
+	transition-property: opactity, color;
+	transition-duration: 150ms;
+}
+
+.zoom.disabled .MuiSlider-root,
+.zoom.disabled .MuiSvgIcon-root {
+	pointer-events: none;
+	color: var(--c800) !important;
+	opacity: .6;
+}
+
 .appGrid .tools .MuiToggleButtonGroup-root .MuiToggleButton-root {
 	border-width: 2px;
 	padding: 8px;
 	color: var(--c800);
 	border-color: var(--c400);
 	margin-right: -1px;
+	transition-property: opacity, background-color, color, border-color;
+	transition-duration: 150ms;
+}
+
+.MuiToggleButtonGroup-root.disabled .MuiToggleButton-root {
+	opacity: .6;
+	pointer-events: none;
+}
+
+.MuiToggleButtonGroup-root.disabled .MuiToggleButton-root.Mui-selected {
+	color: var(--c800) !important;
+	background-color: var(--c400) !important;
+	border-top-color: var(--c600) !important;
+	border-bottom-color: var(--c600) !important;
 }
 
 .appGrid .tools .MuiToggleButtonGroup-root .MuiToggleButton-root.Mui-selected {