replace handles with SVG

src/webui/www/private/css/Layout.css

@@ -267,51 +267,24 @@ li.divider {
 }
 
 .horizontalHandle .handleIcon {
+    background: url("../images/handle-icon-horizontal.svg") center center
+        no-repeat;
     height: 6px;
     margin: 0 auto;
     overflow: hidden;
-    position: relative;
-    width: 20px;
-}
-
-.horizontalHandle .handleIcon::before {
-    background: currentcolor;
-    box-shadow:
-        4px 0 0 currentcolor,
-        8px 0 0 currentcolor;
-    content: "";
-    height: 2px;
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: 2px;
 }
 
 .columnHandle {
+    background: url("../images/handle-icon.svg") center center no-repeat;
     border: 1px solid var(--color-border-default);
     border-bottom: 0;
     border-top: 0;
     float: left;
     min-height: 10px;
-    position: relative;
+    overflow: hidden;
     width: 8px;
 }
 
-.columnHandle::before {
-    background: currentcolor;
-    box-shadow:
-        0 4px 0 currentcolor,
-        0 8px 0 currentcolor;
-    content: "";
-    height: 2px;
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: 2px;
-}
-
 /* Toolboxes */
 
 .toolbox {

src/webui/www/private/images/handle-icon-horizontal.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="8">
+    <circle cx="6" cy="4" r="1" fill="#999" />
+    <circle cx="10" cy="4" r="1" fill="#999" />
+    <circle cx="14" cy="4" r="1" fill="#999" />
+</svg>

src/webui/www/private/images/handle-icon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="20">
+    <circle cx="4" cy="6" r="1" fill="#999" />
+    <circle cx="4" cy="10" r="1" fill="#999" />
+    <circle cx="4" cy="14" r="1" fill="#999" />
+</svg>