feat(color preview): improve the look and feel

Author: Kully

main.css

@@ -9,7 +9,9 @@
   --line-height-toolbar-text: 30px;
 
   --palette-width: 80px;
-  --color-preview-width: 35px;
+  --color-preview-width: 16px;
+  --color-preview-offset: 4px;
+
   --palette-cell-width: 20px;
   --palette-cell-height: 20px;
   --palette-margin-right: 10px;
@@ -284,20 +286,24 @@ body {
 #active-color-preview-1, #active-color-preview-2{
 	position: absolute;
 	width: var(--color-preview-width);
-	height: var(--toolbar-height);
-	border: 1px solid #eef;
+	height: var(--color-preview-width);
+	outline: 1px solid #eef;
+	border: 1px solid #333;
 	border-radius: var(--border-radius);
 	margin-left: var(--palette-margin-right);
 	transform: translate(-2px, -1px);
 }
 #active-color-preview-1 {
-	left: var(--toolbar-width);
+	left: calc( var(--color-preview-offset) + var(--toolbar-width) );
+	top: var(--color-preview-offset);
 }
 #active-color-preview-2 {
-	left: calc(var(--toolbar-width) + var(--palette-width) - var(--color-preview-width));
+	left: calc( var(--toolbar-width) + var(--color-preview-width) - var(--color-preview-offset) );
+	top: calc( var(--color-preview-width) - var(--color-preview-offset) );
 }
+
 .active_indicator {
-	border: 2px solid #eef !important;
+	z-index: 9999 !important;
 }
 
 #canvas-div {