restyle turn progress bar

web/pw-server/src/lib/components/Visualizer.svelte

@@ -57,11 +57,13 @@
   </div>
 
   <div id="meta">
+    <div class="infocontainer">
       <div id="turnCounter">0 / 0</div>
       <div>
         <span>Ms per frame:&nbsp;</span>
         <input type="number" id="speed" value="300" />
       </div>
+    </div>
     <div class="slidecontainer">
       <input type="range" min="0" max="1" value="1" class="slider" id="turnSlider" />
     </div>

web/pw-visualizer/src/style.css

@@ -20,11 +20,10 @@
     }
     
     #meta {
-        padding: 10px 2%;
         color: white;
         position: absolute;
         bottom: 0;
-        width: 96%;
+        width: 100%;
     }
     
     .options {
@@ -53,6 +52,71 @@
         background-color: #777;
     }
 
+    .infocontainer {
+        padding: 10px;
+        position: absolute;
+        bottom: 14px;
+    }
+
+
+    .slidecontainer {
+        width: 100%;
+    }
+    
+    .slider {
+        width: 100%;
+        height: 12px;
+        position: absolute;
+        bottom: 0;
+        cursor: pointer;
+        border-top: 1px solid black;
+        margin: 0;
+        padding: 0;
+    }
+
+    /*Chrome*/
+    @media screen and (-webkit-min-device-pixel-ratio:0) {
+        .slider {
+            overflow: hidden;
+            -webkit-appearance: none;
+            background-color: #555;
+        }
+            
+        /* .slider::-webkit-slider-runnable-track {
+            height: 12px;
+            -webkit-appearance: none;
+            color: #fff;
+            margin-top: -1px;
+        } */
+        
+        .slider::-webkit-slider-thumb {
+            width: 18px;
+            height: 12px;
+            border-radius: 50%;
+            -webkit-appearance: none;
+            cursor: ew-resize;
+            background: #fff;
+        }   
+
+    }
+    
+
+    /** FF*/
+    .slider::-moz-range-thumb {
+        background: #fff;
+        border: 0;
+        height: 100%;
+    }
+    .slider::-moz-range-progress {
+        background-color: #0073e5; 
+        height: 100%;
+    }
+    .slider::-moz-range-track {  
+        background-color: #000000;
+        height: 100%;
+    }
+
+    
     .lds-roller {
         display: none;
     }
@@ -178,29 +242,7 @@
         height: 100%;
     }
     
-    .button {
-        position: absolute;
-        top: 10px;
-        right: 10px;
-        width: 0;
-        height: 0;
-    }
 
-    .button::before {
-        content: "";
-        display: block;
-        float: left;
-        margin: 0 -20px 0 0;
-        font-family: 'fontawesome';
-        content: "\f1e1";
-        transform: translate(-1em, 0px);
-        color: antiquewhite;
-        font-size: 1.5em;
-    }
-    
-    .button:hover::before {
-        color: #ff7f00;
-    }
     /* ----------------------------------------------
  * Generated by Animista on 2019-9-17 14:35:13
  * Licensed under FreeBSD License.
@@ -234,44 +276,3 @@
             transform: translate(-50%, -150%);
         }
     }
-    /**
- * ----------------------------------------
- * Copy from https://www.w3schools.com/howto/howto_js_rangeslider.asp
- * ----------------------------------------
- */
-    
-    .slidecontainer {
-        margin-top: 10px;
-        width: 100%;
-        /* Width of the outside container */
-    }
-    
-    .slider {
-        -webkit-appearance: none;
-        width: 100%;
-        height: 15px;
-        border-radius: 5px;
-        background: #d3d3d3;
-        outline: none;
-        opacity: 0.7;
-        -webkit-transition: .2s;
-        transition: opacity .2s;
-    }
-    
-    .slider::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        appearance: none;
-        width: 25px;
-        height: 25px;
-        border-radius: 50%;
-        background: #ff7000;
-        cursor: pointer;
-    }
-    
-    .slider::-moz-range-thumb {
-        width: 25px;
-        height: 25px;
-        border-radius: 50%;
-        background: #ff7000;
-        cursor: pointer;
-    }