diff --git a/style.css b/style.css index 8b186c4..180b648 100644 --- a/style.css +++ b/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; diff --git a/style.less b/style.less index 05978ee..f9cbcce 100644 --- a/style.less +++ b/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;