From 02cb9155c08630c3986615b719775de8df30b226 Mon Sep 17 00:00:00 2001 From: Scott Erickson Date: Thu, 27 Feb 2014 12:25:59 -0800 Subject: [PATCH] Improved a bunch of things with the wizard settings view. --- app/styles/account/wizard-settings.sass | 63 ++--- app/templates/account/wizard_settings.jade | 34 ++- app/templates/modal/wizard_settings.jade | 4 +- app/views/account/wizard_settings_view.coffee | 50 ++-- vendor/scripts/jquery.minicolors.min.js | 8 + vendor/styles/jquery.minicolors.css | 245 ++++++++++++++++++ 6 files changed, 322 insertions(+), 82 deletions(-) create mode 100644 vendor/scripts/jquery.minicolors.min.js create mode 100644 vendor/styles/jquery.minicolors.css diff --git a/app/styles/account/wizard-settings.sass b/app/styles/account/wizard-settings.sass index 6abd733df..83ca4f2ce 100644 --- a/app/styles/account/wizard-settings.sass +++ b/app/styles/account/wizard-settings.sass @@ -1,42 +1,27 @@ #wizard-settings-view - h3#loading + h3 text-align: center - - #color-settings - float: left - width: 600px - margin-left: 30px - - canvas - float: left - border: 2px solid black - margin: 20px - - .color-group - clear: both - padding-bottom: 10px - margin-bottom: 10px - border-bottom: 1px solid gray - - .name-cell - float: left - width: 100px - padding-top: 2px - - input - margin-right: 10px - position: relative - top: -3px - - .checkbox-cell - float: left - width: 40px - - .slider-cell - margin-bottom: 10px - float: left - width: 120px - - .selector - width: 100px + #tinting-display + float: right + + width: 450px + margin: 0 auto + + #color-settings table + float: left + width: 250px + + .minicolors-input + display: none + + .minicolors-swatch + position: static + width: 40px + cursor: pointer + + .enabled-cell + width: 30px + + .color-cell + width: 50px \ No newline at end of file diff --git a/app/templates/account/wizard_settings.jade b/app/templates/account/wizard_settings.jade index 138a8c970..95684394c 100644 --- a/app/templates/account/wizard_settings.jade +++ b/app/templates/account/wizard_settings.jade @@ -1,20 +1,18 @@ +#color-settings + table.table.table-bordered + tr + th + th Color + th Group + for group in colorGroups + tr.color-group(data-name=group.name) + td.enabled-cell + input(type='checkbox', checked=group.exists, id=group.name).color-group-checkbox + td.color-cell + input.minicolors(type=hidden, value=group.rgb, name=group.name) + td.group-cell + label(for=group.name, data-i18n='wizard_settings.' + group.dasherized)= group.humanized + canvas#tinting-display(width=200, height=200).img-rounded -#color-settings - for group in colorGroups - .color-group(data-name=group.name) - div.name-cell - input(type='checkbox', checked=group.exists).color-group-checkbox - span(data-i18n='wizard_settings.' + group.dasherized)= group.humanized - div.sliders - div.slider-cell - label(for=group.humanized+"_hue", data-i18n="wizard_settings.hue") Hue - .selector(id=group.humanized+"_hue", name=group.name+'.hue', data-key='hue') - div.slider-cell - label(for=group.humanized+"_saturation", data-i18n="wizard_settings.saturation") Saturation - .selector(id=group.humanized+"_saturation", name=group.name+'.saturation', data-key='saturation') - div.slider-cell - label(for=group.humanized+"_lightness", data-i18n="wizard_settings.lightness") Lightness - .selector(id=group.humanized+"_lightness", name=group.name+'.lightness', data-key='lightness') - div.clearfix -div.clearfix +div.clearfix \ No newline at end of file diff --git a/app/templates/modal/wizard_settings.jade b/app/templates/modal/wizard_settings.jade index 21ec05549..f5b3ef81a 100644 --- a/app/templates/modal/wizard_settings.jade +++ b/app/templates/modal/wizard_settings.jade @@ -1,12 +1,12 @@ extends /templates/modal/modal_base block modal-header-content - h3(data-i18n="wizard_settings.title") Wizard Settings + h3(data-i18n="wizard_settings.title2") Customize Your Character block modal-body-content div.wizard-name-line.form-group label.control-label(for="name") - | Name + | Your Wizardly Name input#wizard-settings-name(name="name", type="text", value="#{me.get('name')||''}") #wizard-settings-view diff --git a/app/views/account/wizard_settings_view.coffee b/app/views/account/wizard_settings_view.coffee index b9a73b4c6..8497c32cf 100644 --- a/app/views/account/wizard_settings_view.coffee +++ b/app/views/account/wizard_settings_view.coffee @@ -3,6 +3,7 @@ template = require 'templates/account/wizard_settings' {me} = require('lib/auth') ThangType = require 'models/ThangType' SpriteBuilder = require 'lib/sprites/SpriteBuilder' +{hslToHex, hexToHSL} = require 'lib/utils' module.exports = class WizardSettingsView extends CocoView id: 'wizard-settings-view' @@ -12,8 +13,8 @@ module.exports = class WizardSettingsView extends CocoView events: 'change .color-group-checkbox': (e) -> colorGroup = $(e.target).closest('.color-group') - @updateSliderVisibility(colorGroup) @updateColorSettings(colorGroup) + @updateSwatchVisibility(colorGroup) constructor: -> super(arguments...) @@ -36,12 +37,16 @@ module.exports = class WizardSettingsView extends CocoView wizardSettings = me.get('wizard')?.colorConfig or {} colorGroups = @wizardThangType.get('colorGroups') or {} - f = (name) -> { - dasherized: _.string.dasherize(name) - humanized: _.string.humanize name - name: name - exists: wizardSettings[name] - } + f = (name) -> + hslObj = wizardSettings[name] + hsl = if hslObj then [hslObj.hue, hslObj.saturation, hslObj.lightness] else [0, 0.5, 0.5] + return { + dasherized: _.string.dasherize(name) + humanized: _.string.humanize name + name: name + exists: wizardSettings[name] + rgb: hslToHex(hsl) + } c.colorGroups = (f(colorName) for colorName in _.keys colorGroups) c @@ -50,27 +55,29 @@ module.exports = class WizardSettingsView extends CocoView wizardSettings = me.get('wizard') or {} wizardSettings.colorConfig ?= {} - @$el.find('.selector').each (i, slider) => - [groupName, prop] = $(slider).attr('name').split('.') - value = 100 * (wizardSettings.colorConfig[groupName]?[prop] ? 0.5) - @initSlider $(slider), value, @onSliderChanged + @$el.find('.minicolors').each (e, minicolor) => + $(minicolor).minicolors({ + change: => @updateColorSettings($(minicolor).closest('.color-group')) + changeDelay: 200 + }) @$el.find('.color-group').each (i, colorGroup) => - @updateSliderVisibility($(colorGroup)) + @updateSwatchVisibility($(colorGroup)) - updateSliderVisibility: (colorGroup) -> + updateSwatchVisibility: (colorGroup) -> enabled = colorGroup.find('.color-group-checkbox').prop('checked') - colorGroup.find('.sliders').toggle Boolean(enabled) - - updateColorSettings: (colorGroup) -> - wizardSettings = me.get('wizard') or {} + colorGroup.find('.minicolors-swatch').toggle Boolean(enabled) + + updateColorSettings: (colorGroup) => + wizardSettings = _.cloneDeep(me.get('wizard')) or {} wizardSettings.colorConfig ?= {} colorName = colorGroup.data('name') wizardSettings.colorConfig[colorName] ?= {} if colorGroup.find('.color-group-checkbox').prop('checked') - config = {} - colorGroup.find('.selector').each (i, slider) -> - config[$(slider).data('key')] = $(slider).slider('value') / 100 + input = colorGroup.find('.minicolors-input') + hex = input.val() + hsl = hexToHSL(hex) + config = {hue: hsl[0], saturation:hsl[1], lightness:hsl[2]} wizardSettings.colorConfig[colorName] = config else delete wizardSettings.colorConfig[colorName] @@ -79,9 +86,6 @@ module.exports = class WizardSettingsView extends CocoView @updateMovieClip() @trigger 'change' - onSliderChanged: (e, result) => - @updateColorSettings $(result.handle).closest('.color-group') - initStage: -> @stage = new createjs.Stage(@$el.find('canvas')[0]) @updateMovieClip() diff --git a/vendor/scripts/jquery.minicolors.min.js b/vendor/scripts/jquery.minicolors.min.js new file mode 100644 index 000000000..b916bb29a --- /dev/null +++ b/vendor/scripts/jquery.minicolors.min.js @@ -0,0 +1,8 @@ +/* + * jQuery MiniColors: A tiny color picker built on jQuery + * + * Copyright Cory LaViska for A Beautiful Site, LLC. (http://www.abeautifulsite.net/) + * + * Licensed under the MIT license: http://opensource.org/licenses/MIT + * + */jQuery&&function(e){function t(t,n){var r=e('
'),i=e.minicolors.defaults;if(t.data("minicolors-initialized"))return;n=e.extend(!0,{},i,n);r.addClass("minicolors-theme-"+n.theme).toggleClass("minicolors-with-opacity",n.opacity);n.position!==undefined&&e.each(n.position.split(" "),function(){r.addClass("minicolors-position-"+this)});t.addClass("minicolors-input").data("minicolors-initialized",!1).data("minicolors-settings",n).prop("size",7).wrap(r).after('
'+'
'+'
'+"
"+'
'+'
'+"
"+'
'+'
'+'
'+"
"+"
");if(!n.inline){t.after('');t.next(".minicolors-swatch").on("click",function(e){e.preventDefault();t.focus()})}t.parent().find(".minicolors-panel").on("selectstart",function(){return!1}).end();n.inline&&t.parent().addClass("minicolors-inline");u(t,!1);t.data("minicolors-initialized",!0)}function n(e){var t=e.parent();e.removeData("minicolors-initialized").removeData("minicolors-settings").removeProp("size").removeClass("minicolors-input");t.before(e).remove()}function r(e){var t=e.parent(),n=t.find(".minicolors-panel"),r=e.data("minicolors-settings");if(!e.data("minicolors-initialized")||e.prop("disabled")||t.hasClass("minicolors-inline")||t.hasClass("minicolors-focus"))return;i();t.addClass("minicolors-focus");n.stop(!0,!0).fadeIn(r.showSpeed,function(){r.show&&r.show.call(e.get(0))})}function i(){e(".minicolors-focus").each(function(){var t=e(this),n=t.find(".minicolors-input"),r=t.find(".minicolors-panel"),i=n.data("minicolors-settings");r.fadeOut(i.hideSpeed,function(){i.hide&&i.hide.call(n.get(0));t.removeClass("minicolors-focus")})})}function s(e,t,n){var r=e.parents(".minicolors").find(".minicolors-input"),i=r.data("minicolors-settings"),s=e.find("[class$=-picker]"),u=e.offset().left,a=e.offset().top,f=Math.round(t.pageX-u),l=Math.round(t.pageY-a),c=n?i.animationSpeed:0,h,p,d,v;if(t.originalEvent.changedTouches){f=t.originalEvent.changedTouches[0].pageX-u;l=t.originalEvent.changedTouches[0].pageY-a}f<0&&(f=0);l<0&&(l=0);f>e.width()&&(f=e.width());l>e.height()&&(l=e.height());if(e.parent().is(".minicolors-slider-wheel")&&s.parent().is(".minicolors-grid")){h=75-f;p=75-l;d=Math.sqrt(h*h+p*p);v=Math.atan2(p,h);v<0&&(v+=Math.PI*2);if(d>75){d=75;f=75-75*Math.cos(v);l=75-75*Math.sin(v)}f=Math.round(f);l=Math.round(l)}e.is(".minicolors-grid")?s.stop(!0).animate({top:l+"px",left:f+"px"},c,i.animationEasing,function(){o(r,e)}):s.stop(!0).animate({top:l+"px"},c,i.animationEasing,function(){o(r,e)})}function o(e,t){function n(e,t){var n,r;if(!e.length||!t)return null;n=e.offset().left;r=e.offset().top;return{x:n-t.offset().left+e.outerWidth()/2,y:r-t.offset().top+e.outerHeight()/2}}var r,i,s,o,u,f,l,h=e.val(),d=e.attr("data-opacity"),v=e.parent(),g=e.data("minicolors-settings"),y=v.find(".minicolors-swatch"),b=v.find(".minicolors-grid"),w=v.find(".minicolors-slider"),E=v.find(".minicolors-opacity-slider"),S=b.find("[class$=-picker]"),x=w.find("[class$=-picker]"),T=E.find("[class$=-picker]"),N=n(S,b),C=n(x,w),k=n(T,E);if(t.is(".minicolors-grid, .minicolors-slider")){switch(g.control){case"wheel":o=b.width()/2-N.x;u=b.height()/2-N.y;f=Math.sqrt(o*o+u*u);l=Math.atan2(u,o);l<0&&(l+=Math.PI*2);if(f>75){f=75;N.x=69-75*Math.cos(l);N.y=69-75*Math.sin(l)}i=p(f/.75,0,100);r=p(l*180/Math.PI,0,360);s=p(100-Math.floor(C.y*(100/w.height())),0,100);h=m({h:r,s:i,b:s});w.css("backgroundColor",m({h:r,s:i,b:100}));break;case"saturation":r=p(parseInt(N.x*(360/b.width()),10),0,360);i=p(100-Math.floor(C.y*(100/w.height())),0,100);s=p(100-Math.floor(N.y*(100/b.height())),0,100);h=m({h:r,s:i,b:s});w.css("backgroundColor",m({h:r,s:100,b:s}));v.find(".minicolors-grid-inner").css("opacity",i/100);break;case"brightness":r=p(parseInt(N.x*(360/b.width()),10),0,360);i=p(100-Math.floor(N.y*(100/b.height())),0,100);s=p(100-Math.floor(C.y*(100/w.height())),0,100);h=m({h:r,s:i,b:s});w.css("backgroundColor",m({h:r,s:i,b:100}));v.find(".minicolors-grid-inner").css("opacity",1-s/100);break;default:r=p(360-parseInt(C.y*(360/w.height()),10),0,360);i=p(Math.floor(N.x*(100/b.width())),0,100);s=p(100-Math.floor(N.y*(100/b.height())),0,100);h=m({h:r,s:i,b:s});b.css("backgroundColor",m({h:r,s:100,b:100}))}e.val(c(h,g.letterCase))}if(t.is(".minicolors-opacity-slider")){g.opacity?d=parseFloat(1-k.y/E.height()).toFixed(2):d=1;g.opacity&&e.attr("data-opacity",d)}y.find("SPAN").css({backgroundColor:h,opacity:d});a(e,h,d)}function u(e,t){var n,r,i,s,o,u,f,l=e.parent(),d=e.data("minicolors-settings"),v=l.find(".minicolors-swatch"),y=l.find(".minicolors-grid"),b=l.find(".minicolors-slider"),w=l.find(".minicolors-opacity-slider"),E=y.find("[class$=-picker]"),S=b.find("[class$=-picker]"),x=w.find("[class$=-picker]");n=c(h(e.val(),!0),d.letterCase);n||(n=c(h(d.defaultValue,!0),d.letterCase));r=g(n);t||e.val(n);if(d.opacity){i=e.attr("data-opacity")===""?1:p(parseFloat(e.attr("data-opacity")).toFixed(2),0,1);isNaN(i)&&(i=1);e.attr("data-opacity",i);v.find("SPAN").css("opacity",i);o=p(w.height()-w.height()*i,0,w.height());x.css("top",o+"px")}v.find("SPAN").css("backgroundColor",n);switch(d.control){case"wheel":u=p(Math.ceil(r.s*.75),0,y.height()/2);f=r.h*Math.PI/180;s=p(75-Math.cos(f)*u,0,y.width());o=p(75-Math.sin(f)*u,0,y.height());E.css({top:o+"px",left:s+"px"});o=150-r.b/(100/y.height());n===""&&(o=0);S.css("top",o+"px");b.css("backgroundColor",m({h:r.h,s:r.s,b:100}));break;case"saturation":s=p(5*r.h/12,0,150);o=p(y.height()-Math.ceil(r.b/(100/y.height())),0,y.height());E.css({top:o+"px",left:s+"px"});o=p(b.height()-r.s*(b.height()/100),0,b.height());S.css("top",o+"px");b.css("backgroundColor",m({h:r.h,s:100,b:r.b}));l.find(".minicolors-grid-inner").css("opacity",r.s/100);break;case"brightness":s=p(5*r.h/12,0,150);o=p(y.height()-Math.ceil(r.s/(100/y.height())),0,y.height());E.css({top:o+"px",left:s+"px"});o=p(b.height()-r.b*(b.height()/100),0,b.height());S.css("top",o+"px");b.css("backgroundColor",m({h:r.h,s:r.s,b:100}));l.find(".minicolors-grid-inner").css("opacity",1-r.b/100);break;default:s=p(Math.ceil(r.s/(100/y.width())),0,y.width());o=p(y.height()-Math.ceil(r.b/(100/y.height())),0,y.height());E.css({top:o+"px",left:s+"px"});o=p(b.height()-r.h/(360/b.height()),0,b.height());S.css("top",o+"px");y.css("backgroundColor",m({h:r.h,s:100,b:100}))}e.data("minicolors-initialized")&&a(e,n,i)}function a(e,t,n){var r=e.data("minicolors-settings"),i=e.data("minicolors-lastChange");if(!i||i.hex!==t||i.opacity!==n){e.data("minicolors-lastChange",{hex:t,opacity:n});if(r.change)if(r.changeDelay){clearTimeout(e.data("minicolors-changeTimeout"));e.data("minicolors-changeTimeout",setTimeout(function(){r.change.call(e.get(0),t,n)},r.changeDelay))}else r.change.call(e.get(0),t,n);e.trigger("change").trigger("input")}}function f(t){var n=h(e(t).val(),!0),r=b(n),i=e(t).attr("data-opacity");if(!r)return null;i!==undefined&&e.extend(r,{a:parseFloat(i)});return r}function l(t,n){var r=h(e(t).val(),!0),i=b(r),s=e(t).attr("data-opacity");if(!i)return null;s===undefined&&(s=1);return n?"rgba("+i.r+", "+i.g+", "+i.b+", "+parseFloat(s)+")":"rgb("+i.r+", "+i.g+", "+i.b+")"}function c(e,t){return t==="uppercase"?e.toUpperCase():e.toLowerCase()}function h(e,t){e=e.replace(/[^A-F0-9]/ig,"");if(e.length!==3&&e.length!==6)return"";e.length===3&&t&&(e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]);return"#"+e}function p(e,t,n){en&&(e=n);return e}function d(e){var t={},n=Math.round(e.h),r=Math.round(e.s*255/100),i=Math.round(e.b*255/100);if(r===0)t.r=t.g=t.b=i;else{var s=i,o=(255-r)*i/255,u=(s-o)*(n%60)/60;n===360&&(n=0);if(n<60){t.r=s;t.b=o;t.g=o+u}else if(n<120){t.g=s;t.b=o;t.r=s-u}else if(n<180){t.g=s;t.r=o;t.b=o+u}else if(n<240){t.b=s;t.r=o;t.g=s-u}else if(n<300){t.b=s;t.g=o;t.r=o+u}else if(n<360){t.r=s;t.g=o;t.b=s-u}else{t.r=0;t.g=0;t.b=0}}return{r:Math.round(t.r),g:Math.round(t.g),b:Math.round(t.b)}}function v(t){var n=[t.r.toString(16),t.g.toString(16),t.b.toString(16)];e.each(n,function(e,t){t.length===1&&(n[e]="0"+t)});return"#"+n.join("")}function m(e){return v(d(e))}function g(e){var t=y(b(e));t.s===0&&(t.h=360);return t}function y(e){var t={h:0,s:0,b:0},n=Math.min(e.r,e.g,e.b),r=Math.max(e.r,e.g,e.b),i=r-n;t.b=r;t.s=r!==0?255*i/r:0;t.s!==0?e.r===r?t.h=(e.g-e.b)/i:e.g===r?t.h=2+(e.b-e.r)/i:t.h=4+(e.r-e.g)/i:t.h=-1;t.h*=60;t.h<0&&(t.h+=360);t.s*=100/255;t.b*=100/255;return t}function b(e){e=parseInt(e.indexOf("#")>-1?e.substring(1):e,16);return{r:e>>16,g:(e&65280)>>8,b:e&255}}e.minicolors={defaults:{animationSpeed:50,animationEasing:"swing",change:null,changeDelay:0,control:"hue",defaultValue:"",hide:null,hideSpeed:100,inline:!1,letterCase:"lowercase",opacity:!1,position:"bottom left",show:null,showSpeed:100,theme:"default"}};e.extend(e.fn,{minicolors:function(s,o){switch(s){case"destroy":e(this).each(function(){n(e(this))});return e(this);case"hide":i();return e(this);case"opacity":if(o===undefined)return e(this).attr("data-opacity");e(this).each(function(){u(e(this).attr("data-opacity",o))});return e(this);case"rgbObject":return f(e(this),s==="rgbaObject");case"rgbString":case"rgbaString":return l(e(this),s==="rgbaString");case"settings":if(o===undefined)return e(this).data("minicolors-settings");e(this).each(function(){var t=e(this).data("minicolors-settings")||{};n(e(this));e(this).minicolors(e.extend(!0,t,o))});return e(this);case"show":r(e(this).eq(0));return e(this);case"value":if(o===undefined)return e(this).val();e(this).each(function(){u(e(this).val(o))});return e(this);default:s!=="create"&&(o=s);e(this).each(function(){t(e(this),o)});return e(this)}}});e(document).on("mousedown.minicolors touchstart.minicolors",function(t){e(t.target).parents().add(t.target).hasClass("minicolors")||i()}).on("mousedown.minicolors touchstart.minicolors",".minicolors-grid, .minicolors-slider, .minicolors-opacity-slider",function(t){var n=e(this);t.preventDefault();e(document).data("minicolors-target",n);s(n,t,!0)}).on("mousemove.minicolors touchmove.minicolors",function(t){var n=e(document).data("minicolors-target");n&&s(n,t)}).on("mouseup.minicolors touchend.minicolors",function(){e(this).removeData("minicolors-target")}).on("mousedown.minicolors touchstart.minicolors",".minicolors-swatch",function(t){var n=e(this).parent().find(".minicolors-input");t.preventDefault();r(n)}).on("focus.minicolors",".minicolors-input",function(){var t=e(this);if(!t.data("minicolors-initialized"))return;r(t)}).on("blur.minicolors",".minicolors-input",function(){var t=e(this),n=t.data("minicolors-settings");if(!t.data("minicolors-initialized"))return;t.val(h(t.val(),!0));t.val()===""&&t.val(h(n.defaultValue,!0));t.val(c(t.val(),n.letterCase))}).on("keydown.minicolors",".minicolors-input",function(t){var n=e(this);if(!n.data("minicolors-initialized"))return;switch(t.keyCode){case 9:i();break;case 13:case 27:i();n.blur()}}).on("keyup.minicolors",".minicolors-input",function(){var t=e(this);if(!t.data("minicolors-initialized"))return;u(t,!0)}).on("paste.minicolors",".minicolors-input",function(){var t=e(this);if(!t.data("minicolors-initialized"))return;setTimeout(function(){u(t,!0)},1)})}(jQuery); \ No newline at end of file diff --git a/vendor/styles/jquery.minicolors.css b/vendor/styles/jquery.minicolors.css new file mode 100644 index 000000000..bdf09c083 --- /dev/null +++ b/vendor/styles/jquery.minicolors.css @@ -0,0 +1,245 @@ +.minicolors { + position: relative; +} + +.minicolors-swatch { + position: absolute; + vertical-align: middle; + background: url(/images/jquery.minicolors.png) -80px 0; + border: solid 1px #ccc; + cursor: text; + padding: 0; + margin: 0; + display: inline-block; +} + +.minicolors-swatch-color { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.minicolors input[type=hidden] + .minicolors-swatch { + width: 28px; + position: static; + cursor: pointer; +} + +/* Panel */ +.minicolors-panel { + position: absolute; + width: 173px; + height: 152px; + background: white; + border: solid 1px #CCC; + box-shadow: 0 0 20px rgba(0, 0, 0, .2); + z-index: 99999; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; + display: none; +} + +.minicolors-panel.minicolors-visible { + display: block; +} + +/* Panel positioning */ +.minicolors-position-top .minicolors-panel { + top: -154px; +} + +.minicolors-position-right .minicolors-panel { + right: 0; +} + +.minicolors-position-bottom .minicolors-panel { + top: auto; +} + +.minicolors-position-left .minicolors-panel { + left: 0; +} + +.minicolors-with-opacity .minicolors-panel { + width: 194px; +} + +.minicolors .minicolors-grid { + position: absolute; + top: 1px; + left: 1px; + width: 150px; + height: 150px; + background: url(/images/jquery.minicolors.png) -120px 0; + cursor: crosshair; +} + +.minicolors .minicolors-grid-inner { + position: absolute; + top: 0; + left: 0; + width: 150px; + height: 150px; + background: none; +} + +.minicolors-slider-saturation .minicolors-grid { + background-position: -420px 0; +} + +.minicolors-slider-saturation .minicolors-grid-inner { + background: url(/images/jquery.minicolors.png) -270px 0; +} + +.minicolors-slider-brightness .minicolors-grid { + background-position: -570px 0; +} + +.minicolors-slider-brightness .minicolors-grid-inner { + background: black; +} + +.minicolors-slider-wheel .minicolors-grid { + background-position: -720px 0; +} + +.minicolors-slider, +.minicolors-opacity-slider { + position: absolute; + top: 1px; + left: 152px; + width: 20px; + height: 150px; + background: white url(/images/jquery.minicolors.png) 0 0; + cursor: row-resize; +} + +.minicolors-slider-saturation .minicolors-slider { + background-position: -60px 0; +} + +.minicolors-slider-brightness .minicolors-slider { + background-position: -20px 0; +} + +.minicolors-slider-wheel .minicolors-slider { + background-position: -20px 0; +} + +.minicolors-opacity-slider { + left: 173px; + background-position: -40px 0; + display: none; +} + +.minicolors-with-opacity .minicolors-opacity-slider { + display: block; +} + +/* Pickers */ +.minicolors-grid .minicolors-picker { + position: absolute; + top: 70px; + left: 70px; + width: 12px; + height: 12px; + border: solid 1px black; + border-radius: 10px; + margin-top: -6px; + margin-left: -6px; + background: none; +} + +.minicolors-grid .minicolors-picker > div { + position: absolute; + top: 0; + left: 0; + width: 8px; + height: 8px; + border-radius: 8px; + border: solid 2px white; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} + +.minicolors-picker { + position: absolute; + top: 0; + left: 0; + width: 18px; + height: 2px; + background: white; + border: solid 1px black; + margin-top: -2px; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} + +/* Inline controls */ +.minicolors-inline { + display: inline-block; +} + +.minicolors-inline .minicolors-input { + display: none !important; +} + +.minicolors-inline .minicolors-panel { + position: relative; + top: auto; + left: auto; + box-shadow: none; + z-index: auto; + display: inline-block; +} + +/* Default theme */ +.minicolors-theme-default .minicolors-swatch { + top: 5px; + left: 5px; + width: 18px; + height: 18px; +} +.minicolors-theme-default.minicolors-position-right .minicolors-swatch { + left: auto; + right: 5px; +} +.minicolors-theme-default.minicolors { + width: auto; + display: inline-block; +} +.minicolors-theme-default .minicolors-input { + height: 20px; + width: auto; + display: inline-block; + padding-left: 26px; +} +.minicolors-theme-default.minicolors-position-right .minicolors-input { + padding-right: 26px; + padding-left: inherit; +} + +/* Bootstrap theme */ +.minicolors-theme-bootstrap .minicolors-swatch { + top: 3px; + left: 3px; + width: 28px; + height: 28px; + border-radius: 3px; +} +.minicolors-theme-bootstrap.minicolors-position-right .minicolors-swatch { + left: auto; + right: 3px; +} +.minicolors-theme-bootstrap .minicolors-input { + padding-left: 44px; +} +.minicolors-theme-bootstrap.minicolors-position-right .minicolors-input { + padding-right: 44px; + padding-left: 12px; +} \ No newline at end of file