├── images ├── cross.png ├── github.png ├── transparent.gif ├── cross_active.png └── favicon.svg ├── package.json ├── .gitignore ├── fonts ├── rationale │ ├── rationale-webfont.eot │ ├── rationale-webfont.ttf │ └── rationale-webfont.woff └── inconsolata │ ├── ttf-inconsolata-webfont.eot │ ├── ttf-inconsolata-webfont.ttf │ └── ttf-inconsolata-webfont.woff ├── css ├── images │ ├── ui-bg_flat_0_eeeeee_40x100.png │ ├── ui-bg_glass_35_dddddd_1x400.png │ ├── ui-bg_glass_60_eeeeee_1x400.png │ ├── ui-bg_glass_100_f8f8f8_1x400.png │ ├── ui-bg_inset-hard_75_999999_1x100.png │ └── ui-bg_inset-soft_50_c9c9c9_1x100.png ├── jquery.ui.colorPicker.css └── jquery-ui-1.8.23.custom.css ├── .gitmodules ├── README.md ├── index.html ├── lib └── js │ ├── underscore-min.js │ ├── jquery.ui.colorPicker.js │ └── backbone-min.js ├── less └── main.less ├── LICENSE.md └── js └── main.js /images/cross.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ciembor/4bit/HEAD/images/cross.png -------------------------------------------------------------------------------- /images/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ciembor/4bit/HEAD/images/github.png -------------------------------------------------------------------------------- /images/transparent.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ciembor/4bit/HEAD/images/transparent.gif -------------------------------------------------------------------------------- /images/cross_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ciembor/4bit/HEAD/images/cross_active.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "google-closure-compiler": "^20170806.0.0" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.swp 2 | node_modules 3 | js/compiled.js 4 | css/_compiled_main.css 5 | css/merged.css 6 | .project 7 | -------------------------------------------------------------------------------- /fonts/rationale/rationale-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ciembor/4bit/HEAD/fonts/rationale/rationale-webfont.eot -------------------------------------------------------------------------------- /fonts/rationale/rationale-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ciembor/4bit/HEAD/fonts/rationale/rationale-webfont.ttf -------------------------------------------------------------------------------- /fonts/rationale/rationale-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ciembor/4bit/HEAD/fonts/rationale/rationale-webfont.woff -------------------------------------------------------------------------------- /css/images/ui-bg_flat_0_eeeeee_40x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ciembor/4bit/HEAD/css/images/ui-bg_flat_0_eeeeee_40x100.png -------------------------------------------------------------------------------- /css/images/ui-bg_glass_35_dddddd_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ciembor/4bit/HEAD/css/images/ui-bg_glass_35_dddddd_1x400.png -------------------------------------------------------------------------------- /css/images/ui-bg_glass_60_eeeeee_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ciembor/4bit/HEAD/css/images/ui-bg_glass_60_eeeeee_1x400.png -------------------------------------------------------------------------------- /css/images/ui-bg_glass_100_f8f8f8_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ciembor/4bit/HEAD/css/images/ui-bg_glass_100_f8f8f8_1x400.png -------------------------------------------------------------------------------- /fonts/inconsolata/ttf-inconsolata-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ciembor/4bit/HEAD/fonts/inconsolata/ttf-inconsolata-webfont.eot -------------------------------------------------------------------------------- /fonts/inconsolata/ttf-inconsolata-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ciembor/4bit/HEAD/fonts/inconsolata/ttf-inconsolata-webfont.ttf -------------------------------------------------------------------------------- /css/images/ui-bg_inset-hard_75_999999_1x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ciembor/4bit/HEAD/css/images/ui-bg_inset-hard_75_999999_1x100.png -------------------------------------------------------------------------------- /css/images/ui-bg_inset-soft_50_c9c9c9_1x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ciembor/4bit/HEAD/css/images/ui-bg_inset-soft_50_c9c9c9_1x100.png -------------------------------------------------------------------------------- /fonts/inconsolata/ttf-inconsolata-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ciembor/4bit/HEAD/fonts/inconsolata/ttf-inconsolata-webfont.woff -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "lib/google-closure-library"] 2 | path = lib/google-closure-library 3 | url = https://github.com/ciembor/google-closure-library 4 | -------------------------------------------------------------------------------- /css/jquery.ui.colorPicker.css: -------------------------------------------------------------------------------- 1 | div.colorpicker { 2 | margin: 0; 3 | position: relative; 4 | } 5 | div.colorpicker canvas { 6 | float: left; 7 | } 8 | div.colorpicker div.circle { 9 | border-radius: 100%; 10 | position: absolute; 11 | top: 0; 12 | background-clip: padding-box; 13 | } 14 | div.colorpicker div.circle.alpha { 15 | background-image: url('../images/transparent.gif'); 16 | opacity: 0.0; 17 | } 18 | div.colorpicker div.circle.lightness { 19 | background-color: rgba(0,0,0,0.0); 20 | box-shadow: 0 1px 3px rgba(0,0,0,0.2); 21 | border: 1px solid #fff; 22 | margin: -1px 0 0 -1px; 23 | } 24 | div.colorpicker span.picker, div.colorpicker span.handle { 25 | display: block; 26 | width: 8px; 27 | height: 8px; 28 | border-radius: 4px; 29 | background-color: rgba(0,0,0,0.4); 30 | box-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 4px #000 inset; 31 | border: 1px solid #fff; 32 | cursor: pointer; 33 | margin: -5px; 34 | position: absolute; 35 | z-index: 2; 36 | } 37 | div.colorpicker div.slider { 38 | width: 6px; 39 | background-color: #fff; 40 | background-clip: padding-box; 41 | border-radius: 6px; 42 | border: 1px solid #fff; 43 | box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.2) inset; 44 | float: left; 45 | margin: -1px 0 0 10px; 46 | } 47 | div.colorpicker div.slider span.handle { 48 | margin: -5px -2px -5px -2px; 49 | } 50 | div.colorpicker div.slider.lightness { 51 | background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1)); 52 | background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1)); 53 | background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1)); 54 | } 55 | div.colorpicker div.slider.alpha { 56 | background: -webkit-linear-gradient(top, rgba(255,255,255,1.0), rgba(255,255,255,0.6)), url('../images/transparent.gif') center; 57 | background: -moz-linear-gradient(top, rgba(255,255,255,1.0), rgba(255,255,255,0.6)), url('../images/transparent.gif') center; 58 | background: linear-gradient(top, rgba(255,255,255,1.0), rgba(255,255,255,0.6)), url('../images/transparent.gif') center; 59 | } 60 | div.colorpicker input.colorInput { 61 | margin-top: 10px; 62 | border: 1px solid #fff; 63 | box-shadow: 0 1px 3px rgba(0,0,0,0.15); 64 | background-color: #fafafa; 65 | border-radius: 3px; 66 | padding: 5px 8px; 67 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [4bit](https://ciembor.github.io/4bit) Terminal Color Scheme Designer 2 | ========= 3 | 4 | ![4bit](https://user-images.githubusercontent.com/702108/233796748-249f64b2-bf53-49fc-a7aa-15ba2e63d411.png) 5 | 6 | For users 7 | --------- 8 | 9 | 1. Go to https://ciembor.github.io/4bit. 10 | 2. Design your terminal look. 11 | 3. Click `Download Scheme` button and select the format of configuration file. 12 | 13 | * __ATerm, Urxvt, Rxvt, XTerm and other libXt terminals:__ 14 | Copy the generated text to `~/.Xresources` file (you may have to create it) and run `xrdb ~/.Xresources`. 15 | 16 | * __Gnome Terminal, Guake:__ 17 | Save the generated script into set_colors.sh, make this file executable `$ chmod +x set_colors.sh` and run it `$ ./set_colors.sh`. Alternatively copy generated lines directly into your shell. 18 | 19 | * __XFCE4 Terminal:__ 20 | Save file as `~/.local/share/xfce4/terminal/colorschemes/4bit.scheme` and choose it in terminal preferences. 21 | 22 | * __Konsole and Yakuake:__ 23 | Put the generated file to `~/.kde/share/apps/konsole/NAME-OF-SCHEME.colorscheme` and restart the terminal. 24 | 25 | * __iTerm2 for Mac:__ 26 | Create a file `~/NAME-OF-SCHEME.itermcolors` with the generated xml 27 | content and load it with the `Load Presets ...` button under 28 | `iTerm2 / Preferences / Profiles / / Colors`. 29 | 30 | * __Putty:__ 31 | Save the generated file with `.reg` extension and double click it. 32 | 33 | * __Terminator:__ 34 | Copy lines within the [profiles] section of the generated configuration file to ~/.config/terminator/config file. 35 | 36 | * __Alacritty:__ 37 | Put the generated file to `~/.config/alacritty/alacritty.yml`. 38 | 39 | * __Mintty:__ 40 | Copy the colors and save it in `~/.minttyrc`. 41 | 42 | * __Other terminals:__ 43 | Generate one of the supported formats and copy hex values into the configuration file (or tool) of your terminal. 44 | 45 | For developers 46 | --------- 47 | 48 | You will need some system tools to run the build script: 49 | * [GNU Bash](https://www.gnu.org/software/bash/) 50 | * [Java Runtime Environment 8](https://www.java.com/en/download/manual.jsp) 51 | * [Python 2](https://www.python.org/downloads/release/python-2718/) 52 | * [LESS compiler (lessc)](https://lesscss.org/) 53 | * [NPM](https://www.npmjs.com/) 54 | 55 | After `git clone` run `npm install`. After that run `./build.sh`. It generates compiled JavaScript, compiled LESS, and merged CSS. For compiling code for production run `./build.sh production`. 56 | 57 | Author 58 | --------- 59 | 60 | __Maciej Ciemborowicz__ 61 | 62 | * https://twitter.com/ciembor 63 | * https://linkedin.com/in/maciej-ciemborowicz 64 | 65 | Contributors 66 | --------- 67 | 68 | __Stefan Wienert__ 69 | 70 | * https://github.com/zealot128 71 | 72 | __Victor Hugo Borja__ 73 | 74 | * https://github.com/vic 75 | * https://twitter.com/vborja 76 | 77 | __David 'vidister' Weber__ 78 | 79 | * https://github.com/vidister 80 | * https://twitter.com/vidister 81 | 82 | Resources 83 | --------- 84 | 85 | * [ArchLinux Wiki - X resources](https://wiki.archlinux.org/index.php/X_resources) 86 | * [original colors.sh](https://github.com/gnachman/iTerm2/blob/master/tests/colors.sh) 87 | -------------------------------------------------------------------------------- /images/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | terminal_fill 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 4bit. Terminal Color Scheme Designer 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 22 | 23 | 24 | 25 |
26 | 27 |
28 | 29 |
30 |

4bit Terminal Color Scheme Designer

31 |
32 |
33 |
34 |
35 | 36 |
37 |
38 |
39 | Download Scheme 40 |
41 |
42 | 43 |
44 | 45 |
46 |
47 |
48 |
49 |

Global Properties

50 |

Hue:

51 |
52 |

Saturation:

53 |
54 |
55 |
56 |

Lightness

57 |

Color:

58 |
59 |

Black:

60 |
61 |

White:

62 |
63 |
64 |
65 |

Advanced

66 | 71 |
72 | 73 |
74 | 75 | 76 | 77 | 78 |
79 |
80 |
81 | 82 |
83 | 84 | 85 | 86 | 87 | 88 |
89 |
90 |
91 | 92 |
93 | 94 | 95 | 96 | 97 | 98 |
99 |
100 |
101 |
102 |
103 | 104 |
105 | 106 | 110 | 111 |
112 | 144 |
145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | -------------------------------------------------------------------------------- /lib/js/underscore-min.js: -------------------------------------------------------------------------------- 1 | // Underscore.js 1.3.3 2 | // (c) 2009-2012 Jeremy Ashkenas, DocumentCloud Inc. 3 | // Underscore is freely distributable under the MIT license. 4 | // Portions of Underscore are inspired or borrowed from Prototype, 5 | // Oliver Steele's Functional, and John Resig's Micro-Templating. 6 | // For all details and documentation: 7 | // http://documentcloud.github.com/underscore 8 | (function(){function r(a,c,d){if(a===c)return 0!==a||1/a==1/c;if(null==a||null==c)return a===c;a._chain&&(a=a._wrapped);c._chain&&(c=c._wrapped);if(a.isEqual&&b.isFunction(a.isEqual))return a.isEqual(c);if(c.isEqual&&b.isFunction(c.isEqual))return c.isEqual(a);var e=l.call(a);if(e!=l.call(c))return!1;switch(e){case "[object String]":return a==""+c;case "[object Number]":return a!=+a?c!=+c:0==a?1/a==1/c:a==+c;case "[object Date]":case "[object Boolean]":return+a==+c;case "[object RegExp]":return a.source== 9 | c.source&&a.global==c.global&&a.multiline==c.multiline&&a.ignoreCase==c.ignoreCase}if("object"!=typeof a||"object"!=typeof c)return!1;for(var f=d.length;f--;)if(d[f]==a)return!0;d.push(a);var f=0,g=!0;if("[object Array]"==e){if(f=a.length,g=f==c.length)for(;f--&&(g=f in a==f in c&&r(a[f],c[f],d)););}else{if("constructor"in a!="constructor"in c||a.constructor!=c.constructor)return!1;for(var h in a)if(b.has(a,h)&&(f++,!(g=b.has(c,h)&&r(a[h],c[h],d))))break;if(g){for(h in c)if(b.has(c,h)&&!f--)break; 10 | g=!f}}d.pop();return g}var s=this,I=s._,o={},k=Array.prototype,p=Object.prototype,i=k.slice,J=k.unshift,l=p.toString,K=p.hasOwnProperty,y=k.forEach,z=k.map,A=k.reduce,B=k.reduceRight,C=k.filter,D=k.every,E=k.some,q=k.indexOf,F=k.lastIndexOf,p=Array.isArray,L=Object.keys,t=Function.prototype.bind,b=function(a){return new m(a)};"undefined"!==typeof exports?("undefined"!==typeof module&&module.exports&&(exports=module.exports=b),exports._=b):s._=b;b.VERSION="1.3.3";var j=b.each=b.forEach=function(a, 11 | c,d){if(a!=null)if(y&&a.forEach===y)a.forEach(c,d);else if(a.length===+a.length)for(var e=0,f=a.length;e2;a==null&&(a=[]);if(A&& 12 | a.reduce===A){e&&(c=b.bind(c,e));return f?a.reduce(c,d):a.reduce(c)}j(a,function(a,b,i){if(f)d=c.call(e,d,a,b,i);else{d=a;f=true}});if(!f)throw new TypeError("Reduce of empty array with no initial value");return d};b.reduceRight=b.foldr=function(a,c,d,e){var f=arguments.length>2;a==null&&(a=[]);if(B&&a.reduceRight===B){e&&(c=b.bind(c,e));return f?a.reduceRight(c,d):a.reduceRight(c)}var g=b.toArray(a).reverse();e&&!f&&(c=b.bind(c,e));return f?b.reduce(g,c,d,e):b.reduce(g,c)};b.find=b.detect=function(a, 13 | c,b){var e;G(a,function(a,g,h){if(c.call(b,a,g,h)){e=a;return true}});return e};b.filter=b.select=function(a,c,b){var e=[];if(a==null)return e;if(C&&a.filter===C)return a.filter(c,b);j(a,function(a,g,h){c.call(b,a,g,h)&&(e[e.length]=a)});return e};b.reject=function(a,c,b){var e=[];if(a==null)return e;j(a,function(a,g,h){c.call(b,a,g,h)||(e[e.length]=a)});return e};b.every=b.all=function(a,c,b){var e=true;if(a==null)return e;if(D&&a.every===D)return a.every(c,b);j(a,function(a,g,h){if(!(e=e&&c.call(b, 14 | a,g,h)))return o});return!!e};var G=b.some=b.any=function(a,c,d){c||(c=b.identity);var e=false;if(a==null)return e;if(E&&a.some===E)return a.some(c,d);j(a,function(a,b,h){if(e||(e=c.call(d,a,b,h)))return o});return!!e};b.include=b.contains=function(a,c){var b=false;if(a==null)return b;if(q&&a.indexOf===q)return a.indexOf(c)!=-1;return b=G(a,function(a){return a===c})};b.invoke=function(a,c){var d=i.call(arguments,2);return b.map(a,function(a){return(b.isFunction(c)?c||a:a[c]).apply(a,d)})};b.pluck= 15 | function(a,c){return b.map(a,function(a){return a[c]})};b.max=function(a,c,d){if(!c&&b.isArray(a)&&a[0]===+a[0])return Math.max.apply(Math,a);if(!c&&b.isEmpty(a))return-Infinity;var e={computed:-Infinity};j(a,function(a,b,h){b=c?c.call(d,a,b,h):a;b>=e.computed&&(e={value:a,computed:b})});return e.value};b.min=function(a,c,d){if(!c&&b.isArray(a)&&a[0]===+a[0])return Math.min.apply(Math,a);if(!c&&b.isEmpty(a))return Infinity;var e={computed:Infinity};j(a,function(a,b,h){b=c?c.call(d,a,b,h):a;bd?1:0}),"value")};b.groupBy=function(a,c){var d={},e=b.isFunction(c)?c:function(a){return a[c]}; 17 | j(a,function(a,b){var c=e(a,b);(d[c]||(d[c]=[])).push(a)});return d};b.sortedIndex=function(a,c,d){d||(d=b.identity);for(var e=0,f=a.length;e>1;d(a[g])=0})})};b.difference=function(a){var c=b.flatten(i.call(arguments,1),true);return b.filter(a,function(a){return!b.include(c,a)})};b.zip=function(){for(var a= 20 | i.call(arguments),c=b.max(b.pluck(a,"length")),d=Array(c),e=0;e=0;d--)b=[a[d].apply(this,b)];return b[0]}};b.after=function(a,b){return a<=0?b():function(){if(--a<1)return b.apply(this,arguments)}};b.keys=L||function(a){if(a!==Object(a))throw new TypeError("Invalid object");var c=[],d;for(d in a)b.has(a,d)&&(c[c.length]=d);return c};b.values=function(a){return b.map(a,b.identity)};b.functions=b.methods=function(a){var c=[],d;for(d in a)b.isFunction(a[d])&& 25 | c.push(d);return c.sort()};b.extend=function(a){j(i.call(arguments,1),function(b){for(var d in b)a[d]=b[d]});return a};b.pick=function(a){var c={};j(b.flatten(i.call(arguments,1)),function(b){b in a&&(c[b]=a[b])});return c};b.defaults=function(a){j(i.call(arguments,1),function(b){for(var d in b)a[d]==null&&(a[d]=b[d])});return a};b.clone=function(a){return!b.isObject(a)?a:b.isArray(a)?a.slice():b.extend({},a)};b.tap=function(a,b){b(a);return a};b.isEqual=function(a,b){return r(a,b,[])};b.isEmpty= 26 | function(a){if(a==null)return true;if(b.isArray(a)||b.isString(a))return a.length===0;for(var c in a)if(b.has(a,c))return false;return true};b.isElement=function(a){return!!(a&&a.nodeType==1)};b.isArray=p||function(a){return l.call(a)=="[object Array]"};b.isObject=function(a){return a===Object(a)};b.isArguments=function(a){return l.call(a)=="[object Arguments]"};b.isArguments(arguments)||(b.isArguments=function(a){return!(!a||!b.has(a,"callee"))});b.isFunction=function(a){return l.call(a)=="[object Function]"}; 27 | b.isString=function(a){return l.call(a)=="[object String]"};b.isNumber=function(a){return l.call(a)=="[object Number]"};b.isFinite=function(a){return b.isNumber(a)&&isFinite(a)};b.isNaN=function(a){return a!==a};b.isBoolean=function(a){return a===true||a===false||l.call(a)=="[object Boolean]"};b.isDate=function(a){return l.call(a)=="[object Date]"};b.isRegExp=function(a){return l.call(a)=="[object RegExp]"};b.isNull=function(a){return a===null};b.isUndefined=function(a){return a===void 0};b.has=function(a, 28 | b){return K.call(a,b)};b.noConflict=function(){s._=I;return this};b.identity=function(a){return a};b.times=function(a,b,d){for(var e=0;e/g,">").replace(/"/g,""").replace(/'/g,"'").replace(/\//g,"/")};b.result=function(a,c){if(a==null)return null;var d=a[c];return b.isFunction(d)?d.call(a):d};b.mixin=function(a){j(b.functions(a),function(c){M(c,b[c]=a[c])})};var N=0;b.uniqueId= 29 | function(a){var b=N++;return a?a+b:b};b.templateSettings={evaluate:/<%([\s\S]+?)%>/g,interpolate:/<%=([\s\S]+?)%>/g,escape:/<%-([\s\S]+?)%>/g};var u=/.^/,n={"\\":"\\","'":"'",r:"\r",n:"\n",t:"\t",u2028:"\u2028",u2029:"\u2029"},v;for(v in n)n[n[v]]=v;var O=/\\|'|\r|\n|\t|\u2028|\u2029/g,P=/\\(\\|'|r|n|t|u2028|u2029)/g,w=function(a){return a.replace(P,function(a,b){return n[b]})};b.template=function(a,c,d){d=b.defaults(d||{},b.templateSettings);a="__p+='"+a.replace(O,function(a){return"\\"+n[a]}).replace(d.escape|| 30 | u,function(a,b){return"'+\n_.escape("+w(b)+")+\n'"}).replace(d.interpolate||u,function(a,b){return"'+\n("+w(b)+")+\n'"}).replace(d.evaluate||u,function(a,b){return"';\n"+w(b)+"\n;__p+='"})+"';\n";d.variable||(a="with(obj||{}){\n"+a+"}\n");var a="var __p='';var print=function(){__p+=Array.prototype.join.call(arguments, '')};\n"+a+"return __p;\n",e=new Function(d.variable||"obj","_",a);if(c)return e(c,b);c=function(a){return e.call(this,a,b)};c.source="function("+(d.variable||"obj")+"){\n"+a+"}";return c}; 31 | b.chain=function(a){return b(a).chain()};var m=function(a){this._wrapped=a};b.prototype=m.prototype;var x=function(a,c){return c?b(a).chain():a},M=function(a,c){m.prototype[a]=function(){var a=i.call(arguments);J.call(a,this._wrapped);return x(c.apply(b,a),this._chain)}};b.mixin(b);j("pop,push,reverse,shift,sort,splice,unshift".split(","),function(a){var b=k[a];m.prototype[a]=function(){var d=this._wrapped;b.apply(d,arguments);var e=d.length;(a=="shift"||a=="splice")&&e===0&&delete d[0];return x(d, 32 | this._chain)}});j(["concat","join","slice"],function(a){var b=k[a];m.prototype[a]=function(){return x(b.apply(this._wrapped,arguments),this._chain)}});m.prototype.chain=function(){this._chain=true;return this};m.prototype.value=function(){return this._wrapped}}).call(this); 33 | -------------------------------------------------------------------------------- /lib/js/jquery.ui.colorPicker.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery UI Color Picker Widget 3 | * 4 | * Copyright 2012, Olav Andreas Lindekleiv (http://lindekleiv.com/) 5 | * Available under the BSD License 6 | * See the LICENSE file or http://opensource.org/licenses/BSD-3-Clause 7 | * 8 | * Available on BitBucket at 9 | * https://bitbucket.org/lindekleiv/jquery-ui-colorpicker 10 | */ 11 | 12 | var __indexOf = Array.prototype.indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }; 13 | 14 | $.widget('oal.colorPicker', { 15 | options: { 16 | size: 250, 17 | format: 'hsla' 18 | }, 19 | _create: function() { 20 | var alpha, lightness, 21 | _this = this; 22 | this.lightness = 0.0; 23 | this.alpha = 1.0; 24 | this.fromCenter = 0.0; 25 | this.pickerPos = [0, 0]; 26 | this.parent = $('
'); 27 | this.parent.css({ 28 | width: this.options.size + 36 29 | }); 30 | this.element.addClass('colorInput'); 31 | this.element.css({ 32 | width: this.options.size + 36 33 | }); 34 | this.element.wrap(this.parent); 35 | this.canvasId = "colorpicker" + (parseInt(Math.random() * 9999)); 36 | this.wheel = $(""); 37 | this.element.before(this.wheel); 38 | this._draw(); 39 | lightness = $('
').css({ 40 | width: this.options.size, 41 | height: this.options.size 42 | }); 43 | this.element.before(lightness); 44 | alpha = $('
').css({ 45 | width: this.options.size, 46 | height: this.options.size 47 | }); 48 | this.element.before(alpha); 49 | this.lightnessSlider = $('
').css({ 50 | height: this.options.size 51 | }); 52 | this.element.before(this.lightnessSlider); 53 | this.lightnessSlider.find('span.handle').draggable({ 54 | containment: 'parent', 55 | drag: function(e, ui) { 56 | return _this._setLightness(ui.position.top, true); 57 | } 58 | }); 59 | this.alphaSlider = $('
').css({ 60 | height: this.options.size 61 | }); 62 | this.element.before(this.alphaSlider); 63 | this.alphaSlider.find('span.handle').draggable({ 64 | containment: 'parent', 65 | drag: function(e, ui) { 66 | return _this._setAlpha(ui.position.top, true); 67 | } 68 | }); 69 | this.picker = $('').css({ 70 | top: this.options.size / 2, 71 | left: this.options.size / 2 72 | }); 73 | this.element.before(this.picker); 74 | this.picker.draggable({ 75 | drag: function(e, ui) { 76 | var x, y; 77 | x = ui.position.left - _this.options.size / 2; 78 | y = ui.position.top - _this.options.size / 2; 79 | return _this._setHue(x, y, true); 80 | } 81 | }); 82 | this.element.on('change', function() { 83 | var a, b, color, g, h, hsla, l, pattern, r, rgb, rgba, s, _ref, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8; 84 | color = _this.element.val(); 85 | if (color.indexOf('hsla(') === 0) { 86 | pattern = /^hsla\((\d+),\s+(\d+(?:.\d+)?)%,\s+(\d+(?:.\d+)?)%,\s+(\d+(?:.\d+)?)\)$/; 87 | _ref = pattern.exec(color), hsla = _ref[0], h = _ref[1], s = _ref[2], l = _ref[3], a = _ref[4]; 88 | return _this.setColor(h, s, l, a); 89 | } else if (color.indexOf('hsl(') === 0) { 90 | pattern = /^hsl\((\d+),\s+(\d+(?:.\d+)?)%,\s+(\d+(?:.\d+)?)%\)$/; 91 | _ref2 = pattern.exec(color), hsla = _ref2[0], h = _ref2[1], s = _ref2[2], l = _ref2[3]; 92 | return _this.setColor(h, s, l); 93 | } else if (color.indexOf('rgba(') === 0) { 94 | pattern = /^rgba\((\d{1,3}),[ ]?(\d{1,3}),[ ]?(\d{1,3}),[ ]?(\d?.\d{1,2})\)$/; 95 | _ref3 = pattern.exec(color), rgba = _ref3[0], r = _ref3[1], g = _ref3[2], b = _ref3[3], a = _ref3[4]; 96 | _ref4 = _this._toHsla(r, g, b, a), h = _ref4[0], s = _ref4[1], l = _ref4[2], a = _ref4[3]; 97 | return _this.setColor(h, s, l, a); 98 | } else if (color.indexOf('rgb(') === 0) { 99 | pattern = /^rgb\((\d{1,3}),[ ]?(\d{1,3}),[ ]?(\d{1,3})\)$/; 100 | _ref5 = pattern.exec(color), rgb = _ref5[0], r = _ref5[1], g = _ref5[2], b = _ref5[3]; 101 | _ref6 = _this._toHsla(r, g, b), h = _ref6[0], s = _ref6[1], l = _ref6[2], a = _ref6[3]; 102 | return _this.setColor(h, s, l, a); 103 | } else if (color.indexOf('#') === 0 && color.length === 4) { 104 | r = parseInt(color[1] + color[1], 16); 105 | g = parseInt(color[2] + color[2], 16); 106 | b = parseInt(color[3] + color[3], 16); 107 | _ref7 = _this._toHsla(r, g, b), h = _ref7[0], s = _ref7[1], l = _ref7[2], a = _ref7[3]; 108 | return _this.setColor(h, s, l, a); 109 | } else if (color.indexOf('#') === 0 && color.length === 7) { 110 | r = parseInt(color[1] + color[2], 16); 111 | g = parseInt(color[3] + color[4], 16); 112 | b = parseInt(color[5] + color[6], 16); 113 | _ref8 = _this._toHsla(r, g, b), h = _ref8[0], s = _ref8[1], l = _ref8[2], a = _ref8[3]; 114 | return _this.setColor(h, s, l, a); 115 | } 116 | }); 117 | alpha.on('click', function(e) { 118 | var offset, x, y; 119 | offset = $(e.target).offset(); 120 | x = e.clientX - offset.left - (_this.options.size / 2); 121 | y = e.clientY - offset.top - (_this.options.size / 2); 122 | _this._setHue(x, y); 123 | return _this._update(); 124 | }); 125 | this.lightnessSlider.on('click', function(e) { 126 | var offset; 127 | offset = $(e.target).offset(); 128 | lightness = Math.abs(1 - (e.clientY - offset.top) / _this.options.size) * 100; 129 | _this._setLightness(lightness, false); 130 | return _this._update(); 131 | }); 132 | return this.alphaSlider.on('click', function(e) { 133 | var offset; 134 | offset = $(e.target).offset(); 135 | alpha = Math.abs(1 - (e.clientY - offset.top) / _this.options.size); 136 | _this._setAlpha(alpha, false); 137 | return _this._update(); 138 | }); 139 | }, 140 | _draw: function() { 141 | var c, canvas, color, half, i, max, radialGradient, size; 142 | canvas = document.getElementById(this.canvasId); 143 | c = canvas.getContext('2d'); 144 | size = this.options.size; 145 | half = size / 2; 146 | max = size * 1.25; 147 | for (i = 0; 0 <= max ? i <= max : i >= max; 0 <= max ? i++ : i--) { 148 | c.save(); 149 | color = i / max; 150 | c.strokeStyle = "hsl(" + (color * 360) + ",100%,50%)"; 151 | c.translate(half, half); 152 | c.rotate(Math.PI * 2 * i / max); 153 | c.beginPath(); 154 | c.lineWidth = 3; 155 | c.moveTo(0, 0); 156 | c.lineTo(0, half); 157 | c.stroke(); 158 | c.restore(); 159 | } 160 | radialGradient = c.createRadialGradient(half, half, 0, half, half, half); 161 | radialGradient.addColorStop(0, 'hsl(0, 0%, 50%)'); 162 | radialGradient.addColorStop(1, 'hsla(0, 0%, 50%, 0)'); 163 | c.fillStyle = radialGradient; 164 | return c.fillRect(0, 0, this.options.size, this.options.size); 165 | }, 166 | _setHue: function(x, y, pos) { 167 | if (pos == null) pos = false; 168 | this.fromCenter = Math.sqrt(x * x + y * y); 169 | this.pickerPos = [x, y]; 170 | if (pos) { 171 | this._update(); 172 | if (this.fromCenter >= this.options.size / 2) return false; 173 | } else { 174 | return this.picker.css({ 175 | top: y + this.options.size / 2, 176 | left: x + this.options.size / 2 177 | }); 178 | } 179 | }, 180 | _setLightness: function(l, pos) { 181 | var color; 182 | if (pos == null) pos = false; 183 | if (pos) { 184 | this.lightness = (l / this.options.size) - 0.5; 185 | this._update(); 186 | } else { 187 | this.lightness = 0.5 - (l / 100); 188 | this.lightnessSlider.find('span.handle').css({ 189 | top: (this.lightness + 0.5) * this.options.size 190 | }); 191 | } 192 | if (this.lightness < 0) { 193 | color = "rgba(255,255,255," + (Math.abs(this.lightness * 2)) + ")"; 194 | } else { 195 | color = "rgba(0,0,0," + (this.lightness * 2) + ")"; 196 | } 197 | return this.wheel.next().css({ 198 | backgroundColor: color 199 | }); 200 | }, 201 | _setAlpha: function(a, pos) { 202 | if (pos == null) pos = false; 203 | if (pos) { 204 | this.alpha = Math.abs(1 - a / this.options.size); 205 | this._update(); 206 | } else { 207 | this.alpha = a; 208 | this.alphaSlider.find('span.handle').css({ 209 | top: Math.abs(1 - this.alpha) * this.options.size 210 | }); 211 | } 212 | return this.wheel.next().next().css({ 213 | opacity: Math.abs(1 - this.alpha) 214 | }); 215 | }, 216 | _generateColor: function() { 217 | var a, h, l, s; 218 | h = parseInt(180 - (Math.atan2(this.pickerPos[0], this.pickerPos[1]) + Math.PI) / (Math.PI * 2) * 360); 219 | if (h < 0) h += 360; 220 | s = this.fromCenter / this.options.size * 100 * 2; 221 | l = Math.abs(this.lightness - 0.5) * 100; 222 | a = this.alpha; 223 | if (h > 360) h = 360; 224 | if (s > 100) s = 100; 225 | if (l > 100) l = 100; 226 | if (a > 1.0) a = 1.0; 227 | s = Math.round(s * 100) / 100; 228 | l = Math.round(l * 100) / 100; 229 | a = Math.round(a * 100) / 100; 230 | return [h, s, l, a]; 231 | }, 232 | _update: function() { 233 | var a, b, bs, colorString, g, gs, h, l, r, response, rs, s, _ref, _ref2, _ref3, _ref4, _ref5; 234 | _ref = this._generateColor(), h = _ref[0], s = _ref[1], l = _ref[2], a = _ref[3]; 235 | switch (this.options.format) { 236 | case 'hsla': 237 | colorString = "hsla(" + h + ", " + s + "%, " + l + "%, " + a + ")"; 238 | break; 239 | case 'hsl': 240 | colorString = "hsl(" + h + ", " + s + "%, " + l + "%)"; 241 | break; 242 | case 'rgba': 243 | _ref2 = this._toRgba(h, s, l, a), r = _ref2[0], g = _ref2[1], b = _ref2[2], a = _ref2[3]; 244 | colorString = "rgba(" + r + ", " + g + ", " + b + ", " + a + ")"; 245 | break; 246 | case 'rgb': 247 | _ref3 = this._toRgba(h, s, l), r = _ref3[0], g = _ref3[1], b = _ref3[2], a = _ref3[3]; 248 | colorString = "rgb(" + r + ", " + g + ", " + b + ")"; 249 | break; 250 | case 'hex': 251 | _ref4 = this._toRgba(h, s, l), r = _ref4[0], g = _ref4[1], b = _ref4[2], a = _ref4[3]; 252 | rs = r.toString(16); 253 | gs = g.toString(16); 254 | bs = b.toString(16); 255 | if (rs.length === 1) rs = '0' + rs; 256 | if (gs.length === 1) gs = '0' + gs; 257 | if (bs.length === 1) bs = '0' + bs; 258 | colorString = "#" + rs + gs + bs; 259 | break; 260 | default: 261 | console.error('Color format not supported!'); 262 | } 263 | this.element.val(colorString); 264 | this.picker.css({ 265 | background: colorString 266 | }); 267 | if ((_ref5 = this.options.format) === 'hsl' || _ref5 === 'hsla') { 268 | response = { 269 | hue: h, 270 | saturation: s, 271 | lightness: l 272 | }; 273 | } else { 274 | response = { 275 | red: r, 276 | green: g, 277 | blue: b 278 | }; 279 | } 280 | if (__indexOf.call(this.options.format, 'a') >= 0) response.alpha = a; 281 | response.color = colorString; 282 | return this._trigger('colorChange', null, response); 283 | }, 284 | _toRgba: function(h, s, l, a) { 285 | var b, g, hue2rgb, p, q, r; 286 | if (a == null) a = 1.0; 287 | h = h / 360; 288 | s = s / 100; 289 | l = l / 100; 290 | if (s === 0.0) { 291 | r = l; 292 | g = l; 293 | b = l; 294 | } else { 295 | hue2rgb = function(p, q, t) { 296 | if (t < 0) t += 1; 297 | if (t > 1) t -= 1; 298 | if (t < 1 / 6) return p + (q - p) * 6 * t; 299 | if (t < 1 / 2) return q; 300 | if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; 301 | return p; 302 | }; 303 | if (l < 0.5) { 304 | q = l * (1 + s); 305 | } else { 306 | q = l + s - l * s; 307 | } 308 | p = 2 * l - q; 309 | r = hue2rgb(p, q, h + 1 / 3); 310 | g = hue2rgb(p, q, h); 311 | b = hue2rgb(p, q, h - 1 / 3); 312 | } 313 | return [parseInt(r * 255), parseInt(g * 255), parseInt(b * 255), a]; 314 | }, 315 | _toHsla: function(r, g, b, a) { 316 | var add, d, h, l, max, min, s; 317 | if (a == null) a = 1.0; 318 | r /= 255; 319 | g /= 255; 320 | b /= 255; 321 | max = Math.max(r, g, b); 322 | min = Math.min(r, g, b); 323 | h = (max + min) / 2; 324 | s = h; 325 | l = h; 326 | if (max === min) { 327 | h = 0; 328 | s = 0; 329 | } else { 330 | d = max - min; 331 | if (l > 0.5) { 332 | s = d / (2 - max - min); 333 | } else { 334 | s = d / (max + min); 335 | } 336 | switch (max) { 337 | case r: 338 | if (g < b) { 339 | add = 6; 340 | } else { 341 | add = 0; 342 | } 343 | h = (g - b) / d + add; 344 | break; 345 | case g: 346 | h = (b - r) / d + 2; 347 | break; 348 | case b: 349 | h = (r - g) / d + 4; 350 | } 351 | h /= 6; 352 | } 353 | return [parseInt(h * 360), Math.round(s * 1000) / 10, Math.round(l * 1000) / 10, a]; 354 | }, 355 | setColor: function(h, s, l, a) { 356 | var dist, x, y; 357 | if (a == null) a = 1.0; 358 | if (typeof h === 'string' && (h.indexOf('hsl') === 0 || h.indexOf('rgb') === 0 || h.indexOf('#') === 0)) { 359 | this.element.val(h); 360 | this.element.trigger('change'); 361 | return true; 362 | } 363 | h = parseInt(h); 364 | h += 90; 365 | if (h > 360) h %= 360; 366 | if (h > 0) { 367 | dist = s / 100 * (this.options.size / 2); 368 | x = Math.cos(h / 360 * (Math.PI * 2)) * dist; 369 | y = Math.sin(h / 360 * (Math.PI * 2)) * dist; 370 | this._setHue(x, y); 371 | } 372 | if (s >= 0 && s <= 100) { 373 | this.saturation = s; 374 | } else if (s > 100) { 375 | this.saturation = 100; 376 | } else { 377 | this.saturation = 0; 378 | } 379 | if (l > 100) { 380 | l = 100; 381 | } else if (l < 0) { 382 | l = 0; 383 | } 384 | this._setLightness(l); 385 | if (a > 1.0) { 386 | a = 1.0; 387 | } else if (a < 0.0) { 388 | a = 0.0; 389 | } 390 | this._setAlpha(a); 391 | return this._update(); 392 | }, 393 | _setOption: function(key, value) { 394 | if (key === 'format' && (value === 'hsla' || value === 'hsl' || value === 'rgba' || value === 'rgb' || value === 'hex')) { 395 | this.options.format = value; 396 | this._update(); 397 | } 398 | return $.Widget.prototype._setOption.apply(this, arguments); 399 | } 400 | }); -------------------------------------------------------------------------------- /less/main.less: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | 50 | a { 51 | color: #000; 52 | text-decoration: none; 53 | } 54 | 55 | /////////////////////////////////////////////////////////////////////////////////////////////////// 56 | 57 | @font-face { 58 | font-family: 'Rationale'; 59 | src: url('../fonts/rationale/rationale-webfont.eot'); 60 | src: url('../fonts/rationale/rationale-webfont.eot?#iefix') format('embedded-opentype'), 61 | url('../fonts/rationale/rationale-webfont.woff') format('woff'), 62 | url('../fonts/rationale/rationale-webfont.ttf') format('truetype'), 63 | url('../fonts/rationale/rationale-webfont.svg#webfontregular') format('svg'); 64 | font-weight: normal; 65 | font-style: normal; 66 | } 67 | 68 | @font-face { 69 | font-family: 'Inconsolata'; 70 | src: url('../fonts/inconsolata/ttf-inconsolata-webfont.eot'); 71 | src: url('../fonts/inconsolata/ttf-inconsolata-webfont.eot?#iefix') format('embedded-opentype'), 72 | url('../fonts/inconsolata/ttf-inconsolata-webfont.woff') format('woff'), 73 | url('../fonts/inconsolata/ttf-inconsolata-webfont.ttf') format('truetype'), 74 | url('../fonts/inconsolata/ttf-inconsolata-webfont.svg#webfontregular') format('svg'); 75 | font-weight: normal; 76 | font-style: normal; 77 | } 78 | 79 | /////////////////////////////////////////////////////////////////////////////////////////////////// 80 | 81 | @app_width: 1190px; 82 | @app_height: 555px; 83 | @header_height: 60px; 84 | @footer_height: 40px; 85 | 86 | html, body { 87 | height: 100%; 88 | width: 100%; 89 | } 90 | 91 | body { 92 | background-color: #eee; 93 | font-family: 'Rationale', sans-serif; 94 | h1 { 95 | color: #777; 96 | font-size: 48px; 97 | display: inline-block; 98 | margin: 18px 0 0 20px; 99 | a { 100 | color: #777; 101 | } 102 | } 103 | header { 104 | position: relative; 105 | min-width: @app_width; 106 | height: @header_height; 107 | overflow: visible; 108 | } 109 | footer { 110 | // display: none; 111 | min-width: @app_width; 112 | height: @footer_height; 113 | overflow: visible; 114 | font-size: 20px; 115 | width: 100%; 116 | p { 117 | display: inline-block; 118 | } 119 | .left { 120 | float: left; 121 | margin-left: 20px; 122 | padding-bottom: 20px; 123 | img { 124 | width: 20px; 125 | height: 20px; 126 | margin: 0 0 -2px 0; 127 | } 128 | } 129 | .right { 130 | float: right; 131 | margin-right: 20px; 132 | padding-bottom: 20px; 133 | } 134 | .left, .right { 135 | opacity: 0.5; 136 | } 137 | .left:hover, .right:hover { 138 | opacity: 1; 139 | } 140 | } 141 | } 142 | 143 | .wrapper { 144 | min-height: @header_height + @app_height + @footer_height; 145 | height: 100%; 146 | margin: 0 auto (-@footer_height - 2px); /* the bottom margin is the negative value of the footer's height */ 147 | } 148 | 149 | .distance { 150 | min-height: ((@app_height) / 2) - @header_height -10px; 151 | margin-bottom: -(((@app_height) / 2) + @header_height) + 10px; 152 | width: 1px; 153 | height: 50%; 154 | margin-top: 0; 155 | float: left; 156 | } 157 | 158 | .vertical-center { 159 | width: @app_width; 160 | height: @app_height; 161 | z-index: 1; 162 | position: relative; 163 | margin: 0 auto; 164 | clear: left; 165 | } 166 | 167 | .push { 168 | height: @footer_height; 169 | } 170 | 171 | .twitter-follow-button { 172 | display: inline-block; 173 | margin-bottom: -4px; 174 | width: 74px; 175 | } 176 | 177 | .twitter-follow-button, .twitter-share-button { 178 | font-size: 0; 179 | } 180 | 181 | #skews { 182 | display: none; 183 | position: absolute; 184 | top: 23px; 185 | right: 23px; 186 | height: 34px; 187 | } 188 | 189 | .skew { 190 | vertical-align: top; 191 | display: block; 192 | height: 34px; 193 | -webkit-transform: skew(-30deg); 194 | -moz-transform: skewX(-30deg); 195 | -o-transform: skew(-30deg); 196 | transform: skew(-30deg); 197 | border-radius: 6px; 198 | margin-right: 4px; 199 | margin-top: 0; 200 | } 201 | 202 | .skew > * { 203 | -webkit-transform: skew(30deg); 204 | -moz-transform: skewX(30deg); 205 | -o-transform: skew(30deg); 206 | transform: skew(30deg); 207 | } 208 | 209 | #social-media { 210 | border: 1px solid #AAA; 211 | background-color: #C9C9C9; 212 | position: relative; 213 | width: 104px; 214 | display: inline-block; 215 | white-space: nowrap; 216 | .buttons { 217 | display: inline-block; 218 | } 219 | .inner { 220 | position: absolute; 221 | top: 7px; 222 | left: 15px; 223 | display: block; 224 | width: 73px; 225 | height: 20px; 226 | } 227 | } 228 | 229 | #get-scheme-button { 230 | width: 163px; 231 | border: 1px solid #ccc; 232 | 233 | span { 234 | white-space: nowrap; 235 | font-size: 20px; 236 | display: inline-block; 237 | -webkit-transform: skew(30deg); 238 | -moz-transform: skewX(30deg); 239 | -o-transform: skew(30deg); 240 | transform: skew(30deg); 241 | padding: 7px 20px 0 15px; 242 | } 243 | 244 | &:hover, &:active { 245 | border: 1px solid #bbb; 246 | } 247 | } 248 | 249 | #get-scheme-button, .get-scheme-link { 250 | display: inline-block; 251 | color: inherit; 252 | background: rgb(254,254,254); /* Old browsers */ 253 | background: -moz-linear-gradient(top, rgba(254,254,254,1) 0%, rgba(223,223,223,1) 100%); /* FF3.6+ */ 254 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,254,254,1)), color-stop(100%,rgba(223,223,223,1))); /* Chrome,Safari4+ */ 255 | background: -webkit-linear-gradient(top, rgba(254,254,254,1) 0%,rgba(223,223,223,1) 100%); /* Chrome10+,Safari5.1+ */ 256 | background: -o-linear-gradient(top, rgba(254,254,254,1) 0%,rgba(223,223,223,1) 100%); /* Opera 11.10+ */ 257 | background: -ms-linear-gradient(top, rgba(254,254,254,1) 0%,rgba(223,223,223,1) 100%); /* IE10+ */ 258 | background: linear-gradient(to bottom, rgba(254,254,254,1) 0%,rgba(223,223,223,1) 100%); /* W3C */ 259 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#dfdfdf',GradientType=0 ); /* IE6-9 */ 260 | 261 | &:hover { 262 | background: rgb(247,247,247); /* Old browsers */ 263 | background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(224,224,224,1) 76%, rgba(218,218,218,1) 88%, rgba(209,209,209,1) 100%); /* FF3.6+ */ 264 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(76%,rgba(224,224,224,1)), color-stop(88%,rgba(218,218,218,1)), color-stop(100%,rgba(209,209,209,1))); /* Chrome,Safari4+ */ 265 | background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(224,224,224,1) 76%,rgba(218,218,218,1) 88%,rgba(209,209,209,1) 100%); /* Chrome10+,Safari5.1+ */ 266 | background: -o-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(224,224,224,1) 76%,rgba(218,218,218,1) 88%,rgba(209,209,209,1) 100%); /* Opera 11.10+ */ 267 | background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(224,224,224,1) 76%,rgba(218,218,218,1) 88%,rgba(209,209,209,1) 100%); /* IE10+ */ 268 | background: linear-gradient(to bottom, rgba(247,247,247,1) 0%,rgba(224,224,224,1) 76%,rgba(218,218,218,1) 88%,rgba(209,209,209,1) 100%); /* W3C */ 269 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#d1d1d1',GradientType=0 ); /* IE6-9 */ 270 | } 271 | &:active { 272 | background: rgb(225,225,225); /* Old browsers */ 273 | background: -moz-linear-gradient(top, rgba(225,225,225,1) 0%, rgba(225,225,225,1) 7%, rgba(232,232,232,1) 16%, rgba(238,238,238,1) 31%, rgba(218,218,218,1) 95%, rgba(217,217,217,1) 96%, rgba(187,187,187,1) 98%, rgba(187,187,187,1) 100%); /* FF3.6+ */ 274 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(225,225,225,1)), color-stop(7%,rgba(225,225,225,1)), color-stop(16%,rgba(232,232,232,1)), color-stop(31%,rgba(238,238,238,1)), color-stop(95%,rgba(218,218,218,1)), color-stop(96%,rgba(217,217,217,1)), color-stop(98%,rgba(187,187,187,1)), color-stop(100%,rgba(187,187,187,1))); /* Chrome,Safari4+ */ 275 | background: -webkit-linear-gradient(top, rgba(225,225,225,1) 0%,rgba(225,225,225,1) 7%,rgba(232,232,232,1) 16%,rgba(238,238,238,1) 31%,rgba(218,218,218,1) 95%,rgba(217,217,217,1) 96%,rgba(187,187,187,1) 98%,rgba(187,187,187,1) 100%); /* Chrome10+,Safari5.1+ */ 276 | background: -o-linear-gradient(top, rgba(225,225,225,1) 0%,rgba(225,225,225,1) 7%,rgba(232,232,232,1) 16%,rgba(238,238,238,1) 31%,rgba(218,218,218,1) 95%,rgba(217,217,217,1) 96%,rgba(187,187,187,1) 98%,rgba(187,187,187,1) 100%); /* Opera 11.10+ */ 277 | background: -ms-linear-gradient(top, rgba(225,225,225,1) 0%,rgba(225,225,225,1) 7%,rgba(232,232,232,1) 16%,rgba(238,238,238,1) 31%,rgba(218,218,218,1) 95%,rgba(217,217,217,1) 96%,rgba(187,187,187,1) 98%,rgba(187,187,187,1) 100%); /* IE10+ */ 278 | background: linear-gradient(to bottom, rgba(225,225,225,1) 0%,rgba(225,225,225,1) 7%,rgba(232,232,232,1) 16%,rgba(238,238,238,1) 31%,rgba(218,218,218,1) 95%,rgba(217,217,217,1) 96%,rgba(187,187,187,1) 98%,rgba(187,187,187,1) 100%); /* W3C */ 279 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1e1e1', endColorstr='#bbbbbb',GradientType=0 ); /* IE6-9 */ 280 | } 281 | } 282 | 283 | .get-scheme-link { 284 | padding: 5px 10px; 285 | float: right; 286 | border: 1px solid #bbb; 287 | border-radius: 6px; 288 | &:hover, &:active { 289 | border: 1px solid #aaa; 290 | } 291 | } 292 | 293 | #dialog-modal { 294 | display: none; 295 | } 296 | 297 | #app { 298 | opacity: 0; 299 | white-space: nowrap; 300 | } 301 | 302 | #controls { 303 | vertical-align: top; 304 | visibility: hidden; 305 | display: inline-block; 306 | margin-left: 16px; 307 | width: 300px; 308 | 309 | h2 { 310 | font-size: 26px; 311 | margin: 20px 0 5px 0; 312 | } 313 | 314 | h3 { 315 | font-size: 18px; 316 | margin: 10px 0 5px 0; 317 | } 318 | 319 | } 320 | 321 | #advanced { 322 | font-size: 18px; 323 | font-family: 'Rationale', sans-serif; 324 | border: none; 325 | background: none; 326 | 327 | h2 { 328 | margin-bottom: 10px; 329 | } 330 | 331 | a { 332 | color: #000 !important; 333 | font-weight: normal; 334 | padding: 2px 16px 3px 16px; 335 | } 336 | 337 | &>.ui-tabs-nav>.ui-state-active { 338 | background: #C9C9C9 !important; 339 | } 340 | 341 | &>.ui-tabs-panel.ui-widget-content { 342 | background: #C9C9C9 !important; 343 | } 344 | 345 | &>.ui-tabs-nav { 346 | padding: 0 !important; 347 | border: none; 348 | background: #eee; 349 | border-radius: 0; 350 | } 351 | 352 | &>.ui-tabs-panel { 353 | padding: 18px 18px 16px 17px; 354 | min-height: 0 !important; 355 | border: 1px solid #999; 356 | -moz-border-radius-top-right: 6px; 357 | -webkit-border-top-right-radius: 6px; 358 | -khtml-border-top-right-radius: 6px; 359 | border-top-right-radius: 6px; 360 | } 361 | 362 | .radio-group { 363 | vertical-align: top; 364 | display: inline-block; 365 | margin: 0; 366 | } 367 | 368 | .colorpicker { 369 | display: inline-block; 370 | } 371 | } 372 | 373 | #controls>.ui-tabs { 374 | padding: 0 !important; 375 | } 376 | 377 | #display { 378 | visibility: hidden; 379 | display: inline-block; 380 | font-family: Inconsolata; 381 | font-size: 20px; 382 | margin: 26px 0 0 20px; 383 | width: auto; 384 | height: auto; 385 | padding: 1px 2px 1px 2px; 386 | -moz-box-shadow: 0 0 10px #666; 387 | -webkit-box-shadow: 0 0 10px #666; 388 | box-shadow: 0 0 10px #666; 389 | 390 | table { 391 | border-collapse: separate; 392 | border-spacing: 0.5em 0; 393 | margin-right: 0.5em; 394 | } 395 | 396 | td { 397 | margin-left: 1em; 398 | padding: 0 1em 0 1em; 399 | } 400 | 401 | .row-th { 402 | text-align: right; 403 | } 404 | } 405 | 406 | .bold { 407 | font-weight: bold; // opera sux 408 | } 409 | 410 | .ui-slider { 411 | font-size: 12px; 412 | } 413 | 414 | .ui-slider-handle { 415 | outline: 0 !important; 416 | cursor: pointer !important; 417 | } 418 | 419 | .colorInput { 420 | display: none; 421 | } 422 | 423 | .colorpicker { 424 | height: 90px; 425 | } 426 | 427 | #foreground, #background { 428 | .alpha { 429 | opacity: 0.3; 430 | } 431 | } 432 | 433 | .radio-group { 434 | margin: -1px 0 0 15px !important; 435 | 436 | input { 437 | display: none; 438 | } 439 | 440 | br { 441 | display: none; 442 | } 443 | 444 | label { 445 | display: block; 446 | height: 18px; 447 | width: 115px; 448 | margin: -2px 0 0 0; 449 | padding: 0; 450 | border: 1px solid #999 !important; 451 | .ui-button-text { 452 | font-family: Arial, Verdana, sans-serif; 453 | margin: 1px 0 0 0; 454 | padding: 0; 455 | font-size: 12px; 456 | color: #000; 457 | font-weight: normal; 458 | padding: 0 !important; 459 | } 460 | } 461 | } 462 | 463 | #dye-radio label { 464 | height: 23px !important; 465 | margin-bottom: -1px; 466 | .ui-button-text { 467 | margin: 3px 0 0 0; 468 | } 469 | } 470 | 471 | .ui-dialog { 472 | font-family: 'Rationale', sans-serif; 473 | background: #c9c9c9 !important; 474 | display: flex; 475 | flex-direction: column; 476 | max-height: 90vh; 477 | 478 | &>.ui-widget-header { 479 | padding-left: 15px; 480 | font-size: 26px; 481 | font-weight: normal; 482 | color: #000; 483 | background: #eee !important; 484 | } 485 | 486 | &>.ui-widget-content { 487 | overflow: auto; 488 | background: #c9c9c9 !important; 489 | height: auto !important; 490 | padding: 1em 0.8em 0.8em 0.8em; 491 | } 492 | 493 | .ui-icon-closethick { 494 | background: url("../images/cross.png") 3px 3px no-repeat !important; 495 | } 496 | 497 | .ui-state-hover > .ui-icon-closethick { 498 | background: url("../images/cross_active.png") 3px 3px no-repeat !important; 499 | } 500 | 501 | ul { 502 | background-color: #eee; 503 | border-radius: 6px; 504 | 505 | li { 506 | padding: 10px 0 10px 0; 507 | 508 | p { 509 | font-size: 22px; 510 | position: relative; 511 | line-height: 30px; 512 | padding: 0 10px 0 10px; 513 | a { 514 | line-height: 1em; 515 | font-size: 18px; 516 | } 517 | } 518 | } 519 | 520 | li:nth-child(even) { 521 | background-color: #ddd; 522 | } 523 | 524 | li:last-child { 525 | border-bottom-left-radius: 6px; 526 | border-bottom-right-radius: 6px; 527 | } 528 | } 529 | 530 | } 531 | 532 | .ui-widget-overlay { 533 | background: #000; 534 | } 535 | -------------------------------------------------------------------------------- /lib/js/backbone-min.js: -------------------------------------------------------------------------------- 1 | // Backbone.js 0.9.2 2 | 3 | // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. 4 | // Backbone may be freely distributed under the MIT license. 5 | // For all details and documentation: 6 | // http://backbonejs.org 7 | (function(){var l=this,y=l.Backbone,z=Array.prototype.slice,A=Array.prototype.splice,g;g="undefined"!==typeof exports?exports:l.Backbone={};g.VERSION="0.9.2";var f=l._;!f&&"undefined"!==typeof require&&(f=require("underscore"));var i=l.jQuery||l.Zepto||l.ender;g.setDomLibrary=function(a){i=a};g.noConflict=function(){l.Backbone=y;return this};g.emulateHTTP=!1;g.emulateJSON=!1;var p=/\s+/,k=g.Events={on:function(a,b,c){var d,e,f,g,j;if(!b)return this;a=a.split(p);for(d=this._callbacks||(this._callbacks= 8 | {});e=a.shift();)f=(j=d[e])?j.tail:{},f.next=g={},f.context=c,f.callback=b,d[e]={tail:g,next:j?j.next:f};return this},off:function(a,b,c){var d,e,h,g,j,q;if(e=this._callbacks){if(!a&&!b&&!c)return delete this._callbacks,this;for(a=a?a.split(p):f.keys(e);d=a.shift();)if(h=e[d],delete e[d],h&&(b||c))for(g=h.tail;(h=h.next)!==g;)if(j=h.callback,q=h.context,b&&j!==b||c&&q!==c)this.on(d,j,q);return this}},trigger:function(a){var b,c,d,e,f,g;if(!(d=this._callbacks))return this;f=d.all;a=a.split(p);for(g= 9 | z.call(arguments,1);b=a.shift();){if(c=d[b])for(e=c.tail;(c=c.next)!==e;)c.callback.apply(c.context||this,g);if(c=f){e=c.tail;for(b=[b].concat(g);(c=c.next)!==e;)c.callback.apply(c.context||this,b)}}return this}};k.bind=k.on;k.unbind=k.off;var o=g.Model=function(a,b){var c;a||(a={});b&&b.parse&&(a=this.parse(a));if(c=n(this,"defaults"))a=f.extend({},c,a);b&&b.collection&&(this.collection=b.collection);this.attributes={};this._escapedAttributes={};this.cid=f.uniqueId("c");this.changed={};this._silent= 10 | {};this._pending={};this.set(a,{silent:!0});this.changed={};this._silent={};this._pending={};this._previousAttributes=f.clone(this.attributes);this.initialize.apply(this,arguments)};f.extend(o.prototype,k,{changed:null,_silent:null,_pending:null,idAttribute:"id",initialize:function(){},toJSON:function(){return f.clone(this.attributes)},get:function(a){return this.attributes[a]},escape:function(a){var b;if(b=this._escapedAttributes[a])return b;b=this.get(a);return this._escapedAttributes[a]=f.escape(null== 11 | b?"":""+b)},has:function(a){return null!=this.get(a)},set:function(a,b,c){var d,e;f.isObject(a)||null==a?(d=a,c=b):(d={},d[a]=b);c||(c={});if(!d)return this;d instanceof o&&(d=d.attributes);if(c.unset)for(e in d)d[e]=void 0;if(!this._validate(d,c))return!1;this.idAttribute in d&&(this.id=d[this.idAttribute]);var b=c.changes={},h=this.attributes,g=this._escapedAttributes,j=this._previousAttributes||{};for(e in d){a=d[e];if(!f.isEqual(h[e],a)||c.unset&&f.has(h,e))delete g[e],(c.silent?this._silent: 12 | b)[e]=!0;c.unset?delete h[e]:h[e]=a;!f.isEqual(j[e],a)||f.has(h,e)!=f.has(j,e)?(this.changed[e]=a,c.silent||(this._pending[e]=!0)):(delete this.changed[e],delete this._pending[e])}c.silent||this.change(c);return this},unset:function(a,b){(b||(b={})).unset=!0;return this.set(a,null,b)},clear:function(a){(a||(a={})).unset=!0;return this.set(f.clone(this.attributes),a)},fetch:function(a){var a=a?f.clone(a):{},b=this,c=a.success;a.success=function(d,e,f){if(!b.set(b.parse(d,f),a))return!1;c&&c(b,d)}; 13 | a.error=g.wrapError(a.error,b,a);return(this.sync||g.sync).call(this,"read",this,a)},save:function(a,b,c){var d,e;f.isObject(a)||null==a?(d=a,c=b):(d={},d[a]=b);c=c?f.clone(c):{};if(c.wait){if(!this._validate(d,c))return!1;e=f.clone(this.attributes)}a=f.extend({},c,{silent:!0});if(d&&!this.set(d,c.wait?a:c))return!1;var h=this,i=c.success;c.success=function(a,b,e){b=h.parse(a,e);if(c.wait){delete c.wait;b=f.extend(d||{},b)}if(!h.set(b,c))return false;i?i(h,a):h.trigger("sync",h,a,c)};c.error=g.wrapError(c.error, 14 | h,c);b=this.isNew()?"create":"update";b=(this.sync||g.sync).call(this,b,this,c);c.wait&&this.set(e,a);return b},destroy:function(a){var a=a?f.clone(a):{},b=this,c=a.success,d=function(){b.trigger("destroy",b,b.collection,a)};if(this.isNew())return d(),!1;a.success=function(e){a.wait&&d();c?c(b,e):b.trigger("sync",b,e,a)};a.error=g.wrapError(a.error,b,a);var e=(this.sync||g.sync).call(this,"delete",this,a);a.wait||d();return e},url:function(){var a=n(this,"urlRoot")||n(this.collection,"url")||t(); 15 | return this.isNew()?a:a+("/"==a.charAt(a.length-1)?"":"/")+encodeURIComponent(this.id)},parse:function(a){return a},clone:function(){return new this.constructor(this.attributes)},isNew:function(){return null==this.id},change:function(a){a||(a={});var b=this._changing;this._changing=!0;for(var c in this._silent)this._pending[c]=!0;var d=f.extend({},a.changes,this._silent);this._silent={};for(c in d)this.trigger("change:"+c,this,this.get(c),a);if(b)return this;for(;!f.isEmpty(this._pending);){this._pending= 16 | {};this.trigger("change",this,a);for(c in this.changed)!this._pending[c]&&!this._silent[c]&&delete this.changed[c];this._previousAttributes=f.clone(this.attributes)}this._changing=!1;return this},hasChanged:function(a){return!arguments.length?!f.isEmpty(this.changed):f.has(this.changed,a)},changedAttributes:function(a){if(!a)return this.hasChanged()?f.clone(this.changed):!1;var b,c=!1,d=this._previousAttributes,e;for(e in a)if(!f.isEqual(d[e],b=a[e]))(c||(c={}))[e]=b;return c},previous:function(a){return!arguments.length|| 17 | !this._previousAttributes?null:this._previousAttributes[a]},previousAttributes:function(){return f.clone(this._previousAttributes)},isValid:function(){return!this.validate(this.attributes)},_validate:function(a,b){if(b.silent||!this.validate)return!0;var a=f.extend({},this.attributes,a),c=this.validate(a,b);if(!c)return!0;b&&b.error?b.error(this,c,b):this.trigger("error",this,c,b);return!1}});var r=g.Collection=function(a,b){b||(b={});b.model&&(this.model=b.model);b.comparator&&(this.comparator=b.comparator); 18 | this._reset();this.initialize.apply(this,arguments);a&&this.reset(a,{silent:!0,parse:b.parse})};f.extend(r.prototype,k,{model:o,initialize:function(){},toJSON:function(a){return this.map(function(b){return b.toJSON(a)})},add:function(a,b){var c,d,e,g,i,j={},k={},l=[];b||(b={});a=f.isArray(a)?a.slice():[a];c=0;for(d=a.length;c=b))this.iframe=i('