From b2b53ec46e80674a5852656b99a4287055cf07ea Mon Sep 17 00:00:00 2001
From: peterd <peter@dematte.at>
Date: Tue, 3 Feb 2015 23:40:23 +0100
Subject: [PATCH] Demo update

---
 development/bg.png | Bin 0 -> 106 bytes
 index.html         |  20 +++++++++++---------
 2 files changed, 11 insertions(+), 9 deletions(-)
 create mode 100644 development/bg.png

diff --git a/development/bg.png b/development/bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..b93e0208e855ad2dae1c15a8f5857e8306cb51fe
GIT binary patch
literal 106
zcmeAS@N?(olHy`uVBq!ia0vp^JRr=-3?y@QpIZW?*aCb)T+f_217uz{HckOjOeH~n
z!T%YaZa44(@&r9y978y+Cnx+n(9rhJV1XjTd3)~JH!iPf21+t`y85}Sb4q9e05f_X
ARR910

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 1f7e007..d837da2 100644
--- a/index.html
+++ b/index.html
@@ -278,15 +278,17 @@ window.myColorPicker = $('input.color').colorPicker({
 			margin: '5px -2px',
 
 			buidCallback: function($elm) {
-				$elm.append('<div class="cp-patch"></div><div class="cp-disp"></div>');
+				$elm.append('<div class="cp-patch"><div></div></div><div class="cp-disp"></div>');
 			},
 
 			cssAddon: // could also be in a css file instead
-				'.cp-patch{float:left; padding:4px; margin:10px 0 0;' +
-					'height:14px; width: 14px; border:1px solid #aaa;}' +
-				'.cp-disp{padding:4px; margin-top:10px; font-size:12px;' +
+				'.cp-patch{float:left; margin:9px 0 0;' +
+					'height:24px; width: 24px; border:1px solid #aaa;}' +
+				'.cp-patch{background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEXMzMwAAADTMzNkAAAAAnRSTlP/AOW3MEoAAAARSURBVAjXY2D+wICG/jCgIQDPPwub2NOsgwAAAABJRU5ErkJggg==\');}' +
+				'.cp-patch div{height:24px; width: 24px;}' +
+				'.cp-disp{padding:4px 0 4px 4px; margin-top:10px; font-size:12px;' +
 					'height:16px; line-height:16px; color:#333;}' +
-				'.cp-color-picker{border:1px solid #999; padding:8px;' +
+				'.cp-color-picker{border:1px solid #999; padding:8px; box-shadow:5px 5px 16px rgba(0,0,0,0.4);' +
 					'background:#eee; overflow:visible; border-radius:3px;}' +
 				'.cp-color-picker:after{content:""; display:block; ' +
 					'position:absolute; top:-15px; left:12px; border:8px solid #eee;' +
@@ -296,9 +298,9 @@ window.myColorPicker = $('input.color').colorPicker({
 					'position:absolute; top:-16px; left:12px; border:8px solid #eee;' +
 					'border-color: transparent transparent #999}' +
 				'.cp-xy-slider{border:1px solid #aaa; margin-bottom:10px; width:150px; height:150px;}' +
-				'.cp-xy-slider:active{cursor:none;}' +
+				'.cp-color-picker:active{cursor:none;}' +
 				'.cp-xy-cursor{width:12px; height:12px; margin:-6px}' +
-				'.cp-z-slider{margin-left:10px; border:1px solid #aaa; height:150px; width:23px;}' +
+				'.cp-z-slider{margin-left:8px; border:1px solid #aaa; height:150px; width:24px;}' +
 				'.cp-z-cursor{border-width:5px; margin-top:-5px;}' +
 				'.cp-color-picker .cp-alpha{width:152px; margin:10px 0 0; height:6px; border-radius:6px;' +
 					'overflow:visible; border:1px solid #aaa; box-sizing:border-box;' +
@@ -306,13 +308,13 @@ window.myColorPicker = $('input.color').colorPicker({
 				'.cp-alpha-cursor{background: #eee; border-radius: 100%;' +
 					'width:14px; height:14px; margin:-5px -7px; border:1px solid #999!important;' +
 					'box-shadow:inset -2px -4px 3px #ccc}' +
-				'.cp-alpha:after{position:relative; content:"α"; color:#666; font-size:16px; position:absolute; right:-28px; top:-9px}',
+				'.cp-alpha:after{position:relative; content:"α"; color:#666; font-size:16px; position:absolute; right:-26px; top:-9px}',
 
 			renderCallback: function($elm, toggled) {
 				var colors = this.color.colors,
 					rgb = colors.RND.rgb;
 
-				$('.cp-patch').css({backgroundColor: $elm.css('backgroundColor')});
+				$('.cp-patch div').css({backgroundColor: $elm.css('backgroundColor')});
 				$('.cp-disp').text($elm.val());
 			}