Design attempt

css/spectrum/spectrum-overrides.css

@@ -2,12 +2,26 @@
  * Piskel specific CSS for spectrum widgets
  */
 
+/* Widget's main container */
+.sp-container {
+  border-radius: 4px;
+  background-color: #2B2B2B;
+  border: solid 4px #888;
+  padding: 5px;
+}
+
+/* Color square container */
+.sp-color, .sp-hue {
+  border : 1px solid #222;
+}
+
 /* Remove the padding on the input container */
 .sp-replacer {
   padding: 3px;
   height: 50%;
   border-width: 0;
   box-sizing: border-box;
+  background-color: #888;
 }
 .sp-replacer:first-of-type {
   padding-bottom: 0px;
@@ -30,19 +44,24 @@
   border-width: 0;
 }
 
+.sp-palette-row-selection {
+  max-width: 62px;
+}
+
 .sp-palette .sp-thumb-el {
-  margin : 0 0 5px 0;
+  margin : 0 5px 5px 0;
+  width: 24px;
+  height: 24px;
+  border-color: #444;
+
 }
 
 .sp-picker-container, .sp-palette-container {
   padding-top: 5px;
   padding-right: 5px;
   padding-left: 5px;
-}
-
-.sp-palette .sp-thumb-el {
-  width: 24px;
-  height: 24px;
+  border-left-width: 0;
+  border-right-width: 0;
 }
 
 .sp-slider {
@@ -64,4 +83,9 @@
   background: none;
   box-sizing:border-box;
   box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(0,0,0,0.5);
+}
+
+.sp-palette .sp-thumb-el.sp-thumb-active {
+  border-color: gold;
+  box-shadow: 0 0 0px 1px gold;
 }

js/lib/spectrum/spectrum.js

@@ -502,7 +502,7 @@
             hideAll();
             visible = true;
 
-            $(doc).bind("mousedown.spectrum", hide);
+            $(doc).bind("mousedown.spectrum", onMousedown);
 
             // Piskel-specific : change the color as soon as the user does a mouseup
             $(doc).bind("mouseup.spectrum", updateColor);
@@ -522,6 +522,16 @@
             boundElement.trigger('show.spectrum', [ colorOnShow ]);
         }
 
+        function onMousedown (e) {
+            var target = $(e.target);
+            var parents = target.parents();
+            var isClickOutsideWidget = !parents.is(container) && !target.is(container);
+
+            if (isClickOutsideWidget) {
+                hide(e);
+            }
+        }
+
         // Piskel-specific (code extracted to method)
         function updateColor(e) {
             var colorHasChanged = !tinycolor.equals(get(), colorOnShow);
@@ -545,7 +555,7 @@
             if (!visible || flat) { return; }
             visible = false;
 
-            $(doc).unbind("click.spectrum", hide);
+            $(doc).unbind("mousedown.spectrum", onMousedown);
 
             // Piskel-specific
             $(doc).unbind("mouseup.spectrum", updateColor);