css update

3 files changed, 31 insertions, 22 deletions

diff --git a/components/play-skip.tsx b/components/play-skip.tsx
index c63afe7..77e1f9f 100644
--- a/components/play-skip.tsx
+++ b/components/play-skip.tsx
@@ -1,7 +1,7 @@
 export default function PlaySkipIconAni() {
 	return <div className='shapeshifter play-pause ani'>
 		<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 456 24' width='456' height='24'>
-			<g fill='#ffffff'>
+			<g>
 				<path
 					d='M17 12c0 .622-.32 1.2-.848 1.53l-6.774 4.234c-.247.154-.532.236-.824.236C7.696 18 7 17.304 7 16.446V7.554C7 6.696 7.696 6 8.554 6c.292 0 .577.082.824.236l6.774 4.234c.528.33.848.908.848 1.53z'
 				/>
@@ -14,7 +14,7 @@ export default function PlaySkipIconAni() {
 					fill-rule='evenodd'
 				/>
 			</g>
-			<g fill='#ffffff'>
+			<g>
 				<path
 					d='M40.978 12c0 .622-.32 1.2-.848 1.53l-6.759 4.227c-.247.154-.532.236-.824.236-.858 0-1.554-.696-1.554-1.554V7.561c0-.858.696-1.554 1.554-1.554.292 0 .577.082.824.236l6.759 4.227c.528.33.848.908.848 1.53z'
 				/>
@@ -27,7 +27,7 @@ export default function PlaySkipIconAni() {
 					fill-rule='evenodd'
 				/>
 			</g>
-			<g fill='#ffffff'>
+			<g>
 				<path
 					d='M64.902 12c0 .622-.32 1.2-.848 1.531l-6.709 4.199c-.247.155-.532.237-.824.237-.858 0-1.554-.696-1.554-1.553V7.586c0-.857.696-1.553 1.554-1.553.292 0 .577.082.824.237l6.709 4.199c.528.331.848.909.848 1.531z'
 				/>
@@ -40,7 +40,7 @@ export default function PlaySkipIconAni() {
 					fill-rule='evenodd'
 				/>
 			</g>
-			<g fill='#ffffff'>
+			<g>
 				<path
 					d='M88.745 12c0 .622-.32 1.201-.847 1.532l-6.604 4.145c-.248.155-.534.238-.827.238-.857 0-1.552-.695-1.552-1.552V7.637c0-.857.695-1.552 1.552-1.552.293 0 .579.083.827.238l6.604 4.145c.527.331.847.91.847 1.532z'
 				/>
@@ -53,7 +53,7 @@ export default function PlaySkipIconAni() {
 					fill-rule='evenodd'
 				/>
 			</g>
-			<g fill='#ffffff'>
+			<g>
 				<path
 					d='M112.474 12c0 .623-.318 1.201-.845 1.534l-6.425 4.051c-.247.156-.535.24-.828.24-.857 0-1.551-.695-1.551-1.551V7.726c0-.856.694-1.551 1.551-1.551.293 0 .581.084.828.24l6.425 4.051c.527.333.845.911.845 1.534z'
 				/>
@@ -66,7 +66,7 @@ export default function PlaySkipIconAni() {
 					fill-rule='evenodd'
 				/>
 			</g>
-			<g fill='#ffffff'>
+			<g>
 				<path
 					d='M136.079 12c0 .623-.318 1.202-.844 1.538l-6.161 3.912c-.249.158-.538.243-.833.243-.855 0-1.548-.693-1.548-1.548v-8.29c0-.855.693-1.548 1.548-1.548.295 0 .584.085.833.243l6.161 3.912c.526.336.844.915.844 1.538z'
 				/>
@@ -79,7 +79,7 @@ export default function PlaySkipIconAni() {
 					fill-rule='evenodd'
 				/>
 			</g>
-			<g fill='#ffffff'>
+			<g>
 				<path
 					d='M159.628 12c0 .623-.316 1.204-.84 1.541l-5.863 3.756c-.249.16-.54.246-.837.246-.853 0-1.545-.692-1.545-1.546V8.003c0-.854.692-1.546 1.545-1.546.297 0 .588.086.837.246l5.863 3.756c.524.337.84.918.84 1.541z'
 				/>
@@ -92,7 +92,7 @@ export default function PlaySkipIconAni() {
 					fill-rule='evenodd'
 				/>
 			</g>
-			<g fill='#ffffff'>
+			<g>
 				<path
 					d='M183.229 12c0 .624-.315 1.205-.839 1.545l-5.597 3.616c-.25.162-.542.249-.841.249-.852 0-1.542-.691-1.542-1.543V8.133c0-.852.69-1.543 1.542-1.543.299 0 .591.087.841.249l5.597 3.616c.524.34.839.921.839 1.545z'
 				/>
@@ -105,7 +105,7 @@ export default function PlaySkipIconAni() {
 					fill-rule='evenodd'
 				/>
 			</g>
-			<g fill='#ffffff'>
+			<g>
 				<path
 					d='M206.914 12c0 .624-.314 1.206-.837 1.547l-5.388 3.506c-.25.164-.544.252-.843.252-.851 0-1.541-.69-1.541-1.541V8.236c0-.851.69-1.541 1.541-1.541.299 0 .593.088.843.252l5.388 3.506c.523.341.837.923.837 1.547z'
 				/>
@@ -118,7 +118,7 @@ export default function PlaySkipIconAni() {
 					fill-rule='evenodd'
 				/>
 			</g>
-			<g fill='#ffffff'>
+			<g>
 				<path
 					d='M230.673 12c0 .624-.313 1.206-.835 1.549l-5.229 3.422c-.25.165-.545.253-.845.253-.851 0-1.54-.689-1.54-1.539v-7.37c0-.85.689-1.539 1.54-1.539.3 0 .595.088.845.253l5.229 3.422c.522.343.835.925.835 1.549z'
 				/>
@@ -131,7 +131,7 @@ export default function PlaySkipIconAni() {
 					fill-rule='evenodd'
 				/>
 			</g>
-			<g fill='#ffffff'>
+			<g>
 				<path
 					d='M254.489 12c0 .625-.314 1.207-.835 1.551l-5.106 3.357c-.251.166-.546.255-.847.255-.85 0-1.538-.689-1.538-1.538v-7.25c0-.849.688-1.538 1.538-1.538.301 0 .596.089.847.255l5.106 3.357c.521.344.835.926.835 1.551z'
 				/>
@@ -144,7 +144,7 @@ export default function PlaySkipIconAni() {
 					fill-rule='evenodd'
 				/>
 			</g>
-			<g fill='#ffffff'>
+			<g>
 				<path
 					d='M278.347 12c0 .625-.313 1.207-.834 1.552l-5.012 3.308c-.251.166-.547.256-.848.256-.849 0-1.537-.689-1.537-1.538V8.422c0-.849.688-1.538 1.537-1.538.301 0 .597.09.848.256l5.012 3.308c.521.345.834.927.834 1.552z'
 				/>
@@ -157,7 +157,7 @@ export default function PlaySkipIconAni() {
 					fill-rule='evenodd'
 				/>
 			</g>
-			<g fill='#ffffff'>
+			<g>
 				<path
 					d='M302.238 12c0 .625-.313 1.207-.834 1.553l-4.938 3.27c-.252.167-.548.256-.85.256-.849 0-1.537-.687-1.537-1.536V8.457c0-.849.688-1.536 1.537-1.536.302 0 .598.089.85.256l4.938 3.27c.521.346.834.928.834 1.553z'
 				/>
@@ -170,7 +170,7 @@ export default function PlaySkipIconAni() {
 					fill-rule='evenodd'
 				/>
 			</g>
-			<g fill='#ffffff'>
+			<g>
 				<path
 					d='M326.155 12c0 .625-.312 1.208-.833 1.554l-4.884 3.241c-.252.167-.548.257-.85.257-.849 0-1.536-.688-1.536-1.536V8.484c0-.848.687-1.536 1.536-1.536.302 0 .598.09.85.257l4.884 3.241c.521.346.833.929.833 1.554z'
 				/>
@@ -183,7 +183,7 @@ export default function PlaySkipIconAni() {
 					fill-rule='evenodd'
 				/>
 			</g>
-			<g fill='#ffffff'>
+			<g>
 				<path
 					d='M350.094 12c0 .625-.313 1.208-.833 1.554l-4.843 3.22c-.252.167-.549.257-.851.257-.849 0-1.536-.687-1.536-1.535V8.504c0-.848.687-1.535 1.536-1.535.302 0 .599.09.851.257l4.843 3.22c.52.346.833.929.833 1.554z'
 				/>
@@ -196,7 +196,7 @@ export default function PlaySkipIconAni() {
 					fill-rule='evenodd'
 				/>
 			</g>
-			<g fill='#ffffff'>
+			<g>
 				<path
 					d='M374.05 12c0 .625-.312 1.208-.832 1.555l-4.815 3.204c-.251.168-.548.258-.851.258-.848 0-1.535-.688-1.535-1.536V8.519c0-.848.687-1.536 1.535-1.536.303 0 .6.09.851.258l4.815 3.204c.52.347.832.93.832 1.555z'
 				/>
@@ -209,7 +209,7 @@ export default function PlaySkipIconAni() {
 					fill-rule='evenodd'
 				/>
 			</g>
-			<g fill='#ffffff'>
+			<g>
 				<path
 					d='M398.021 12c0 .625-.312 1.208-.832 1.555l-4.795 3.194c-.252.168-.549.258-.852.258-.848 0-1.535-.687-1.535-1.535V8.528c0-.848.687-1.535 1.535-1.535.303 0 .6.09.852.258l4.795 3.194c.52.347.832.93.832 1.555z'
 				/>
@@ -222,7 +222,7 @@ export default function PlaySkipIconAni() {
 					fill-rule='evenodd'
 				/>
 			</g>
-			<g fill='#ffffff'>
+			<g>
 				<path
 					d='M422.005 12c0 .625-.312 1.208-.832 1.555l-4.784 3.189c-.252.168-.549.258-.852.258-.848 0-1.535-.687-1.535-1.535V8.533c0-.848.687-1.535 1.535-1.535.303 0 .6.09.852.258l4.784 3.189c.52.347.832.93.832 1.555z'
 				/>
@@ -235,7 +235,7 @@ export default function PlaySkipIconAni() {
 					fill-rule='evenodd'
 				/>
 			</g>
-			<g fill='#ffffff'>
+			<g>
 				<path
 					d='M446 12c0 .625-.312 1.208-.832 1.555l-4.781 3.187c-.252.168-.549.258-.852.258-.848 0-1.535-.687-1.535-1.535v-6.93c0-.848.687-1.535 1.535-1.535.303 0 .6.09.852.258l4.781 3.187c.52.347.832.93.832 1.555z'
 				/>
diff --git a/pages/editor.tsx b/pages/editor.tsx
index 177ec9f..0ab0307 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -615,6 +615,7 @@ function TimelineEditor(props: {
 	</>;
 }
 
+// https://material.io/design/navigation/navigation-transitions.html#peer-transitions
 function DefaultSettings() {
 	var setPlaying = usePlaying((st: any) => st.setPlaying);
 	var setWorkingTimeline = useWorkingTimeline((st: any) => st.setTimeline);
diff --git a/styles/editor.css b/styles/editor.css
index 296a6b7..7c7bd86 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -41,6 +41,7 @@
 	display: block;
 }
 
+.MuiSwitch-root { margin: -6px 0px; }
 .settings .inner .section > * { margin-bottom: 8px; }
 .settings .inner .scroll {
 	top: 32px;
@@ -54,11 +55,18 @@
 	background-color: var(--piss);
 	color: var(--bg);
 }
-.settings .inner .section .settings {
-	display: grid;
-	grid-auto-flow: column;
+.settings .inner .section .body {
+	font-size: .875em;
+	font-weight: 500;
 }
 
+.MuiSwitch-root .MuiSwitch-thumb { color: var(--c700); }
+.MuiSwitch-root .MuiSwitch-track { background-color: var(--c700); }
+.MuiSwitch-root .Mui-checked .MuiSwitch-thumb { color: var(--gruble); }
+.MuiSwitch-root .Mui-checked + .MuiSwitch-track { background-color: var(--gruble) !important; }
+.MuiSwitch-root .Mui-checked { color: var(--gruble) !important; }
+.MuiSwitch-root .Mui-checked:hover { background-color: rgba(93, 233, 174, 0.04) !important; }
+
 .settings ::-webkit-scrollbar-track,
 .settings ::-webkit-scrollbar-track-piece,
 .settings ::-webkit-scrollbar {