diff --git a/main.js b/main.js index 9842d46..ecf80ab 100644 --- a/main.js +++ b/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); - settings.setPosition(width / 2, 25); - clear.setPosition(width * 0.75, 25); + paintButton.setPosition(width / 4 - Button.width, 25); + settings.setPosition(width / 2 - Button.width, 25); + clear.setPosition(width * 0.75 - Button.width, 25); } \ No newline at end of file diff --git a/style.css b/style.css index e113f84..359aa98 100644 --- a/style.css +++ b/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) { - width: 50% +.form > div > div:nth-child(1) { + width: 60% } -.form > div > div:nth-child(1) { - width: 50% +.form > div > div:nth-child(2) { + width: 40%; + text-align: right; } \ No newline at end of file diff --git a/ui/editors/form.js b/ui/editors/form.js index 3254ece..e922e17 100644 --- a/ui/editors/form.js +++ b/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); diff --git a/ui/panel.js b/ui/panel.js index 76092c8..9670ddd 100644 --- a/ui/panel.js +++ b/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() {