styling a few inputs

style.css

@@ -25,6 +25,9 @@ input[type="color"] {
   border: none;
   background: none;
 }
+input[type="color"][disabled] {
+  opacity: 0.5;
+}
 table {
   margin: 0 auto;
 }
@@ -39,7 +42,9 @@ table th {
   text-align: right;
 }
 textarea {
-  height: 4em;
+  height: 256px;
+  width: 256px;
+  margin: 1em;
 }
 textarea,
 input {
@@ -49,18 +54,24 @@ input {
   margin: 0 auto;
 }
 .section {
-  width: 33.33vw;
-  height: 33.33vw;
+  width: 20vw;
+  height: 20vw;
   display: table-cell;
   background-color: #d3cbd0;
   color: #594a54;
 }
-#brightness {
+#brightness,
+#threshold {
   width: 256px;
 }
-#brightness + label {
+#brightness + label,
+#threshold + label {
   margin: 0 auto;
 }
+#imageUpload {
+  padding: 1em 0;
+  width: 256px;
+}
 #preview {
   margin: 0 auto;
   width: 256px;

style.less

@@ -25,6 +25,10 @@ canvas {
 }
 
 input[type="color"] {
+    &[disabled] {
+        opacity: 0.5;
+    }
+
     width: 2em;
     height: 2em;
     margin: 0;
@@ -50,7 +54,9 @@ table {
 }
 
 textarea {
-    height: 4em;
+    height: 256px;
+    width: 256px;
+    margin: 1em;
 }
 
 textarea, input {
@@ -64,14 +70,14 @@ textarea, input {
 // make this just for desktop view?
 // put sections in a single column on mobile/etc?
 .section {
-    width: 33.33vw;
-    height: 33.33vw;
+    width: 20vw;
+    height: 20vw;
     display: table-cell;
     background-color: @light;
     color: @dark;
 }
 
-#brightness {
+#brightness, #threshold {
     + label{
         .centre;
     }
@@ -80,6 +86,11 @@ textarea, input {
     width: 256px;
 }
 
+#imageUpload {
+    padding: 1em 0;
+    width: 256px;
+}
+
 #preview {
     .centre;