Aligned button slider to pixels

global/globalScript.js

@@ -72,7 +72,7 @@ function debugPrint(title, value) {
   }
 }
 
-function toggleGrid() {
+function toggleGrid(offX = 0, offY = 0) {
   if (gridVisible) {
     document.getElementById("gridCanvas").remove()
     gridVisible = false
@@ -84,8 +84,8 @@ function toggleGrid() {
   canvasEl.width = window.innerWidth
   canvasEl.height = window.innerHeight
   canvasEl.style.position = "absolute"
-  canvasEl.style.top = "0%"
-  canvasEl.style.left = "0%"
+  canvasEl.style.top = `${offY * pxDensity}px`
+  canvasEl.style.left = `${offX * pxDensity}px`
   canvasEl.style.pointerEvents = "none"
 
   let ctx = canvasEl.getContext("2d")

global/globalStyle.css

@@ -68,8 +68,8 @@ canvas {
 .switch {
   position: relative;
   display: inline-block;
-  width: 60px;
-  height: 34px;
+  width: calc(8px * var(--pxDensity));
+  height: calc(4px * var(--pxDensity));
 }
 .switch input {
   display: none;
@@ -87,10 +87,10 @@ canvas {
 .switchDecor:before {
   position: absolute;
   content: "";
-  height: 26px;
-  width: 26px;
-  left: 4px;
-  bottom: 4px;
+  height: calc(2px * var(--pxDensity));
+  width: calc(2px * var(--pxDensity));
+  left: calc(1px * var(--pxDensity));
+  bottom: calc(1px * var(--pxDensity));
   background-color: var(--navBarBtn_Inner);
   transition: 0.2s steps(2, end);
 }
@@ -98,5 +98,5 @@ canvas {
   background-color: var(--brightBlue);
 }
 .switch input:checked + .switchDecor:before {
-  transform: translateX(26px);
+  transform: translateX(calc(4px * var(--pxDensity)));
 }