Initial release

view/assets/stylesheets/style.css

@@ -0,0 +1,114 @@
+:root {
+	--text-color: #FDFDFD;
+
+	background-color: rgba(8, 12, 16, 1.0);
+}
+
+:root, body, main, #sections {
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	margin: 0px;
+}
+
+button {
+	min-width: 96px;
+	min-height: 64px;
+}
+
+#sections, .deck, #mixer, #volume, #volume-meters, .volume-meter, .deck-pads {
+	display: flex;
+	justify-content: space-between;
+}
+
+#sections, #volume, #volume-meters, .deck-pads {
+	flex-direction: row;
+}
+
+#mixer, .deck {
+	flex-direction: column;
+	height: 100%;
+}
+
+.deck {
+	align-items: start;
+}
+
+.reverse.deck {
+	align-items: end;
+}
+
+#volume {
+	/* flex-grow: 1; */
+}
+
+.volume-slider, .speed-slider {
+	appearance: slider-vertical !important;
+	/* width: 8px;
+	height: 100%; */
+}
+
+.volume-meter {
+	flex-direction: column-reverse;
+	flex-grow: 1;
+	background-image: linear-gradient(0deg, lime 0%, orange 80%, red 100%);
+	width: 16px;
+}
+
+.volume-meter-level {
+	width: 100%;
+	background-color: white;
+	mix-blend-mode: multiply;
+	transition: height 0.05s ease-in-out;
+}
+
+.silence-meter-level {
+	flex-grow: 1;
+	width: 100%;
+	background-color: grey;
+	mix-blend-mode: multiply;
+}
+
+.deck-pads, .play {
+	margin: 16px;
+}
+
+.deck-pads {
+	flex-wrap: wrap;
+	width: 70%;
+	aspect-ratio: 4 / 2;
+}
+
+.deck-pad {
+	width: 25%;
+	aspect-ratio: 1 / 1;
+}
+
+/* input[type="range"] {
+	appearance: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	height: 8px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+	appearance: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	background: var(--text-color);
+	width: 16px;
+	height: 48px;
+	border-radius: 0px;
+}
+
+input[type="range"]::-moz-range-thumb {
+	appearance: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	background: var(--text-color);
+	width: 16px;
+	height: 48px;
+	border-radius: 0px;
+} */