color-synth

commit 11760e7cf8231cfda353e8f26c41773cb5e314fe
parent e1f02c2483800784f58fd554b24f27e16207437e
Author: massi <mdsiboldi@gmail.com>
Date:   Mon, 21 Aug 2023 23:56:41 -0700

unit style pass

Diffstat:
M
src/lib/Control.svelte
 | 
4
++++
M
src/lib/InputDragger.svelte
 | 
9
+++++----
M
src/routes/+page.svelte
 | 
49
++++++++++++++++++++++++++++++++++++++++++-------

3 files changed, 51 insertions(+), 11 deletions(-)
diff --git a/src/lib/Control.svelte b/src/lib/Control.svelte
@@ -60,6 +60,10 @@
 </div>
 
 <style>
+	h3 {
+		margin: 0;
+		padding: 3px 3px 3px 24px;
+	}
 	.control-wrapper {
 		position: relative;
 		width: 100%;
diff --git a/src/lib/InputDragger.svelte b/src/lib/InputDragger.svelte
@@ -25,11 +25,12 @@
 	}
 	.input-dragger {
 		background: lightgreen;
-		width: 5px;
 		position: absolute;
-		top: 2px;
-		bottom: 2px;
-		left: -10px;
+		top: 17px;
+		left: 11px;
+		width: 16px;
+		height: 16px;
+		border-radius: 8px;
 	}
 	.connect.connected {
 		background: red;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { unitStore, unitToConnect } from '$lib/stores';
+	import { unitDragging, unitStore, unitToConnect } from '$lib/stores';
 	import { onMount } from 'svelte';
 	import { debounce } from 'lodash';
 	import Sink from '$lib/Sink.svelte';
@@ -220,10 +220,12 @@
 	.output-dragger {
 		position: absolute;
 		top: 0;
-		bottom: 0;
-		right: -20px;
-		width: 20px;
+		right: 0;
+		width: 16px;
+		height: 16px;
+		border-radius: 8px;
 		background: purple;
+		margin: 5px;
 	}
 	#sinks {
 		position: absolute;
@@ -233,10 +235,9 @@
 		flex-direction: column;
 	}
 	.unit {
-		width: 150px;
+		width: 300px;
 		position: absolute;
 		z-index: 1;
-		background: black;
 	}
 	#buttons {
 		z-index: 1;
@@ -245,7 +246,8 @@
 		right: 5px;
 	}
 	h2 {
-		margin: 0 5px;
+		margin: 0;
+		padding: 0 5px;
 		background: white;
 	}
 	canvas {
@@ -259,4 +261,37 @@
 		top: 10px;
 		display: flex;
 	}
+	.unit {
+		--main-color: #eee;
+		--r: 6px;
+		--shadow: rgba(200, 200, 200, 255);
+		--s-g: linear-gradient(45deg, #eee, #dedede);
+		--angle: 45deg;
+		background: var(--s-g);
+		padding: 2px;
+		border-radius: var(--r);
+	}
+	.unit::before,
+	.unit::after {
+		content: '';
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		background: var(--s-g);
+		border-radius: var(--r);
+		z-index: -1;
+	}
+	.unit::before {
+		top: 2px;
+		left: 2px;
+	}
+	.unit::after {
+		top: 4px;
+		left: 4px;
+	}
+	.unit > div {
+		overflow: hidden;
+		background: var(--main-color);
+		border-radius: var(--r);
+	}
 </style>