Update input element design

src/editor/components/seInput.js

@@ -13,6 +13,13 @@ template.innerHTML = `
     bottom: 1px;
     right: -4px;
     position: relative;
+    margin-left: 4px;
+    margin-right: 4px;
+    color: #fff;
+  }
+  elix-input {
+    background-color: var(--input-color);
+    border-radius: 3px;
   }
   </style>
   <img src="./images/logo.svg" alt="icon" width="12" height="12" />

src/editor/components/seList.js

@@ -4,13 +4,19 @@ import 'elix/define/DropdownList.js';
 const template = document.createElement('template');
 template.innerHTML = `
 <style>
+elix-dropdown-list {
+  margin: 5px;
+}
+
+elix-dropdown-list:hover {
+  background-color: var(--icon-bg-color-hover);
+}
+
 ::part(popup-toggle) {
   display: none;
 }
 ::slotted(*) {
-  background: #E8E8E8;
   padding:0;
-  /*border: 1px solid #B0B0B0;*/
   width:100%;
 }
 </style>
@@ -18,7 +24,7 @@ template.innerHTML = `
   <elix-dropdown-list>
     <slot></slot>
   </elix-dropdown-list>
-  
+
 `;
 /**
  * @class SeList

src/editor/components/seListItem.js

@@ -4,15 +4,17 @@ import 'elix/define/Option.js';
 const template = document.createElement('template');
 template.innerHTML = `
   <style>
-  elix-option{  
+  elix-option{
     padding:0.25rem 0.125rem !important;
-    background: #E8E8E8;
+    background-color: var(--icon-bg-color);
-    border-bottom: 1px solid #B0B0B0;
   }
-  </style>  
+  elix-option:hover{
+    background-color: var(--icon-bg-color-hover);
+  }
+  </style>
   <elix-option aria-label="option">
     <slot></slot>
-  </elix-option>  
+  </elix-option>
 `;
 /**
  * @class SeMenu

src/editor/components/seSpinInput.js

@@ -12,10 +12,22 @@ template.innerHTML = `
     bottom: 1px;
     right: -4px;
     position: relative;
+    margin-left: 4px;
+    margin-right: 4px;
+    color: #fff;
+  }
+  elix-number-spin-box {
+    background-color: var(--input-color);
+    border-radius: 3px;
+    height: 20px !important;
+    margin-top: 1px;
   }
   elix-number-spin-box::part(spin-button) {
     padding: 0px;
   }
+  elix-number-spin-box::part(input) {
+    width: 3em;
+  }
   elix-number-spin-box{
     width: 54px;
     height: 24px;

src/editor/svgedit.css

@@ -7,6 +7,7 @@
   --ruler-color: #B2B2B2;
   --icon-bg-color: #72797A;
   --icon-bg-color-hover: #2B3C45;
+  --input-color: #B2B2B2;
 }
 
 body {
@@ -192,6 +193,13 @@ hr {
   top: 4px;
   left: 5px;
   z-index: 5;
+  color: #fff;
+  border-radius: 3px;
+}
+
+#main_button:hover {
+  background-color: var(--icon-bg-color-hover);
+  color: #fff;
 }
 
 #main_icon {