increase slider on mobile. improve look of slider in dark mode

release.md

@@ -5,7 +5,7 @@ Full docs @ https://docs.grid.space/projects/kiri-moto
 
 # Release 3.6
 
-* mobile pinch zoom and layer slider improvements
+* mobile pinch zoom and layer slider usability improvements
 * update CLI to work in CAM mode and add working samples
 * improved FDM preview rendering speed and reduced memory usage
 * threaded task and message passing performance improvements

src/kiri/init.js

@@ -2049,11 +2049,18 @@ gapp.register("kiri.init", [], (root, exports) => {
         }
 
         // slider setup
-        const slbar = 30;
+        const mobile = moto.space.info.mob;
+        const slbar = mobile ? 80 : 30;
         const slbar2 = slbar * 2;
         const slider = ui.sliderRange;
         const drag = { };
 
+        if (mobile) {
+            ui.slider.classList.add('slider-mobile');
+            ui.sliderLo.classList.add('slider-mobile');
+            ui.sliderHi.classList.add('slider-mobile');
+        }
+
         function pxToInt(txt) {
             return txt ? parseInt(txt.substring(0,txt.length-2)) : 0;
         }
@@ -2081,7 +2088,7 @@ gapp.register("kiri.init", [], (root, exports) => {
                 drag.hiat = pxToInt(ui.sliderHold.style.marginRight);
                 drag.mdmax = drag.width - slbar - drag.loat;
                 drag.himax = drag.width - slbar - drag.mdat;
-                let cancel_drag = tracker.onmouseup = (ev) => {
+                let cancel_drag = tracker.ontouchend = tracker.onmouseup = (ev) => {
                     if (ev) {
                         ev.stopPropagation();
                         ev.preventDefault();

src/moto/space.js

@@ -1444,7 +1444,8 @@ gapp.register("moto.space", [], (root, exports) => {
                 ver: ctx.getParameter(ctx.VERSION),
                 ven: ctx.getParameter(ctx.VENDOR),
                 glr: ctx.getParameter(ctx.RENDERER),
-                pla: nav.platform
+                pla: nav.platform,
+                mob: nav.maxTouchPoints > 1 || (/android/i.test(nav.userAgent))
             };
 
             initialized = true;

web/kiri/index.css

@@ -3,6 +3,7 @@
     --bg-gray: rgba(0,0,0,0.25);
     --gradbar: linear-gradient(to right, #ddd, #666, #ddd);
     --holdbar: linear-gradient(to top, rgba(100,100,100,0.1), rgba(255,255,255,1), rgba(100,100,100,0.1));
+    --holdbar-dk: linear-gradient(to top, rgba(100,100,100,0.1), rgba(255,255,255,0.25), rgba(100,100,100,0.1));
     --holdbar-sf: linear-gradient(to top, rgba(200,200,200,0.1), rgba(255,255,255,1), rgba(200,200,200,0.1)) !important;
     --highlight: rgba(126,153,183,0.4);
     --main-color: rgba(126,153,183,1);
@@ -1531,6 +1532,9 @@ th, tr, td, label {
     bottom: 3px;
     pointer-events: all;
 }
+#slider.slider-mobile {
+    height: 40px !important;
+}
 #slider {
     display: none;
     height: 30px;
@@ -1552,15 +1556,16 @@ th, tr, td, label {
     flex-direction: row;
     align-items: center;
 }
-#slider-max {
+.dark #slider-center {
-    background-color: #ccc;
+    background-image: var(--holdbar-dk);
-    border-top-right-radius: 10px;
-    border-bottom-right-radius: 10px;
-    margin-left: 3px;
 }
 #slider-center {
     background-image: var(--holdbar);
 }
+.dark #slider-zero, .dark #slider-max {
+    background-color: #555;
+    color: white;
+}
 #slider-zero {
     z-index: 10;
     margin-right: 3px;
@@ -1568,6 +1573,15 @@ th, tr, td, label {
     border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;
 }
+#slider-max {
+    background-color: #ccc;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+    margin-left: 3px;
+}
+.dark #slider-hold {
+    background-color: rgba(255,255,255,0.25);
+}
 #slider-hold {
     background-color: rgba(0,0,0,0.15);
     position: absolute;
@@ -1575,6 +1589,9 @@ th, tr, td, label {
     right: 0;
     top: 0;
 }
+#slider-hold .slider-mobile {
+    width: 40px !important;
+}
 #slider-hold .handle {
     width: 15px;
     height: 100%;