Improve layer handle design

dist/editor/svgedit.css

@@ -7,7 +7,7 @@
   --ruler-color: #f4f4f4;
 }
 
-body {  
+body {
   background: var(--main-bg-color);
 }
 
@@ -171,12 +171,13 @@ hr {
   display: inline-block;
   position: absolute;
   background-color: --main-bg-color;
-  font-weight: bold;
+  color: #fff;
+  font-weight: 100;
   left: 0;
   top: 40%;
   width: 1em;
-  padding: 5px 1px 5px 5px;
-  margin-left: 3px;
+  padding: 5px 5px 5px 5px;
+  margin-left: 6px;
   cursor: pointer;
   border-radius: 5px;
   -moz-border-radius: 5px;
@@ -185,9 +186,6 @@ hr {
   -webkit-user-select: none;
 }
 
-#sidepanel_handle:hover {
-  font-weight: bold;
-}
 
 #sidepanel_handle * {
   cursor: pointer;
@@ -208,7 +206,7 @@ hr {
   overflow: hidden;
   display: flex;
   justify-content: center;
-  align-items: center;  
+  align-items: center;
 }
 
 #layerlist {

src/editor/components/seExplorerButton.js

@@ -6,7 +6,7 @@ template.innerHTML = `
   }
   .menu-button:hover, se-button:hover, .menu-item:hover
   {
-    background-color: #2B3C45;
+    background-color: var(--icon-bg-color-hover);
   }
   img {
     border: none;