bugfixing

main.js

@@ -37,7 +37,7 @@ clear.addHandler(canvas.clear.bind(canvas));
 window.addEventListener("resize", onWindowResize, false);
 
 let form = new Form(panelWidth, panelHeight - panelPaddingTop);
-let randomBox = new SwitchBox(random, 60, 30);
+let randomBox = new SwitchBox(random, 40, 60);
 let amountBox = new NumericBox(100, 30);
 amountBox.setValue(amountOfShapes);
 
@@ -79,7 +79,7 @@ function paint() {
 }
 
 function adjustButtons(width) {
-    paintButton.setPosition(width / 4, 25);
+    paintButton.setPosition(width / 4 - Button.width, 25);
-    settings.setPosition(width / 2, 25);
+    settings.setPosition(width / 2 - Button.width, 25);
-    clear.setPosition(width * 0.75, 25);
+    clear.setPosition(width * 0.75 - Button.width, 25);
 }

style.css

@@ -1,6 +1,8 @@
 body {
     margin: 0;
     overflow: hidden;
+    color: #555555;
+    font-family: "sans-serif";
 }
 
 * {
@@ -84,11 +86,29 @@ button:hover {
     border: none;
     height: 100%;
     width: 100%;
+    outline: none;
+    color: #555555;
+    -webkit-box-shadow: inset 0px -1px 0 #555555;
+    -moz-box-shadow: inset 0px -1px 0 #555555;
+    box-shadow: inset 0px -1px 0 #555555;
+    
+    -webkit-transition: box-shadow 0.2s;
+    -moz-transition: box-shadow 0.2s;
+    -ms-transition: box-shadow 0.2s;
+    -o-transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s;
+}
+
+.numericBox:focus {
+    -webkit-box-shadow: inset 0 -2px 0 #00b6ff;
+    -moz-box-shadow: inset 0 -2px 0 #00b6ff;
+    box-shadow: inset 0 -2px 0 #00b6ff;
 }
 
 .form {
     overflow-x: hidden;
-    overflow-y: auto
+    overflow-y: auto;
+    padding: 10px;
 }
 
 .form > div {
@@ -101,16 +121,21 @@ button:hover {
     transition: height 0.2s ease-in-out;
 }
 
+.form > div:not(:last-child) {
+    margin-bottom: 10px;
+}
+
 .form > div > div {
     overflow: hidden;
     height: 100%;
     float: left;
 }
 
-.form > div > div:nth-child(0) {
+.form > div > div:nth-child(1) {
-    width: 50%
+    width: 60%
 }
 
-.form > div > div:nth-child(1) {
+.form > div > div:nth-child(2) {
-    width: 50%
+    width: 40%;
+    text-align: right;
 }

ui/editors/form.js

@@ -15,6 +15,7 @@ class Form extends UI {
 
         labelCell.innerText = label;
         editorCell.appendChild(editor.element);
+        editor.element.style.float = "right";
 
         line.appendChild(labelCell);
         line.appendChild(editorCell);

ui/panel.js

@@ -8,8 +8,11 @@ class Panel extends UI {
         this.element.classList.add("panel");
         this.element.classList.add("shadow");
         this.element.classList.add("hidden");
+
+        this._children = [];
     }
     add(ui) {
+        this._children.push(ui);
         this.element.appendChild(ui.element);
     }
     toggle() {