├── editor ├── logo.png ├── img │ ├── gear.png │ ├── plus.png │ ├── save.png │ ├── export.png │ ├── favicon.png │ ├── gallery.png │ ├── garbage.png │ ├── dragndrop.png │ ├── duplicate.png │ ├── icons │ │ ├── hand.png │ │ ├── pen.png │ │ ├── wand.png │ │ ├── circle.png │ │ ├── eraser.png │ │ ├── select.png │ │ ├── stroke.png │ │ ├── dropper.png │ │ ├── rectangle.png │ │ ├── mirror-pen.png │ │ ├── color-palette.png │ │ ├── paint-bucket.png │ │ └── vertical-mirror-pen.png │ ├── keyboard.png │ ├── merge-icon.png │ ├── tools │ │ ├── flip.png │ │ ├── hand.png │ │ ├── pen.png │ │ ├── circle.png │ │ ├── clone.png │ │ ├── eraser.png │ │ ├── mirror.png │ │ ├── rotate.png │ │ ├── stroke.png │ │ ├── hand-dark.png │ │ ├── lighten.png │ │ ├── magicwand.png │ │ ├── pen-dark.png │ │ ├── rectangle.png │ │ ├── circle-dark.png │ │ ├── eraser-dark.png │ │ ├── eyedropper.png │ │ ├── paintbucket.png │ │ ├── swap-colors.png │ │ ├── magicwand-dark.png │ │ ├── rectangle-dark.png │ │ ├── eyedropper-dark.png │ │ ├── paintbucket-dark.png │ │ ├── rectangle_selection.png │ │ ├── rectangle_selection-dark.png │ │ └── swap-arrow-square-small-grey.png │ ├── cloud_export.png │ ├── import-icon.png │ ├── resize-icon.png │ ├── local-storage-icon.png │ ├── canvas_background │ │ ├── light_canvas_background.png │ │ ├── medium_canvas_background.png │ │ ├── lowcont_dark_canvas_background.png │ │ └── lowcont_medium_canvas_background.png │ └── layers.svg ├── css │ ├── fonts │ │ ├── piskel.eot │ │ ├── piskel.ttf │ │ ├── icomoon.eot │ │ ├── icomoon.ttf │ │ ├── icomoon.woff │ │ ├── piskel.woff │ │ ├── piskel.svg │ │ └── icomoon.svg │ └── piskel-style-packaged-2015-09-02-11-47.css ├── templates │ ├── transformations.html │ ├── frames-list.html │ ├── misc-templates.html │ ├── preview.html │ ├── dialogs │ │ ├── browse-local.html │ │ ├── import-image.html │ │ └── create-palette.html │ ├── cheatsheet.html │ ├── palettes-list.html │ ├── settings.html │ ├── layers-list.html │ ├── drawing-tools.html │ ├── settings │ │ ├── import.html │ │ ├── export.html │ │ ├── application.html │ │ ├── resize.html │ │ └── save.html │ └── popup-preview.html ├── js │ └── lib │ │ ├── iframeLoader-0.1.0.js │ │ └── gif │ │ └── gif.ie.worker.js ├── piskel-boot.js ├── piskel-boot-2015-09-02-11-47.js ├── piskelapp-partials │ └── main-partial.html └── index.html ├── README.md ├── index.html ├── style.css └── script.js /editor/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/logo.png -------------------------------------------------------------------------------- /editor/img/gear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/gear.png -------------------------------------------------------------------------------- /editor/img/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/plus.png -------------------------------------------------------------------------------- /editor/img/save.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/save.png -------------------------------------------------------------------------------- /editor/img/export.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/export.png -------------------------------------------------------------------------------- /editor/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/favicon.png -------------------------------------------------------------------------------- /editor/img/gallery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/gallery.png -------------------------------------------------------------------------------- /editor/img/garbage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/garbage.png -------------------------------------------------------------------------------- /editor/img/dragndrop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/dragndrop.png -------------------------------------------------------------------------------- /editor/img/duplicate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/duplicate.png -------------------------------------------------------------------------------- /editor/img/icons/hand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/icons/hand.png -------------------------------------------------------------------------------- /editor/img/icons/pen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/icons/pen.png -------------------------------------------------------------------------------- /editor/img/icons/wand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/icons/wand.png -------------------------------------------------------------------------------- /editor/img/keyboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/keyboard.png -------------------------------------------------------------------------------- /editor/img/merge-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/merge-icon.png -------------------------------------------------------------------------------- /editor/img/tools/flip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/flip.png -------------------------------------------------------------------------------- /editor/img/tools/hand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/hand.png -------------------------------------------------------------------------------- /editor/img/tools/pen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/pen.png -------------------------------------------------------------------------------- /editor/css/fonts/piskel.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/css/fonts/piskel.eot -------------------------------------------------------------------------------- /editor/css/fonts/piskel.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/css/fonts/piskel.ttf -------------------------------------------------------------------------------- /editor/img/cloud_export.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/cloud_export.png -------------------------------------------------------------------------------- /editor/img/icons/circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/icons/circle.png -------------------------------------------------------------------------------- /editor/img/icons/eraser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/icons/eraser.png -------------------------------------------------------------------------------- /editor/img/icons/select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/icons/select.png -------------------------------------------------------------------------------- /editor/img/icons/stroke.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/icons/stroke.png -------------------------------------------------------------------------------- /editor/img/import-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/import-icon.png -------------------------------------------------------------------------------- /editor/img/resize-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/resize-icon.png -------------------------------------------------------------------------------- /editor/img/tools/circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/circle.png -------------------------------------------------------------------------------- /editor/img/tools/clone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/clone.png -------------------------------------------------------------------------------- /editor/img/tools/eraser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/eraser.png -------------------------------------------------------------------------------- /editor/img/tools/mirror.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/mirror.png -------------------------------------------------------------------------------- /editor/img/tools/rotate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/rotate.png -------------------------------------------------------------------------------- /editor/img/tools/stroke.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/stroke.png -------------------------------------------------------------------------------- /editor/css/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/css/fonts/icomoon.eot -------------------------------------------------------------------------------- /editor/css/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/css/fonts/icomoon.ttf -------------------------------------------------------------------------------- /editor/css/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/css/fonts/icomoon.woff -------------------------------------------------------------------------------- /editor/css/fonts/piskel.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/css/fonts/piskel.woff -------------------------------------------------------------------------------- /editor/img/icons/dropper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/icons/dropper.png -------------------------------------------------------------------------------- /editor/img/icons/rectangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/icons/rectangle.png -------------------------------------------------------------------------------- /editor/img/tools/hand-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/hand-dark.png -------------------------------------------------------------------------------- /editor/img/tools/lighten.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/lighten.png -------------------------------------------------------------------------------- /editor/img/tools/magicwand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/magicwand.png -------------------------------------------------------------------------------- /editor/img/tools/pen-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/pen-dark.png -------------------------------------------------------------------------------- /editor/img/tools/rectangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/rectangle.png -------------------------------------------------------------------------------- /editor/img/icons/mirror-pen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/icons/mirror-pen.png -------------------------------------------------------------------------------- /editor/img/tools/circle-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/circle-dark.png -------------------------------------------------------------------------------- /editor/img/tools/eraser-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/eraser-dark.png -------------------------------------------------------------------------------- /editor/img/tools/eyedropper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/eyedropper.png -------------------------------------------------------------------------------- /editor/img/tools/paintbucket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/paintbucket.png -------------------------------------------------------------------------------- /editor/img/tools/swap-colors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/swap-colors.png -------------------------------------------------------------------------------- /editor/img/icons/color-palette.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/icons/color-palette.png -------------------------------------------------------------------------------- /editor/img/icons/paint-bucket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/icons/paint-bucket.png -------------------------------------------------------------------------------- /editor/img/local-storage-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/local-storage-icon.png -------------------------------------------------------------------------------- /editor/img/tools/magicwand-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/magicwand-dark.png -------------------------------------------------------------------------------- /editor/img/tools/rectangle-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/rectangle-dark.png -------------------------------------------------------------------------------- /editor/img/tools/eyedropper-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/eyedropper-dark.png -------------------------------------------------------------------------------- /editor/img/tools/paintbucket-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/paintbucket-dark.png -------------------------------------------------------------------------------- /editor/img/icons/vertical-mirror-pen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/icons/vertical-mirror-pen.png -------------------------------------------------------------------------------- /editor/img/tools/rectangle_selection.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/rectangle_selection.png -------------------------------------------------------------------------------- /editor/img/tools/rectangle_selection-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/rectangle_selection-dark.png -------------------------------------------------------------------------------- /editor/img/tools/swap-arrow-square-small-grey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/tools/swap-arrow-square-small-grey.png -------------------------------------------------------------------------------- /editor/img/canvas_background/light_canvas_background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/canvas_background/light_canvas_background.png -------------------------------------------------------------------------------- /editor/img/canvas_background/medium_canvas_background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/canvas_background/medium_canvas_background.png -------------------------------------------------------------------------------- /editor/img/canvas_background/lowcont_dark_canvas_background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/canvas_background/lowcont_dark_canvas_background.png -------------------------------------------------------------------------------- /editor/img/canvas_background/lowcont_medium_canvas_background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piskelapp/piskel-embed/HEAD/editor/img/canvas_background/lowcont_medium_canvas_background.png -------------------------------------------------------------------------------- /editor/templates/transformations.html: -------------------------------------------------------------------------------- 1 |
2 |

Transform

3 | 4 |
-------------------------------------------------------------------------------- /editor/templates/frames-list.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 |
7 |
-------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Piskel Embed example 2 | ==================== 3 | 4 | Simple showcase demonstrating how to integrate a [Piskel](https://github.com/juliandescottes/piskel) editor in an existing website. 5 | 6 | This example should demonstrate : 7 | - how to embed a custom version of the standalone Piskel editor in an iFrame 8 | - how to load sprites 9 | - how to save sprites 10 | -------------------------------------------------------------------------------- /editor/templates/misc-templates.html: -------------------------------------------------------------------------------- 1 |
2 | 9 |
-------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Embedded Piskel editor 4 | 5 | 6 | 7 |
8 |

My sprites !

9 | 14 |
15 |
16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /editor/templates/preview.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
13 | 14 | 15 |
16 |
17 |
18 |
-------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /** 2 | * RESET 3 | */ 4 | html, body { 5 | font-family: Helvetica; 6 | } 7 | 8 | ul, li { 9 | margin : 0; 10 | padding : 0; 11 | list-style-type: none; 12 | } 13 | 14 | .sidebar { 15 | background: #aaa; 16 | border-right: 5px solid #888; 17 | width: 200px; 18 | position: absolute; 19 | top: 0; 20 | left: 0; 21 | bottom: 0; 22 | box-sizing: border-box; 23 | } 24 | 25 | .sidebar-title { 26 | padding-left: 10px; 27 | } 28 | 29 | .sidebar-menuitem { 30 | height: 36px; 31 | line-height: 36px; 32 | padding-left: 15px; 33 | border-bottom : 1px solid #888; 34 | cursor: pointer; 35 | } 36 | 37 | .sidebar-menuitem:hover { 38 | background: #5e94c7; 39 | color: white; 40 | } 41 | 42 | .sidebar-menuitem:first-child { 43 | border-top : 1px solid #888; 44 | } 45 | 46 | .editor-container { 47 | position: absolute; 48 | top : 0; 49 | right: 0; 50 | left: 200px; 51 | bottom: 0; 52 | } 53 | 54 | .editor-frame { 55 | width:100%; 56 | height:100%; 57 | border: none; 58 | } -------------------------------------------------------------------------------- /editor/templates/dialogs/browse-local.html: -------------------------------------------------------------------------------- 1 |
2 |

3 | Browse Local Piskels 4 | X 5 |

6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
NameDateActions
17 |
18 | 26 |
-------------------------------------------------------------------------------- /editor/templates/cheatsheet.html: -------------------------------------------------------------------------------- 1 | 19 |   22 | -------------------------------------------------------------------------------- /editor/templates/palettes-list.html: -------------------------------------------------------------------------------- 1 |
2 |

Palettes

3 |
4 | 7 | 8 | 11 |
12 |
13 | 18 | 19 | 24 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /editor/templates/settings.html: -------------------------------------------------------------------------------- 1 |
2 |
7 |
8 | 9 |
14 |
15 | 16 |
21 |
22 | 23 |
28 |
29 | 30 |
35 |
36 | 37 |
-------------------------------------------------------------------------------- /editor/templates/layers-list.html: -------------------------------------------------------------------------------- 1 |
2 |

Layers 3 |
7 |

8 |
9 | 12 | 13 | 16 | 17 | 20 | 21 | 24 | 25 | 28 | 29 | 32 | 33 |
34 | 35 | 36 | 37 | 40 |
41 | -------------------------------------------------------------------------------- /editor/js/lib/iframeLoader-0.1.0.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | /** 3 | * Depending on the value of the data-iframe-loader attribute, display or store the content of the iframe 4 | * @param {HTMLElement} iframe 5 | */ 6 | var processFrame = function (iframe) { 7 | var type = iframe.getAttribute('data-iframe-loader'); 8 | if (type === "display") { 9 | displayFrame(iframe); 10 | } else if (type === "store") { 11 | storeFrame(iframe); 12 | } else { 13 | console.error('iframeLoader invalid type : ' + type); 14 | } 15 | }; 16 | 17 | /** 18 | * Replace the existing iframe with the content of the iframe 19 | * If the iframe has a single root element, it will directly replace the iframe. 20 | * If there are several roots, a wrapping div will be created and will replace the iframe 21 | * @param {HTMLElement} iframe 22 | */ 23 | var displayFrame = function (iframe) { 24 | var div=document.createElement("div"); 25 | div.innerHTML = iframe.contentWindow.document.body.innerHTML; 26 | if (div.children.length == 1) { 27 | div = div.children[0]; 28 | } 29 | iframe.parentNode.replaceChild(div, iframe); 30 | }; 31 | 32 | /** 33 | * Load the iframe content as a 34 | * The content can later be accessed by getting the script (through getElementById for instance) and reading innerHTML 35 | * @param {HTMLElement} iframe 36 | */ 37 | var storeFrame = function (iframe) { 38 | var script=document.createElement("script"); 39 | script.setAttribute("type", "text/html"); 40 | script.setAttribute("id", iframe.getAttribute("src").replace(/.*templates[^\/]*\//,'templates/')); 41 | script.innerHTML = iframe.contentWindow.document.body.innerHTML; 42 | iframe.parentNode.removeChild(iframe); 43 | document.body.appendChild(script); 44 | }; 45 | 46 | window.iframeloader = { 47 | onLoad : function (event) { 48 | var iframe = event.target || event.srcElement; 49 | processFrame(iframe); 50 | } 51 | }; 52 | })(); -------------------------------------------------------------------------------- /editor/templates/drawing-tools.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
    5 | 6 |
7 |
8 |
14 | 15 |
16 |
22 | 23 |
24 |
30 |
31 |
32 |
33 | 34 | 35 | 36 | 37 | 40 | 41 | 42 | 48 | 49 | 50 | 56 | 57 | 58 | 63 |
-------------------------------------------------------------------------------- /editor/templates/settings/import.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | Load from Browser 4 |
5 |
6 | Load a local piskel saved in this Browser 7 |
8 | 9 |
10 |
11 |
12 | Load .piskel file 13 |
14 |
15 | Load a .piskel file from your computer 16 | 17 |
18 | 19 | 20 | 23 |
24 |
25 |
26 | Import From Picture 27 |
28 |
29 |
Supports PNG, JPG, BMP, Animated GIF
30 |
31 | 32 | 35 |
36 |
37 |
38 | Recover recent sessions 39 |
40 |
41 | 45 |
46 | 47 | 55 |
-------------------------------------------------------------------------------- /editor/templates/settings/export.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | Export Spritesheet 4 |
5 |
6 | PNG with all frames side by side. 7 | 8 |
9 |
10 | Export as ZIP 11 |
12 |
13 | ZIP with one PNG file per frame. 14 | File names will start with the prefix below. 15 |
16 | 17 | 18 |
19 |
20 | 24 |
25 | 26 |
27 |
28 | Export to Animated GIF 29 |
30 |
31 |
32 |
33 | 34 |
35 | Width 36 | 37 | px 38 |
39 |
40 | Height 41 | 42 | px 43 |
44 |
45 |
46 | 47 | 48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 | -------------------------------------------------------------------------------- /editor/templates/dialogs/import-image.html: -------------------------------------------------------------------------------- 1 |
2 |

3 | Import Image 4 | X 5 |

6 |
7 |
8 |
9 | Name : 10 |
11 |
12 |
Preview :
13 |
14 |
15 |
16 | 20 |
21 |
22 | Resize to 23 | x 24 | 25 |
26 |
27 | Smooth resize 28 | 29 |
30 |
31 | 35 |
36 |
37 | Frame size 38 | x 39 | 40 |
41 |
42 | Offset 43 | x 44 | 45 |
46 | 47 |
48 |
49 |
-------------------------------------------------------------------------------- /editor/templates/popup-preview.html: -------------------------------------------------------------------------------- 1 |
2 | 64 |
-------------------------------------------------------------------------------- /editor/templates/settings/application.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | General 5 |
6 |
7 | 8 |
9 |
11 |
12 |
14 |
15 |
17 |
18 |
20 |
21 |
22 |
23 | 24 |
25 | 26 | 33 |
34 | 35 |
36 | 37 | 38 | 39 |
40 | 41 |
42 | 43 |
44 |
45 | Preview 46 |
47 | 48 |
49 | 53 |
54 | 55 |
56 | 57 | 58 |
59 | 60 | 61 |
62 |
63 | 64 | -------------------------------------------------------------------------------- /editor/img/layers.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 16 | 18 | 19 | 21 | image/svg+xml 22 | 24 | 25 | 26 | 27 | 28 | 31 | 34 | 36 | 40 | 44 | 47 | 51 | 55 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /editor/piskel-boot.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 3 | /** 4 | * See @Gruntfile.js => after build, -2015-09-02-11-47 is replaced by the build version 5 | */ 6 | var version = '-2015-09-02-11-47'; 7 | var versionHasNotBeenReplaced = version.indexOf('@@') === 0; 8 | if (versionHasNotBeenReplaced) { 9 | version = ''; 10 | } 11 | 12 | window.onPiskelReady = function () { 13 | var loadingMask = document.getElementById('loading-mask'); 14 | loadingMask.style.opacity = 0; 15 | window.setTimeout(function () {loadingMask.parentNode.removeChild(loadingMask);}, 600); 16 | pskl.app.init(); 17 | // cleanup 18 | delete window.pskl_exports; 19 | delete window.loadDebugScripts; 20 | delete window.done; 21 | }; 22 | 23 | var prefixPath = function (path) { 24 | if (window.pskl && window.pskl.appEngineToken_) { 25 | return '../' + path; 26 | } else { 27 | return path; 28 | } 29 | }; 30 | 31 | var loadScript = function (src, callback) { 32 | src = prefixPath(src); 33 | var script = window.document.createElement('script'); 34 | script.setAttribute('src',src); 35 | script.setAttribute('onload',callback); 36 | window.document.body.appendChild(script); 37 | }; 38 | 39 | var loadStyle = function (src) { 40 | src = prefixPath(src); 41 | var link = document.createElement('link'); 42 | link.setAttribute('href', src); 43 | link.setAttribute('rel', 'stylesheet'); 44 | link.setAttribute('type', 'text/css'); 45 | document.head.appendChild(link); 46 | }; 47 | 48 | if (window.location.href.indexOf('debug') != -1) { 49 | window.pskl_exports = {}; 50 | var scriptIndex = 0; 51 | window.loadNextScript = function () { 52 | if (scriptIndex == window.pskl_exports.scripts.length) { 53 | window.onPiskelReady(); 54 | } else { 55 | loadScript(window.pskl_exports.scripts[scriptIndex], 'loadNextScript()'); 56 | scriptIndex ++; 57 | } 58 | }; 59 | loadScript('piskel-script-list.js', 'loadNextScript()'); 60 | 61 | window.loadStyles = function () { 62 | var styles = window.pskl_exports.styles; 63 | for (var i = 0 ; i < styles.length ; i++) { 64 | loadStyle(styles[i]); 65 | } 66 | }; 67 | loadScript('piskel-style-list.js', 'loadStyles()'); 68 | } else { 69 | var script; 70 | if (window.location.href.indexOf('pack') != -1) { 71 | script = 'js/piskel-packaged' + version + '.js'; 72 | } else { 73 | script = 'js/piskel-packaged-min' + version + '.js'; 74 | } 75 | loadStyle('css/piskel-style-packaged' + version + '.css'); 76 | 77 | var loaderInterval = window.setInterval(function () { 78 | if (document.querySelectorAll('[data-iframe-loader]').length === 0) { 79 | window.clearInterval(loaderInterval); 80 | loadScript(script, 'onPiskelReady()'); 81 | } else { 82 | window.console.log('waiting for templates to load ....'); 83 | } 84 | }, 100); 85 | } 86 | })(); -------------------------------------------------------------------------------- /editor/piskel-boot-2015-09-02-11-47.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 3 | /** 4 | * See @Gruntfile.js => after build, -2015-09-02-11-47 is replaced by the build version 5 | */ 6 | var version = '-2015-09-02-11-47'; 7 | var versionHasNotBeenReplaced = version.indexOf('@@') === 0; 8 | if (versionHasNotBeenReplaced) { 9 | version = ''; 10 | } 11 | 12 | window.onPiskelReady = function () { 13 | var loadingMask = document.getElementById('loading-mask'); 14 | loadingMask.style.opacity = 0; 15 | window.setTimeout(function () {loadingMask.parentNode.removeChild(loadingMask);}, 600); 16 | pskl.app.init(); 17 | // cleanup 18 | delete window.pskl_exports; 19 | delete window.loadDebugScripts; 20 | delete window.done; 21 | }; 22 | 23 | var prefixPath = function (path) { 24 | if (window.pskl && window.pskl.appEngineToken_) { 25 | return '../' + path; 26 | } else { 27 | return path; 28 | } 29 | }; 30 | 31 | var loadScript = function (src, callback) { 32 | src = prefixPath(src); 33 | var script = window.document.createElement('script'); 34 | script.setAttribute('src',src); 35 | script.setAttribute('onload',callback); 36 | window.document.body.appendChild(script); 37 | }; 38 | 39 | var loadStyle = function (src) { 40 | src = prefixPath(src); 41 | var link = document.createElement('link'); 42 | link.setAttribute('href', src); 43 | link.setAttribute('rel', 'stylesheet'); 44 | link.setAttribute('type', 'text/css'); 45 | document.head.appendChild(link); 46 | }; 47 | 48 | if (window.location.href.indexOf('debug') != -1) { 49 | window.pskl_exports = {}; 50 | var scriptIndex = 0; 51 | window.loadNextScript = function () { 52 | if (scriptIndex == window.pskl_exports.scripts.length) { 53 | window.onPiskelReady(); 54 | } else { 55 | loadScript(window.pskl_exports.scripts[scriptIndex], 'loadNextScript()'); 56 | scriptIndex ++; 57 | } 58 | }; 59 | loadScript('piskel-script-list.js', 'loadNextScript()'); 60 | 61 | window.loadStyles = function () { 62 | var styles = window.pskl_exports.styles; 63 | for (var i = 0 ; i < styles.length ; i++) { 64 | loadStyle(styles[i]); 65 | } 66 | }; 67 | loadScript('piskel-style-list.js', 'loadStyles()'); 68 | } else { 69 | var script; 70 | if (window.location.href.indexOf('pack') != -1) { 71 | script = 'js/piskel-packaged' + version + '.js'; 72 | } else { 73 | script = 'js/piskel-packaged-min' + version + '.js'; 74 | } 75 | loadStyle('css/piskel-style-packaged' + version + '.css'); 76 | 77 | var loaderInterval = window.setInterval(function () { 78 | if (document.querySelectorAll('[data-iframe-loader]').length === 0) { 79 | window.clearInterval(loaderInterval); 80 | loadScript(script, 'onPiskelReady()'); 81 | } else { 82 | window.console.log('waiting for templates to load ....'); 83 | } 84 | }, 100); 85 | } 86 | })(); -------------------------------------------------------------------------------- /editor/templates/settings/resize.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | Resize 5 |
6 |
7 |
8 |
9 | Width 10 | 11 | px 12 |
13 |
14 | Height 15 | 16 | px 17 |
18 |
19 | 23 |
24 |
25 | 29 |
30 |
31 | Anchor 32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | 45 |
46 |
47 | 48 |
49 | Default size 50 |
51 |
52 |
53 |
54 | Width 55 | 56 | px 57 |
58 |
59 | Height 60 | 61 | px 62 |
63 | 64 |
65 |
66 |
-------------------------------------------------------------------------------- /editor/templates/settings/save.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
Describe your piskel
4 |
5 |
6 | 7 | 8 |
9 |
10 | 11 | 12 |
13 |
14 | 17 |
18 |
19 |
20 | 21 | 22 | 23 | 24 | 31 | 32 | 33 | 42 | 43 | 44 | 52 | 53 | 60 | 61 | 64 | 65 | 68 | 69 | 72 | 73 | 76 |
77 | -------------------------------------------------------------------------------- /editor/piskelapp-partials/main-partial.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 |
6 |
7 | 8 |
9 | 10 |
11 |
12 |
13 |
14 |
15 | 16 |
17 | 18 | 19 | 20 | 21 |
22 |
23 |
24 | 25 |
26 |
27 | 28 |
29 |
30 | 31 | 32 | 33 | 34 | 35 |
36 |
37 |
38 |
39 |
40 | 41 |
42 |
43 | 44 | 45 | 46 |
47 |
48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /editor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Piskel 7 | 8 | 9 | 10 | 11 | 12 |
23 | Loading Piskel ... 24 |
25 | 26 | 27 | 28 | 29 | 30 |
31 | 32 | 33 |
34 |
35 | 36 |
37 | 38 |
39 |
40 |
41 |
42 |
43 | 44 |
45 | 46 | 47 | 48 | 49 |
50 |
51 |
52 | 53 |
54 |
55 | 56 |
57 |
58 | 59 | 60 | 61 | 62 | 63 |
64 |
65 |
66 |
67 |
68 | 69 |
70 |
71 | 72 | 73 | 74 |
75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /editor/templates/dialogs/create-palette.html: -------------------------------------------------------------------------------- 1 |
2 |

3 | Create palette 4 | X 5 |

6 |
7 |
8 | Name 9 | 10 |
11 | 15 | 19 | 22 |
23 |
24 |
25 |
    26 |
    27 |
    28 |
    29 | 30 |
    31 |
    32 | H 33 | 34 | 35 |
    36 |
    37 | S 38 | 39 | 40 |
    41 |
    42 | V 43 | 44 | 45 |
    46 |
    47 |
    48 | R 49 | 50 | 51 |
    52 |
    53 | G 54 | 55 | 56 |
    57 |
    58 | B 59 | 60 | 61 |
    62 |
    63 |
    64 |
    65 |
    66 | 67 | 68 | 69 | 70 |
    71 |
    72 | 73 | 82 | 83 |
    -------------------------------------------------------------------------------- /editor/css/fonts/piskel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /editor/css/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /editor/js/lib/gif/gif.ie.worker.js: -------------------------------------------------------------------------------- 1 | (function(b){function a(b,d){if({}.hasOwnProperty.call(a.cache,b))return a.cache[b];var e=a.resolve(b);if(!e)throw new Error('Failed to resolve module '+b);var c={id:b,require:a,filename:b,exports:{},loaded:!1,parent:d,children:[]};d&&d.children.push(c);var f=b.slice(0,b.lastIndexOf('/')+1);return a.cache[b]=c.exports,e.call(c.exports,c,c.exports,f,b),c.loaded=!0,a.cache[b]=c.exports}a.modules={},a.cache={},a.resolve=function(b){return{}.hasOwnProperty.call(a.modules,b)?a.modules[b]:void 0},a.define=function(b,c){a.modules[b]=c},a.define('/gif.worker.coffee',function(d,e,f,g){var b,c;b=a('/GIFEncoder.js',d),c=function(a){var c,e,d,f;return c=new b(a.width,a.height),a.index===0?c.writeHeader():c.firstFrame=!1,c.setTransparent(a.transparent),c.setRepeat(a.repeat),c.setDelay(a.delay),c.setQuality(a.quality),c.setPreserveColors(a.preserveColors),c.addFrame(a.data),a.last&&c.finish(),d=c.stream(),a.data=d.pages,a.cursor=d.cursor,a.pageSize=d.constructor.pageSize,a.canTransfer?(f=function(c){for(var b=0,d=a.data.length;b=c.pageSize&&this.newPage(),this.pages[this.page][this.cursor++]=a},c.prototype.writeUTFBytes=function(b){for(var c=b.length,a=0;a=0&&(this.dispose=a)},b.prototype.setRepeat=function(a){this.repeat=a},b.prototype.setTransparent=function(a){this.transparent=a},b.prototype.setPreserveColors=function(a){this.preserveColors=a},b.prototype.addFrame=function(a){this.image=a,this.getImagePixels(),this.analyzePixels(),this.firstFrame&&(this.writeLSD(),this.writePalette(),this.repeat>=0&&this.writeNetscapeExt()),this.writeGraphicCtrlExt(),this.writeImageDesc(),this.firstFrame||this.writePalette(),this.writePixels(),this.firstFrame=!1},b.prototype.finish=function(){this.out.writeByte(59)},b.prototype.setQuality=function(a){a<1&&(a=1),this.sample=a},b.prototype.writeHeader=function(){this.out.writeUTFBytes('GIF89a')},b.prototype.analyzePixels=function(){var h=this.pixels.length,d=h/3;this.indexedPixels=new Uint8Array(d);var a;if(this.preserveColors){var i=this.toRGBComponents(this.transparent);a=new g(this.pixels,this.sample,i)}else a=new f(this.pixels,this.sample);a.buildColormap(),this.colorTab=a.getColormap();var b=0;for(var c=0;c>16,g:(a&65280)>>8,b:a&255}),b},b.prototype.findClosest=function(e){if(this.colorTab===null)return-1;var k=(e&16711680)>>16,l=(e&65280)>>8,m=e&255,c=0,d=16777216,j=this.colorTab.length;for(var a=0;a=0&&(a=dispose&7),a<<=2,this.out.writeByte(0|a|0|b),this.writeShort(this.delay),this.out.writeByte(this.transIndex),this.out.writeByte(0)},b.prototype.writeImageDesc=function(){this.out.writeByte(44),this.writeShort(0),this.writeShort(0),this.writeShort(this.width),this.writeShort(this.height),this.firstFrame?this.out.writeByte(0):this.out.writeByte(128|this.palSize)},b.prototype.writeLSD=function(){this.writeShort(this.width),this.writeShort(this.height),this.out.writeByte(240|this.palSize),this.out.writeByte(0),this.out.writeByte(0)},b.prototype.writeNetscapeExt=function(){this.out.writeByte(33),this.out.writeByte(255),this.out.writeByte(11),this.out.writeUTFBytes('NETSCAPE2.0'),this.out.writeByte(3),this.out.writeByte(1),this.writeShort(this.repeat),this.out.writeByte(0)},b.prototype.writePalette=function(){this.out.writeBytes(this.colorTab);var b=768-this.colorTab.length;for(var a=0;a>8&255)},b.prototype.writePixels=function(){var a=new h(this.width,this.height,this.indexedPixels,this.colorDepth);a.encode(this.out)},b.prototype.stream=function(){return this.out},e.exports=b}),a.define('/LZWEncoder.js',function(e,g,h,i){function f(y,D,C,B){function w(a,b){r[f++]=a,f>=254&&t(b)}function x(b){u(a),k=i+2,j=!0,l(i,b)}function u(b){for(var a=0;a=0){y=w-d,d===0&&(y=1);do if((d-=y)<0&&(d+=w),h[d]===g){e=n[d];continue a}while(h[d]>=0)}l(e,r),e=t,k<1<0&&(a.writeByte(f),a.writeBytes(r,0,f),f=0)}function p(a){return(1<0?g|=a<=8)w(g&255,c),g>>=8,e-=8;if((k>m||j)&&(j?(m=p(n_bits=q),j=!1):(++n_bits,n_bits==b?m=1<0)w(g&255,c),g>>=8,e-=8;t(c)}}var s=Math.max(2,B),r=new Uint8Array(256),h=new Int32Array(a),n=new Int32Array(a),g,e=0,f,k=0,m,j=!1,q,i,o;this.encode=z}var c=-1,b=12,a=5003,d=[0,1,3,7,15,31,63,127,255,511,1023,2047,4095,8191,16383,32767,65535];e.exports=f}),a.define('/SimpleQuant.js',function(b,d,e,f){function a(a,b,c){return[a,b,c].join('.')}function c(c,d,b){this.pixels=c,this.palette=[],this.paletteIndex={},this.getColormap=function(){return this.palette},this.buildColormap=function(){var d=this.pixels.length/3,a=0;for(var c=0;c>3);var c,d;for(c=0;c>=b,o[c][1]>>=b,o[c][2]>>=b,o[c][3]=c}function K(b,a,c,e,f){o[a][0]-=b*(o[a][0]-c)/d,o[a][1]-=b*(o[a][1]-e)/d,o[a][2]-=b*(o[a][2]-f)/d}function L(j,e,n,l,k){var h=Math.abs(e-j),i=Math.min(e+j,a),g=e+1,f=e-1,m=1,b,d;while(gh)d=z[m++],gh&&(b=o[f--],b[0]-=d*(b[0]-n)/c,b[1]-=d*(b[1]-l)/c,b[2]-=d*(b[2]-k)/c)}function C(p,s,q){var h=2147483647,k=h,d=-1,m=d,c,j,e,n,l;for(c=0;c>i-b),n>g,y[c]-=l,t[c]+=l<>1,b=f+1;b>1,b=f+1;b<256;b++)q[b]=n}function E(j,i,k){var b,d,c,e=1e3,h=-1,f=q[i],g=f-1;while(f=0)f=e?f=a:(f++,c<0&&(c=-c),b=d[0]-j,b<0&&(b=-b),c+=b,c=0&&(d=o[g],c=i-d[1],c>=e?g=-1:(g--,c<0&&(c=-c),b=d[0]-j,b<0&&(b=-b),c+=b,c>h;for(a<=1&&(a=0),c=0;c=f&&(g-=f),c++,q===0&&(q=1),c%q===0)for(n-=n/D,o-=o/v,a=o>>h,a<=1&&(a=0),e=0;e>g,r=e<>3,h=6,t=1< .settings-item > label { 684 | display: block; 685 | } 686 | /*******************************/ 687 | /* Gif/Png Export Setting panel*/ 688 | /*******************************/ 689 | .gif-download-button, 690 | .gif-render-button { 691 | margin-top : 10px; 692 | margin-right : 10px; 693 | } 694 | 695 | .gif-export-preview, 696 | .png-export-preview { 697 | position:relative; 698 | margin-top:10px; 699 | max-height:32px; 700 | } 701 | 702 | .gif-export-preview { 703 | max-width:32px; 704 | } 705 | 706 | .png-export-preview img { 707 | max-height:32px; 708 | float: left; 709 | } 710 | 711 | .png-export-preview .light-picker-background { 712 | max-width:240px; 713 | } 714 | 715 | .gif-upload-status { 716 | width: 180px; 717 | margin-left: 5px; 718 | margin-top: 10px; 719 | } 720 | 721 | .gif-upload, 722 | .png-export-preview { 723 | overflow: hidden; 724 | } 725 | 726 | .gif-upload-status, 727 | .gif-export-preview { 728 | float : left; 729 | } 730 | 731 | .preview-upload-ongoing:before{ 732 | content: "Upload ongoing ..."; 733 | position: absolute; 734 | display: block; 735 | height: 100%; 736 | width: 100%; 737 | text-align: center; 738 | padding-top: 45%; 739 | box-sizing:border-box; 740 | -moz-box-sizing:border-box; 741 | background: rgba(0,0,0,0.5); 742 | color: white; 743 | } 744 | /************************************************************************************************/ 745 | /* Import panel */ 746 | /************************************************************************************************/ 747 | 748 | .import-section, 749 | .resize-section { 750 | margin: 10px 0; 751 | } 752 | 753 | .file-input-button { 754 | margin-right: 8px; 755 | border-radius: 2px; 756 | } 757 | 758 | .import-highlight { 759 | font-weight: bold; 760 | color: white; 761 | } 762 | .resize-section-title { 763 | vertical-align: top; 764 | display: inline-block; 765 | padding-top: 5px; 766 | width: 25%; 767 | } 768 | 769 | /*****************/ 770 | /* ANCHOR WIDGET */ 771 | /*****************/ 772 | 773 | .resize-origin-container { 774 | overflow: hidden; 775 | position: relative; 776 | width: 70px; 777 | margin-top: 5px; 778 | display: inline-block; 779 | } 780 | 781 | .transition .resize-origin-option, 782 | .transition .resize-origin-option:before { 783 | transition: background-color 0.2s, border-color 0.2s; 784 | } 785 | 786 | .resize-origin-option { 787 | float: left; 788 | position: relative; 789 | 790 | box-sizing: border-box; 791 | margin: 0 1px 1px 0; 792 | width: 20px; 793 | height: 20px; 794 | 795 | background : #888; 796 | 797 | font-size: 8px; 798 | text-align: center; 799 | cursor: pointer; 800 | } 801 | 802 | .disabled .resize-origin-option { 803 | cursor: default; 804 | background : #555; 805 | border-color: #555 !important; 806 | } 807 | 808 | .resize-origin-option.selected { 809 | border : 3px solid gold; 810 | } 811 | 812 | .resize-origin-option:before { 813 | content: ''; 814 | position: absolute; 815 | display: block; 816 | top: 50%; 817 | left: 50%; 818 | margin: -2px; 819 | } 820 | 821 | .resize-origin-option.selected:before { 822 | content: ''; 823 | width: 4px; 824 | height: 4px; 825 | background: gold; 826 | } 827 | 828 | .disabled .resize-origin-option.selected:before { 829 | background: #555; 830 | } 831 | 832 | .disabled .resize-origin-option[data-neighbor]:before { 833 | border-color: #555 !important; 834 | } 835 | 836 | .resize-origin-option[data-neighbor]:before { 837 | width: 0; 838 | height: 0; 839 | border-width: 4px; 840 | border-style: solid; 841 | border-color: transparent; 842 | } 843 | 844 | .resize-origin-option[data-neighbor="bottom"]:before { 845 | border-top-color: gold; 846 | margin-left: -4px; 847 | } 848 | 849 | .resize-origin-option[data-neighbor="left"]:before { 850 | border-right-color: gold; 851 | margin-top: -4px; 852 | margin-left: -6px; 853 | } 854 | 855 | .resize-origin-option[data-neighbor="top"]:before { 856 | border-bottom-color: gold; 857 | margin-top: -6px; 858 | margin-left: -4px; 859 | } 860 | 861 | .resize-origin-option[data-neighbor="right"]:before { 862 | border-left-color: gold; 863 | margin-top: -4px; 864 | } 865 | .tool-icon { 866 | position : relative; 867 | cursor : pointer; 868 | width: 46px; 869 | height: 46px; 870 | margin: 1px; 871 | background-color: #3a3a3a; 872 | background-repeat: no-repeat; 873 | background-position: 12px 12px; 874 | background-size: 24px 24px; 875 | } 876 | 877 | .tool-icon.selected { 878 | cursor: default; 879 | background-color: #444; 880 | } 881 | 882 | .tool-icon.selected:before { 883 | content:""; 884 | position : absolute; 885 | height : 100%; 886 | width : 100%; 887 | border: 3px solid gold; 888 | box-sizing: border-box; 889 | -moz-box-sizing: border-box; 890 | } 891 | 892 | .tool-icon:hover { 893 | background-color: #444; 894 | } 895 | 896 | /* 897 | * Tool icons: 898 | */ 899 | .tool-icon.tool-pen { 900 | background-image: url(../img/tools/pen.png); 901 | } 902 | 903 | .tool-icon.tool-vertical-mirror-pen { 904 | background-image: url(../img/tools/mirror.png); 905 | background-position: 0px 10px; 906 | background-size: 38px 27px; 907 | } 908 | 909 | .tool-icon.tool-paint-bucket { 910 | background-image: url(../img/tools/paintbucket.png); 911 | } 912 | 913 | .tool-icon.tool-eraser { 914 | background-image: url(../img/tools/eraser.png); 915 | } 916 | 917 | .tool-icon.tool-stroke { 918 | background-image: url(../img/tools/stroke.png); 919 | } 920 | 921 | .tool-icon.tool-rectangle { 922 | background-image: url(../img/tools/rectangle.png); 923 | background-position: 12px 14px; 924 | background-size: 24px 20px; 925 | } 926 | 927 | .tool-icon.tool-circle { 928 | background-image: url(../img/tools/circle.png); 929 | } 930 | 931 | .tool-icon.tool-move { 932 | background-image: url(../img/tools/hand.png); 933 | background-size: 24px 24px; 934 | } 935 | 936 | .tool-icon.tool-rectangle-select { 937 | background-image: url(../img/tools/rectangle_selection.png); 938 | background-position: 12px 14px; 939 | background-size: 24px 20px; 940 | } 941 | 942 | .tool-icon.tool-shape-select { 943 | background-image: url(../img/tools/magicwand.png); 944 | } 945 | 946 | .tool-icon.tool-lighten { 947 | background-image: url(../img/tools/lighten.png); 948 | background-position: 8px 8px; 949 | background-size: 30px 30px; 950 | } 951 | 952 | .tool-icon.tool-colorpicker { 953 | background-image: url(../img/tools/eyedropper.png); 954 | background-size: 23px 23px; 955 | } 956 | 957 | .tool-icon.tool-colorswap { 958 | background-image: url(../img/tools/swap-colors.png); 959 | background-position: 6px 6px; 960 | background-size: 36px 36px; 961 | } 962 | 963 | .tool-icon.tool-flip { 964 | background-image: url(../img/tools/flip.png); 965 | background-position: 7px 11px; 966 | background-size: 32px; 967 | } 968 | 969 | .tool-icon.tool-rotate { 970 | background-image: url(../img/tools/rotate.png); 971 | background-position: 10px 9px; 972 | background-size: 26px; 973 | } 974 | 975 | .tool-icon.tool-clone { 976 | background-image: url(../img/tools/clone.png); 977 | background-position: 9px 15px; 978 | background-size: 30px; 979 | } 980 | 981 | /* 982 | * Tool cursors: 983 | */ 984 | 985 | .tool-paint-bucket .drawing-canvas-container:hover, 986 | .tool-colorswap .drawing-canvas-container:hover { 987 | cursor: url(../img/icons/paint-bucket.png) 12 12, pointer; 988 | } 989 | 990 | .tool-vertical-mirror-pen .drawing-canvas-container:hover { 991 | cursor: url(../img/icons/vertical-mirror-pen.png) 5 15, pointer; 992 | } 993 | 994 | .tool-pen .drawing-canvas-container:hover, 995 | .tool-lighten .drawing-canvas-container:hover { 996 | cursor: url(../img/icons/pen.png) 0 15, pointer; 997 | } 998 | 999 | .tool-eraser .drawing-canvas-container:hover { 1000 | cursor: url(../img/icons/eraser.png) 0 15, pointer; 1001 | } 1002 | 1003 | .tool-stroke .drawing-canvas-container:hover { 1004 | cursor: url(../img/icons/pen.png) 0 15, pointer; 1005 | } 1006 | 1007 | .tool-rectangle .drawing-canvas-container:hover { 1008 | cursor: url(../img/icons/rectangle.png) 0 15, pointer; 1009 | } 1010 | 1011 | .tool-circle .drawing-canvas-container:hover { 1012 | cursor: url(../img/icons/circle.png) 2 15, pointer; 1013 | } 1014 | 1015 | .tool-move .drawing-canvas-container:hover { 1016 | cursor: url(../img/icons/hand.png) 15 15, pointer; 1017 | } 1018 | 1019 | .tool-rectangle-select .drawing-canvas-container:hover { 1020 | cursor: crosshair; 1021 | } 1022 | 1023 | .tool-shape-select .drawing-canvas-container:hover { 1024 | cursor: url(../img/icons/wand.png) 15 15, pointer; 1025 | } 1026 | 1027 | .tool-colorpicker .drawing-canvas-container:hover { 1028 | cursor: url(../img/icons/dropper.png) 0 15, pointer; 1029 | } 1030 | 1031 | .swap-colors-icon { 1032 | background-image: url(../img/tools/swap-arrow-square-small-grey.png); 1033 | position: relative; 1034 | top: 50px; 1035 | left: 6px; 1036 | height: 18px; 1037 | width: 18px; 1038 | background-size: 18px; 1039 | opacity : 0.3; 1040 | cursor : pointer; 1041 | } 1042 | 1043 | .swap-colors-icon:hover { 1044 | opacity : 1; 1045 | } 1046 | 1047 | .tool-color-picker { 1048 | position:relative; 1049 | } 1050 | 1051 | .tool-color-picker:nth-child(1) { 1052 | z-index : 100; 1053 | } 1054 | 1055 | .tool-color-picker:nth-child(2) { 1056 | z-index : 90; 1057 | margin-top: 25px; 1058 | margin-left:-20px; 1059 | } 1060 | 1061 | .tool-color-picker input { 1062 | width: 16px; 1063 | height: 16px; 1064 | text-indent: -10000px; 1065 | border: 1px solid black; 1066 | background: white; 1067 | cursor: pointer; 1068 | position : relative; 1069 | top: 10px; 1070 | margin-left: 2px; 1071 | } 1072 | 1073 | .tool-color-picker .secondary-color-picker { 1074 | top : 18px; 1075 | margin-left: 0; 1076 | } 1077 | 1078 | .palette-wrapper { 1079 | margin-top: 10px; 1080 | margin-left: 10px; 1081 | } 1082 | 1083 | .palette-color[data-color=TRANSPARENT] { 1084 | position: relative; 1085 | top: 10px; 1086 | left: 10px; 1087 | background-color: white; 1088 | height : 16px; 1089 | width : 16px; 1090 | border: 2px solid #000; 1091 | background-size: 16px 16px; 1092 | background-position: 0 0; 1093 | background-image: -webkit-gradient( 1094 | linear, 1095 | left top, 1096 | right bottom, 1097 | color-stop(0, #fff), 1098 | color-stop(0.45, #fff), 1099 | color-stop(0.5, #ff0000), 1100 | color-stop(0.55, #fff), 1101 | color-stop(1, #fff) 1102 | ); 1103 | background-image: -moz-linear-gradient( 1104 | left top, 1105 | #fff 0%, 1106 | #fff 45%, 1107 | #f00 50%, 1108 | #fff 55%, 1109 | #fff 100% 1110 | ); 1111 | } 1112 | 1113 | .tools-tooltip-container { 1114 | text-align: left; 1115 | padding-bottom: 5px; 1116 | } 1117 | 1118 | .tools-tooltip-shortcut { 1119 | color:gold; 1120 | } 1121 | 1122 | .tools-tooltip-descriptor { 1123 | color:#999; 1124 | } 1125 | 1126 | .tools-tooltip-descriptor-button { 1127 | padding:2px; 1128 | border:1px Solid #999; 1129 | font-size:0.8em; 1130 | margin-right:5px; 1131 | width:35px; 1132 | text-align:center; 1133 | border-radius:3px; 1134 | display:inline-block; 1135 | line-height: 10px; 1136 | } 1137 | 1138 | 1139 | .action-icon { 1140 | cursor: pointer; 1141 | height: 100%; 1142 | background-repeat: no-repeat; 1143 | background-position: 50%; 1144 | } 1145 | 1146 | .edit-icon { 1147 | background-image: url('../img/tools/pen.png'); 1148 | background-repeat: no-repeat; 1149 | } 1150 | 1151 | .merge-icon { 1152 | background-image: url('../img/merge-icon.png'); 1153 | background-repeat: no-repeat; 1154 | } 1155 | 1156 | .plus-icon { 1157 | font-size:15px; 1158 | text-align:center; 1159 | } 1160 | 1161 | .delete-icon { 1162 | } 1163 | .cheatsheet-link { 1164 | position: fixed; 1165 | bottom: 10px; 1166 | left: 10px; 1167 | 1168 | padding: 1px 0 0 45px; 1169 | color : gold; 1170 | font-weight: bold; 1171 | font-size : 1.25em; 1172 | line-height: 20px; 1173 | 1174 | cursor : pointer; 1175 | 1176 | background-image:url('../img/keyboard.png'); 1177 | background-size:35px 20px; 1178 | background-repeat:no-repeat; 1179 | opacity: 0.5; 1180 | z-index: 11000; 1181 | transition : opacity 0.3s; 1182 | } 1183 | 1184 | .cheatsheet-link:hover { 1185 | opacity: 1; 1186 | } 1187 | 1188 | #cheatsheet-wrapper { 1189 | position: absolute; 1190 | z-index: 10000; 1191 | 1192 | top: 50px; 1193 | right: 50px; 1194 | bottom: 50px; 1195 | left: 50px; 1196 | 1197 | box-sizing: border-box; 1198 | -moz-box-sizing : border-box; 1199 | 1200 | color: white; 1201 | } 1202 | 1203 | .cheatsheet-container { 1204 | width: 100%; 1205 | height: 100%; 1206 | 1207 | box-sizing: border-box; 1208 | -moz-box-sizing : border-box; 1209 | 1210 | padding: 20px 3%; 1211 | border-radius: 3px; 1212 | background: rgba(0,0,0,0.9); 1213 | overflow: auto; 1214 | } 1215 | 1216 | .cheatsheet-container .cheatsheet-title { 1217 | font-size:24px; 1218 | margin-top: 0; 1219 | } 1220 | 1221 | .cheatsheet-container .cheatsheet-title:nth-of-type(2) { 1222 | margin-top: 30px; 1223 | } 1224 | 1225 | .cheatsheet-section { 1226 | float: left; 1227 | width : 33%; 1228 | } 1229 | 1230 | .cheatsheet-shortcut { 1231 | overflow: hidden; 1232 | margin: 10px 0; 1233 | } 1234 | 1235 | .cheatsheet-icon.tool-icon { 1236 | float: left; 1237 | display: inline-block; 1238 | 1239 | height: 30px; 1240 | width: 30px; 1241 | margin: 0 20px 0 0; 1242 | 1243 | background-size: 20px 20px; 1244 | background-position: 5px 5px; 1245 | } 1246 | 1247 | .cheatsheet-description { 1248 | font-family:Courier; 1249 | color: white; 1250 | font-size : 13px; 1251 | margin-left: 20px; 1252 | line-height : 30px; 1253 | } 1254 | 1255 | .cheatsheet-key { 1256 | display : inline-block; 1257 | height: 30px; 1258 | line-height: 30px; 1259 | padding: 0 10px; 1260 | 1261 | border : 1px solid gold; 1262 | border-radius: 2px; 1263 | 1264 | box-sizing: border-box; 1265 | -moz-box-sizing : border-box; 1266 | 1267 | text-align: center; 1268 | font-family:Courier; 1269 | font-weight: bold; 1270 | font-size : 18px; 1271 | color: gold; 1272 | } 1273 | .color-picker-slider * { 1274 | box-sizing: border-box; 1275 | } 1276 | 1277 | .color-picker-slider input[type="range"] { 1278 | -webkit-appearance: none; 1279 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 1280 | width: 100%; 1281 | border: none; 1282 | padding: 1px 2px; 1283 | border-radius: 3px; 1284 | background-image: linear-gradient(to right, hsl(0, 30%, 70%) 0, hsl(359, 30%, 70%) 100%); 1285 | box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42; 1286 | outline: none; /* no focus outline */ 1287 | } 1288 | 1289 | /* thumb */ 1290 | 1291 | .color-picker-slider input[type="range"]::-webkit-slider-thumb { 1292 | -webkit-appearance: none; 1293 | cursor:pointer; 1294 | width: 7px; 1295 | height: 18px; 1296 | border: none; 1297 | border-radius: 2px; 1298 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #529de1), color-stop(100%, #245e8f)); /* android <= 2.2 */ 1299 | background-image: -webkit-linear-gradient(top , #529de1 0, #245e8f 100%); /* older mobile safari and android > 2.2 */; 1300 | background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */ 1301 | } 1302 | .color-picker-slider input[type="range"]::-moz-range-thumb { 1303 | width: 7px; 1304 | height: 18px; 1305 | border: none; 1306 | border-radius: 2px; 1307 | background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */ 1308 | } 1309 | 1310 | .color-picker-slider input[type="range"]::-ms-thumb { 1311 | width: 7px; 1312 | height: 18px; 1313 | border-radius: 2px; 1314 | border: 0; 1315 | background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */ 1316 | } 1317 | 1318 | /*CROSS BROWSER RESET*/ 1319 | 1320 | 1321 | .color-picker-slider input[type="range"]::-moz-range-track { 1322 | border: inherit; 1323 | background: transparent; 1324 | } 1325 | 1326 | .color-picker-slider input[type="range"]::-ms-track { 1327 | border: inherit; 1328 | color: transparent; /* don't drawn vertical reference line */ 1329 | background: transparent; 1330 | } 1331 | 1332 | .color-picker-slider input[type="range"]::-ms-fill-lower, 1333 | .color-picker-slider input[type="range"]::-ms-fill-upper { 1334 | background: transparent; 1335 | } 1336 | 1337 | .color-picker-slider input[type="range"]::-ms-tooltip { 1338 | display: none; 1339 | } 1340 | 1341 | .color-picker-slider, 1342 | .color-picker-input { 1343 | padding: 0 10px; 1344 | height : 25px; 1345 | overflow: hidden; 1346 | } 1347 | 1348 | .color-picker-slider span{ 1349 | line-height : 25px; 1350 | width : 10px; 1351 | float:left; 1352 | } 1353 | 1354 | .color-picker-slider input[type="range"]{ 1355 | float:left; 1356 | height : 10px; 1357 | width : 100px; 1358 | margin: 7px 1px 7px 8px; 1359 | } 1360 | 1361 | .color-picker-slider input[type="text"]{ 1362 | float:left; 1363 | width : 47px; 1364 | margin-left: 5px; 1365 | } 1366 | 1367 | .color-picker-input { 1368 | margin-bottom: 10px; 1369 | } 1370 | 1371 | .color-picker-input .textfield{ 1372 | width:100%; 1373 | } 1374 | 1375 | .color-picker-slider input[type="range"][data-dimension="h"] { 1376 | background-image:linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); 1377 | } 1378 | #dialog-container-wrapper { 1379 | position: absolute; 1380 | z-index: 20000; 1381 | 1382 | top: 0; 1383 | right: 0; 1384 | bottom: 0; 1385 | left: 0; 1386 | 1387 | padding: 50px 150px; 1388 | overflow: hidden; 1389 | 1390 | box-sizing: border-box; 1391 | -moz-box-sizing : border-box; 1392 | 1393 | background-color: rgba(0,0,0,0.8); 1394 | opacity: 0; 1395 | pointer-events: none; 1396 | 1397 | color: white; 1398 | } 1399 | 1400 | #dialog-container-wrapper.animated { 1401 | transition: opacity 0.5s; 1402 | } 1403 | 1404 | #dialog-container-wrapper.show { 1405 | opacity: 1; 1406 | pointer-events: auto; 1407 | } 1408 | 1409 | #dialog-container { 1410 | width: 100%; 1411 | height: 100%; 1412 | 1413 | margin-top: -1500px; 1414 | 1415 | box-sizing: border-box; 1416 | -moz-box-sizing : border-box; 1417 | 1418 | border-radius: 3px; 1419 | border : 3px solid gold; 1420 | background: #444; 1421 | overflow: auto; 1422 | } 1423 | 1424 | .animated #dialog-container { 1425 | transition:margin-top 0.5s; 1426 | } 1427 | 1428 | .show #dialog-container { 1429 | margin-top: 0; 1430 | } 1431 | 1432 | #dialog-container.browse-local { 1433 | width: 700px; 1434 | height: 500px; 1435 | top : 50%; 1436 | left : 50%; 1437 | position : absolute; 1438 | margin-left: -350px; 1439 | } 1440 | 1441 | .show #dialog-container.browse-local { 1442 | margin-top: -250px; 1443 | } 1444 | 1445 | .dialog-wrapper { 1446 | height: 100%; 1447 | position : relative; 1448 | } 1449 | 1450 | .dialog-head { 1451 | width: 100%; 1452 | background: gold; 1453 | margin: 0; 1454 | padding: 10px; 1455 | color: black; 1456 | font-size: 1.8em; 1457 | box-sizing: border-box; 1458 | -moz-box-sizing: border-box; 1459 | } 1460 | 1461 | .dialog-close { 1462 | position: absolute; 1463 | top: 0; 1464 | right: 0; 1465 | line-height: 45px; 1466 | margin-right: 10px; 1467 | font-size: 1.3em; 1468 | cursor: pointer; 1469 | } 1470 | /************************************************************************************************/ 1471 | /* Import dialog */ 1472 | /************************************************************************************************/ 1473 | 1474 | #dialog-container.import-image { 1475 | width: 550px; 1476 | height: 360px; 1477 | top : 50%; 1478 | left : 50%; 1479 | position : absolute; 1480 | margin-left: -250px; 1481 | } 1482 | 1483 | .show #dialog-container.import-image { 1484 | margin-top: -150px; 1485 | } 1486 | 1487 | .import-subsection { 1488 | margin-left: 25px; 1489 | } 1490 | 1491 | .import-section:not(.import-subsection) > .dialog-section-title { 1492 | width: 50px; 1493 | } 1494 | 1495 | .import-section-preview-title { 1496 | position: absolute; 1497 | margin-left: 50%; 1498 | margin-top: -28px; 1499 | } 1500 | 1501 | .import-section-preview { 1502 | position: absolute; 1503 | display: inline-block; 1504 | border: 1px dashed #999; 1505 | border-radius: 3px; 1506 | margin-left: 50%; 1507 | } 1508 | 1509 | .import-section-preview img { 1510 | max-width: 220px; 1511 | max-height: 220px; 1512 | display: block; 1513 | } 1514 | 1515 | .import-section-preview.no-border { 1516 | border-color: transparent; 1517 | } 1518 | 1519 | .import-section-preview canvas { 1520 | position: absolute; 1521 | left: 0; 1522 | top: 0; 1523 | } 1524 | 1525 | .dialog-section-title { 1526 | display : inline-block; 1527 | width: 80px; 1528 | } 1529 | 1530 | .dialog-section-radio { 1531 | margin-top: 15px; 1532 | vertical-align: sub; 1533 | } 1534 | 1535 | .import-size-field:nth-of-type(2) { 1536 | margin-left: 5px; 1537 | } 1538 | 1539 | .import-image-file-name { 1540 | display: inline-block; 1541 | overflow: hidden; 1542 | 1543 | width: 200px; 1544 | vertical-align: middle; 1545 | 1546 | word-break : break-all; 1547 | white-space: nowrap; 1548 | text-overflow: ellipsis; 1549 | 1550 | font-style: italic; 1551 | font-weight: normal; 1552 | text-shadow: none; 1553 | color: gold; 1554 | } 1555 | 1556 | [name=smooth-resize-checkbox] { 1557 | margin : 0 8px; 1558 | } 1559 | 1560 | .dialog-import-body { 1561 | padding: 10px 20px; 1562 | font-size:1.3em 1563 | } 1564 | 1565 | .import-button { 1566 | font-size: 1em; 1567 | height: 28px; 1568 | padding: 0px 10px; 1569 | margin-top: 15px; 1570 | } 1571 | 1572 | /************************************************************************************************/ 1573 | /* Browse local piskels panel */ 1574 | /************************************************************************************************/ 1575 | 1576 | .local-piskel-list { 1577 | width: 100%; 1578 | } 1579 | 1580 | .local-piskel-item { 1581 | height: 3em; 1582 | } 1583 | 1584 | .local-piskel-name { 1585 | width: 40%; 1586 | } 1587 | 1588 | .local-piskel-save-date { 1589 | font-weight : normal; 1590 | } 1591 | 1592 | .local-piskel-list a { 1593 | text-decoration: none; 1594 | } 1595 | 1596 | .local-piskel-list a:hover { 1597 | text-decoration: underline; 1598 | } 1599 | 1600 | .local-piskel-list-head { 1601 | font-weight: bold; 1602 | color: gold; 1603 | } 1604 | 1605 | .local-piskel-load-button, 1606 | .local-piskel-delete-button { 1607 | width : 75px; 1608 | } 1609 | #dialog-container.create-palette { 1610 | width: 500px; 1611 | height: 600px; 1612 | top : 50%; 1613 | left : 50%; 1614 | position : absolute; 1615 | margin-left: -250px; 1616 | } 1617 | 1618 | .show #dialog-container.create-palette { 1619 | margin-top: -300px; 1620 | } 1621 | 1622 | .create-palette-section { 1623 | position: absolute; 1624 | left: 10px; 1625 | top: 50px; 1626 | } 1627 | 1628 | .create-palette-import-section { 1629 | display : inline-block; 1630 | } 1631 | 1632 | .colors-container { 1633 | position: absolute; 1634 | 1635 | left: 10px; 1636 | right: 10px; 1637 | top: 85px; 1638 | 1639 | height: 460px; 1640 | 1641 | border: 1px solid black; 1642 | background: #333; 1643 | } 1644 | 1645 | .color-picker-container { 1646 | position:absolute; 1647 | left : 280px; 1648 | top:0; 1649 | bottom:0; 1650 | right:0; 1651 | background: #222; 1652 | } 1653 | 1654 | .create-palette-actions { 1655 | position: absolute; 1656 | box-sizing: border-box; 1657 | 1658 | width:100%; 1659 | height: 45px; 1660 | 1661 | left: 0; 1662 | right: 0; 1663 | bottom: 0; 1664 | 1665 | padding:10px; 1666 | text-align:right; 1667 | } 1668 | 1669 | .color-preview { 1670 | width: 170px; 1671 | height: 70px; 1672 | margin: 11px; 1673 | } 1674 | 1675 | .colors-list { 1676 | overflow: auto; 1677 | width: 280px; 1678 | box-sizing: border-box; 1679 | height: 100%; 1680 | padding-bottom: 10px; 1681 | } 1682 | 1683 | .create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{ 1684 | position:relative; 1685 | float : left; 1686 | 1687 | width : 44px; 1688 | height : 44px; 1689 | margin : 10px 0 0 10px; 1690 | 1691 | box-sizing : border-box; 1692 | 1693 | cursor : pointer; 1694 | } 1695 | 1696 | @-moz-document url-prefix() { 1697 | .create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{ 1698 | margin : 7px 0 0 7px; 1699 | } 1700 | } 1701 | 1702 | @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 1703 | .create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{ 1704 | margin : 7px 0 0 7px; 1705 | } 1706 | } 1707 | 1708 | 1709 | .create-palette-color { 1710 | border:1px solid #2c2c2c; 1711 | transition : border-color 0.2s; 1712 | } 1713 | .create-palette-color:hover { 1714 | border:1px solid gold; 1715 | } 1716 | 1717 | .colors-list-drop-proxy { 1718 | border:2px dotted #eee; 1719 | } 1720 | 1721 | .create-palette-new-color { 1722 | border:2px dotted gold; 1723 | 1724 | border-radius: 2px; 1725 | line-height: 40px; 1726 | text-align: center; 1727 | font-size: 20px; 1728 | color: gold; 1729 | } 1730 | 1731 | .create-palette-color.selected { 1732 | border:2px solid gold; 1733 | } 1734 | 1735 | .create-palette-remove-color { 1736 | position: absolute; 1737 | top: 0; 1738 | right: 0; 1739 | padding: 2px 4px 0 0; 1740 | opacity : 0.2; 1741 | 1742 | font-weight: bold; 1743 | color: rgb(255,255,255); 1744 | text-shadow : 0 0 1px rgb(0,0,0); 1745 | 1746 | transition : opacity 0.3s, color 0.1s; 1747 | } 1748 | 1749 | .light-color .create-palette-remove-color { 1750 | color: rgb(0,0,0); 1751 | text-shadow : 0 0 1px rgb(255,255,255); 1752 | } 1753 | 1754 | .selected .create-palette-remove-color { 1755 | top: -1px; 1756 | right: -1px; 1757 | } 1758 | 1759 | .create-palette-color:hover .create-palette-remove-color { 1760 | opacity: 0.6; 1761 | } 1762 | 1763 | .create-palette-color .create-palette-remove-color:hover { 1764 | opacity: 1; 1765 | color: rgb(240,80,80); 1766 | text-shadow : 0 0 1px rgb(0,0,0); 1767 | } 1768 | 1769 | /*SPECTRUM OVERRIDES*/ 1770 | 1771 | .create-palette .sp-container{ 1772 | background-color: transparent; 1773 | border: none; 1774 | box-shadow : none; 1775 | border-radius:0; 1776 | padding:5px; 1777 | } 1778 | .user-message { 1779 | position: absolute; 1780 | right: 0; 1781 | bottom: 0; 1782 | padding: 10px 47px; 1783 | max-width: 300px; 1784 | 1785 | border-top-left-radius: 7px; 1786 | border: #F0C36D 1px solid; 1787 | border-right: 0; 1788 | border-bottom: 0; 1789 | 1790 | color: #222; 1791 | background-color: #F9EDBE; 1792 | 1793 | font-weight: bold; 1794 | font-size: 13px; 1795 | 1796 | z-index: 30000; 1797 | } 1798 | 1799 | .user-message .close { 1800 | position: absolute; 1801 | top: 6px; 1802 | right: 17px; 1803 | 1804 | color: gray; 1805 | 1806 | font-size: 18px; 1807 | font-weight: bold; 1808 | 1809 | cursor: pointer; 1810 | } 1811 | 1812 | .user-message .close:hover { 1813 | color: black; 1814 | } 1815 | 1816 | .progress-bar-container { 1817 | position: absolute; 1818 | left: 0; 1819 | bottom: 0; 1820 | padding: 10px; 1821 | width: 360px; 1822 | border-top-right-radius: 2px; 1823 | border: gold 2px solid; 1824 | border-left: 0; 1825 | border-bottom: 0; 1826 | background-color: #444; 1827 | font-size: 14px; 1828 | z-index: 30000; 1829 | color: #eee; 1830 | } 1831 | 1832 | .progress-bar-item { 1833 | float: left; 1834 | height:20px; 1835 | } 1836 | 1837 | .progress-bar-status { 1838 | line-height: 20px; 1839 | width : 40px; 1840 | overflow : hidden; 1841 | margin: 0 0 0 10px; 1842 | } 1843 | 1844 | .progress-bar { 1845 | border : 1px solid grey; 1846 | margin-top: 8px; 1847 | height : 4px; 1848 | width : 300px; 1849 | background : linear-gradient(to left, gold, gold) no-repeat -300px 0; 1850 | background-color : black; 1851 | } 1852 | .toolbox-container { 1853 | border: 4px solid #888; 1854 | font-size: medium; 1855 | color: white; 1856 | text-align: left; 1857 | border-radius: 4px; 1858 | margin-top: 5px; 1859 | margin-bottom: 10px; 1860 | overflow: hidden; 1861 | } 1862 | 1863 | .toolbox-title { 1864 | padding: 8px; 1865 | margin: 0; 1866 | font-size: 15px; 1867 | background: #222; 1868 | } 1869 | 1870 | /** 1871 | * Layers container 1872 | */ 1873 | .layers-list-container { 1874 | } 1875 | 1876 | /*.layers-title { 1877 | background-image: url('../img/layers.svg'); 1878 | background-size: 22px; 1879 | background-repeat: no-repeat; 1880 | background-position: 97%; 1881 | }*/ 1882 | 1883 | .layers-title { 1884 | position: relative; 1885 | } 1886 | 1887 | .layers-toggle-preview { 1888 | position: absolute; 1889 | top: 0.3em; 1890 | right: 0.5em; 1891 | 1892 | color: #999; 1893 | font-size: 1.3em; 1894 | cursor: pointer; 1895 | 1896 | transition: 0.2s linear; 1897 | } 1898 | 1899 | .layers-toggle-preview:hover { 1900 | color: white; 1901 | } 1902 | 1903 | .layers-toggle-preview-enabled, 1904 | .layers-toggle-preview-enabled:hover { 1905 | color : gold; 1906 | } 1907 | 1908 | .layers-list { 1909 | font-size : 12px; 1910 | } 1911 | 1912 | .layer-item { 1913 | height:24px; 1914 | line-height: 24px; 1915 | padding : 0 0 0 10px; 1916 | border-top: 1px solid #444; 1917 | cursor : pointer; 1918 | } 1919 | 1920 | .layer-item:hover { 1921 | background : #222; 1922 | } 1923 | 1924 | .current-layer-item, 1925 | .current-layer-item:hover { 1926 | background : #333; 1927 | color: gold; 1928 | } 1929 | 1930 | .layers-button-container { 1931 | overflow : hidden; 1932 | } 1933 | 1934 | .layers-button { 1935 | margin: 0; 1936 | width: 16.66667%; 1937 | float : left; 1938 | } 1939 | 1940 | /* @override */ 1941 | .layers-button-container .layers-button { 1942 | border-left-width: 0; 1943 | } 1944 | 1945 | .layers-button:last-child { 1946 | border-right-width: 0; 1947 | } 1948 | .palettes-title { 1949 | background-size: 22px; 1950 | background-repeat: no-repeat; 1951 | background-position: 97%; 1952 | } 1953 | .palettes-list-colors { 1954 | overflow: auto; 1955 | max-height: 160px; 1956 | } 1957 | .palettes-list-color { 1958 | cursor: pointer; 1959 | float: left; 1960 | margin: 0 0 5px 5px; 1961 | width: 32px; 1962 | height: 32px; 1963 | position: relative; 1964 | } 1965 | 1966 | .palettes-list-color:nth-child(-n+10):after { 1967 | position: absolute; 1968 | top: 0; 1969 | right: 0; 1970 | 1971 | background-color: black; 1972 | color: gold; 1973 | 1974 | font-family: Tahoma; 1975 | font-size: 0.5em; 1976 | font-weight: bold; 1977 | 1978 | padding: 2px 3px 2px 3px; 1979 | border-radius: 0 0 0 2px; 1980 | } 1981 | 1982 | 1983 | .palettes-list-color:nth-child(1):after { 1984 | content: "1"; 1985 | } 1986 | .palettes-list-color:nth-child(2):after { 1987 | content: "2"; 1988 | } 1989 | .palettes-list-color:nth-child(3):after { 1990 | content: "3"; 1991 | } 1992 | .palettes-list-color:nth-child(4):after { 1993 | content: "4"; 1994 | } 1995 | .palettes-list-color:nth-child(5):after { 1996 | content: "5"; 1997 | } 1998 | .palettes-list-color:nth-child(6):after { 1999 | content: "6"; 2000 | } 2001 | .palettes-list-color:nth-child(7):after { 2002 | content: "7"; 2003 | } 2004 | .palettes-list-color:nth-child(8):after { 2005 | content: "8"; 2006 | } 2007 | .palettes-list-color:nth-child(9):after { 2008 | content: "9"; 2009 | } 2010 | 2011 | .palettes-list-color:nth-child(-n+5) { 2012 | margin-top: 5px; 2013 | } 2014 | .palettes-list-color div { 2015 | width: 32px; 2016 | height: 32px; 2017 | } 2018 | .palettes-list-has-scrollbar .palettes-list-color, .palettes-list-has-scrollbar .palettes-list-color div { 2019 | width: 29px 2020 | } 2021 | .palettes-list-primary-color:before, .palettes-list-secondary-color:before { 2022 | content: ""; 2023 | position: absolute; 2024 | bottom: 1px; 2025 | display: inline-block; 2026 | border: 7px solid gold; 2027 | border-top-color: transparent; 2028 | width: 0px; 2029 | height: 0px; 2030 | } 2031 | .palettes-list-primary-color:before { 2032 | left: 1px; 2033 | border-right-color: transparent; 2034 | } 2035 | .palettes-list-secondary-color:before { 2036 | right: 1px; 2037 | border-left-color: transparent; 2038 | } 2039 | .palettes-list-actions { 2040 | background-color: #3f3f3f; 2041 | border-bottom-color: #222; 2042 | height: 24px; 2043 | padding: 0; 2044 | overflow: hidden; 2045 | } 2046 | 2047 | .palettes-list-button, 2048 | .palettes-list-select { 2049 | margin: 0; 2050 | float: left; 2051 | } 2052 | 2053 | .palettes-list-button { 2054 | width: 16.66667%; 2055 | } 2056 | .palettes-list-select { 2057 | width: 66.66667%; 2058 | height: 100%; 2059 | padding: 0 5px 0 5px; 2060 | 2061 | border-style: solid; 2062 | border-width: 1px 0 1px 0; 2063 | 2064 | color: #aaa; 2065 | font-size : 0.75em; 2066 | 2067 | /*thanks firefox, you suck*/ 2068 | text-align:left; 2069 | /*text-shadow:none;*/ 2070 | font-weight: normal; 2071 | 2072 | transition : background-color 0.3s, color 0.3s; 2073 | cursor:pointer; 2074 | } 2075 | 2076 | .palettes-list-select:hover { 2077 | color: white; 2078 | background-color: #484848; 2079 | } 2080 | 2081 | .palettes-list-select:focus { 2082 | background-color: #484848; 2083 | color: white; 2084 | outline: none; 2085 | } 2086 | 2087 | .palettes-list-actions .edit-icon { 2088 | background-size: 15px; 2089 | background-position: 50%; 2090 | } 2091 | .palettes-list-no-colors { 2092 | height: 42px; 2093 | width: 100%; 2094 | color: grey; 2095 | font-size: 0.7em; 2096 | font-style: italic; 2097 | line-height: 42px; 2098 | text-align: center 2099 | } 2100 | 2101 | /** 2102 | * Animated preview styles. 2103 | */ 2104 | 2105 | .preview-container { 2106 | border : 0 Solid black; 2107 | border-radius:5px 0 0 5px; 2108 | box-shadow : 0 0 2px rgba(0,0,0,0.2); 2109 | font-size: 0; 2110 | } 2111 | 2112 | .preview-container .canvas-container { 2113 | overflow : hidden; 2114 | } 2115 | 2116 | .preview-container canvas { 2117 | border : 0 Solid transparent; 2118 | } 2119 | 2120 | .canvas-container .animated-preview-canvas-background { 2121 | position : relative; 2122 | height: 100%; 2123 | } 2124 | 2125 | #animated-preview-container { 2126 | background: #333; 2127 | border-radius : 0 0 2px 2px; 2128 | overflow : hidden; 2129 | } 2130 | 2131 | .canvas-container-wrapper { 2132 | height :200px; 2133 | width : 200px; 2134 | overflow:hidden; 2135 | } 2136 | 2137 | .tiled-frame-container { 2138 | height: 100%; 2139 | width: 100%; 2140 | position: relative; 2141 | background-repeat : repeat; 2142 | } 2143 | 2144 | .display-fps { 2145 | float: left; 2146 | color: #aaa; 2147 | font-size: 12px; 2148 | min-width: 55px; 2149 | vertical-align: bottom; 2150 | line-height: 26px; 2151 | } 2152 | 2153 | .range-fps { 2154 | overflow: hidden; 2155 | width: 100px; 2156 | height : 26px; 2157 | margin : 0; 2158 | box-sizing: border-box; 2159 | padding:0; 2160 | } 2161 | 2162 | .preview-toggle-onion-skin { 2163 | font-size: 2rem; 2164 | color: #aaa; 2165 | float: left; 2166 | line-height: 26px; 2167 | height: 100%; 2168 | padding-left: 5px; 2169 | padding-right: 5px; 2170 | border-right: 1px solid #222; 2171 | transition: 0.2s linear; 2172 | cursor:pointer; 2173 | } 2174 | 2175 | .preview-toggle-onion-skin:hover { 2176 | color : white; 2177 | } 2178 | 2179 | .preview-toggle-onion-skin-enabled, 2180 | .preview-toggle-onion-skin-enabled:hover { 2181 | color : gold; 2182 | } 2183 | 2184 | .open-popup-preview-button { 2185 | position : absolute; 2186 | z-index: 500; 2187 | right : 10px; 2188 | top : 10px; 2189 | width : 24px; 2190 | height: 18px; 2191 | 2192 | border : 2px solid white; 2193 | background : rgba(0,0,0,0.3); 2194 | cursor : pointer; 2195 | 2196 | opacity: 0; 2197 | transition: 0.3s opacity, 0.3s border-color; 2198 | } 2199 | 2200 | .minimap-container:hover .open-popup-preview-button { 2201 | opacity: 1; 2202 | } 2203 | 2204 | .open-popup-preview-button:hover { 2205 | border-color: gold; 2206 | } 2207 | 2208 | 2209 | .transformations-container .tool-icon { 2210 | float:left; 2211 | } 2212 | 2213 | /*** 2214 | Spectrum Colorpicker v1.1.2 2215 | https://github.com/bgrins/spectrum 2216 | Author: Brian Grinstead 2217 | License: MIT 2218 | ***/ 2219 | 2220 | .sp-container { 2221 | position:absolute; 2222 | top:0; 2223 | left:0; 2224 | display:inline-block; 2225 | *display: inline; 2226 | *zoom: 1; 2227 | /* https://github.com/bgrins/spectrum/issues/40 */ 2228 | z-index: 9999994; 2229 | overflow: hidden; 2230 | } 2231 | .sp-container.sp-flat { 2232 | position: relative; 2233 | } 2234 | 2235 | /* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */ 2236 | .sp-top { 2237 | position:relative; 2238 | width: 100%; 2239 | display:inline-block; 2240 | } 2241 | .sp-top-inner { 2242 | position:absolute; 2243 | top:0; 2244 | left:0; 2245 | bottom:0; 2246 | right:0; 2247 | } 2248 | .sp-color { 2249 | position: absolute; 2250 | top:0; 2251 | left:0; 2252 | bottom:0; 2253 | right:20%; 2254 | } 2255 | .sp-hue { 2256 | position: absolute; 2257 | top:0; 2258 | right:0; 2259 | bottom:0; 2260 | left:84%; 2261 | height: 100%; 2262 | } 2263 | .sp-fill { 2264 | padding-top: 80%; 2265 | } 2266 | .sp-sat, .sp-val { 2267 | position: absolute; 2268 | top:0; 2269 | left:0; 2270 | right:0; 2271 | bottom:0; 2272 | } 2273 | 2274 | .sp-alpha-enabled .sp-top { 2275 | margin-bottom: 18px; 2276 | } 2277 | .sp-alpha-enabled .sp-alpha { 2278 | display: block; 2279 | } 2280 | .sp-alpha-handle { 2281 | position:absolute; 2282 | top:-4px; 2283 | bottom: -4px; 2284 | width: 6px; 2285 | left: 50%; 2286 | cursor: pointer; 2287 | border: 1px solid black; 2288 | background: white; 2289 | opacity: .8; 2290 | } 2291 | .sp-alpha { 2292 | display: none; 2293 | position: absolute; 2294 | bottom: -14px; 2295 | right: 0; 2296 | left: 0; 2297 | height: 8px; 2298 | } 2299 | .sp-alpha-inner { 2300 | border: solid 1px #333; 2301 | } 2302 | 2303 | /* Don't allow text selection */ 2304 | .sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button { 2305 | -webkit-user-select:none; 2306 | -moz-user-select: -moz-none; 2307 | -o-user-select:none; 2308 | user-select: none; 2309 | } 2310 | 2311 | .sp-container.sp-input-disabled .sp-input-container { 2312 | display: none; 2313 | } 2314 | .sp-container.sp-buttons-disabled .sp-button-container { 2315 | display: none; 2316 | } 2317 | .sp-palette-only .sp-picker-container { 2318 | display: none; 2319 | } 2320 | .sp-palette-disabled .sp-palette-container { 2321 | display: none; 2322 | } 2323 | 2324 | .sp-initial-disabled .sp-initial { 2325 | display: none; 2326 | } 2327 | 2328 | 2329 | /* Gradients for hue, saturation and value instead of images. Not pretty... but it works */ 2330 | .sp-sat { 2331 | background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0))); 2332 | background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0)); 2333 | background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); 2334 | background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); 2335 | background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); 2336 | background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0)); 2337 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)"; 2338 | filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81'); 2339 | } 2340 | .sp-val { 2341 | background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0))); 2342 | background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0)); 2343 | background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); 2344 | background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); 2345 | background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); 2346 | background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0)); 2347 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)"; 2348 | filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000'); 2349 | } 2350 | 2351 | .sp-hue { 2352 | background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); 2353 | background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); 2354 | background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); 2355 | background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000)); 2356 | background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); 2357 | } 2358 | 2359 | /* IE filters do not support multiple color stops. 2360 | Generate 6 divs, line them up, and do two color gradients for each. 2361 | Yes, really. 2362 | */ 2363 | .sp-1 { 2364 | height:17%; 2365 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00'); 2366 | } 2367 | .sp-2 { 2368 | height:16%; 2369 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00'); 2370 | } 2371 | .sp-3 { 2372 | height:17%; 2373 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff'); 2374 | } 2375 | .sp-4 { 2376 | height:17%; 2377 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff'); 2378 | } 2379 | .sp-5 { 2380 | height:16%; 2381 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff'); 2382 | } 2383 | .sp-6 { 2384 | height:17%; 2385 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000'); 2386 | } 2387 | 2388 | .sp-hidden { 2389 | display: none !important; 2390 | } 2391 | 2392 | /* Clearfix hack */ 2393 | .sp-cf:before, .sp-cf:after { content: ""; display: table; } 2394 | .sp-cf:after { clear: both; } 2395 | .sp-cf { *zoom: 1; } 2396 | 2397 | /* Mobile devices, make hue slider bigger so it is easier to slide */ 2398 | @media (max-device-width: 480px) { 2399 | .sp-color { right: 40%; } 2400 | .sp-hue { left: 63%; } 2401 | .sp-fill { padding-top: 60%; } 2402 | } 2403 | .sp-dragger { 2404 | border-radius: 5px; 2405 | height: 5px; 2406 | width: 5px; 2407 | border: 1px solid #fff; 2408 | background: #000; 2409 | cursor: pointer; 2410 | position:absolute; 2411 | top:0; 2412 | left: 0; 2413 | } 2414 | .sp-slider { 2415 | position: absolute; 2416 | top:0; 2417 | cursor:pointer; 2418 | height: 3px; 2419 | left: -1px; 2420 | right: -1px; 2421 | border: 1px solid #000; 2422 | background: white; 2423 | opacity: .8; 2424 | } 2425 | 2426 | /* 2427 | Theme authors: 2428 | Here are the basic themeable display options (colors, fonts, global widths). 2429 | See http://bgrins.github.io/spectrum/themes/ for instructions. 2430 | */ 2431 | 2432 | .sp-container { 2433 | border-radius: 0; 2434 | background-color: #ECECEC; 2435 | border: solid 1px #f0c49B; 2436 | padding: 0; 2437 | } 2438 | .sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue 2439 | { 2440 | font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; 2441 | -webkit-box-sizing: border-box; 2442 | -moz-box-sizing: border-box; 2443 | -ms-box-sizing: border-box; 2444 | box-sizing: border-box; 2445 | } 2446 | .sp-top 2447 | { 2448 | margin-bottom: 3px; 2449 | } 2450 | .sp-color, .sp-hue 2451 | { 2452 | border: solid 1px #666; 2453 | } 2454 | 2455 | /* Input */ 2456 | .sp-input-container { 2457 | float:right; 2458 | width: 100px; 2459 | margin-bottom: 4px; 2460 | } 2461 | .sp-initial-disabled .sp-input-container { 2462 | width: 100%; 2463 | } 2464 | .sp-input { 2465 | font-size: 12px !important; 2466 | border: 1px inset; 2467 | padding: 4px 5px; 2468 | margin: 0; 2469 | width: 100%; 2470 | background:transparent; 2471 | border-radius: 3px; 2472 | color: #222; 2473 | } 2474 | .sp-input:focus { 2475 | border: 1px solid orange; 2476 | } 2477 | .sp-input.sp-validation-error 2478 | { 2479 | border: 1px solid red; 2480 | background: #fdd; 2481 | } 2482 | .sp-picker-container , .sp-palette-container 2483 | { 2484 | float:left; 2485 | position: relative; 2486 | padding: 10px; 2487 | padding-bottom: 300px; 2488 | margin-bottom: -290px; 2489 | } 2490 | .sp-picker-container 2491 | { 2492 | width: 172px; 2493 | border-left: solid 1px #fff; 2494 | } 2495 | 2496 | /* Palettes */ 2497 | .sp-palette-container 2498 | { 2499 | border-right: solid 1px #ccc; 2500 | } 2501 | 2502 | .sp-palette .sp-thumb-el { 2503 | display: block; 2504 | position:relative; 2505 | float:left; 2506 | width: 24px; 2507 | height: 15px; 2508 | margin: 3px; 2509 | cursor: pointer; 2510 | border:solid 2px transparent; 2511 | } 2512 | .sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active { 2513 | border-color: orange; 2514 | } 2515 | .sp-thumb-el 2516 | { 2517 | position:relative; 2518 | } 2519 | 2520 | /* Initial */ 2521 | .sp-initial 2522 | { 2523 | float: left; 2524 | border: solid 1px #333; 2525 | } 2526 | .sp-initial span { 2527 | width: 30px; 2528 | height: 25px; 2529 | border:none; 2530 | display:block; 2531 | float:left; 2532 | margin:0; 2533 | } 2534 | 2535 | /* Buttons */ 2536 | .sp-button-container { 2537 | float: right; 2538 | } 2539 | 2540 | /* Replacer (the little preview div that shows up instead of the ) */ 2541 | .sp-replacer { 2542 | margin:0; 2543 | overflow:hidden; 2544 | cursor:pointer; 2545 | padding: 4px; 2546 | display:inline-block; 2547 | *zoom: 1; 2548 | *display: inline; 2549 | border: solid 1px #91765d; 2550 | background: #eee; 2551 | color: #333; 2552 | vertical-align: middle; 2553 | } 2554 | .sp-replacer:hover, .sp-replacer.sp-active { 2555 | border-color: #F0C49B; 2556 | color: #111; 2557 | } 2558 | .sp-replacer.sp-disabled { 2559 | cursor:default; 2560 | border-color: silver; 2561 | color: silver; 2562 | } 2563 | .sp-dd { 2564 | padding: 2px 0; 2565 | height: 16px; 2566 | line-height: 16px; 2567 | float:left; 2568 | font-size:10px; 2569 | } 2570 | .sp-preview 2571 | { 2572 | position:relative; 2573 | width:25px; 2574 | height: 20px; 2575 | border: solid 1px #222; 2576 | margin-right: 5px; 2577 | float:left; 2578 | z-index: 0; 2579 | } 2580 | 2581 | .sp-palette 2582 | { 2583 | *width: 220px; 2584 | max-width: 220px; 2585 | } 2586 | .sp-palette .sp-thumb-el 2587 | { 2588 | width:16px; 2589 | height: 16px; 2590 | margin:2px 1px; 2591 | border: solid 1px #d0d0d0; 2592 | } 2593 | 2594 | .sp-container 2595 | { 2596 | padding-bottom:0; 2597 | } 2598 | 2599 | 2600 | /* Buttons: http://hellohappy.org/css3-buttons/ */ 2601 | .sp-container button { 2602 | background-color: #eeeeee; 2603 | background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); 2604 | background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 2605 | background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); 2606 | background-image: -o-linear-gradient(top, #eeeeee, #cccccc); 2607 | background-image: linear-gradient(to bottom, #eeeeee, #cccccc); 2608 | border: 1px solid #ccc; 2609 | border-bottom: 1px solid #bbb; 2610 | border-radius: 3px; 2611 | color: #333; 2612 | font-size: 14px; 2613 | line-height: 1; 2614 | padding: 5px 4px; 2615 | text-align: center; 2616 | text-shadow: 0 1px 0 #eee; 2617 | vertical-align: middle; 2618 | } 2619 | .sp-container button:hover { 2620 | background-color: #dddddd; 2621 | background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb); 2622 | background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb); 2623 | background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb); 2624 | background-image: -o-linear-gradient(top, #dddddd, #bbbbbb); 2625 | background-image: linear-gradient(to bottom, #dddddd, #bbbbbb); 2626 | border: 1px solid #bbb; 2627 | border-bottom: 1px solid #999; 2628 | cursor: pointer; 2629 | text-shadow: 0 1px 0 #ddd; 2630 | } 2631 | .sp-container button:active { 2632 | border: 1px solid #aaa; 2633 | border-bottom: 1px solid #888; 2634 | -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; 2635 | -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; 2636 | -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; 2637 | -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; 2638 | box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; 2639 | } 2640 | .sp-cancel 2641 | { 2642 | font-size: 11px; 2643 | color: #d93f3f !important; 2644 | margin:0; 2645 | padding:2px; 2646 | margin-right: 5px; 2647 | vertical-align: middle; 2648 | text-decoration:none; 2649 | 2650 | } 2651 | .sp-cancel:hover 2652 | { 2653 | color: #d93f3f !important; 2654 | text-decoration: underline; 2655 | } 2656 | 2657 | 2658 | .sp-palette span:hover, .sp-palette span.sp-thumb-active 2659 | { 2660 | border-color: #000; 2661 | } 2662 | 2663 | .sp-preview, .sp-alpha, .sp-thumb-el 2664 | { 2665 | position:relative; 2666 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); 2667 | } 2668 | .sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner 2669 | { 2670 | display:block; 2671 | position:absolute; 2672 | top:0;left:0;bottom:0;right:0; 2673 | } 2674 | 2675 | .sp-palette .sp-thumb-inner 2676 | { 2677 | background-position: 50% 50%; 2678 | background-repeat: no-repeat; 2679 | } 2680 | 2681 | .sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner 2682 | { 2683 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=); 2684 | } 2685 | 2686 | .sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner 2687 | { 2688 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=); 2689 | } 2690 | 2691 | /** 2692 | * Piskel specific CSS for spectrum widgets 2693 | */ 2694 | 2695 | /* Widget's main container */ 2696 | .sp-container { 2697 | border-radius: 4px; 2698 | background-color: #2B2B2B; 2699 | border: solid 4px #888; 2700 | padding: 5px 5px 0 5px; 2701 | box-shadow : 0 0 5px 0 black; 2702 | } 2703 | 2704 | .sp-container[data-y-position=bottom] { 2705 | border-top-left-radius: 0; 2706 | } 2707 | 2708 | .sp-container[data-y-position=top] { 2709 | border-bottom-left-radius: 0; 2710 | } 2711 | 2712 | /* Color square container */ 2713 | .sp-color, .sp-hue { 2714 | border : 1px solid #222; 2715 | } 2716 | 2717 | /* Remove the padding on the input container */ 2718 | .sp-replacer { 2719 | padding: 4px; 2720 | height: 100%; 2721 | border-width: 0; 2722 | box-sizing: border-box; 2723 | -moz-box-sizing:border-box; 2724 | background-color: #444; 2725 | } 2726 | 2727 | .sp-replacer:hover { 2728 | background-color: #888; 2729 | } 2730 | 2731 | /* Hide the triangle */ 2732 | .sp-dd { 2733 | display: none; 2734 | } 2735 | 2736 | /* */ 2737 | .sp-preview { 2738 | margin-right: 0; 2739 | height: 100%; 2740 | width: 39px; 2741 | border-width: 0; 2742 | } 2743 | 2744 | .sp-palette-row-selection { 2745 | max-width: 62px; 2746 | } 2747 | 2748 | .sp-palette .sp-thumb-el { 2749 | margin : 0 5px 5px 0; 2750 | width: 24px; 2751 | height: 24px; 2752 | border-color: #444; 2753 | 2754 | } 2755 | 2756 | .sp-picker-container, .sp-palette-container { 2757 | padding-top: 5px; 2758 | padding-right: 5px; 2759 | padding-left: 5px; 2760 | border-left-width: 0; 2761 | border-right-width: 0; 2762 | } 2763 | 2764 | .sp-picker-container { 2765 | padding: 5px; 2766 | padding-bottom: 300px; 2767 | margin-bottom: -295px; 2768 | } 2769 | 2770 | .sp-slider { 2771 | height: 5px; 2772 | left: -2px; 2773 | right: -2px; 2774 | border: 2px solid white; 2775 | background: rgba(255,255,255,0); 2776 | opacity: 1; 2777 | border-radius: 2px; 2778 | box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(0,0,0,0.5); 2779 | } 2780 | 2781 | .sp-dragger { 2782 | border-radius: 8px; 2783 | height: 12px; 2784 | width: 12px; 2785 | border: 2px solid white; 2786 | background: none; 2787 | box-sizing:border-box; 2788 | -moz-box-sizing:border-box; 2789 | box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(0,0,0,0.5); 2790 | } 2791 | 2792 | .sp-palette .sp-thumb-el.sp-thumb-active { 2793 | border-color: gold; 2794 | box-shadow: 0 0 0px 1px gold; 2795 | } 2796 | 2797 | .sp-input { 2798 | border: 1px solid #666; 2799 | margin: 0; 2800 | background: #111; 2801 | border-radius: 2px; 2802 | color: #D3D3D3; 2803 | font-family: Courier!important; 2804 | } 2805 | 2806 | .sp-input.sp-validation-error { 2807 | background: #330000; 2808 | } 2809 | /*! 2810 | * Bootstrap v2.1.1 2811 | * 2812 | * Copyright 2012 Twitter, Inc 2813 | * Licensed under the Apache License v2.0 2814 | * http://www.apache.org/licenses/LICENSE-2.0 2815 | * 2816 | * Designed and built with all the love in the world @twitter by @mdo and @fat. 2817 | */ 2818 | .clearfix { 2819 | *zoom: 1; 2820 | } 2821 | .clearfix:before, 2822 | .clearfix:after { 2823 | display: table; 2824 | content: ""; 2825 | line-height: 0; 2826 | } 2827 | .clearfix:after { 2828 | clear: both; 2829 | } 2830 | .hide-text { 2831 | font: 0/0 a; 2832 | color: transparent; 2833 | text-shadow: none; 2834 | background-color: transparent; 2835 | border: 0; 2836 | } 2837 | .input-block-level { 2838 | display: block; 2839 | width: 100%; 2840 | min-height: 30px; 2841 | -webkit-box-sizing: border-box; 2842 | -moz-box-sizing: border-box; 2843 | box-sizing: border-box; 2844 | } 2845 | .tooltip { 2846 | position: absolute; 2847 | z-index: 30000; 2848 | display: block; 2849 | visibility: visible; 2850 | padding: 5px; 2851 | font-size: 11px; 2852 | opacity: 0; 2853 | filter: alpha(opacity=0); 2854 | } 2855 | .tooltip.in { 2856 | opacity: 0.8; 2857 | filter: alpha(opacity=80); 2858 | } 2859 | .tooltip.top { 2860 | margin-top: -3px; 2861 | } 2862 | .tooltip.right { 2863 | margin-left: 3px; 2864 | } 2865 | .tooltip.bottom { 2866 | margin-top: 3px; 2867 | } 2868 | .tooltip.left { 2869 | margin-left: -3px; 2870 | } 2871 | .tooltip-inner { 2872 | max-width: 200px; 2873 | padding: 3px 8px; 2874 | color: #ffffff; 2875 | text-align: center; 2876 | text-decoration: none; 2877 | background-color: #000000; 2878 | -webkit-border-radius: 4px; 2879 | -moz-border-radius: 4px; 2880 | border-radius: 4px; 2881 | } 2882 | .tooltip-arrow { 2883 | position: absolute; 2884 | width: 0; 2885 | height: 0; 2886 | border-color: transparent; 2887 | border-style: solid; 2888 | } 2889 | .tooltip.top .tooltip-arrow { 2890 | bottom: 0; 2891 | left: 50%; 2892 | margin-left: -5px; 2893 | border-width: 5px 5px 0; 2894 | border-top-color: #000000; 2895 | } 2896 | .tooltip.right .tooltip-arrow { 2897 | top: 50%; 2898 | left: 0; 2899 | margin-top: -5px; 2900 | border-width: 5px 5px 5px 0; 2901 | border-right-color: #000000; 2902 | } 2903 | .tooltip.left .tooltip-arrow { 2904 | top: 50%; 2905 | right: 0; 2906 | margin-top: -5px; 2907 | border-width: 5px 0 5px 5px; 2908 | border-left-color: #000000; 2909 | } 2910 | .tooltip.bottom .tooltip-arrow { 2911 | top: 0; 2912 | left: 50%; 2913 | margin-left: -5px; 2914 | border-width: 0 5px 5px; 2915 | border-bottom-color: #000000; 2916 | } 2917 | 2918 | .tooltip { 2919 | line-height: 20px; 2920 | } 2921 | 2922 | .tooltip.in { 2923 | opacity: 0.95; 2924 | filter: alpha(opacity=95); 2925 | } 2926 | 2927 | .tooltip { 2928 | line-height: 20px; 2929 | } 2930 | .preview-list-wrapper { 2931 | position: relative; 2932 | height: 100%; 2933 | overflow: hidden; 2934 | } 2935 | 2936 | .preview-list-scroller { 2937 | overflow-y: scroll; 2938 | overflow-x: hidden; 2939 | height: 100%; 2940 | } 2941 | 2942 | .top-overflow, 2943 | .bottom-overflow { 2944 | height: 20px; 2945 | position: absolute; 2946 | left: 0; 2947 | right: 12px; 2948 | 2949 | -webkit-transition: all 500ms ease-out; 2950 | -moz-transition: all 500ms ease-out; 2951 | -ms-transition: all 500ms ease-out; 2952 | -o-transition: all 500ms ease-out; 2953 | transition: all 500ms ease-out; 2954 | 2955 | background-image: linear-gradient(45deg, #1D1D1D 20%, transparent 25%, transparent 75%, #1D1D1D 80%, #1D1D1D), 2956 | linear-gradient(-45deg, #1D1D1D 20%, transparent 25%, transparent 75%, #1D1D1D 80%, #1D1D1D); 2957 | background-size: 29px 45px; 2958 | background-repeat: repeat-x; 2959 | background-position-x: 3px; 2960 | z-index: 10; 2961 | } 2962 | 2963 | .top-overflow { 2964 | top: -20px; 2965 | } 2966 | 2967 | .bottom-overflow { 2968 | bottom: -20px; 2969 | background-position-x: 0; 2970 | background-position-y: -23px; 2971 | } 2972 | 2973 | .top-overflow-visible .top-overflow { 2974 | top: 0; 2975 | } 2976 | 2977 | .bottom-overflow-visible .bottom-overflow { 2978 | bottom: 0; 2979 | } 2980 | 2981 | .preview-list { 2982 | list-style-type: none; 2983 | padding-right: 7px; 2984 | } 2985 | 2986 | .add-frame-action { 2987 | border: #888 solid 4px; 2988 | font-size: 13px; 2989 | color: #888; 2990 | cursor: pointer; 2991 | padding: 6px 0; 2992 | border-radius: 4px; 2993 | margin-top: 8px; 2994 | background-image: url(../img/plus.png); 2995 | background-repeat: no-repeat; 2996 | background-position: 3px 7px; 2997 | background-size: 26px 26px; 2998 | text-indent: 18px; 2999 | background-color: #222; 3000 | } 3001 | 3002 | .add-frame-action .label { 3003 | width: 80px; 3004 | margin: 0 auto; 3005 | } 3006 | 3007 | .add-frame-action:hover { 3008 | border-color: gold; 3009 | } 3010 | 3011 | .preview-tile { 3012 | position: relative; 3013 | border: #444 3px solid; 3014 | border-radius: 3px; 3015 | margin: 5px 0; 3016 | width: 96px; 3017 | height: 96px; 3018 | } 3019 | 3020 | .preview-tile:first-child { 3021 | margin-top: 0; 3022 | } 3023 | 3024 | .preview-tile:hover { 3025 | border: #999 3px solid; 3026 | } 3027 | 3028 | .tile-view { 3029 | position : relative; 3030 | } 3031 | 3032 | .preview-tile .tile-overlay { 3033 | z-index: 10; 3034 | position: absolute; 3035 | background-color: rgba(100, 100, 100, 0.6); 3036 | opacity: 0; 3037 | height: 30px; 3038 | width: 30px; 3039 | border: none; 3040 | } 3041 | 3042 | .preview-tile:hover .tile-overlay { 3043 | opacity: 1.0; 3044 | } 3045 | 3046 | .preview-tile .tile-overlay.tile-count { 3047 | display: block; 3048 | opacity: 1.0; 3049 | border-bottom-right-radius: 3px; 3050 | top: 0; 3051 | left: 0; 3052 | font-size: 14px; 3053 | line-height: 30px; 3054 | color: white; 3055 | font-weight: bold; 3056 | text-align: center; 3057 | cursor: default; 3058 | } 3059 | 3060 | .preview-tile .tile-overlay.delete-frame-action { 3061 | background-image: url(../img/garbage.png); 3062 | background-repeat: no-repeat; 3063 | top: 0; 3064 | right: 0; 3065 | border-bottom-left-radius: 3px; 3066 | height: 30px; 3067 | width: 30px; 3068 | background-position: 5px 5px; 3069 | background-size: 20px; 3070 | cursor: pointer; 3071 | } 3072 | 3073 | .preview-tile .tile-overlay.duplicate-frame-action { 3074 | bottom: 0; 3075 | right: 0; 3076 | border-bottom-left-radius: 3px; 3077 | background-image: url(../img/duplicate.png); 3078 | background-repeat: no-repeat; 3079 | background-position: 5px 5px; 3080 | background-size: 20px; 3081 | cursor: pointer; 3082 | } 3083 | 3084 | .preview-tile .tile-overlay.dnd-action { 3085 | bottom: 0; 3086 | left: 0; 3087 | border-top-right-radius: 3px; 3088 | background-image: url(../img/dragndrop.png); 3089 | background-repeat: no-repeat; 3090 | background-position: 5px 5px; 3091 | background-size: 20px; 3092 | cursor: move; 3093 | } 3094 | 3095 | .preview-tile.selected { 3096 | border-color: gold; 3097 | } 3098 | 3099 | .preview-tile.selected:after { 3100 | content: " "; 3101 | position: absolute; 3102 | top: 38px; 3103 | right: -15px; 3104 | border: transparent 4px solid; 3105 | border-left-color: gold; 3106 | border-width: 6px; 3107 | border-style: solid; 3108 | } 3109 | 3110 | 3111 | /** 3112 | * Drag n drop styles. 3113 | */ 3114 | 3115 | .preview-tile-drop-proxy { 3116 | border: 3px dashed gold; 3117 | height: 90px; 3118 | border-radius: 9px; 3119 | background-color: rgba(255, 215,0, 0.2); 3120 | } 3121 | 3122 | .minimap-crop-frame { 3123 | position:absolute; 3124 | border:1px solid rgba(255,255,255,0.5); 3125 | z-index:100; 3126 | box-sizing : border-box; 3127 | -moz-box-sizing : border-box; 3128 | cursor : pointer; 3129 | } --------------------------------------------------------------------------------