[webthrottle] Replace checkbox by toggle button, see #178

server/www/css/throttle.css

@@ -53,6 +53,11 @@
   width: 100%;
 }
 
+.text-center
+{
+  text-align: center;
+}
+
 .text-right
 {
   text-align: right;
@@ -85,7 +90,8 @@ html
 {
   font-family: sans-serif;
   height: -webkit-fill-available;
-  touch-action: manipulation; /* disable iOS double tap zoom */
+  touch-action: manipulation;
+  /* disable iOS double tap zoom */
 }
 
 body
@@ -137,11 +143,22 @@ header h1
   padding: 0.5rem;
 }
 
-#settings label
+#settings label,
+#settings span.label
 {
   display: block;
 }
 
+#settings button
+{
+  background-color: #bb86fc;
+  color: black;
+  border: none;
+  border-radius: 0.5rem;
+  display: inline-block;
+  padding: 0.5rem 1rem;
+}
+
 #body>div.status
 {
   display: flex;
@@ -216,6 +233,54 @@ input[type=text]
   margin: 0.5rem 0 1rem 0;
 }
 
+input.toggle_switch[type=checkbox]
+{
+  height: 0;
+  width: 0;
+  visibility: hidden;
+}
+
+label.toggle_switch
+{
+  cursor: pointer;
+  width: 3rem;
+  height: 1.5rem;
+  background: grey;
+  display: block;
+  border-radius: 1.5rem;
+  position: relative;
+}
+
+label.toggle_switch:after
+{
+  content: "";
+  position: absolute;
+  top: 0.1rem;
+  left: 0.1rem;
+  width: 1.3rem;
+  height: 1.3rem;
+  background: white;
+  border-radius: 1.3rem;
+  transition: 300ms;
+}
+
+input.toggle_switch:checked+label.toggle_switch
+{
+  background: #bbfc86;
+  transition: 300ms;
+}
+
+input.toggle_switch:checked+label.toggle_switch:after
+{
+  left: calc(100% - 0.1rem);
+  transform: translateX(-100%);
+}
+
+label.toggle_switch:active:after
+{
+  width: 1.95rem;
+}
+
 div.message
 {
   z-index: 2;

server/www/throttle.html

@@ -20,11 +20,11 @@
         <label for="throttle_name">Name:</label>
         <input type="text" id="throttle_name">
       </div>
-      <div>
-        <label for="stop_train_on_release">Stop train on release:</label>
-        <input type="checkbox" id="stop_train_on_release" checked="checked">
+      <div class="flex-row">
+        <label class="flex-resize">Stop train on release</label>
+        <input class="toggle_switch" type="checkbox" id="stop_train_on_release" checked="checked"><label class="toggle_switch" for="stop_train_on_release"></label>
       </div>
-      <div>
+      <div class="text-center">
         <button id="close_settings">Close</button>
       </div>
     </div>