Fixing look & feel

code/html/custom.css

@@ -61,7 +61,7 @@ h2 {
 .hint {
     color: #ccc;
     font-size: 80%;
-    margin: 0px 0 10px 0;
+    margin: -10px 0 10px 0;
 }
 
 .hint a {
@@ -236,25 +236,24 @@ span.slider {
     Checkboxes
    -------------------------------------------------------------------------- */
 
-.toggleWrapper{
+.toggleWrapper {
     overflow: hidden;
-    width:auto;
-    height:29px;
-    border: 1px solid #AAA;
-    margin: 0px;
+    width: auto;
+    height: 30px;
+    margin: 0px 0px 10px 0px;
     padding: 0px;
     border-radius: 4px;
     box-shadow: inset 1px 1px #CCC;
 }
-.toggleWrapper input{
+.toggleWrapper input {
     position: absolute;
     left: -99em;
 }
-label[for].toggle{
+label[for].toggle {
     margin: 0px;
     padding: 0px;
 }
-.toggle{
+.toggle {
     letter-spacing:normal;
     cursor: pointer;
     display: inline-block;
@@ -267,7 +266,8 @@ label[for].toggle{
     -webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
     transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
 }
-.toggle:before, .toggle:after{
+.toggle:before,
+.toggle:after {
     position: absolute;
     line-height: 30px;
     font-size: .7em;
@@ -275,21 +275,21 @@ label[for].toggle{
     -webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
     transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
 }
-.toggle:before{
+.toggle:before {
     content: "NO";
     left: 20px;
 }
-input[name="relay"] + .toggle:before{
+input[name="relay"] + .toggle:before {
     content: "OFF";
 }
 .toggle:after{
     content: "YES";
     right: 20px;
 }
-input[name="relay"] + .toggle:after{
+input[name="relay"] + .toggle:after {
     content: "ON";
 }
-.toggle__handler{
+.toggle__handler {
     display: inline-block;
     position: relative;
     z-index: 1;
@@ -315,7 +315,7 @@ input:checked + .toggle:before {
 input + .toggle:before {
     color: #fff;
 }
-input:checked + .toggle .toggle__handler{
+input:checked + .toggle .toggle__handler {
     width: 50%;
     background: #00c000;
     -webkit-transform: translateX(65px);
@@ -326,7 +326,7 @@ input:checked + .toggle .toggle__handler{
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
 }
-input[disabled] + .toggle .toggle__handler{
+input[disabled] + .toggle .toggle__handler {
     background: #ccc;
 }
 

code/html/index.html

@@ -633,11 +633,10 @@
                                     <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="wifiScan" tabindex="1" /></div>
                                     <div class="pure-u-0 pure-u-lg-1-2"></div>
                                     <div class="pure-u-0 pure-u-lg-1-4"></div>
-                                    <div class="pure-u-1 pure-u-lg-3-4 hint"><thead>
+                                    <div class="pure-u-1 pure-u-lg-3-4 hint">
                                         ESPurna will scan for visible WiFi SSIDs and try to connect to networks defined below in order of <strong>signal strength</strong>, even if multiple AP share the same SSID.
                                         When disabled, ESPurna will try to connect to the networks in the same order they are listed below.
                                         Disable this option if you are <strong>connecting to a single access point</strong> (or router) or to a <strong>hidden SSID</strong>.
-                                        </thead>
                                     </div>
                                     <div class="pure-u-0 pure-u-lg-1-4"></div>
                                     <button class="pure-button button-wifi-scan" type="button">Scan now</button>
@@ -858,7 +857,8 @@
 
                                 <div class="pure-g">
                                     <label class="pure-u-1 pure-u-lg-1-4">Use JSON payload</label>
-                                    <div class="pure-u-1 pure-u-lg-3-4"><input type="checkbox" name="mqttUseJson" tabindex="32" /></div>
+                                    <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="mqttUseJson" tabindex="32" /></div>
+                                    <div class="pure-u-1 pure-u-lg-1-2"></div>
                                     <div class="pure-u-1 pure-u-lg-1-4"></div>
                                     <div class="pure-u-1 pure-u-lg-3-4 hint">
                                         All messages (except the device status) will be included in a JSON payload along with the timestamp and hostname