diff --git a/development/bg.png b/development/bg.png new file mode 100644 index 0000000..b93e020 Binary files /dev/null and b/development/bg.png differ 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('
'); + $elm.append('
'); }, 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()); }