-
+
+
Layers + +
+ + +Transform
+Palettes
+t |
diff --git a/css/piskel-style-packaged-2014-07-14-04-44.css b/css/piskel-style-packaged-2014-07-14-04-44.css deleted file mode 100644 index cbe61373..00000000 --- a/css/piskel-style-packaged-2014-07-14-04-44.css +++ /dev/null @@ -1,2648 +0,0 @@ -html, body { - height : 100%; width: 100%; - margin : 0; - overflow: hidden; - cursor : default; - font-family: arial; - font-size: 11px; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -ul, li { - margin : 0; - padding : 0; - list-style-type: none; -} - - -/* Force apparition of scrollbars on leopard */ -::-webkit-scrollbar { - -webkit-appearance: none; - width: 6px; -} - -::-webkit-scrollbar-thumb { - border-radius: 2px; - background-color: #666; -} - -::-webkit-scrollbar-track { - background-color: rgba(50, 50, 50, 0.4); -} - -a, a:visited { - color:gold; -} -body { - background: radial-gradient(circle, #000, #373737); - /* 16/06/2013 : -webkit still needed for - safari, safari mobile and android browser and chrome for android - cf http://caniuse.com/css-gradients */ - background: -webkit-radial-gradient(circle, #000, #373737); -} - -/* Browser fixes */ -::-ms-clear { - display: none; -} - -.allow-user-select { - -webkit-touch-callout: initial; - -webkit-user-select: initial; - -khtml-user-select: initial; - -moz-user-select: initial; - -ms-user-select: initial; - user-select: initial; -} - -/** - * Application layout - */ - -.main-wrapper { - position: absolute; - top: 5px; - right: 0; - bottom: 5px; - left: 0; -} - -.column-wrapper { - text-align: center; - font-size: 0; - position: absolute; - left: 100px; /* Reserve room for tools on the left edge of the screen. */ - top: 0; - right: 50px; /* Reserve room for actions on the right edge of the screen. */ - bottom: 0; -} - -.column { - display: inline-block; -} - -.left-column { - vertical-align: top; - height: 100%; - margin-right: 7px; -} - -.main-column { - height: 100%; - position: relative; -} - -.right-column { - vertical-align: top; - margin-left: 10px; - height: 100%; - position: relative; -} - -.drawing-canvas-container { - font-size: 0; -} - -.sticky-section { - position: fixed; - top: 0; - bottom: 0; - z-index: 1000; -} - -.sticky-section .sticky-section-wrap { - display: table; - height: 100%; -} - -.sticky-section .vertical-centerer { - display: table-cell; - vertical-align: middle; -} - -.left-sticky-section.sticky-section { - left: 0; - max-width: 100px; -} - -.left-sticky-section .tool-icon { - float: left; -} - -/** - * Canvases layout - */ - -.canvas { - position: relative; - z-index: 1; -} - -.canvas-container { - position: relative; - display: block; -} - -.canvas-container .canvas-background { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; -} - -.light-picker-background, -.light-canvas-background .canvas-background { - background: url(../img/canvas_background/light_canvas_background.png) repeat; -} - -.medium-picker-background, -.medium-canvas-background .canvas-background { - background: url(../img/canvas_background/medium_canvas_background.png) repeat; -} - -.lowcont-medium-picker-background, -.lowcont-medium-canvas-background .canvas-background { - background: url(../img/canvas_background/lowcont_medium_canvas_background.png) repeat; -} - -.lowcont-dark-picker-background, -.lowcont-dark-canvas-background .canvas-background { - background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat; -} - -.layers-canvas, -.canvas.onion-skin-canvas { - opacity: 0.2; -} - -.canvas.canvas-overlay, -.canvas.layers-canvas, -.canvas.onion-skin-canvas { - position: absolute; - top: 0; - left: 0; -} - -/** - * Z-indexes should match the drawing area canvas superposition order : - * - 1 : draw layers below current layer - * - 2 : draw current layer - * - 3 : draw layers above current layer - * - 4 : draw the tools overlay - */ -.canvas.layers-below-canvas {z-index: 7;} -.canvas.drawing-canvas {z-index: 8;} -.canvas.canvas-overlay {z-index: 9;} -.canvas.onion-skin-canvas {z-index: 10;} -.canvas.layers-above-canvas {z-index: 11;} - - - -/** - * User messages - */ -.user-message { - position: absolute; - right: 0; - bottom: 0; - background-color: #F9EDBE; - padding: 10px 47px; - border-top-left-radius: 7px; - color: #222; - border: #F0C36D 1px solid; - border-right: 0; - border-bottom: 0; - font-weight: bold; - font-size: 13px; - z-index: 30000; - max-width: 300px; -} - -.user-message .close { - position: absolute; - top: 6px; - right: 17px; - color: gray; - font-weight: bold; - cursor: pointer; - font-size: 18px; -} - -.user-message .close:hover { - color: black; -} - -.image-link { - color : gold; -} - -.pull-top, -.pull-right, -.pull-bottom, -.pull-left { - position:absolute; -} - -.pull-top { - top:0; -} - -.pull-right { - right:0; -} - -.pull-bottom { - bottom:0; -} - -.pull-left { - left:0; -} - -.cursor-coordinates { - color:#888; - font-size:12px; - font-weight:bold; - font-family:Courier; -} -@font-face { - font-family: 'piskel'; - src:url('fonts/piskel.eot?-3olv93'); - src:url('fonts/piskel.eot?#iefix-3olv93') format('embedded-opentype'), - url('fonts/piskel.woff?-3olv93') format('woff'), - url('fonts/piskel.ttf?-3olv93') format('truetype'), - url('fonts/piskel.svg?-3olv93#icomoon') format('svg'); - font-weight: normal; - font-style: normal; -} - -[class^="piskel-icon-"], [class*=" piskel-icon-"] { - font-family: 'piskel'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.piskel-icon-eye:before { - content: "\e602"; -} - -.piskel-icon-onion:before { - content: "\e601"; -} - - -.row { - display: block; -} - -.textfield { - background : black; - border : 1px solid #888; - border-radius : 2px; - padding : 3px 10px; - color : white; - - box-sizing:border-box; - -moz-box-sizing:border-box; -} - -.textfield[disabled=disabled] { - background : #3a3a3a; -} - -.textfield-small { - width : 50px; -} - -.button { - height: 24px; - box-sizing: border-box; - - background-color: #3f3f3f; - border: 1px solid #333; - border-top-color: #666; - border-bottom-color: #222; - - cursor: pointer; - text-decoration: none; - - color: white; - text-shadow: 0px -1px 0 black; - font-weight: bold; - font-size: 1rem; - text-align: center; - - transition: background-color 0.2s linear; -} - -.button:hover { - text-decoration: none; - background-color: #484848; - color: gold; -} - -.button-primary { - background-color: rgb(255,215,0); /* gold */ - - border-color: rgb(179, 164, 0); - border-top-color: white; - border-bottom-color: rgb(151, 133, 0); - - color: black; - text-shadow: 0px 1px 0 #fff; -} - -.button-primary:hover { - background-color: rgb(255,235,20); - color: #333; -} - -.button[disabled], -.button[disabled]:hover { - cursor:default; - background-color: #aaa; - color: #777; - text-shadow: 0px 1px 0 #bbb; - border-color: #666; - border-top-color: #999; - border-bottom-color: #555; -} - -/** Righty sticky drawer expanded state. */ - -.right-sticky-section.sticky-section { - right: 0; - width: 47px; - - -webkit-transition: all 200ms ease-out; - -moz-transition: all 200ms ease-out; - -ms-transition: all 200ms ease-out; - -o-transition: all 200ms ease-out; - transition: all 200ms ease-out; -} - -.right-sticky-section.expanded { - right: 280px; -} - -.right-sticky-section .tool-icon { - float: right; - margin-right: 0; -} - -/********************************************************** *j* j** j*j j j j** *****************/ -/* Settings icons I I I I I\I \ */ -/********************************************************** *** *** *** * * '** *****************/ - -.tool-icon.gallery-icon { - background-image: url(../img/gallery.png); - background-position: 3px 3px; - background-size: 39px 39px; -} - -.tool-icon.resize-icon { - background-image: url(../img/resize-icon.png); - background-position: 10px 10px; - background-size: 26px 26px; -} - -.tool-icon.save-icon { - background-image: url(../img/save.png); - background-position: 6px 6px; - background-size: 36px 36px; -} - -.tool-icon.gear-icon { - background-image: url(../img/gear.png); - background-position: 6px 7px; - background-size: 32px 32px; -} - -.tool-icon.export-icon { - background-image: url(../img/export.png); - background-position: 7px 5px; - background-size: 36px 36px; - position: relative; -} - -.tool-icon.local-storage-icon { - background-image: url(../img/local-storage-icon.png); - background-position: 10px 12px; - background-size: 30px; - position: relative; -} - -.tool-icon.import-icon { - background-image: url(../img/import-icon.png); - background-position: 10px 5px; - background-size: 26px; - position: relative; -} - -.tool-icon .label { - position: absolute; - left: 0; - bottom: 4px; - right: 0; - font-size: 11px; - text-transform: uppercase; - color: #fff; - text-align: center; -} - -.drawer-content { - overflow: hidden; - background-color: #444; - height: 550px; - max-height: 100%; - width: 280px; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - box-shadow: 0 0 5px 0 black; -} - -.right-sticky-section.expanded .tool-icon { - padding-right: 1px; -} - -.right-sticky-section .tool-icon.has-expanded-drawer { - position: relative; - background-color: #444; - margin-right: 0; - padding-right: 2px; - border-left : 3px solid gold; -} - -/************************************************************************************************/ -/* Common settings classes */ -/************************************************************************************************/ - -.settings-section { - margin: 10px 20px; - font-size: 12px; - font-weight: bold; - color: #ccc; - text-shadow: 1px 1px #000; -} - -.settings-section .button { - margin: 0; -} - -.settings-title { - color : gold; - margin-top: 20px; - margin-bottom: 10px; - text-transform: uppercase; - border-bottom: 1px #aaa solid; - padding-bottom: 5px; - color: gold; -} - -.settings-description { - margin : 0 0 10px 0; - display : inline-block; -} - -.settings-form-section { - margin-bottom: 10px; -} - -.settings-item { - margin : 10px 0; -} - -[name*=checkbox] { - vertical-align: middle; -} - -/************************************************************************************************/ -/* Application settings */ -/************************************************************************************************/ - -.background-picker-wrapper { - overflow: hidden; - padding: 5px; -} - -.background-picker { - cursor: pointer; - float: left; - height: 35px; - width: 35px; - background-color: transparent; - margin-right: 15px; - padding: 1px; - position: relative; -} - -.background-picker:after { - content: " "; - position: absolute; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; -} - -.background-picker:hover:after { - border: #eee 1px solid; -} - -.background-picker.selected:after { - border: gold 1px solid; -} - - - -/************************************************************************************************/ -/* Save panel */ -/************************************************************************************************/ - -.save-field { - width: 100%; -} - -.save-status { - margin-bottom: 10px; - vertical-align: middle; - font-weight: normal; - text-shadow: none; - font-style: italic; -} - -.save-file-name { - white-space: nowrap; - font-weight: bold; - color: white; - font-style: normal; -} -/*******************************/ -/* Gif/Png Export Setting panel*/ -/*******************************/ -.gif-download-button, -.gif-render-button { - margin-top : 10px; - margin-right : 10px; -} - -.gif-export-preview, -.png-export-preview { - position:relative; - margin-top:10px; - max-height:32px; -} - -.gif-export-preview { - max-width:32px; -} - -.png-export-preview img { - max-height:32px; - float: left; -} - -.gif-upload-status { - width: 180px; - margin-left: 5px; - margin-top: 10px; -} - -.gif-upload, -.png-export-preview { - overflow: hidden; -} - -.gif-upload-status, -.gif-export-preview { - float : left; -} - -.preview-upload-ongoing:before{ - content: "Upload ongoing ..."; - position: absolute; - display: block; - height: 100%; - width: 100%; - text-align: center; - padding-top: 45%; - box-sizing:border-box; - -moz-box-sizing:border-box; - background: rgba(0,0,0,0.5); - color: white; -} - -.gif-export-progress-status { - margin-left: 5px; -} - -.gif-export-progress-bar { - margin-top:5px; - height:3px; - width: 0; - background:gold; -} - -/************************************************************************************************/ -/* Import panel */ -/************************************************************************************************/ - -.import-section, -.resize-section { - margin: 10px 0; -} - -.file-input-button { - margin-right: 8px; - border-radius: 2px; -} - -.import-highlight { - font-weight: bold; - color: white; -} - -.tools-wrapper, -.options-wrapper, -.palette-wrapper { - float: left; -} - -.tool-icon { - position : relative; - cursor : pointer; - width: 46px; - height: 46px; - margin: 1px; - background-color: #3a3a3a; - background-repeat: no-repeat; - background-position: 12px 12px; - background-size: 24px 24px; -} - -.tool-icon.selected { - cursor: default; - background-color: #444; -} - -.tool-icon.selected:before { - content:""; - position : absolute; - height : 100%; - width : 100%; - border: 3px solid gold; - box-sizing: border-box; - -moz-box-sizing: border-box; -} - -.tool-icon:hover { - background-color: #444; -} - -/* - * Tool icons: - */ -.tool-icon.tool-pen { - background-image: url(../img/tools/pen.png); -} - -.tool-icon.tool-vertical-mirror-pen { - background-image: url(../img/tools/mirror.png); - background-position: 0px 10px; - background-size: 38px 27px; -} - -.tool-icon.tool-paint-bucket { - background-image: url(../img/tools/paintbucket.png); -} - -.tool-icon.tool-eraser { - background-image: url(../img/tools/eraser.png); -} - -.tool-icon.tool-stroke { - background-image: url(../img/tools/stroke.png); -} - -.tool-icon.tool-rectangle { - background-image: url(../img/tools/rectangle.png); - background-position: 12px 14px; - background-size: 24px 20px; -} - -.tool-icon.tool-circle { - background-image: url(../img/tools/circle.png); -} - -.tool-icon.tool-move { - background-image: url(../img/tools/hand.png); - background-size: 24px 24px; -} - -.tool-icon.tool-rectangle-select { - background-image: url(../img/tools/rectangle_selection.png); - background-position: 12px 14px; - background-size: 24px 20px; -} - -.tool-icon.tool-shape-select { - background-image: url(../img/tools/magicwand.png); -} - -.tool-icon.tool-lighten { - background-image: url(../img/tools/lighten.png); - background-size: 30px 30px; - background-position: 8px 8px; -} - -.tool-icon.tool-colorpicker { - background-image: url(../img/tools/eyedropper.png); - background-size: 23px 23px; -} - -.tool-icon.tool-colorswap { - background-image: url(../img/tools/swap-colors.png); - background-position: 6px 6px; - background-size: 36px 36px; -} - -/* - * Tool cursors: - */ - -.tool-paint-bucket .drawing-canvas-container:hover, -.tool-colorswap .drawing-canvas-container:hover { - cursor: url(../img/icons/paint-bucket.png) 12 12, pointer; -} - -.tool-vertical-mirror-pen .drawing-canvas-container:hover { - cursor: url(../img/icons/vertical-mirror-pen.png) 5 15, pointer; -} - -.tool-pen .drawing-canvas-container:hover, -.tool-lighten .drawing-canvas-container:hover { - cursor: url(../img/icons/pen.png) 0 15, pointer; -} - -.tool-eraser .drawing-canvas-container:hover { - cursor: url(../img/icons/eraser.png) 0 15, pointer; -} - -.tool-stroke .drawing-canvas-container:hover { - cursor: url(../img/icons/pen.png) 0 15, pointer; -} - -.tool-rectangle .drawing-canvas-container:hover { - cursor: url(../img/icons/rectangle.png) 0 15, pointer; -} - -.tool-circle .drawing-canvas-container:hover { - cursor: url(../img/icons/circle.png) 2 15, pointer; -} - -.tool-move .drawing-canvas-container:hover { - cursor: url(../img/icons/hand.png) 15 15, pointer; -} - -.tool-rectangle-select .drawing-canvas-container:hover { - cursor: crosshair; -} - -.tool-shape-select .drawing-canvas-container:hover { - cursor: url(../img/icons/wand.png) 15 15, pointer; -} - -.tool-colorpicker .drawing-canvas-container:hover { - cursor: url(../img/icons/dropper.png) 0 15, pointer; -} - -.swap-colors-icon { - background-image: url(../img/tools/swap-arrow-square-small-grey.png); - position: relative; - top: 50px; - left: 6px; - height: 18px; - width: 18px; - background-size: 18px; - opacity : 0.3; - cursor : pointer; -} - -.swap-colors-icon:hover { - opacity : 1; -} - -.tool-color-picker { - position:relative; -} - -.tool-color-picker:nth-child(1) { - z-index : 100; -} - -.tool-color-picker:nth-child(2) { - z-index : 90; - margin-top: 25px; - margin-left:-20px; -} - -.tool-color-picker input { - width: 16px; - height: 16px; - text-indent: -10000px; - border: 1px solid black; - background: white; - cursor: pointer; - position : relative; - top: 10px; - margin-left: 2px; -} - -.tool-color-picker .secondary-color-picker { - top : 18px; - margin-left: 0; -} - -.palette-wrapper { - margin-top: 10px; - margin-left: 10px; -} - -.palette-color[data-color=TRANSPARENT] { - position: relative; - top: 10px; - left: 10px; - background-color: white; - height : 16px; - width : 16px; - border: 2px solid #000; - background-size: 16px 16px; - background-position: 0 0; - background-image: -webkit-gradient( - linear, - left top, - right bottom, - color-stop(0, #fff), - color-stop(0.45, #fff), - color-stop(0.5, #ff0000), - color-stop(0.55, #fff), - color-stop(1, #fff) - ); - background-image: -moz-linear-gradient( - left top, - #fff 0%, - #fff 45%, - #f00 50%, - #fff 55%, - #fff 100% - ); -} - -.tools-tooltip-container { - text-align: left; - padding-bottom: 5px; -} - -.tools-tooltip-shortcut { - color:gold; -} - -.tools-tooltip-descriptor { - color:#999; -} - -.tools-tooltip-descriptor-button { - padding:2px; - border:1px Solid #999; - font-size:0.8em; - margin-right:5px; - width:35px; - text-align:center; - border-radius:3px; - display:inline-block; - line-height: 10px; -} - - -.action-icon { - cursor: pointer; - height: 100%; - background-repeat: no-repeat; - background-position: 50%; -} - -.action-icon.edit-icon { - background-image: url('../img/tools/pen.png'); -} -.cheatsheet-link { - position: fixed; - bottom: 10px; - left: 10px; - - padding: 1px 0 0 45px; - color : gold; - font-weight: bold; - font-size : 1.25em; - line-height: 20px; - - cursor : pointer; - - background-image:url('../img/keyboard.png'); - background-size:35px 20px; - background-repeat:no-repeat; - opacity: 0.5; - z-index: 11000; - transition : opacity 0.3s; -} - -.cheatsheet-link:hover { - opacity: 1; -} - -#cheatsheet-wrapper { - position: absolute; - z-index: 10000; - - top: 0; - right: 0; - bottom: 0; - left: 0; - - padding: 50px; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - color: white; -} - -.cheatsheet-container { - width: 100%; - height: 100%; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - padding: 20px 3%; - border-radius: 3px; - background: rgba(0,0,0,0.9); - overflow: auto; -} - -.cheatsheet-container h3 { - font-size:24px; - margin-top: 0; -} - -.cheatsheet-section { - float: left; - width : 33%; -} - -.cheatsheet-shortcut { - overflow: hidden; - margin: 10px 0; -} - -.cheatsheet-icon.tool-icon { - float: left; - display: inline-block; - - height: 30px; - width: 30px; - margin: 0 20px 0 0; - - background-size: 20px 20px; - background-position: 5px 5px; -} - -.cheatsheet-description { - font-family:Courier; - color: white; - font-size : 13px; - margin-left: 20px; - line-height : 30px; -} - -.cheatsheet-key { - display : inline-block; - height: 30px; - line-height: 30px; - padding: 0 10px; - - border : 1px solid gold; - border-radius: 2px; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - text-align: center; - font-family:Courier; - font-weight: bold; - font-size : 18px; - color: gold; -} -#dialog-container-wrapper { - position: absolute; - z-index: 20000; - - top: 0; - right: 0; - bottom: 0; - left: 0; - - padding: 50px 150px; - overflow: hidden; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - background-color: rgba(0,0,0,0.8); - opacity: 0; - pointer-events: none; - - color: white; -} - -#dialog-container-wrapper.animated { - transition: opacity 0.5s; -} - -#dialog-container-wrapper.show { - opacity: 1; - pointer-events: auto; -} - -#dialog-container { - width: 100%; - height: 100%; - - margin-top: -1500px; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - border-radius: 3px; - border : 3px solid gold; - background: #444; - overflow: auto; -} - -.animated #dialog-container { - transition:margin-top 0.5s; -} - -.show #dialog-container { - margin-top: 0; -} - -#dialog-container.browse-local { - width: 700px; - height: 500px; - top : 50%; - left : 50%; - position : absolute; - margin-left: -350px; -} - -.show #dialog-container.browse-local { - margin-top: -250px; -} - -#dialog-container.import-image { - width: 500px; - height: 300px; - top : 50%; - left : 50%; - position : absolute; - margin-left: -250px; -} - -.show #dialog-container.import-image { - margin-top: -150px; -} - -.dialog-wrapper { - position : relative; -} - -.dialog-head { - width: 100%; - background: gold; - margin: 0; - padding: 10px; - color: black; - font-size: 1.8em; - box-sizing: border-box; - -moz-box-sizing: border-box; -} - -.dialog-close { - position: absolute; - top: 0; - right: 0; - line-height: 45px; - margin-right: 10px; - font-size: 1.3em; - cursor: pointer; -} - -/************************************************************************************************/ -/* Import dialog */ -/************************************************************************************************/ - -.import-section-preview { - display : inline-block; - height : 60px; - width: 60px; - border : 1px dashed #999; - border-radius: 3px; -} - -.dialog-section-title { - display : inline-block; - width: 55px; -} - -.import-size-field, -.resize-size-field { - width: 50px; - margin-right: 8px; - text-align: right; -} - -.import-size-field:nth-of-type(2), -.resize-size-field:nth-of-type(2) { - margin-left: 5px; -} - -.import-image-file-name { - display: inline-block; - overflow: hidden; - - height: 2rem; - word-break : break-all; - vertical-align: middle; - font-style: italic; - font-weight: normal; - text-shadow: none; -} - -[name=smooth-resize-checkbox] { - margin : 0 8px; -} - -.dialog-import-body { - padding:10px 20px; - font-size:1.5em -} - -.import-button { - font-size: 1em; - height: auto; - padding: 5px 10px; -} -.palette-manager-wrapper { - height: 100%; - position: relative; -} - -.palette-manager-body { - position: absolute; - top: 45px; - bottom: 0; - right: 0; - left: 0; -} - -.palette-manager-head { - position: absolute; - width: 100%; - background: gold; - margin: 0; - padding: 10px; - color: black; - font-size: 1.8em; - box-sizing: border-box; - -moz-box-sizing: border-box; -} - -.palette-manager-close { - position: absolute; - top: 0; - right: 0; - line-height: 45px; - margin-right: 10px; - font-size: 1.3em; - cursor: pointer; -} - -.palette-manager-drawer { - width: 200px; - position: absolute; - top: 0; - bottom: 0; -} - -.palette-manager-list { - position: absolute; - top:40px; - right: 0; - bottom: 0; - left: 0; - overflow: auto; -} - -.palette-manager-actions { - position: absolute; - height:40px; - line-height:40px; - width: 100%; - text-align: center; -} - -.palette-manager-actions-button { - width: 80px; - margin: 5px; -} - -.palette-manager-palette-button, -.palette-manager-actions-button { - line-height: 20px; -} - -.palette-manager-list li { - height: 48px; - line-height: 48px; - padding-left:10px; - - font-size: 1.4em; - - box-sizing: border-box; - -moz-box-sizing: border-box; - - border-bottom: 1px solid #666; - cursor:pointer; -} - -.palette-manager-list li:hover { - background : #222; -} - -.palette-manager-list li.selected { - color : gold; - font-weight: bold; -} - -.palette-manager-list li:nth-child(1) { - border-top: 1px solid #666; -} - -.palette-manager-details { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 200px; - - box-sizing: border-box; - -moz-box-sizing: border-box; - - border-left:1px solid #666; -} - -.palette-manager-details-head { - position: absolute; - height:40px; - line-height:40px; - width: 100%; - - box-sizing: border-box; - -moz-box-sizing: border-box; -} - -.palette-manager-details-head-name { - padding: 0 10px 0 20px; - font-size: 1.5em; - font-weight: bold; -} - -.palette-manager-details-head .edit-icon { - width: 24px; - display: inline-block; - background-size: 16px; -} - -.palette-manager-details-head-actions { - float: right; - line-height: 40px; - padding-right: 10px; -} - -.palette-manager-details-body { - position: absolute; - top:40px; - right: 0; - bottom: 0; - left: 0; - overflow: auto; - - box-sizing: border-box; - -moz-box-sizing: border-box; -} - - - -.palette-manager-color-card { - width: 120px; - height: 180px; - display: inline-block; - position: relative; - margin: 20px 0 20px 20px; - box-shadow: 0 0 0px 0px gold; - transition: box-shadow 0.3s; -} - -.palette-manager-color-card:hover { - box-shadow: 0 0 4px 1px gold; -} - -.palette-manager-delete-card { - position: absolute; - top: 0; - right: 0; - width: 20px; - - text-align: center; - font-size: 1.6em; - font-weight: bold; - color: rgb(255,255,255); - text-shadow : 0 0 2px rgb(0,0,0); - cursor: pointer; - - opacity : 0.2; - transition : opacity 0.3s, color 0.1s; -} - -.palette-manager-color-card:hover .palette-manager-delete-card { - opacity : 0.6; -} - -.palette-manager-color-card .palette-manager-delete-card:hover { - opacity : 1; - color: rgb(240,80,80); -} - -.palette-manager-new-color .palette-manager-color-square { - border: 3px dotted #888; - border-bottom-width: 0; - box-sizing: border-box; - -moz-box-sizing: border-box; - border-radius: 3px 3px 0 0; - cursor: pointer; - text-align: center; - font-size: 24px; - color: #888; - line-height: 120px; -} - -.palette-manager-color-square { - width: 120px; - height: 120px; - cursor: pointer; - /*background-image:url(../img/tools/eyedropper.png);*/ -} - -.palette-manager-color-details { - color : #666; - background: #eee; - height: 60px; - padding-left: 5px; -} - -.palette-manager-color-details li{ - line-height: 20px; - font-weight: bold; -} - -/************************************************************************************************/ -/* Browse local piskels panel */ -/************************************************************************************************/ - -.local-piskel-list { - width: 100%; -} - -.local-piskel-item { - height: 3em; -} - -.local-piskel-name { - width: 40%; -} - -.local-piskel-save-date { - font-weight : normal; -} - -.local-piskel-list a { - text-decoration: none; -} - -.local-piskel-list a:hover { - text-decoration: underline; -} - -.local-piskel-list-head { - font-weight: bold; - color: gold; -} - -.local-piskel-load-button, -.local-piskel-delete-button { - width : 75px; -} -.toolbox-container { - border: 4px solid #888; - font-size: medium; - color: white; - text-align: left; - border-radius: 4px; - margin-top: 5px; - margin-bottom: 10px; - overflow: hidden; -} - -.toolbox-title { - padding: 8px; - margin: 0; - font-size: 15px; - background: #222; -} - -.toolbox-button-container { - overflow : hidden; -} - -.toolbox-button { - margin: 0; - width: 25%; - float : left; -} - -/* @override */ -.button.toolbox-button { - border-left-width: 0; -} - -.toolbox-button:last-child { - border-right-width: 0; -} - -/** - * Layers container - */ -.layers-list-container { -} - -.layers-title { - background-image: url('../img/layers.svg'); - background-size: 22px; - background-repeat: no-repeat; - background-position: 97%; - position: relative; -} - -.layers-toggle-preview { - position: absolute; - top: 0.3em; - right: 2em; - - color: #999; - font-size: 1.3em; - cursor: pointer; - - transition: 0.2s linear; -} - -.layers-toggle-preview:hover { - color: white; -} - -.layers-toggle-preview-enabled, -.layers-toggle-preview-enabled:hover { - color : gold; -} - -.layers-list { - font-size : 12px; -} - -.layer-item { - height:24px; - line-height: 24px; - padding : 0 0 0 10px; - border-top: 1px solid #444; - cursor : pointer; -} - -.layer-item .edit-icon { - float: right; - width: 30px; - background-size: 12px; - opacity: 0; - transition : opacity 0.2s; -} - -.layer-item:hover .edit-icon { - opacity : 0.6; -} - -.layer-item:hover .edit-icon:hover { - opacity : 1; -} - -.layer-item:hover { - background : #222; -} - -.current-layer-item, -.current-layer-item:hover { - background : #333; - color: gold; -} - -.layers-button-arrow { - font-family : 'Lucida Grande', Calibri; - padding : 2px 6px 0 6px; -} -.palettes-list-select { - float:right; - max-width:90px; - margin-top: 3px; -} - -.palettes-title { - background-size: 22px; - background-repeat: no-repeat; - background-position: 97%; -} - -.palettes-list-colors { - overflow: auto; - max-height: 160px; -} - -.palettes-list-color { - cursor : pointer; - float: left; - margin : 0 0 5px 5px; - width : 32px; - height : 32px; - position: relative; -} - -.palettes-list-color:nth-child(-n+5) { - margin-top: 5px; -} - -.palettes-list-color div{ - width : 32px; - height : 32px; -} - -.palettes-list-has-scrollbar .palettes-list-color, -.palettes-list-has-scrollbar .palettes-list-color div{ - width: 29px -} - -.palettes-list-primary-color:before, -.palettes-list-secondary-color:before { - content: ""; - position: absolute; - bottom: 1px; - display: inline-block; - border: 7px solid gold; - border-top-color: transparent; - - width: 0px; - height: 0px; -} - -.palettes-list-primary-color:before { - left: 1px; - border-right-color: transparent; -} - - -.palettes-list-secondary-color:before { - right: 1px; - border-left-color: transparent; -} -/** - * Animated preview styles. - */ - -.preview-container { - border : 0px Solid black; - border-radius:5px 0px 0px 5px; - box-shadow : 0px 0px 2px rgba(0,0,0,0.2); - font-size: 0; -} - -.preview-container .canvas-container { - overflow : hidden; -} - -.preview-container canvas { - border : 0px Solid transparent; -} - -#animated-preview-container { - background: #333; - border-radius : 0 0 2px 2px; - overflow : hidden; -} - -#animated-preview-canvas-container { - height :200px; - width : 200px; -} - -.tiled-frame-container { - height: 100%; - width: 100%; - position: relative; - background-repeat : repeat; -} - -.display-fps { - float: left; - color: #aaa; - font-size: 12px; - min-width: 55px; - vertical-align: bottom; - line-height: 26px; -} - -.range-fps { - overflow: hidden; - width: 100px; - height : 26px; - margin : 0; - box-sizing: border-box; - padding:0; -} - -.preview-toggle-onion-skin { - font-size: 2rem; - color: #aaa; - float: left; - line-height: 26px; - height: 100%; - padding-left: 5px; - padding-right: 5px; - border-right: 1px solid #222; - transition: 0.2s linear; - cursor:pointer; -} - -.preview-toggle-onion-skin:hover { - color : white; -} - -.preview-toggle-onion-skin-enabled, -.preview-toggle-onion-skin-enabled:hover { - color : gold; -} -/*** -Spectrum Colorpicker v1.1.2 -https://github.com/bgrins/spectrum -Author: Brian Grinstead -License: MIT -***/ - -.sp-container { - position:absolute; - top:0; - left:0; - display:inline-block; - *display: inline; - *zoom: 1; - /* https://github.com/bgrins/spectrum/issues/40 */ - z-index: 9999994; - overflow: hidden; -} -.sp-container.sp-flat { - position: relative; -} - -/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */ -.sp-top { - position:relative; - width: 100%; - display:inline-block; -} -.sp-top-inner { - position:absolute; - top:0; - left:0; - bottom:0; - right:0; -} -.sp-color { - position: absolute; - top:0; - left:0; - bottom:0; - right:20%; -} -.sp-hue { - position: absolute; - top:0; - right:0; - bottom:0; - left:84%; - height: 100%; -} -.sp-fill { - padding-top: 80%; -} -.sp-sat, .sp-val { - position: absolute; - top:0; - left:0; - right:0; - bottom:0; -} - -.sp-alpha-enabled .sp-top { - margin-bottom: 18px; -} -.sp-alpha-enabled .sp-alpha { - display: block; -} -.sp-alpha-handle { - position:absolute; - top:-4px; - bottom: -4px; - width: 6px; - left: 50%; - cursor: pointer; - border: 1px solid black; - background: white; - opacity: .8; -} -.sp-alpha { - display: none; - position: absolute; - bottom: -14px; - right: 0; - left: 0; - height: 8px; -} -.sp-alpha-inner { - border: solid 1px #333; -} - -/* Don't allow text selection */ -.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button { - -webkit-user-select:none; - -moz-user-select: -moz-none; - -o-user-select:none; - user-select: none; -} - -.sp-container.sp-input-disabled .sp-input-container { - display: none; -} -.sp-container.sp-buttons-disabled .sp-button-container { - display: none; -} -.sp-palette-only .sp-picker-container { - display: none; -} -.sp-palette-disabled .sp-palette-container { - display: none; -} - -.sp-initial-disabled .sp-initial { - display: none; -} - - -/* Gradients for hue, saturation and value instead of images. Not pretty... but it works */ -.sp-sat { - background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0))); - background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0)); - background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); - background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); - background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); - background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0)); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)"; - filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81'); -} -.sp-val { - background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0))); - background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0)); - background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); - background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); - background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); - background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0)); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)"; - filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000'); -} - -.sp-hue { - background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); - background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); - background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); - 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)); - background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); -} - -/* IE filters do not support multiple color stops. - Generate 6 divs, line them up, and do two color gradients for each. - Yes, really. - */ -.sp-1 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00'); -} -.sp-2 { - height:16%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00'); -} -.sp-3 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff'); -} -.sp-4 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff'); -} -.sp-5 { - height:16%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff'); -} -.sp-6 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000'); -} - -.sp-hidden { - display: none !important; -} - -/* Clearfix hack */ -.sp-cf:before, .sp-cf:after { content: ""; display: table; } -.sp-cf:after { clear: both; } -.sp-cf { *zoom: 1; } - -/* Mobile devices, make hue slider bigger so it is easier to slide */ -@media (max-device-width: 480px) { - .sp-color { right: 40%; } - .sp-hue { left: 63%; } - .sp-fill { padding-top: 60%; } -} -.sp-dragger { - border-radius: 5px; - height: 5px; - width: 5px; - border: 1px solid #fff; - background: #000; - cursor: pointer; - position:absolute; - top:0; - left: 0; -} -.sp-slider { - position: absolute; - top:0; - cursor:pointer; - height: 3px; - left: -1px; - right: -1px; - border: 1px solid #000; - background: white; - opacity: .8; -} - -/* -Theme authors: -Here are the basic themeable display options (colors, fonts, global widths). -See http://bgrins.github.io/spectrum/themes/ for instructions. -*/ - -.sp-container { - border-radius: 0; - background-color: #ECECEC; - border: solid 1px #f0c49B; - padding: 0; -} -.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue -{ - font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} -.sp-top -{ - margin-bottom: 3px; -} -.sp-color, .sp-hue -{ - border: solid 1px #666; -} - -/* Input */ -.sp-input-container { - float:right; - width: 100px; - margin-bottom: 4px; -} -.sp-initial-disabled .sp-input-container { - width: 100%; -} -.sp-input { - font-size: 12px !important; - border: 1px inset; - padding: 4px 5px; - margin: 0; - width: 100%; - background:transparent; - border-radius: 3px; - color: #222; -} -.sp-input:focus { - border: 1px solid orange; -} -.sp-input.sp-validation-error -{ - border: 1px solid red; - background: #fdd; -} -.sp-picker-container , .sp-palette-container -{ - float:left; - position: relative; - padding: 10px; - padding-bottom: 300px; - margin-bottom: -290px; -} -.sp-picker-container -{ - width: 172px; - border-left: solid 1px #fff; -} - -/* Palettes */ -.sp-palette-container -{ - border-right: solid 1px #ccc; -} - -.sp-palette .sp-thumb-el { - display: block; - position:relative; - float:left; - width: 24px; - height: 15px; - margin: 3px; - cursor: pointer; - border:solid 2px transparent; -} -.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active { - border-color: orange; -} -.sp-thumb-el -{ - position:relative; -} - -/* Initial */ -.sp-initial -{ - float: left; - border: solid 1px #333; -} -.sp-initial span { - width: 30px; - height: 25px; - border:none; - display:block; - float:left; - margin:0; -} - -/* Buttons */ -.sp-button-container { - float: right; -} - -/* Replacer (the little preview div that shows up instead of the ) */ -.sp-replacer { - margin:0; - overflow:hidden; - cursor:pointer; - padding: 4px; - display:inline-block; - *zoom: 1; - *display: inline; - border: solid 1px #91765d; - background: #eee; - color: #333; - vertical-align: middle; -} -.sp-replacer:hover, .sp-replacer.sp-active { - border-color: #F0C49B; - color: #111; -} -.sp-replacer.sp-disabled { - cursor:default; - border-color: silver; - color: silver; -} -.sp-dd { - padding: 2px 0; - height: 16px; - line-height: 16px; - float:left; - font-size:10px; -} -.sp-preview -{ - position:relative; - width:25px; - height: 20px; - border: solid 1px #222; - margin-right: 5px; - float:left; - z-index: 0; -} - -.sp-palette -{ - *width: 220px; - max-width: 220px; -} -.sp-palette .sp-thumb-el -{ - width:16px; - height: 16px; - margin:2px 1px; - border: solid 1px #d0d0d0; -} - -.sp-container -{ - padding-bottom:0; -} - - -/* Buttons: http://hellohappy.org/css3-buttons/ */ -.sp-container button { - background-color: #eeeeee; - background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); - background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); - background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); - background-image: -o-linear-gradient(top, #eeeeee, #cccccc); - background-image: linear-gradient(to bottom, #eeeeee, #cccccc); - border: 1px solid #ccc; - border-bottom: 1px solid #bbb; - border-radius: 3px; - color: #333; - font-size: 14px; - line-height: 1; - padding: 5px 4px; - text-align: center; - text-shadow: 0 1px 0 #eee; - vertical-align: middle; -} -.sp-container button:hover { - background-color: #dddddd; - background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb); - background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb); - background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb); - background-image: -o-linear-gradient(top, #dddddd, #bbbbbb); - background-image: linear-gradient(to bottom, #dddddd, #bbbbbb); - border: 1px solid #bbb; - border-bottom: 1px solid #999; - cursor: pointer; - text-shadow: 0 1px 0 #ddd; -} -.sp-container button:active { - border: 1px solid #aaa; - border-bottom: 1px solid #888; - -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; -} -.sp-cancel -{ - font-size: 11px; - color: #d93f3f !important; - margin:0; - padding:2px; - margin-right: 5px; - vertical-align: middle; - text-decoration:none; - -} -.sp-cancel:hover -{ - color: #d93f3f !important; - text-decoration: underline; -} - - -.sp-palette span:hover, .sp-palette span.sp-thumb-active -{ - border-color: #000; -} - -.sp-preview, .sp-alpha, .sp-thumb-el -{ - position:relative; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); -} -.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner -{ - display:block; - position:absolute; - top:0;left:0;bottom:0;right:0; -} - -.sp-palette .sp-thumb-inner -{ - background-position: 50% 50%; - background-repeat: no-repeat; -} - -.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner -{ - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=); -} - -.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner -{ - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=); -} - -/** - * Piskel specific CSS for spectrum widgets - */ - -/* Widget's main container */ -.sp-container { - border-radius: 4px; - background-color: #2B2B2B; - border: solid 4px #888; - padding: 5px 5px 0 5px; - box-shadow : 0 0 5px 0 black; -} - -.sp-container[data-y-position=bottom] { - border-top-left-radius: 0; -} - -.sp-container[data-y-position=top] { - border-bottom-left-radius: 0; -} - -/* Color square container */ -.sp-color, .sp-hue { - border : 1px solid #222; -} - -/* Remove the padding on the input container */ -.sp-replacer { - padding: 4px; - height: 100%; - border-width: 0; - box-sizing: border-box; - -moz-box-sizing:border-box; - background-color: #444; -} - -.sp-replacer:hover { - background-color: #888; -} - -/* Hide the triangle */ -.sp-dd { - display: none; -} - -/* */ -.sp-preview { - margin-right: 0; - height: 100%; - width: 39px; - border-width: 0; -} - -.sp-palette-row-selection { - max-width: 62px; -} - -.sp-palette .sp-thumb-el { - margin : 0 5px 5px 0; - width: 24px; - height: 24px; - border-color: #444; - -} - -.sp-picker-container, .sp-palette-container { - padding-top: 5px; - padding-right: 5px; - padding-left: 5px; - border-left-width: 0; - border-right-width: 0; -} - -.sp-picker-container { - padding: 5px; - padding-bottom: 300px; - margin-bottom: -295px; -} - -.sp-slider { - height: 5px; - left: -2px; - right: -2px; - border: 2px solid white; - background: rgba(255,255,255,0); - opacity: 1; - border-radius: 2px; - box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(0,0,0,0.5); -} - -.sp-dragger { - border-radius: 8px; - height: 12px; - width: 12px; - border: 2px solid white; - background: none; - box-sizing:border-box; - -moz-box-sizing:border-box; - box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(0,0,0,0.5); -} - -.sp-palette .sp-thumb-el.sp-thumb-active { - border-color: gold; - box-shadow: 0 0 0px 1px gold; -} - -.sp-input { - border: 1px solid #666; - margin: 0; - background: #111; - border-radius: 2px; - color: #D3D3D3; - font-family: Courier!important; -} - -.sp-input.sp-validation-error { - background: #330000; -} -/*! - * Bootstrap v2.1.1 - * - * Copyright 2012 Twitter, Inc - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Designed and built with all the love in the world @twitter by @mdo and @fat. - */ -.clearfix { - *zoom: 1; -} -.clearfix:before, -.clearfix:after { - display: table; - content: ""; - line-height: 0; -} -.clearfix:after { - clear: both; -} -.hide-text { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; -} -.input-block-level { - display: block; - width: 100%; - min-height: 30px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -.tooltip { - position: absolute; - z-index: 1030; - display: block; - visibility: visible; - padding: 5px; - font-size: 11px; - opacity: 0; - filter: alpha(opacity=0); -} -.tooltip.in { - opacity: 0.8; - filter: alpha(opacity=80); -} -.tooltip.top { - margin-top: -3px; -} -.tooltip.right { - margin-left: 3px; -} -.tooltip.bottom { - margin-top: 3px; -} -.tooltip.left { - margin-left: -3px; -} -.tooltip-inner { - max-width: 200px; - padding: 3px 8px; - color: #ffffff; - text-align: center; - text-decoration: none; - background-color: #000000; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} -.tooltip.top .tooltip-arrow { - bottom: 0; - left: 50%; - margin-left: -5px; - border-width: 5px 5px 0; - border-top-color: #000000; -} -.tooltip.right .tooltip-arrow { - top: 50%; - left: 0; - margin-top: -5px; - border-width: 5px 5px 5px 0; - border-right-color: #000000; -} -.tooltip.left .tooltip-arrow { - top: 50%; - right: 0; - margin-top: -5px; - border-width: 5px 0 5px 5px; - border-left-color: #000000; -} -.tooltip.bottom .tooltip-arrow { - top: 0; - left: 50%; - margin-left: -5px; - border-width: 0 5px 5px; - border-bottom-color: #000000; -} - -.tooltip { - line-height: 20px; -} - -.tooltip.in { - opacity: 0.95; - filter: alpha(opacity=95); -} - -.tooltip { - line-height: 20px; -} -.preview-list-wrapper { - position: relative; - height: 100%; - overflow: hidden; -} - -.preview-list-scroller { - overflow-y: scroll; - overflow-x: hidden; - height: 100%; -} - -.top-overflow, -.bottom-overflow { - height: 20px; - position: absolute; - left: 0; - right: 12px; - - -webkit-transition: all 500ms ease-out; - -moz-transition: all 500ms ease-out; - -ms-transition: all 500ms ease-out; - -o-transition: all 500ms ease-out; - transition: all 500ms ease-out; - - background-image: linear-gradient(45deg, rgba(0,0,0, 0.8) 25%, transparent 25%, transparent 75%, rgba(0,0,0, 0.8) 75%, rgba(0,0,0, 0.8)), - linear-gradient(-45deg, rgba(0,0,0, 0.8) 25%, transparent 25%, transparent 75%, rgba(0,0,0, 0.8) 75%, rgba(0,0,0, 0.8)); - background-size: 29px 45px; - background-repeat: repeat-x; - background-position-x: 3px; - z-index: 10; -} - -.top-overflow { - top: -20px; -} - -.bottom-overflow { - bottom: -20px; - background-position-x: 0; - background-position-y: -23px; -} - -.top-overflow-visible .top-overflow { - top: 0; -} - -.bottom-overflow-visible .bottom-overflow { - bottom: 0; -} - -.preview-list { - list-style-type: none; - padding-right: 7px; -} - -.add-frame-action { - border: #888 solid 4px; - font-size: 13px; - color: #888; - cursor: pointer; - padding: 6px 0; - border-radius: 4px; - margin-top: 8px; - background-image: url(../img/plus.png); - background-repeat: no-repeat; - background-position: 3px 7px; - background-size: 26px 26px; - text-indent: 18px; - background-color: #222; -} - -.add-frame-action .label { - width: 80px; - margin: 0 auto; -} - -.add-frame-action:hover { - border-color: gold; -} - -.preview-tile { - position: relative; - border: #444 3px solid; - border-radius: 3px; - margin: 5px 0; - width: 96px; - height: 96px; -} - -.preview-tile:first-child { - margin-top: 0; -} - -.preview-tile:hover { - border: #999 3px solid; -} - -.tile-view { - position : relative; -} - -.preview-tile .tile-overlay { - z-index: 10; - position: absolute; - background-color: rgba(100, 100, 100, 0.6); - opacity: 0; - height: 30px; - width: 30px; - border: none; -} - -.preview-tile:hover .tile-overlay { - opacity: 1.0; -} - -.preview-tile .tile-overlay.tile-count { - display: block; - opacity: 1.0; - border-bottom-right-radius: 3px; - top: 0; - left: 0; - font-size: 14px; - line-height: 30px; - color: white; - font-weight: bold; - text-align: center; - cursor: default; -} - -.preview-tile .tile-overlay.delete-frame-action { - background-image: url(../img/garbage.png); - background-repeat: no-repeat; - top: 0; - right: 0; - border-bottom-left-radius: 3px; - height: 30px; - width: 30px; - background-position: 5px 5px; - background-size: 20px; - cursor: pointer; -} - -.preview-tile .tile-overlay.duplicate-frame-action { - bottom: 0; - right: 0; - border-bottom-left-radius: 3px; - background-image: url(../img/duplicate.png); - background-repeat: no-repeat; - background-position: 5px 5px; - background-size: 20px; - cursor: pointer; -} - -.preview-tile .tile-overlay.dnd-action { - bottom: 0; - left: 0; - border-top-right-radius: 3px; - background-image: url(../img/dragndrop.png); - background-repeat: no-repeat; - background-position: 5px 5px; - background-size: 20px; - cursor: move; -} - -.preview-tile.selected { - border-color: gold; -} - -.preview-tile.selected:after { - content: " "; - position: absolute; - top: 38px; - right: -15px; - border: transparent 4px solid; - border-left-color: gold; - border-width: 6px; - border-style: solid; -} - - -/** - * Drag n drop styles. - */ - -.preview-tile-drop-proxy { - border: 3px dashed gold; - height: 90px; - border-radius: 9px; - background-color: rgba(255, 215,0, 0.2); -} - -.minimap-crop-frame { - position:absolute; - border:1px solid rgba(255,255,255,0.5); - z-index:100; - box-sizing : border-box; - -moz-box-sizing : border-box; - cursor : pointer; -} \ No newline at end of file diff --git a/css/piskel-style-packaged-2015-02-19-01-09.css b/css/piskel-style-packaged-2015-02-19-01-09.css deleted file mode 100644 index dc800a80..00000000 --- a/css/piskel-style-packaged-2015-02-19-01-09.css +++ /dev/null @@ -1,2947 +0,0 @@ -html, body { - height : 100%; width: 100%; - margin : 0; - overflow: hidden; - cursor : default; - font-family: arial; - font-size: 11px; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -ul, li { - margin : 0; - padding : 0; - list-style-type: none; -} - - -/* Force apparition of scrollbars on leopard */ -::-webkit-scrollbar { - -webkit-appearance: none; - width: 6px; -} - -::-webkit-scrollbar-thumb { - border-radius: 2px; - background-color: #666; -} - -::-webkit-scrollbar-track { - background-color: rgba(50, 50, 50, 0.4); -} - -a, a:visited { - color:gold; -} -body { - background: #1D1D1D; -} - -/* Browser fixes */ -::-ms-clear { - display: none; -} - -.allow-user-select { - -webkit-touch-callout: initial; - -webkit-user-select: initial; - -khtml-user-select: initial; - -moz-user-select: initial; - -ms-user-select: initial; - user-select: initial; -} - -.no-overflow { - overflow : hidden; -} - -.image-link { - color : gold; -} - -.pull-top, -.pull-right, -.pull-bottom, -.pull-left { - position:absolute; -} - -.pull-top { - top:0; -} - -.pull-right { - right:0; -} - -.pull-bottom { - bottom:0; -} - -.pull-left { - left:0; -} - -.uppercase { - text-transform: uppercase; -} - -/** - * Application layout - */ - -.main-wrapper { - position: absolute; - top: 5px; - right: 0; - bottom: 5px; - left: 0; -} - -.column-wrapper { - text-align: center; - font-size: 0; - position: absolute; - left: 100px; /* Reserve room for tools on the left edge of the screen. */ - top: 0; - right: 50px; /* Reserve room for actions on the right edge of the screen. */ - bottom: 0; -} - -.column { - display: inline-block; -} - -.left-column { - vertical-align: top; - height: 100%; - margin-right: 7px; -} - -.main-column { - height: 100%; - position: relative; -} - -.right-column { - vertical-align: top; - margin-left: 10px; - height: 100%; - position: relative; -} - -.drawing-canvas-container { - font-size: 0; -} - -.sticky-section { - position: fixed; - top: 0; - bottom: 0; - z-index: 1000; -} - -.sticky-section .sticky-section-wrap { - display: table; - height: 100%; -} - -.sticky-section .vertical-centerer { - display: table-cell; - vertical-align: middle; -} - -.left-sticky-section.sticky-section { - left: 0; - max-width: 100px; -} - -.left-sticky-section .tool-icon { - float: left; -} - -.cursor-coordinates { - color:#888; - font-size:12px; - font-weight:bold; - font-family:Courier; -} - -/** - * Canvases layout - */ - -.canvas { - position: relative; - z-index: 1; -} - -.canvas-container { - position: relative; - display: block; -} - -.canvas-container .canvas-background { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; -} - -.light-picker-background, -.light-canvas-background .canvas-background { - background: url(../img/canvas_background/light_canvas_background.png) repeat; -} - -.medium-picker-background, -.medium-canvas-background .canvas-background { - background: url(../img/canvas_background/medium_canvas_background.png) repeat; -} - -.lowcont-medium-picker-background, -.lowcont-medium-canvas-background .canvas-background { - background: url(../img/canvas_background/lowcont_medium_canvas_background.png) repeat; -} - -.lowcont-dark-picker-background, -.lowcont-dark-canvas-background .canvas-background { - background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat; -} - -.layers-canvas, -.canvas.onion-skin-canvas { - opacity: 0.2; -} - -.canvas.canvas-overlay, -.canvas.layers-canvas, -.canvas.onion-skin-canvas { - position: absolute; - top: 0; - left: 0; -} - -.tools-wrapper, -.options-wrapper, -.palette-wrapper { - float : left; -} - -/** - * Z-indexes should match the drawing area canvas superposition order : - * - 1 : draw layers below current layer - * - 2 : draw current layer - * - 3 : draw layers above current layer - * - 4 : draw the tools overlay - */ -.canvas.layers-below-canvas {z-index: 7;} -.canvas.drawing-canvas {z-index: 8;} -.canvas.canvas-overlay {z-index: 9;} -.canvas.onion-skin-canvas {z-index: 10;} -.canvas.layers-above-canvas {z-index: 11;} -@font-face { - font-family: 'piskel'; - src:url('fonts/icomoon.eot?-3olv93'); - src:url('fonts/icomoon.eot?#iefix-3olv93') format('embedded-opentype'), - url('fonts/icomoon.woff?-3olv93') format('woff'), - url('fonts/icomoon.ttf?-3olv93') format('truetype'), - url('fonts/icomoon.svg?-3olv93#icomoon') format('svg'); - font-weight: normal; - font-style: normal; -} - -[class^="piskel-icon-"], [class*=" piskel-icon-"] { - font-family: 'piskel'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.piskel-icon-eye:before { - content: "\e602"; -} - -.piskel-icon-onion:before { - content: "\e601"; -} - -.piskel-icon-download:before { - content: "\e600"; -} - -.piskel-icon-rotateleft:before { - content: "\e603"; -} - -.piskel-icon-rotateright:before { - content: "\e604"; -} - -.piskel-icon-fliph:before { - content: "\e605"; -} - -.piskel-icon-flipv:before { - content: "\e606"; -} - -.piskel-icon-trashplain:before { - content: "\e607"; -} - -.piskel-icon-trash:before { - content: "\e608"; -} - -.piskel-icon-merge:before { - content: "\e609"; -} - -.piskel-icon-pencil:before { - content: "\e610"; -} - -.piskel-icon-close:before { - content: "\e611"; -} - -.piskel-icon-minus:before { - content: "\e60a"; -} - -.piskel-icon-plus:before { - content: "\e60b"; -} - -.piskel-icon-arrow-up-fat:before { - content: "\e60c"; -} - -.piskel-icon-arrow-down-fat:before { - content: "\e60d"; -} - -.piskel-icon-arrow-up-thin:before { - content: "\e60e"; -} - -.piskel-icon-arrow-down-thin:before { - content: "\e60f"; -} - -.row { - display: block; -} - -.textfield { - background : black; - border : 1px solid #888; - border-radius : 2px; - padding : 3px 10px; - color : white; - - box-sizing:border-box; - -moz-box-sizing:border-box; -} - -.textfield[disabled=disabled] { - background : #3a3a3a; -} - -.textfield-small { - width : 50px; -} - -.button { - height: 24px; - box-sizing: border-box; - - background-color: #3f3f3f; - border: 1px solid #333; - border-top-color: #666; - border-bottom-color: #222; - - cursor: pointer; - text-decoration: none; - - color: white; - text-shadow: 0px -1px 0 black; - font-weight: bold; - font-size: 1rem; - text-align: center; - - transition: background-color 0.2s linear; -} - -.button:hover { - text-decoration: none; - background-color: #484848; - color: gold; -} - -.button-primary { - background-color: rgb(255,215,0); /* gold */ - - border-color: rgb(179, 164, 0); - border-top-color: white; - border-bottom-color: rgb(151, 133, 0); - - color: black; - text-shadow: 0px 1px 0 #fff; -} - -.button-primary:hover { - background-color: rgb(255,235,20); - color: #333; -} - -.button[disabled], -.button[disabled]:hover { - cursor:default; - background-color: #aaa; - color: #777; - text-shadow: 0px 1px 0 #bbb; - border-color: #666; - border-top-color: #999; - border-bottom-color: #555; -} - -/** Righty sticky drawer expanded state. */ - -.right-sticky-section.sticky-section { - right: 0; - width: 47px; - - -webkit-transition: all 200ms ease-out; - -moz-transition: all 200ms ease-out; - -ms-transition: all 200ms ease-out; - -o-transition: all 200ms ease-out; - transition: all 200ms ease-out; -} - -.right-sticky-section.expanded { - right: 280px; -} - -.right-sticky-section .tool-icon { - float: right; - margin-right: 0; -} - -/********************************************************** *j* j** j*j j j j** *****************/ -/* Settings icons I I I I I\I \ */ -/********************************************************** *** *** *** * * '** *****************/ - -.tool-icon.gallery-icon { - background-image: url(../img/gallery.png); - background-position: 3px 3px; - background-size: 39px 39px; -} - -.tool-icon.resize-icon { - background-image: url(../img/resize-icon.png); - background-position: 10px 10px; - background-size: 26px 26px; -} - -.tool-icon.save-icon { - background-image: url(../img/save.png); - background-position: 6px 6px; - background-size: 36px 36px; -} - -.tool-icon.gear-icon { - background-image: url(../img/gear.png); - background-position: 6px 7px; - background-size: 32px 32px; -} - -.tool-icon.export-icon { - background-image: url(../img/export.png); - background-position: 7px 5px; - background-size: 36px 36px; - position: relative; -} - -.tool-icon.local-storage-icon { - background-image: url(../img/local-storage-icon.png); - background-position: 10px 12px; - background-size: 30px; - position: relative; -} - -.tool-icon.import-icon { - background-image: url(../img/import-icon.png); - background-position: 10px 5px; - background-size: 26px; - position: relative; -} - -.tool-icon .label { - position: absolute; - left: 0; - bottom: 4px; - right: 0; - font-size: 11px; - text-transform: uppercase; - color: #fff; - text-align: center; -} - -.drawer-content { - overflow: hidden; - background-color: #444; - height: 550px; - max-height: 100%; - width: 280px; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - box-shadow: 0 0 5px 0 black; -} - -.right-sticky-section.expanded .tool-icon { - padding-right: 1px; -} - -.right-sticky-section .tool-icon.has-expanded-drawer { - position: relative; - background-color: #444; - margin-right: 0; - padding-right: 2px; - border-left : 3px solid gold; -} - -/************************************************************************************************/ -/* Common settings classes */ -/************************************************************************************************/ - -.settings-section { - margin: 10px 20px; - font-size: 12px; - font-weight: bold; - color: #ccc; - text-shadow: 1px 1px #000; -} - -.settings-section .button { - margin: 0; -} - -.settings-title { - color : gold; - margin-top: 20px; - margin-bottom: 10px; - text-transform: uppercase; - border-bottom: 1px #aaa solid; - padding-bottom: 5px; - color: gold; -} - -.settings-description { - margin : 0 0 10px 0; - display : inline-block; -} - -.settings-form-section { - margin-bottom: 10px; -} - -.settings-item { - margin : 10px 0; -} - -[name*=checkbox] { - vertical-align: middle; -} - -/************************************************************************************************/ -/* Application settings */ -/************************************************************************************************/ - -.background-picker-wrapper { - overflow: hidden; - padding: 5px; -} - -.background-picker { - cursor: pointer; - float: left; - height: 35px; - width: 35px; - background-color: transparent; - margin-right: 15px; - padding: 1px; - position: relative; -} - -.background-picker:after { - content: " "; - position: absolute; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; -} - -.background-picker:hover:after { - border: #eee 1px solid; -} - -.background-picker.selected:after { - border: gold 1px solid; -} - - - -/************************************************************************************************/ -/* Save panel */ -/************************************************************************************************/ - -.save-field { - width: 100%; -} - -.save-status { - margin-top: 10px; - margin-bottom: -10px; - vertical-align: middle; - font-weight: normal; - text-shadow: none; - font-style: italic; -} - -.save-file-name { - white-space: nowrap; - font-weight: bold; - color: white; - font-style: normal; -} -/*******************************/ -/* Gif/Png Export Setting panel*/ -/*******************************/ -.gif-download-button, -.gif-render-button { - margin-top : 10px; - margin-right : 10px; -} - -.gif-export-preview, -.png-export-preview { - position:relative; - margin-top:10px; - max-height:32px; -} - -.gif-export-preview { - max-width:32px; -} - -.png-export-preview img { - max-height:32px; - float: left; -} - -.gif-upload-status { - width: 180px; - margin-left: 5px; - margin-top: 10px; -} - -.gif-upload, -.png-export-preview { - overflow: hidden; -} - -.gif-upload-status, -.gif-export-preview { - float : left; -} - -.preview-upload-ongoing:before{ - content: "Upload ongoing ..."; - position: absolute; - display: block; - height: 100%; - width: 100%; - text-align: center; - padding-top: 45%; - box-sizing:border-box; - -moz-box-sizing:border-box; - background: rgba(0,0,0,0.5); - color: white; -} -/************************************************************************************************/ -/* Import panel */ -/************************************************************************************************/ - -.import-section, -.resize-section { - margin: 10px 0; -} - -.file-input-button { - margin-right: 8px; - border-radius: 2px; -} - -.import-highlight { - font-weight: bold; - color: white; -} -.resize-section-title { - vertical-align: top; - display: inline-block; - padding-top: 5px; - width: 25%; -} - -.resize-content-checkbox { - margin-left: 0; -} - -.resize-origin-container { - overflow: hidden; - position: relative; - width: 70px; - margin-top: 5px; - display: inline-block; -} - -.resize-origin-option { - float: left; - box-sizing: border-box; - position: relative; - margin: 0 1px 1px 0; - width: 20px; - height: 20px; - background : #888; - font-size: 8px; - text-align: center; - cursor: pointer; -} - -.resize-origin-option.selected { - border : 3px solid gold; -} - -.resize-origin-option:before { - content: ''; - position: absolute; - display: block; - top: 50%; - left: 50%; - margin: -2px; -} - -.resize-origin-option.selected:before { - content: ''; - width: 4px; - height: 4px; - background: gold; -} - -.resize-origin-option[data-neighbor]:before { - width: 0; - height: 0; - border-width: 4px; - border-style: solid; - border-color: transparent; -} - -.resize-origin-option[data-neighbor="bottom"]:before { - border-top-color: gold; - margin-left: -4px; -} - -.resize-origin-option[data-neighbor="left"]:before { - border-right-color: gold; - margin-top: -4px; - margin-left: -6px; -} - -.resize-origin-option[data-neighbor="top"]:before { - border-bottom-color: gold; - margin-top: -6px; - margin-left: -4px; -} - -.resize-origin-option[data-neighbor="right"]:before { - border-left-color: gold; - margin-top: -4px; -} - -.resize-ratio-checkbox, -.resize-smooth-checkbox { - vertical-align: -2px; - margin-left: 0; -} -.tool-icon { - position : relative; - cursor : pointer; - width: 46px; - height: 46px; - margin: 1px; - background-color: #3a3a3a; - background-repeat: no-repeat; - background-position: 12px 12px; - background-size: 24px 24px; -} - -.tool-icon.selected { - cursor: default; - background-color: #444; -} - -.tool-icon.selected:before { - content:""; - position : absolute; - height : 100%; - width : 100%; - border: 3px solid gold; - box-sizing: border-box; - -moz-box-sizing: border-box; -} - -.tool-icon:hover { - background-color: #444; -} - -/* - * Tool icons: - */ -.tool-icon.tool-pen { - background-image: url(../img/tools/pen.png); -} - -.tool-icon.tool-vertical-mirror-pen { - background-image: url(../img/tools/mirror.png); - background-position: 0px 10px; - background-size: 38px 27px; -} - -.tool-icon.tool-paint-bucket { - background-image: url(../img/tools/paintbucket.png); -} - -.tool-icon.tool-eraser { - background-image: url(../img/tools/eraser.png); -} - -.tool-icon.tool-stroke { - background-image: url(../img/tools/stroke.png); -} - -.tool-icon.tool-rectangle { - background-image: url(../img/tools/rectangle.png); - background-position: 12px 14px; - background-size: 24px 20px; -} - -.tool-icon.tool-circle { - background-image: url(../img/tools/circle.png); -} - -.tool-icon.tool-move { - background-image: url(../img/tools/hand.png); - background-size: 24px 24px; -} - -.tool-icon.tool-rectangle-select { - background-image: url(../img/tools/rectangle_selection.png); - background-position: 12px 14px; - background-size: 24px 20px; -} - -.tool-icon.tool-shape-select { - background-image: url(../img/tools/magicwand.png); -} - -.tool-icon.tool-lighten { - background-image: url(../img/tools/lighten.png); - background-position: 8px 8px; - background-size: 30px 30px; -} - -.tool-icon.tool-colorpicker { - background-image: url(../img/tools/eyedropper.png); - background-size: 23px 23px; -} - -.tool-icon.tool-colorswap { - background-image: url(../img/tools/swap-colors.png); - background-position: 6px 6px; - background-size: 36px 36px; -} - -.tool-icon.tool-flip { - background-image: url(../img/tools/flip.png); - background-position: 7px 11px; - background-size: 32px; -} - -.tool-icon.tool-rotate { - background-image: url(../img/tools/rotate.png); - background-position: 10px 9px; - background-size: 26px; -} - -.tool-icon.tool-clone { - background-image: url(../img/tools/clone.png); - background-position: 9px 15px; - background-size: 30px; -} - -/* - * Tool cursors: - */ - -.tool-paint-bucket .drawing-canvas-container:hover, -.tool-colorswap .drawing-canvas-container:hover { - cursor: url(../img/icons/paint-bucket.png) 12 12, pointer; -} - -.tool-vertical-mirror-pen .drawing-canvas-container:hover { - cursor: url(../img/icons/vertical-mirror-pen.png) 5 15, pointer; -} - -.tool-pen .drawing-canvas-container:hover, -.tool-lighten .drawing-canvas-container:hover { - cursor: url(../img/icons/pen.png) 0 15, pointer; -} - -.tool-eraser .drawing-canvas-container:hover { - cursor: url(../img/icons/eraser.png) 0 15, pointer; -} - -.tool-stroke .drawing-canvas-container:hover { - cursor: url(../img/icons/pen.png) 0 15, pointer; -} - -.tool-rectangle .drawing-canvas-container:hover { - cursor: url(../img/icons/rectangle.png) 0 15, pointer; -} - -.tool-circle .drawing-canvas-container:hover { - cursor: url(../img/icons/circle.png) 2 15, pointer; -} - -.tool-move .drawing-canvas-container:hover { - cursor: url(../img/icons/hand.png) 15 15, pointer; -} - -.tool-rectangle-select .drawing-canvas-container:hover { - cursor: crosshair; -} - -.tool-shape-select .drawing-canvas-container:hover { - cursor: url(../img/icons/wand.png) 15 15, pointer; -} - -.tool-colorpicker .drawing-canvas-container:hover { - cursor: url(../img/icons/dropper.png) 0 15, pointer; -} - -.swap-colors-icon { - background-image: url(../img/tools/swap-arrow-square-small-grey.png); - position: relative; - top: 50px; - left: 6px; - height: 18px; - width: 18px; - background-size: 18px; - opacity : 0.3; - cursor : pointer; -} - -.swap-colors-icon:hover { - opacity : 1; -} - -.tool-color-picker { - position:relative; -} - -.tool-color-picker:nth-child(1) { - z-index : 100; -} - -.tool-color-picker:nth-child(2) { - z-index : 90; - margin-top: 25px; - margin-left:-20px; -} - -.tool-color-picker input { - width: 16px; - height: 16px; - text-indent: -10000px; - border: 1px solid black; - background: white; - cursor: pointer; - position : relative; - top: 10px; - margin-left: 2px; -} - -.tool-color-picker .secondary-color-picker { - top : 18px; - margin-left: 0; -} - -.palette-wrapper { - margin-top: 10px; - margin-left: 10px; -} - -.palette-color[data-color=TRANSPARENT] { - position: relative; - top: 10px; - left: 10px; - background-color: white; - height : 16px; - width : 16px; - border: 2px solid #000; - background-size: 16px 16px; - background-position: 0 0; - background-image: -webkit-gradient( - linear, - left top, - right bottom, - color-stop(0, #fff), - color-stop(0.45, #fff), - color-stop(0.5, #ff0000), - color-stop(0.55, #fff), - color-stop(1, #fff) - ); - background-image: -moz-linear-gradient( - left top, - #fff 0%, - #fff 45%, - #f00 50%, - #fff 55%, - #fff 100% - ); -} - -.tools-tooltip-container { - text-align: left; - padding-bottom: 5px; -} - -.tools-tooltip-shortcut { - color:gold; -} - -.tools-tooltip-descriptor { - color:#999; -} - -.tools-tooltip-descriptor-button { - padding:2px; - border:1px Solid #999; - font-size:0.8em; - margin-right:5px; - width:35px; - text-align:center; - border-radius:3px; - display:inline-block; - line-height: 10px; -} - - -.action-icon { - cursor: pointer; - height: 100%; - background-repeat: no-repeat; - background-position: 50%; -} - -.edit-icon { - background-image: url('../img/tools/pen.png'); - background-repeat: no-repeat; -} - -.merge-icon { - background-image: url('../img/merge-icon.png'); - background-repeat: no-repeat; -} - -.plus-icon { - font-size:15px; - text-align:center; -} - -.delete-icon { -} -.cheatsheet-link { - position: fixed; - bottom: 10px; - left: 10px; - - padding: 1px 0 0 45px; - color : gold; - font-weight: bold; - font-size : 1.25em; - line-height: 20px; - - cursor : pointer; - - background-image:url('../img/keyboard.png'); - background-size:35px 20px; - background-repeat:no-repeat; - opacity: 0.5; - z-index: 11000; - transition : opacity 0.3s; -} - -.cheatsheet-link:hover { - opacity: 1; -} - -#cheatsheet-wrapper { - position: absolute; - z-index: 10000; - - top: 0; - right: 0; - bottom: 0; - left: 0; - - padding: 50px; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - color: white; -} - -.cheatsheet-container { - width: 100%; - height: 100%; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - padding: 20px 3%; - border-radius: 3px; - background: rgba(0,0,0,0.9); - overflow: auto; -} - -.cheatsheet-container h3 { - font-size:24px; - margin-top: 0; -} - -.cheatsheet-section { - float: left; - width : 33%; -} - -.cheatsheet-shortcut { - overflow: hidden; - margin: 10px 0; -} - -.cheatsheet-icon.tool-icon { - float: left; - display: inline-block; - - height: 30px; - width: 30px; - margin: 0 20px 0 0; - - background-size: 20px 20px; - background-position: 5px 5px; -} - -.cheatsheet-description { - font-family:Courier; - color: white; - font-size : 13px; - margin-left: 20px; - line-height : 30px; -} - -.cheatsheet-key { - display : inline-block; - height: 30px; - line-height: 30px; - padding: 0 10px; - - border : 1px solid gold; - border-radius: 2px; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - text-align: center; - font-family:Courier; - font-weight: bold; - font-size : 18px; - color: gold; -} -.color-picker-slider * { - box-sizing: border-box; -} - -.color-picker-slider input[type="range"] { - -webkit-appearance: none; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - width: 100%; - border: none; - padding: 1px 2px; - border-radius: 3px; - background-image: linear-gradient(to right, hsl(0, 30%, 70%) 0, hsl(359, 30%, 70%) 100%); - box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42; - outline: none; /* no focus outline */ -} - -/* thumb */ - -.color-picker-slider input[type="range"]::-webkit-slider-thumb { - -webkit-appearance: none; - cursor:pointer; - width: 7px; - height: 18px; - border: none; - border-radius: 2px; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #529de1), color-stop(100%, #245e8f)); /* android <= 2.2 */ - background-image: -webkit-linear-gradient(top , #529de1 0, #245e8f 100%); /* older mobile safari and android > 2.2 */; - background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */ -} -.color-picker-slider input[type="range"]::-moz-range-thumb { - width: 7px; - height: 18px; - border: none; - border-radius: 2px; - background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */ -} - -.color-picker-slider input[type="range"]::-ms-thumb { - width: 7px; - height: 18px; - border-radius: 2px; - border: 0; - background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */ -} - -/*CROSS BROWSER RESET*/ - - -.color-picker-slider input[type="range"]::-moz-range-track { - border: inherit; - background: transparent; -} - -.color-picker-slider input[type="range"]::-ms-track { - border: inherit; - color: transparent; /* don't drawn vertical reference line */ - background: transparent; -} - -.color-picker-slider input[type="range"]::-ms-fill-lower, -.color-picker-slider input[type="range"]::-ms-fill-upper { - background: transparent; -} - -.color-picker-slider input[type="range"]::-ms-tooltip { - display: none; -} - -.color-picker-slider, -.color-picker-input { - padding: 0 10px; - height : 25px; - overflow: hidden; -} - -.color-picker-slider span{ - line-height : 25px; - width : 10px; - float:left; -} - -.color-picker-slider input[type="range"]{ - float:left; - height : 10px; - width : 100px; - margin: 7px 1px 7px 8px; -} - -.color-picker-slider input[type="text"]{ - float:left; - width : 47px; - margin-left: 5px; -} - -.color-picker-input { - margin-bottom: 10px; -} - -.color-picker-input .textfield{ - width:100%; -} - -.color-picker-slider input[type="range"][data-dimension="h"] { - background-image:linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); -} -#dialog-container-wrapper { - position: absolute; - z-index: 20000; - - top: 0; - right: 0; - bottom: 0; - left: 0; - - padding: 50px 150px; - overflow: hidden; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - background-color: rgba(0,0,0,0.8); - opacity: 0; - pointer-events: none; - - color: white; -} - -#dialog-container-wrapper.animated { - transition: opacity 0.5s; -} - -#dialog-container-wrapper.show { - opacity: 1; - pointer-events: auto; -} - -#dialog-container { - width: 100%; - height: 100%; - - margin-top: -1500px; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - border-radius: 3px; - border : 3px solid gold; - background: #444; - overflow: auto; -} - -.animated #dialog-container { - transition:margin-top 0.5s; -} - -.show #dialog-container { - margin-top: 0; -} - -#dialog-container.browse-local { - width: 700px; - height: 500px; - top : 50%; - left : 50%; - position : absolute; - margin-left: -350px; -} - -.show #dialog-container.browse-local { - margin-top: -250px; -} - -#dialog-container.import-image { - width: 500px; - height: 300px; - top : 50%; - left : 50%; - position : absolute; - margin-left: -250px; -} - -.show #dialog-container.import-image { - margin-top: -150px; -} - -.dialog-wrapper { - height: 100%; - position : relative; -} - -.dialog-head { - width: 100%; - background: gold; - margin: 0; - padding: 10px; - color: black; - font-size: 1.8em; - box-sizing: border-box; - -moz-box-sizing: border-box; -} - -.dialog-close { - position: absolute; - top: 0; - right: 0; - line-height: 45px; - margin-right: 10px; - font-size: 1.3em; - cursor: pointer; -} -/************************************************************************************************/ -/* Import dialog */ -/************************************************************************************************/ - -.import-section-preview { - display : inline-block; - height : 60px; - width: 60px; - border : 1px dashed #999; - border-radius: 3px; -} - -.dialog-section-title { - display : inline-block; - width: 55px; -} - -.import-size-field, -.resize-size-field { - width: 50px; - margin-right: 8px; - text-align: right; -} - -.import-size-field:nth-of-type(2), -.resize-size-field:nth-of-type(2) { - margin-left: 5px; -} - -.import-image-file-name { - display: inline-block; - overflow: hidden; - - height: 2rem; - word-break : break-all; - vertical-align: middle; - font-style: italic; - font-weight: normal; - text-shadow: none; -} - -[name=smooth-resize-checkbox] { - margin : 0 8px; -} - -.dialog-import-body { - padding:10px 20px; - font-size:1.5em -} - -.import-button { - font-size: 1em; - height: auto; - padding: 5px 10px; -} - -/************************************************************************************************/ -/* Browse local piskels panel */ -/************************************************************************************************/ - -.local-piskel-list { - width: 100%; -} - -.local-piskel-item { - height: 3em; -} - -.local-piskel-name { - width: 40%; -} - -.local-piskel-save-date { - font-weight : normal; -} - -.local-piskel-list a { - text-decoration: none; -} - -.local-piskel-list a:hover { - text-decoration: underline; -} - -.local-piskel-list-head { - font-weight: bold; - color: gold; -} - -.local-piskel-load-button, -.local-piskel-delete-button { - width : 75px; -} -#dialog-container.create-palette { - width: 500px; - height: 600px; - top : 50%; - left : 50%; - position : absolute; - margin-left: -250px; -} - -.show #dialog-container.create-palette { - margin-top: -300px; -} - -.create-palette-section { - position: absolute; - left: 10px; - top: 50px; -} - -.create-palette-import-section { - display : inline-block; -} - -.colors-container { - position: absolute; - - left: 10px; - right: 10px; - top: 85px; - - height: 460px; - - border: 1px solid black; - background: #333; -} - -.color-picker-container { - position:absolute; - left : 280px; - top:0; - bottom:0; - right:0; - background: #222; -} - -.create-palette-actions { - position: absolute; - box-sizing: border-box; - - width:100%; - height: 45px; - - left: 0; - right: 0; - bottom: 0; - - padding:10px; - text-align:right; -} - -.color-preview { - width: 170px; - height: 70px; - margin: 11px; -} - -.colors-list { - overflow: auto; - width: 280px; - box-sizing: border-box; - height: 100%; - padding-bottom: 10px; -} - -.create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{ - position:relative; - float : left; - - width : 44px; - height : 44px; - margin : 10px 0 0 10px; - - box-sizing : border-box; - - cursor : pointer; -} - -@-moz-document url-prefix() { - .create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{ - margin : 7px 0 0 7px; - } -} - -@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - .create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{ - margin : 7px 0 0 7px; - } -} - - -.create-palette-color { - border:1px solid #2c2c2c; - transition : border-color 0.2s; -} -.create-palette-color:hover { - border:1px solid gold; -} - -.colors-list-drop-proxy { - border:2px dotted #eee; -} - -.create-palette-new-color { - border:2px dotted gold; - - border-radius: 2px; - line-height: 40px; - text-align: center; - font-size: 20px; - color: gold; -} - -.create-palette-color.selected { - border:2px solid gold; -} - -.create-palette-remove-color { - position: absolute; - top: 0; - right: 0; - padding: 2px 4px 0 0; - opacity : 0.2; - - font-weight: bold; - color: rgb(255,255,255); - text-shadow : 0 0 1px rgb(0,0,0); - - transition : opacity 0.3s, color 0.1s; -} - -.light-color .create-palette-remove-color { - color: rgb(0,0,0); - text-shadow : 0 0 1px rgb(255,255,255); -} - -.selected .create-palette-remove-color { - top: -1px; - right: -1px; -} - -.create-palette-color:hover .create-palette-remove-color { - opacity: 0.6; -} - -.create-palette-color .create-palette-remove-color:hover { - opacity: 1; - color: rgb(240,80,80); - text-shadow : 0 0 1px rgb(0,0,0); -} - -/*SPECTRUM OVERRIDES*/ - -.create-palette .sp-container{ - background-color: transparent; - border: none; - box-shadow : none; - border-radius:0; - padding:5px; -} -.user-message { - position: absolute; - right: 0; - bottom: 0; - padding: 10px 47px; - max-width: 300px; - - border-top-left-radius: 7px; - border: #F0C36D 1px solid; - border-right: 0; - border-bottom: 0; - - color: #222; - background-color: #F9EDBE; - - font-weight: bold; - font-size: 13px; - - z-index: 30000; -} - -.user-message .close { - position: absolute; - top: 6px; - right: 17px; - - color: gray; - - font-size: 18px; - font-weight: bold; - - cursor: pointer; -} - -.user-message .close:hover { - color: black; -} - -.progress-bar-container { - position: absolute; - left: 0; - bottom: 0; - padding: 10px; - width: 360px; - border-top-right-radius: 2px; - border: gold 2px solid; - border-left: 0; - border-bottom: 0; - background-color: #444; - font-size: 14px; - z-index: 30000; - color: #eee; -} - -.progress-bar-item { - float: left; - height:20px; -} - -.progress-bar-status { - line-height: 20px; - width : 40px; - overflow : hidden; - margin: 0 0 0 10px; -} - -.progress-bar { - border : 1px solid grey; - margin-top: 8px; - height : 4px; - width : 300px; - background : linear-gradient(to left, gold, gold) no-repeat -300px 0; - background-color : black; -} -.toolbox-container { - border: 4px solid #888; - font-size: medium; - color: white; - text-align: left; - border-radius: 4px; - margin-top: 5px; - margin-bottom: 10px; - overflow: hidden; -} - -.toolbox-title { - padding: 8px; - margin: 0; - font-size: 15px; - background: #222; -} - -/** - * Layers container - */ -.layers-list-container { -} - -/*.layers-title { - background-image: url('../img/layers.svg'); - background-size: 22px; - background-repeat: no-repeat; - background-position: 97%; -}*/ - -.layers-title { - position: relative; -} - -.layers-toggle-preview { - position: absolute; - top: 0.3em; - right: 0.5em; - - color: #999; - font-size: 1.3em; - cursor: pointer; - - transition: 0.2s linear; -} - -.layers-toggle-preview:hover { - color: white; -} - -.layers-toggle-preview-enabled, -.layers-toggle-preview-enabled:hover { - color : gold; -} - -.layers-list { - font-size : 12px; -} - -.layer-item { - height:24px; - line-height: 24px; - padding : 0 0 0 10px; - border-top: 1px solid #444; - cursor : pointer; -} - -.layer-item:hover { - background : #222; -} - -.current-layer-item, -.current-layer-item:hover { - background : #333; - color: gold; -} - -.layers-button-container { - overflow : hidden; -} - -.layers-button { - margin: 0; - width: 16.66667%; - float : left; -} - -/* @override */ -.layers-button-container .layers-button { - border-left-width: 0; -} - -.layers-button:last-child { - border-right-width: 0; -} -.palettes-title { - background-size: 22px; - background-repeat: no-repeat; - background-position: 97%; -} -.palettes-list-colors { - overflow: auto; - max-height: 160px; -} -.palettes-list-color { - cursor: pointer; - float: left; - margin: 0 0 5px 5px; - width: 32px; - height: 32px; - position: relative; -} -.palettes-list-color:nth-child(-n+5) { - margin-top: 5px; -} -.palettes-list-color div { - width: 32px; - height: 32px; -} -.palettes-list-has-scrollbar .palettes-list-color, .palettes-list-has-scrollbar .palettes-list-color div { - width: 29px -} -.palettes-list-primary-color:before, .palettes-list-secondary-color:before { - content: ""; - position: absolute; - bottom: 1px; - display: inline-block; - border: 7px solid gold; - border-top-color: transparent; - width: 0px; - height: 0px; -} -.palettes-list-primary-color:before { - left: 1px; - border-right-color: transparent; -} -.palettes-list-secondary-color:before { - right: 1px; - border-left-color: transparent; -} -.palettes-list-actions { - background-color: #3f3f3f; - border-bottom-color: #222; - height: 24px; - padding: 0; - overflow: hidden; -} - -.palettes-list-button, -.palettes-list-select { - margin: 0; - float: left; -} - -.palettes-list-button { - width: 16.66667%; -} -.palettes-list-select { - width: 66.66667%; - height: 100%; - padding: 0 5px 0 5px; - - border-style: solid; - border-width: 1px 0 1px 0; - - color: #aaa; - font-size : 0.75em; - - /*thanks firefox, you suck*/ - text-align:left; - /*text-shadow:none;*/ - font-weight: normal; - - transition : background-color 0.3s, color 0.3s; - cursor:pointer; -} - -.palettes-list-select:hover { - color: white; - background-color: #484848; -} - -.palettes-list-select:focus { - background-color: #484848; - color: white; - outline: none; -} - -.palettes-list-actions .edit-icon { - background-size: 15px; - background-position: 50%; -} -.palettes-list-no-colors { - height: 42px; - width: 100%; - color: grey; - font-size: 0.7em; - font-style: italic; - line-height: 42px; - text-align: center -} - -/** - * Animated preview styles. - */ - -.preview-container { - border : 0 Solid black; - border-radius:5px 0 0 5px; - box-shadow : 0 0 2px rgba(0,0,0,0.2); - font-size: 0; -} - -.preview-container .canvas-container { - overflow : hidden; -} - -.preview-container canvas { - border : 0 Solid transparent; -} - -.canvas-container .animated-preview-canvas-background { - position : relative; - height: 100%; -} - -#animated-preview-container { - background: #333; - border-radius : 0 0 2px 2px; - overflow : hidden; -} - -.canvas-container-wrapper { - height :200px; - width : 200px; - overflow:hidden; -} - -.tiled-frame-container { - height: 100%; - width: 100%; - position: relative; - background-repeat : repeat; -} - -.display-fps { - float: left; - color: #aaa; - font-size: 12px; - min-width: 55px; - vertical-align: bottom; - line-height: 26px; -} - -.range-fps { - overflow: hidden; - width: 100px; - height : 26px; - margin : 0; - box-sizing: border-box; - padding:0; -} - -.preview-toggle-onion-skin { - font-size: 2rem; - color: #aaa; - float: left; - line-height: 26px; - height: 100%; - padding-left: 5px; - padding-right: 5px; - border-right: 1px solid #222; - transition: 0.2s linear; - cursor:pointer; -} - -.preview-toggle-onion-skin:hover { - color : white; -} - -.preview-toggle-onion-skin-enabled, -.preview-toggle-onion-skin-enabled:hover { - color : gold; -} -.transformations-container .tool-icon { - float:left; -} -/*** -Spectrum Colorpicker v1.1.2 -https://github.com/bgrins/spectrum -Author: Brian Grinstead -License: MIT -***/ - -.sp-container { - position:absolute; - top:0; - left:0; - display:inline-block; - *display: inline; - *zoom: 1; - /* https://github.com/bgrins/spectrum/issues/40 */ - z-index: 9999994; - overflow: hidden; -} -.sp-container.sp-flat { - position: relative; -} - -/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */ -.sp-top { - position:relative; - width: 100%; - display:inline-block; -} -.sp-top-inner { - position:absolute; - top:0; - left:0; - bottom:0; - right:0; -} -.sp-color { - position: absolute; - top:0; - left:0; - bottom:0; - right:20%; -} -.sp-hue { - position: absolute; - top:0; - right:0; - bottom:0; - left:84%; - height: 100%; -} -.sp-fill { - padding-top: 80%; -} -.sp-sat, .sp-val { - position: absolute; - top:0; - left:0; - right:0; - bottom:0; -} - -.sp-alpha-enabled .sp-top { - margin-bottom: 18px; -} -.sp-alpha-enabled .sp-alpha { - display: block; -} -.sp-alpha-handle { - position:absolute; - top:-4px; - bottom: -4px; - width: 6px; - left: 50%; - cursor: pointer; - border: 1px solid black; - background: white; - opacity: .8; -} -.sp-alpha { - display: none; - position: absolute; - bottom: -14px; - right: 0; - left: 0; - height: 8px; -} -.sp-alpha-inner { - border: solid 1px #333; -} - -/* Don't allow text selection */ -.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button { - -webkit-user-select:none; - -moz-user-select: -moz-none; - -o-user-select:none; - user-select: none; -} - -.sp-container.sp-input-disabled .sp-input-container { - display: none; -} -.sp-container.sp-buttons-disabled .sp-button-container { - display: none; -} -.sp-palette-only .sp-picker-container { - display: none; -} -.sp-palette-disabled .sp-palette-container { - display: none; -} - -.sp-initial-disabled .sp-initial { - display: none; -} - - -/* Gradients for hue, saturation and value instead of images. Not pretty... but it works */ -.sp-sat { - background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0))); - background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0)); - background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); - background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); - background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); - background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0)); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)"; - filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81'); -} -.sp-val { - background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0))); - background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0)); - background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); - background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); - background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); - background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0)); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)"; - filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000'); -} - -.sp-hue { - background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); - background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); - background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); - 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)); - background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); -} - -/* IE filters do not support multiple color stops. - Generate 6 divs, line them up, and do two color gradients for each. - Yes, really. - */ -.sp-1 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00'); -} -.sp-2 { - height:16%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00'); -} -.sp-3 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff'); -} -.sp-4 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff'); -} -.sp-5 { - height:16%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff'); -} -.sp-6 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000'); -} - -.sp-hidden { - display: none !important; -} - -/* Clearfix hack */ -.sp-cf:before, .sp-cf:after { content: ""; display: table; } -.sp-cf:after { clear: both; } -.sp-cf { *zoom: 1; } - -/* Mobile devices, make hue slider bigger so it is easier to slide */ -@media (max-device-width: 480px) { - .sp-color { right: 40%; } - .sp-hue { left: 63%; } - .sp-fill { padding-top: 60%; } -} -.sp-dragger { - border-radius: 5px; - height: 5px; - width: 5px; - border: 1px solid #fff; - background: #000; - cursor: pointer; - position:absolute; - top:0; - left: 0; -} -.sp-slider { - position: absolute; - top:0; - cursor:pointer; - height: 3px; - left: -1px; - right: -1px; - border: 1px solid #000; - background: white; - opacity: .8; -} - -/* -Theme authors: -Here are the basic themeable display options (colors, fonts, global widths). -See http://bgrins.github.io/spectrum/themes/ for instructions. -*/ - -.sp-container { - border-radius: 0; - background-color: #ECECEC; - border: solid 1px #f0c49B; - padding: 0; -} -.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue -{ - font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} -.sp-top -{ - margin-bottom: 3px; -} -.sp-color, .sp-hue -{ - border: solid 1px #666; -} - -/* Input */ -.sp-input-container { - float:right; - width: 100px; - margin-bottom: 4px; -} -.sp-initial-disabled .sp-input-container { - width: 100%; -} -.sp-input { - font-size: 12px !important; - border: 1px inset; - padding: 4px 5px; - margin: 0; - width: 100%; - background:transparent; - border-radius: 3px; - color: #222; -} -.sp-input:focus { - border: 1px solid orange; -} -.sp-input.sp-validation-error -{ - border: 1px solid red; - background: #fdd; -} -.sp-picker-container , .sp-palette-container -{ - float:left; - position: relative; - padding: 10px; - padding-bottom: 300px; - margin-bottom: -290px; -} -.sp-picker-container -{ - width: 172px; - border-left: solid 1px #fff; -} - -/* Palettes */ -.sp-palette-container -{ - border-right: solid 1px #ccc; -} - -.sp-palette .sp-thumb-el { - display: block; - position:relative; - float:left; - width: 24px; - height: 15px; - margin: 3px; - cursor: pointer; - border:solid 2px transparent; -} -.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active { - border-color: orange; -} -.sp-thumb-el -{ - position:relative; -} - -/* Initial */ -.sp-initial -{ - float: left; - border: solid 1px #333; -} -.sp-initial span { - width: 30px; - height: 25px; - border:none; - display:block; - float:left; - margin:0; -} - -/* Buttons */ -.sp-button-container { - float: right; -} - -/* Replacer (the little preview div that shows up instead of the ) */ -.sp-replacer { - margin:0; - overflow:hidden; - cursor:pointer; - padding: 4px; - display:inline-block; - *zoom: 1; - *display: inline; - border: solid 1px #91765d; - background: #eee; - color: #333; - vertical-align: middle; -} -.sp-replacer:hover, .sp-replacer.sp-active { - border-color: #F0C49B; - color: #111; -} -.sp-replacer.sp-disabled { - cursor:default; - border-color: silver; - color: silver; -} -.sp-dd { - padding: 2px 0; - height: 16px; - line-height: 16px; - float:left; - font-size:10px; -} -.sp-preview -{ - position:relative; - width:25px; - height: 20px; - border: solid 1px #222; - margin-right: 5px; - float:left; - z-index: 0; -} - -.sp-palette -{ - *width: 220px; - max-width: 220px; -} -.sp-palette .sp-thumb-el -{ - width:16px; - height: 16px; - margin:2px 1px; - border: solid 1px #d0d0d0; -} - -.sp-container -{ - padding-bottom:0; -} - - -/* Buttons: http://hellohappy.org/css3-buttons/ */ -.sp-container button { - background-color: #eeeeee; - background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); - background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); - background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); - background-image: -o-linear-gradient(top, #eeeeee, #cccccc); - background-image: linear-gradient(to bottom, #eeeeee, #cccccc); - border: 1px solid #ccc; - border-bottom: 1px solid #bbb; - border-radius: 3px; - color: #333; - font-size: 14px; - line-height: 1; - padding: 5px 4px; - text-align: center; - text-shadow: 0 1px 0 #eee; - vertical-align: middle; -} -.sp-container button:hover { - background-color: #dddddd; - background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb); - background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb); - background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb); - background-image: -o-linear-gradient(top, #dddddd, #bbbbbb); - background-image: linear-gradient(to bottom, #dddddd, #bbbbbb); - border: 1px solid #bbb; - border-bottom: 1px solid #999; - cursor: pointer; - text-shadow: 0 1px 0 #ddd; -} -.sp-container button:active { - border: 1px solid #aaa; - border-bottom: 1px solid #888; - -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; -} -.sp-cancel -{ - font-size: 11px; - color: #d93f3f !important; - margin:0; - padding:2px; - margin-right: 5px; - vertical-align: middle; - text-decoration:none; - -} -.sp-cancel:hover -{ - color: #d93f3f !important; - text-decoration: underline; -} - - -.sp-palette span:hover, .sp-palette span.sp-thumb-active -{ - border-color: #000; -} - -.sp-preview, .sp-alpha, .sp-thumb-el -{ - position:relative; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); -} -.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner -{ - display:block; - position:absolute; - top:0;left:0;bottom:0;right:0; -} - -.sp-palette .sp-thumb-inner -{ - background-position: 50% 50%; - background-repeat: no-repeat; -} - -.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner -{ - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=); -} - -.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner -{ - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=); -} - -/** - * Piskel specific CSS for spectrum widgets - */ - -/* Widget's main container */ -.sp-container { - border-radius: 4px; - background-color: #2B2B2B; - border: solid 4px #888; - padding: 5px 5px 0 5px; - box-shadow : 0 0 5px 0 black; -} - -.sp-container[data-y-position=bottom] { - border-top-left-radius: 0; -} - -.sp-container[data-y-position=top] { - border-bottom-left-radius: 0; -} - -/* Color square container */ -.sp-color, .sp-hue { - border : 1px solid #222; -} - -/* Remove the padding on the input container */ -.sp-replacer { - padding: 4px; - height: 100%; - border-width: 0; - box-sizing: border-box; - -moz-box-sizing:border-box; - background-color: #444; -} - -.sp-replacer:hover { - background-color: #888; -} - -/* Hide the triangle */ -.sp-dd { - display: none; -} - -/* */ -.sp-preview { - margin-right: 0; - height: 100%; - width: 39px; - border-width: 0; -} - -.sp-palette-row-selection { - max-width: 62px; -} - -.sp-palette .sp-thumb-el { - margin : 0 5px 5px 0; - width: 24px; - height: 24px; - border-color: #444; - -} - -.sp-picker-container, .sp-palette-container { - padding-top: 5px; - padding-right: 5px; - padding-left: 5px; - border-left-width: 0; - border-right-width: 0; -} - -.sp-picker-container { - padding: 5px; - padding-bottom: 300px; - margin-bottom: -295px; -} - -.sp-slider { - height: 5px; - left: -2px; - right: -2px; - border: 2px solid white; - background: rgba(255,255,255,0); - opacity: 1; - border-radius: 2px; - box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(0,0,0,0.5); -} - -.sp-dragger { - border-radius: 8px; - height: 12px; - width: 12px; - border: 2px solid white; - background: none; - box-sizing:border-box; - -moz-box-sizing:border-box; - box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(0,0,0,0.5); -} - -.sp-palette .sp-thumb-el.sp-thumb-active { - border-color: gold; - box-shadow: 0 0 0px 1px gold; -} - -.sp-input { - border: 1px solid #666; - margin: 0; - background: #111; - border-radius: 2px; - color: #D3D3D3; - font-family: Courier!important; -} - -.sp-input.sp-validation-error { - background: #330000; -} -/*! - * Bootstrap v2.1.1 - * - * Copyright 2012 Twitter, Inc - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Designed and built with all the love in the world @twitter by @mdo and @fat. - */ -.clearfix { - *zoom: 1; -} -.clearfix:before, -.clearfix:after { - display: table; - content: ""; - line-height: 0; -} -.clearfix:after { - clear: both; -} -.hide-text { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; -} -.input-block-level { - display: block; - width: 100%; - min-height: 30px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -.tooltip { - position: absolute; - z-index: 30000; - display: block; - visibility: visible; - padding: 5px; - font-size: 11px; - opacity: 0; - filter: alpha(opacity=0); -} -.tooltip.in { - opacity: 0.8; - filter: alpha(opacity=80); -} -.tooltip.top { - margin-top: -3px; -} -.tooltip.right { - margin-left: 3px; -} -.tooltip.bottom { - margin-top: 3px; -} -.tooltip.left { - margin-left: -3px; -} -.tooltip-inner { - max-width: 200px; - padding: 3px 8px; - color: #ffffff; - text-align: center; - text-decoration: none; - background-color: #000000; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} -.tooltip.top .tooltip-arrow { - bottom: 0; - left: 50%; - margin-left: -5px; - border-width: 5px 5px 0; - border-top-color: #000000; -} -.tooltip.right .tooltip-arrow { - top: 50%; - left: 0; - margin-top: -5px; - border-width: 5px 5px 5px 0; - border-right-color: #000000; -} -.tooltip.left .tooltip-arrow { - top: 50%; - right: 0; - margin-top: -5px; - border-width: 5px 0 5px 5px; - border-left-color: #000000; -} -.tooltip.bottom .tooltip-arrow { - top: 0; - left: 50%; - margin-left: -5px; - border-width: 0 5px 5px; - border-bottom-color: #000000; -} - -.tooltip { - line-height: 20px; -} - -.tooltip.in { - opacity: 0.95; - filter: alpha(opacity=95); -} - -.tooltip { - line-height: 20px; -} -.preview-list-wrapper { - position: relative; - height: 100%; - overflow: hidden; -} - -.preview-list-scroller { - overflow-y: scroll; - overflow-x: hidden; - height: 100%; -} - -.top-overflow, -.bottom-overflow { - height: 20px; - position: absolute; - left: 0; - right: 12px; - - -webkit-transition: all 500ms ease-out; - -moz-transition: all 500ms ease-out; - -ms-transition: all 500ms ease-out; - -o-transition: all 500ms ease-out; - transition: all 500ms ease-out; - - background-image: linear-gradient(45deg, rgba(0,0,0, 0.8) 25%, transparent 25%, transparent 75%, rgba(0,0,0, 0.8) 75%, rgba(0,0,0, 0.8)), - linear-gradient(-45deg, rgba(0,0,0, 0.8) 25%, transparent 25%, transparent 75%, rgba(0,0,0, 0.8) 75%, rgba(0,0,0, 0.8)); - background-size: 29px 45px; - background-repeat: repeat-x; - background-position-x: 3px; - z-index: 10; -} - -.top-overflow { - top: -20px; -} - -.bottom-overflow { - bottom: -20px; - background-position-x: 0; - background-position-y: -23px; -} - -.top-overflow-visible .top-overflow { - top: 0; -} - -.bottom-overflow-visible .bottom-overflow { - bottom: 0; -} - -.preview-list { - list-style-type: none; - padding-right: 7px; -} - -.add-frame-action { - border: #888 solid 4px; - font-size: 13px; - color: #888; - cursor: pointer; - padding: 6px 0; - border-radius: 4px; - margin-top: 8px; - background-image: url(../img/plus.png); - background-repeat: no-repeat; - background-position: 3px 7px; - background-size: 26px 26px; - text-indent: 18px; - background-color: #222; -} - -.add-frame-action .label { - width: 80px; - margin: 0 auto; -} - -.add-frame-action:hover { - border-color: gold; -} - -.preview-tile { - position: relative; - border: #444 3px solid; - border-radius: 3px; - margin: 5px 0; - width: 96px; - height: 96px; -} - -.preview-tile:first-child { - margin-top: 0; -} - -.preview-tile:hover { - border: #999 3px solid; -} - -.tile-view { - position : relative; -} - -.preview-tile .tile-overlay { - z-index: 10; - position: absolute; - background-color: rgba(100, 100, 100, 0.6); - opacity: 0; - height: 30px; - width: 30px; - border: none; -} - -.preview-tile:hover .tile-overlay { - opacity: 1.0; -} - -.preview-tile .tile-overlay.tile-count { - display: block; - opacity: 1.0; - border-bottom-right-radius: 3px; - top: 0; - left: 0; - font-size: 14px; - line-height: 30px; - color: white; - font-weight: bold; - text-align: center; - cursor: default; -} - -.preview-tile .tile-overlay.delete-frame-action { - background-image: url(../img/garbage.png); - background-repeat: no-repeat; - top: 0; - right: 0; - border-bottom-left-radius: 3px; - height: 30px; - width: 30px; - background-position: 5px 5px; - background-size: 20px; - cursor: pointer; -} - -.preview-tile .tile-overlay.duplicate-frame-action { - bottom: 0; - right: 0; - border-bottom-left-radius: 3px; - background-image: url(../img/duplicate.png); - background-repeat: no-repeat; - background-position: 5px 5px; - background-size: 20px; - cursor: pointer; -} - -.preview-tile .tile-overlay.dnd-action { - bottom: 0; - left: 0; - border-top-right-radius: 3px; - background-image: url(../img/dragndrop.png); - background-repeat: no-repeat; - background-position: 5px 5px; - background-size: 20px; - cursor: move; -} - -.preview-tile.selected { - border-color: gold; -} - -.preview-tile.selected:after { - content: " "; - position: absolute; - top: 38px; - right: -15px; - border: transparent 4px solid; - border-left-color: gold; - border-width: 6px; - border-style: solid; -} - - -/** - * Drag n drop styles. - */ - -.preview-tile-drop-proxy { - border: 3px dashed gold; - height: 90px; - border-radius: 9px; - background-color: rgba(255, 215,0, 0.2); -} - -.minimap-crop-frame { - position:absolute; - border:1px solid rgba(255,255,255,0.5); - z-index:100; - box-sizing : border-box; - -moz-box-sizing : border-box; - cursor : pointer; -} \ No newline at end of file diff --git a/css/piskel-style-packaged-2015-03-02-09-38.css b/css/piskel-style-packaged-2015-03-02-09-38.css deleted file mode 100644 index 8017ce2e..00000000 --- a/css/piskel-style-packaged-2015-03-02-09-38.css +++ /dev/null @@ -1,3005 +0,0 @@ -html, body { - height : 100%; width: 100%; - margin : 0; - overflow: hidden; - cursor : default; - font-family: arial; - font-size: 11px; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -ul, li { - margin : 0; - padding : 0; - list-style-type: none; -} - - -/* Force apparition of scrollbars on leopard */ -::-webkit-scrollbar { - -webkit-appearance: none; - width: 6px; -} - -::-webkit-scrollbar-thumb { - border-radius: 2px; - background-color: #666; -} - -::-webkit-scrollbar-track { - background-color: rgba(50, 50, 50, 0.4); -} - -a, a:visited { - color:gold; -} -body { - background: #1D1D1D; -} - -/* Browser fixes */ -::-ms-clear { - display: none; -} - -.allow-user-select { - -webkit-touch-callout: initial; - -webkit-user-select: initial; - -khtml-user-select: initial; - -moz-user-select: initial; - -ms-user-select: initial; - user-select: initial; -} - -.no-overflow { - overflow : hidden; -} - -.image-link { - color : gold; -} - -.pull-top, -.pull-right, -.pull-bottom, -.pull-left { - position:absolute; -} - -.pull-top { - top:0; -} - -.pull-right { - right:0; -} - -.pull-bottom { - bottom:0; -} - -.pull-left { - left:0; -} - -.uppercase { - text-transform: uppercase; -} - -/** - * Application layout - */ - -.main-wrapper { - position: absolute; - top: 5px; - right: 0; - bottom: 5px; - left: 0; -} - -.column-wrapper { - text-align: center; - font-size: 0; - position: absolute; - left: 100px; /* Reserve room for tools on the left edge of the screen. */ - top: 0; - right: 50px; /* Reserve room for actions on the right edge of the screen. */ - bottom: 0; -} - -.column { - display: inline-block; -} - -.left-column { - vertical-align: top; - height: 100%; - margin-right: 7px; -} - -.main-column { - height: 100%; - position: relative; -} - -.right-column { - vertical-align: top; - margin-left: 10px; - height: 100%; - position: relative; -} - -.drawing-canvas-container { - font-size: 0; -} - -.sticky-section { - position: fixed; - top: 0; - bottom: 0; - z-index: 1000; -} - -.sticky-section .sticky-section-wrap { - display: table; - height: 100%; -} - -.sticky-section .vertical-centerer { - display: table-cell; - vertical-align: middle; -} - -.left-sticky-section.sticky-section { - left: 0; - max-width: 100px; -} - -.left-sticky-section .tool-icon { - float: left; -} - -.cursor-coordinates { - color:#888; - font-size:12px; - font-weight:bold; - font-family:Courier; -} - -/** - * Canvases layout - */ - -.canvas { - position: relative; - z-index: 1; -} - -.canvas-container { - position: relative; - display: block; -} - -.canvas-container .canvas-background { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; -} - -.light-picker-background, -.light-canvas-background .canvas-background { - background: url(../img/canvas_background/light_canvas_background.png) repeat; -} - -.medium-picker-background, -.medium-canvas-background .canvas-background { - background: url(../img/canvas_background/medium_canvas_background.png) repeat; -} - -.lowcont-medium-picker-background, -.lowcont-medium-canvas-background .canvas-background { - background: url(../img/canvas_background/lowcont_medium_canvas_background.png) repeat; -} - -.lowcont-dark-picker-background, -.lowcont-dark-canvas-background .canvas-background { - background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat; -} - -.layers-canvas, -.canvas.onion-skin-canvas { - opacity: 0.2; -} - -.canvas.canvas-overlay, -.canvas.layers-canvas, -.canvas.onion-skin-canvas { - position: absolute; - top: 0; - left: 0; -} - -.tools-wrapper, -.options-wrapper, -.palette-wrapper { - float : left; -} - -/** - * Z-indexes should match the drawing area canvas superposition order : - * - 1 : draw layers below current layer - * - 2 : draw current layer - * - 3 : draw layers above current layer - * - 4 : draw the tools overlay - */ -.canvas.layers-below-canvas {z-index: 7;} -.canvas.drawing-canvas {z-index: 8;} -.canvas.canvas-overlay {z-index: 9;} -.canvas.onion-skin-canvas {z-index: 10;} -.canvas.layers-above-canvas {z-index: 11;} -@font-face { - font-family: 'piskel'; - src:url('fonts/icomoon.eot?-3olv93'); - src:url('fonts/icomoon.eot?#iefix-3olv93') format('embedded-opentype'), - url('fonts/icomoon.woff?-3olv93') format('woff'), - url('fonts/icomoon.ttf?-3olv93') format('truetype'), - url('fonts/icomoon.svg?-3olv93#icomoon') format('svg'); - font-weight: normal; - font-style: normal; -} - -[class^="piskel-icon-"], [class*=" piskel-icon-"] { - font-family: 'piskel'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.piskel-icon-eye:before { - content: "\e602"; -} - -.piskel-icon-onion:before { - content: "\e601"; -} - -.piskel-icon-download:before { - content: "\e600"; -} - -.piskel-icon-rotateleft:before { - content: "\e603"; -} - -.piskel-icon-rotateright:before { - content: "\e604"; -} - -.piskel-icon-fliph:before { - content: "\e605"; -} - -.piskel-icon-flipv:before { - content: "\e606"; -} - -.piskel-icon-trashplain:before { - content: "\e607"; -} - -.piskel-icon-trash:before { - content: "\e608"; -} - -.piskel-icon-merge:before { - content: "\e609"; -} - -.piskel-icon-pencil:before { - content: "\e610"; -} - -.piskel-icon-close:before { - content: "\e611"; -} - -.piskel-icon-minus:before { - content: "\e60a"; -} - -.piskel-icon-plus:before { - content: "\e60b"; -} - -.piskel-icon-arrow-up-fat:before { - content: "\e60c"; -} - -.piskel-icon-arrow-down-fat:before { - content: "\e60d"; -} - -.piskel-icon-arrow-up-thin:before { - content: "\e60e"; -} - -.piskel-icon-arrow-down-thin:before { - content: "\e60f"; -} - -.row { - display: block; -} - -.textfield { - box-sizing:border-box; - - background : black; - border : 1px solid #888; - border-radius : 2px; - padding : 3px 10px; - color : white; -} - -.textfield[disabled=disabled] { - background : #3a3a3a; -} - -.textfield-small { - width : 50px; -} - -.button { - box-sizing: border-box; - height: 24px; - - background-color: #3f3f3f; - border: 1px solid #333; - border-top-color: #666; - border-bottom-color: #222; - - cursor: pointer; - text-decoration: none; - - color: white; - text-shadow: 0 -1px 0 black; - font-weight: bold; - font-size: 1rem; - text-align: center; - - transition: background-color 0.2s linear; -} - -.button:hover { - text-decoration: none; - background-color: #484848; - color: gold; -} - -.button-primary { - background-color: rgb(255,215,0); /* gold */ - - border-color: rgb(179, 164, 0); - border-top-color: white; - border-bottom-color: rgb(151, 133, 0); - - color: black; - text-shadow: 0 1px 0 #fff; -} - -.button-primary:hover { - background-color: rgb(255,235,20); - color: #333; -} - -.button[disabled], -.button[disabled]:hover { - cursor:default; - background-color: #aaa; - color: #777; - text-shadow: 0 1px 0 #bbb; - border-color: #666; - border-top-color: #999; - border-bottom-color: #555; -} - -/** Righty sticky drawer expanded state. */ - -.right-sticky-section.sticky-section { - right: 0; - width: 47px; - - -webkit-transition: all 200ms ease-out; - -moz-transition: all 200ms ease-out; - -ms-transition: all 200ms ease-out; - -o-transition: all 200ms ease-out; - transition: all 200ms ease-out; -} - -.right-sticky-section.expanded { - right: 280px; -} - -.right-sticky-section .tool-icon { - float: right; - margin-right: 0; -} - -/********************************************************** *j* j** j*j j j j** *****************/ -/* Settings icons I I I I I\I \ */ -/********************************************************** *** *** *** * * '** *****************/ - -.tool-icon.gallery-icon { - background-image: url(../img/gallery.png); - background-position: 3px 3px; - background-size: 39px 39px; -} - -.tool-icon.resize-icon { - background-image: url(../img/resize-icon.png); - background-position: 10px 10px; - background-size: 26px 26px; -} - -.tool-icon.save-icon { - background-image: url(../img/save.png); - background-position: 6px 6px; - background-size: 36px 36px; -} - -.tool-icon.gear-icon { - background-image: url(../img/gear.png); - background-position: 6px 7px; - background-size: 32px 32px; -} - -.tool-icon.export-icon { - background-image: url(../img/export.png); - background-position: 7px 5px; - background-size: 36px 36px; - position: relative; -} - -.tool-icon.local-storage-icon { - background-image: url(../img/local-storage-icon.png); - background-position: 10px 12px; - background-size: 30px; - position: relative; -} - -.tool-icon.import-icon { - background-image: url(../img/import-icon.png); - background-position: 10px 5px; - background-size: 26px; - position: relative; -} - -.tool-icon .label { - position: absolute; - left: 0; - bottom: 4px; - right: 0; - font-size: 11px; - text-transform: uppercase; - color: #fff; - text-align: center; -} - -.drawer-content { - overflow: hidden; - background-color: #444; - height: 550px; - max-height: 100%; - width: 280px; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - box-shadow: 0 0 5px 0 black; -} - -.right-sticky-section.expanded .tool-icon { - padding-right: 1px; -} - -.right-sticky-section .tool-icon.has-expanded-drawer { - position: relative; - background-color: #444; - margin-right: 0; - padding-right: 2px; - border-left : 3px solid gold; -} - -/************************************************************************************************/ -/* Common settings classes */ -/************************************************************************************************/ - -.settings-section { - margin: 10px 20px; - font-size: 12px; - font-weight: bold; - color: #ccc; - text-shadow: 1px 1px #000; -} - -.settings-section .button { - margin: 0; -} - -.settings-title { - color : gold; - margin-top: 20px; - margin-bottom: 10px; - text-transform: uppercase; - border-bottom: 1px #aaa solid; - padding-bottom: 5px; - color: gold; -} - -.settings-description { - margin : 0 0 10px 0; - display : inline-block; -} - -.settings-form-section { - margin-bottom: 10px; -} - -.settings-item { - margin : 10px 0; -} - -[name*=checkbox] { - vertical-align: middle; -} - -/************************************************************************************************/ -/* Application settings */ -/************************************************************************************************/ - -.background-picker-wrapper { - overflow: hidden; - padding: 5px; -} - -.background-picker { - cursor: pointer; - float: left; - height: 35px; - width: 35px; - background-color: transparent; - margin-right: 15px; - padding: 1px; - position: relative; -} - -.background-picker:after { - content: " "; - position: absolute; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; -} - -.background-picker:hover:after { - border: #eee 1px solid; -} - -.background-picker.selected:after { - border: gold 1px solid; -} - -/************************************************************************************************/ -/* Save panel */ -/************************************************************************************************/ - -.anonymous .save-public-section, -.anonymous #save-online-button { - display : none; -} - -.save-field { - width: 100%; -} - -.save-status { - margin-top: 10px; - margin-bottom: -10px; - vertical-align: middle; - font-weight: normal; - text-shadow: none; - font-style: italic; -} - -.save-file-name { - white-space: nowrap; - font-weight: bold; - color: white; - font-style: normal; -} -.tiled-preview-checkbox { - vertical-align: -2px; - margin-left: 0; -} -/*******************************/ -/* Gif/Png Export Setting panel*/ -/*******************************/ -.gif-download-button, -.gif-render-button { - margin-top : 10px; - margin-right : 10px; -} - -.gif-export-preview, -.png-export-preview { - position:relative; - margin-top:10px; - max-height:32px; -} - -.gif-export-preview { - max-width:32px; -} - -.png-export-preview img { - max-height:32px; - float: left; -} - -.gif-upload-status { - width: 180px; - margin-left: 5px; - margin-top: 10px; -} - -.gif-upload, -.png-export-preview { - overflow: hidden; -} - -.gif-upload-status, -.gif-export-preview { - float : left; -} - -.preview-upload-ongoing:before{ - content: "Upload ongoing ..."; - position: absolute; - display: block; - height: 100%; - width: 100%; - text-align: center; - padding-top: 45%; - box-sizing:border-box; - -moz-box-sizing:border-box; - background: rgba(0,0,0,0.5); - color: white; -} -/************************************************************************************************/ -/* Import panel */ -/************************************************************************************************/ - -.import-section, -.resize-section { - margin: 10px 0; -} - -.file-input-button { - margin-right: 8px; - border-radius: 2px; -} - -.import-highlight { - font-weight: bold; - color: white; -} -.resize-section-title { - vertical-align: top; - display: inline-block; - padding-top: 5px; - width: 25%; -} - -.resize-content-checkbox { - margin-left: 0; -} - -.resize-ratio-checkbox, -.resize-smooth-checkbox { - vertical-align: -2px; - margin-left: 0; -} - - -/*****************/ -/* ANCHOR WIDGET */ -/*****************/ - -.resize-origin-container { - overflow: hidden; - position: relative; - width: 70px; - margin-top: 5px; - display: inline-block; -} - -.transition .resize-origin-option, -.transition .resize-origin-option:before { - transition: background-color 0.2s, border-color 0.2s; -} - -.resize-origin-option { - float: left; - position: relative; - - box-sizing: border-box; - margin: 0 1px 1px 0; - width: 20px; - height: 20px; - - background : #888; - - font-size: 8px; - text-align: center; - cursor: pointer; -} - -.disabled .resize-origin-option { - cursor: default; - background : #555; - border-color: #555 !important; -} - -.resize-origin-option.selected { - border : 3px solid gold; -} - -.resize-origin-option:before { - content: ''; - position: absolute; - display: block; - top: 50%; - left: 50%; - margin: -2px; -} - -.resize-origin-option.selected:before { - content: ''; - width: 4px; - height: 4px; - background: gold; -} - -.disabled .resize-origin-option.selected:before { - background: #555; -} - -.disabled .resize-origin-option[data-neighbor]:before { - border-color: #555 !important; -} - -.resize-origin-option[data-neighbor]:before { - width: 0; - height: 0; - border-width: 4px; - border-style: solid; - border-color: transparent; -} - -.resize-origin-option[data-neighbor="bottom"]:before { - border-top-color: gold; - margin-left: -4px; -} - -.resize-origin-option[data-neighbor="left"]:before { - border-right-color: gold; - margin-top: -4px; - margin-left: -6px; -} - -.resize-origin-option[data-neighbor="top"]:before { - border-bottom-color: gold; - margin-top: -6px; - margin-left: -4px; -} - -.resize-origin-option[data-neighbor="right"]:before { - border-left-color: gold; - margin-top: -4px; -} -.tool-icon { - position : relative; - cursor : pointer; - width: 46px; - height: 46px; - margin: 1px; - background-color: #3a3a3a; - background-repeat: no-repeat; - background-position: 12px 12px; - background-size: 24px 24px; -} - -.tool-icon.selected { - cursor: default; - background-color: #444; -} - -.tool-icon.selected:before { - content:""; - position : absolute; - height : 100%; - width : 100%; - border: 3px solid gold; - box-sizing: border-box; - -moz-box-sizing: border-box; -} - -.tool-icon:hover { - background-color: #444; -} - -/* - * Tool icons: - */ -.tool-icon.tool-pen { - background-image: url(../img/tools/pen.png); -} - -.tool-icon.tool-vertical-mirror-pen { - background-image: url(../img/tools/mirror.png); - background-position: 0px 10px; - background-size: 38px 27px; -} - -.tool-icon.tool-paint-bucket { - background-image: url(../img/tools/paintbucket.png); -} - -.tool-icon.tool-eraser { - background-image: url(../img/tools/eraser.png); -} - -.tool-icon.tool-stroke { - background-image: url(../img/tools/stroke.png); -} - -.tool-icon.tool-rectangle { - background-image: url(../img/tools/rectangle.png); - background-position: 12px 14px; - background-size: 24px 20px; -} - -.tool-icon.tool-circle { - background-image: url(../img/tools/circle.png); -} - -.tool-icon.tool-move { - background-image: url(../img/tools/hand.png); - background-size: 24px 24px; -} - -.tool-icon.tool-rectangle-select { - background-image: url(../img/tools/rectangle_selection.png); - background-position: 12px 14px; - background-size: 24px 20px; -} - -.tool-icon.tool-shape-select { - background-image: url(../img/tools/magicwand.png); -} - -.tool-icon.tool-lighten { - background-image: url(../img/tools/lighten.png); - background-position: 8px 8px; - background-size: 30px 30px; -} - -.tool-icon.tool-colorpicker { - background-image: url(../img/tools/eyedropper.png); - background-size: 23px 23px; -} - -.tool-icon.tool-colorswap { - background-image: url(../img/tools/swap-colors.png); - background-position: 6px 6px; - background-size: 36px 36px; -} - -.tool-icon.tool-flip { - background-image: url(../img/tools/flip.png); - background-position: 7px 11px; - background-size: 32px; -} - -.tool-icon.tool-rotate { - background-image: url(../img/tools/rotate.png); - background-position: 10px 9px; - background-size: 26px; -} - -.tool-icon.tool-clone { - background-image: url(../img/tools/clone.png); - background-position: 9px 15px; - background-size: 30px; -} - -/* - * Tool cursors: - */ - -.tool-paint-bucket .drawing-canvas-container:hover, -.tool-colorswap .drawing-canvas-container:hover { - cursor: url(../img/icons/paint-bucket.png) 12 12, pointer; -} - -.tool-vertical-mirror-pen .drawing-canvas-container:hover { - cursor: url(../img/icons/vertical-mirror-pen.png) 5 15, pointer; -} - -.tool-pen .drawing-canvas-container:hover, -.tool-lighten .drawing-canvas-container:hover { - cursor: url(../img/icons/pen.png) 0 15, pointer; -} - -.tool-eraser .drawing-canvas-container:hover { - cursor: url(../img/icons/eraser.png) 0 15, pointer; -} - -.tool-stroke .drawing-canvas-container:hover { - cursor: url(../img/icons/pen.png) 0 15, pointer; -} - -.tool-rectangle .drawing-canvas-container:hover { - cursor: url(../img/icons/rectangle.png) 0 15, pointer; -} - -.tool-circle .drawing-canvas-container:hover { - cursor: url(../img/icons/circle.png) 2 15, pointer; -} - -.tool-move .drawing-canvas-container:hover { - cursor: url(../img/icons/hand.png) 15 15, pointer; -} - -.tool-rectangle-select .drawing-canvas-container:hover { - cursor: crosshair; -} - -.tool-shape-select .drawing-canvas-container:hover { - cursor: url(../img/icons/wand.png) 15 15, pointer; -} - -.tool-colorpicker .drawing-canvas-container:hover { - cursor: url(../img/icons/dropper.png) 0 15, pointer; -} - -.swap-colors-icon { - background-image: url(../img/tools/swap-arrow-square-small-grey.png); - position: relative; - top: 50px; - left: 6px; - height: 18px; - width: 18px; - background-size: 18px; - opacity : 0.3; - cursor : pointer; -} - -.swap-colors-icon:hover { - opacity : 1; -} - -.tool-color-picker { - position:relative; -} - -.tool-color-picker:nth-child(1) { - z-index : 100; -} - -.tool-color-picker:nth-child(2) { - z-index : 90; - margin-top: 25px; - margin-left:-20px; -} - -.tool-color-picker input { - width: 16px; - height: 16px; - text-indent: -10000px; - border: 1px solid black; - background: white; - cursor: pointer; - position : relative; - top: 10px; - margin-left: 2px; -} - -.tool-color-picker .secondary-color-picker { - top : 18px; - margin-left: 0; -} - -.palette-wrapper { - margin-top: 10px; - margin-left: 10px; -} - -.palette-color[data-color=TRANSPARENT] { - position: relative; - top: 10px; - left: 10px; - background-color: white; - height : 16px; - width : 16px; - border: 2px solid #000; - background-size: 16px 16px; - background-position: 0 0; - background-image: -webkit-gradient( - linear, - left top, - right bottom, - color-stop(0, #fff), - color-stop(0.45, #fff), - color-stop(0.5, #ff0000), - color-stop(0.55, #fff), - color-stop(1, #fff) - ); - background-image: -moz-linear-gradient( - left top, - #fff 0%, - #fff 45%, - #f00 50%, - #fff 55%, - #fff 100% - ); -} - -.tools-tooltip-container { - text-align: left; - padding-bottom: 5px; -} - -.tools-tooltip-shortcut { - color:gold; -} - -.tools-tooltip-descriptor { - color:#999; -} - -.tools-tooltip-descriptor-button { - padding:2px; - border:1px Solid #999; - font-size:0.8em; - margin-right:5px; - width:35px; - text-align:center; - border-radius:3px; - display:inline-block; - line-height: 10px; -} - - -.action-icon { - cursor: pointer; - height: 100%; - background-repeat: no-repeat; - background-position: 50%; -} - -.edit-icon { - background-image: url('../img/tools/pen.png'); - background-repeat: no-repeat; -} - -.merge-icon { - background-image: url('../img/merge-icon.png'); - background-repeat: no-repeat; -} - -.plus-icon { - font-size:15px; - text-align:center; -} - -.delete-icon { -} -.cheatsheet-link { - position: fixed; - bottom: 10px; - left: 10px; - - padding: 1px 0 0 45px; - color : gold; - font-weight: bold; - font-size : 1.25em; - line-height: 20px; - - cursor : pointer; - - background-image:url('../img/keyboard.png'); - background-size:35px 20px; - background-repeat:no-repeat; - opacity: 0.5; - z-index: 11000; - transition : opacity 0.3s; -} - -.cheatsheet-link:hover { - opacity: 1; -} - -#cheatsheet-wrapper { - position: absolute; - z-index: 10000; - - top: 0; - right: 0; - bottom: 0; - left: 0; - - padding: 50px; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - color: white; -} - -.cheatsheet-container { - width: 100%; - height: 100%; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - padding: 20px 3%; - border-radius: 3px; - background: rgba(0,0,0,0.9); - overflow: auto; -} - -.cheatsheet-container h3 { - font-size:24px; - margin-top: 0; -} - -.cheatsheet-section { - float: left; - width : 33%; -} - -.cheatsheet-shortcut { - overflow: hidden; - margin: 10px 0; -} - -.cheatsheet-icon.tool-icon { - float: left; - display: inline-block; - - height: 30px; - width: 30px; - margin: 0 20px 0 0; - - background-size: 20px 20px; - background-position: 5px 5px; -} - -.cheatsheet-description { - font-family:Courier; - color: white; - font-size : 13px; - margin-left: 20px; - line-height : 30px; -} - -.cheatsheet-key { - display : inline-block; - height: 30px; - line-height: 30px; - padding: 0 10px; - - border : 1px solid gold; - border-radius: 2px; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - text-align: center; - font-family:Courier; - font-weight: bold; - font-size : 18px; - color: gold; -} -.color-picker-slider * { - box-sizing: border-box; -} - -.color-picker-slider input[type="range"] { - -webkit-appearance: none; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - width: 100%; - border: none; - padding: 1px 2px; - border-radius: 3px; - background-image: linear-gradient(to right, hsl(0, 30%, 70%) 0, hsl(359, 30%, 70%) 100%); - box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42; - outline: none; /* no focus outline */ -} - -/* thumb */ - -.color-picker-slider input[type="range"]::-webkit-slider-thumb { - -webkit-appearance: none; - cursor:pointer; - width: 7px; - height: 18px; - border: none; - border-radius: 2px; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #529de1), color-stop(100%, #245e8f)); /* android <= 2.2 */ - background-image: -webkit-linear-gradient(top , #529de1 0, #245e8f 100%); /* older mobile safari and android > 2.2 */; - background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */ -} -.color-picker-slider input[type="range"]::-moz-range-thumb { - width: 7px; - height: 18px; - border: none; - border-radius: 2px; - background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */ -} - -.color-picker-slider input[type="range"]::-ms-thumb { - width: 7px; - height: 18px; - border-radius: 2px; - border: 0; - background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */ -} - -/*CROSS BROWSER RESET*/ - - -.color-picker-slider input[type="range"]::-moz-range-track { - border: inherit; - background: transparent; -} - -.color-picker-slider input[type="range"]::-ms-track { - border: inherit; - color: transparent; /* don't drawn vertical reference line */ - background: transparent; -} - -.color-picker-slider input[type="range"]::-ms-fill-lower, -.color-picker-slider input[type="range"]::-ms-fill-upper { - background: transparent; -} - -.color-picker-slider input[type="range"]::-ms-tooltip { - display: none; -} - -.color-picker-slider, -.color-picker-input { - padding: 0 10px; - height : 25px; - overflow: hidden; -} - -.color-picker-slider span{ - line-height : 25px; - width : 10px; - float:left; -} - -.color-picker-slider input[type="range"]{ - float:left; - height : 10px; - width : 100px; - margin: 7px 1px 7px 8px; -} - -.color-picker-slider input[type="text"]{ - float:left; - width : 47px; - margin-left: 5px; -} - -.color-picker-input { - margin-bottom: 10px; -} - -.color-picker-input .textfield{ - width:100%; -} - -.color-picker-slider input[type="range"][data-dimension="h"] { - background-image:linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); -} -#dialog-container-wrapper { - position: absolute; - z-index: 20000; - - top: 0; - right: 0; - bottom: 0; - left: 0; - - padding: 50px 150px; - overflow: hidden; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - background-color: rgba(0,0,0,0.8); - opacity: 0; - pointer-events: none; - - color: white; -} - -#dialog-container-wrapper.animated { - transition: opacity 0.5s; -} - -#dialog-container-wrapper.show { - opacity: 1; - pointer-events: auto; -} - -#dialog-container { - width: 100%; - height: 100%; - - margin-top: -1500px; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - border-radius: 3px; - border : 3px solid gold; - background: #444; - overflow: auto; -} - -.animated #dialog-container { - transition:margin-top 0.5s; -} - -.show #dialog-container { - margin-top: 0; -} - -#dialog-container.browse-local { - width: 700px; - height: 500px; - top : 50%; - left : 50%; - position : absolute; - margin-left: -350px; -} - -.show #dialog-container.browse-local { - margin-top: -250px; -} - -#dialog-container.import-image { - width: 500px; - height: 300px; - top : 50%; - left : 50%; - position : absolute; - margin-left: -250px; -} - -.show #dialog-container.import-image { - margin-top: -150px; -} - -.dialog-wrapper { - height: 100%; - position : relative; -} - -.dialog-head { - width: 100%; - background: gold; - margin: 0; - padding: 10px; - color: black; - font-size: 1.8em; - box-sizing: border-box; - -moz-box-sizing: border-box; -} - -.dialog-close { - position: absolute; - top: 0; - right: 0; - line-height: 45px; - margin-right: 10px; - font-size: 1.3em; - cursor: pointer; -} -/************************************************************************************************/ -/* Import dialog */ -/************************************************************************************************/ - -.import-section-preview { - display : inline-block; - height : 60px; - width: 60px; - border : 1px dashed #999; - border-radius: 3px; -} - -.dialog-section-title { - display : inline-block; - width: 55px; -} - -.import-size-field, -.resize-size-field { - width: 50px; - margin-right: 8px; - text-align: right; -} - -.import-size-field:nth-of-type(2), -.resize-size-field:nth-of-type(2) { - margin-left: 5px; -} - -.import-image-file-name { - display: inline-block; - overflow: hidden; - - height: 2rem; - word-break : break-all; - vertical-align: middle; - font-style: italic; - font-weight: normal; - text-shadow: none; -} - -[name=smooth-resize-checkbox] { - margin : 0 8px; -} - -.dialog-import-body { - padding:10px 20px; - font-size:1.5em -} - -.import-button { - font-size: 1em; - height: auto; - padding: 5px 10px; -} - -/************************************************************************************************/ -/* Browse local piskels panel */ -/************************************************************************************************/ - -.local-piskel-list { - width: 100%; -} - -.local-piskel-item { - height: 3em; -} - -.local-piskel-name { - width: 40%; -} - -.local-piskel-save-date { - font-weight : normal; -} - -.local-piskel-list a { - text-decoration: none; -} - -.local-piskel-list a:hover { - text-decoration: underline; -} - -.local-piskel-list-head { - font-weight: bold; - color: gold; -} - -.local-piskel-load-button, -.local-piskel-delete-button { - width : 75px; -} -#dialog-container.create-palette { - width: 500px; - height: 600px; - top : 50%; - left : 50%; - position : absolute; - margin-left: -250px; -} - -.show #dialog-container.create-palette { - margin-top: -300px; -} - -.create-palette-section { - position: absolute; - left: 10px; - top: 50px; -} - -.create-palette-import-section { - display : inline-block; -} - -.colors-container { - position: absolute; - - left: 10px; - right: 10px; - top: 85px; - - height: 460px; - - border: 1px solid black; - background: #333; -} - -.color-picker-container { - position:absolute; - left : 280px; - top:0; - bottom:0; - right:0; - background: #222; -} - -.create-palette-actions { - position: absolute; - box-sizing: border-box; - - width:100%; - height: 45px; - - left: 0; - right: 0; - bottom: 0; - - padding:10px; - text-align:right; -} - -.color-preview { - width: 170px; - height: 70px; - margin: 11px; -} - -.colors-list { - overflow: auto; - width: 280px; - box-sizing: border-box; - height: 100%; - padding-bottom: 10px; -} - -.create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{ - position:relative; - float : left; - - width : 44px; - height : 44px; - margin : 10px 0 0 10px; - - box-sizing : border-box; - - cursor : pointer; -} - -@-moz-document url-prefix() { - .create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{ - margin : 7px 0 0 7px; - } -} - -@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - .create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{ - margin : 7px 0 0 7px; - } -} - - -.create-palette-color { - border:1px solid #2c2c2c; - transition : border-color 0.2s; -} -.create-palette-color:hover { - border:1px solid gold; -} - -.colors-list-drop-proxy { - border:2px dotted #eee; -} - -.create-palette-new-color { - border:2px dotted gold; - - border-radius: 2px; - line-height: 40px; - text-align: center; - font-size: 20px; - color: gold; -} - -.create-palette-color.selected { - border:2px solid gold; -} - -.create-palette-remove-color { - position: absolute; - top: 0; - right: 0; - padding: 2px 4px 0 0; - opacity : 0.2; - - font-weight: bold; - color: rgb(255,255,255); - text-shadow : 0 0 1px rgb(0,0,0); - - transition : opacity 0.3s, color 0.1s; -} - -.light-color .create-palette-remove-color { - color: rgb(0,0,0); - text-shadow : 0 0 1px rgb(255,255,255); -} - -.selected .create-palette-remove-color { - top: -1px; - right: -1px; -} - -.create-palette-color:hover .create-palette-remove-color { - opacity: 0.6; -} - -.create-palette-color .create-palette-remove-color:hover { - opacity: 1; - color: rgb(240,80,80); - text-shadow : 0 0 1px rgb(0,0,0); -} - -/*SPECTRUM OVERRIDES*/ - -.create-palette .sp-container{ - background-color: transparent; - border: none; - box-shadow : none; - border-radius:0; - padding:5px; -} -.user-message { - position: absolute; - right: 0; - bottom: 0; - padding: 10px 47px; - max-width: 300px; - - border-top-left-radius: 7px; - border: #F0C36D 1px solid; - border-right: 0; - border-bottom: 0; - - color: #222; - background-color: #F9EDBE; - - font-weight: bold; - font-size: 13px; - - z-index: 30000; -} - -.user-message .close { - position: absolute; - top: 6px; - right: 17px; - - color: gray; - - font-size: 18px; - font-weight: bold; - - cursor: pointer; -} - -.user-message .close:hover { - color: black; -} - -.progress-bar-container { - position: absolute; - left: 0; - bottom: 0; - padding: 10px; - width: 360px; - border-top-right-radius: 2px; - border: gold 2px solid; - border-left: 0; - border-bottom: 0; - background-color: #444; - font-size: 14px; - z-index: 30000; - color: #eee; -} - -.progress-bar-item { - float: left; - height:20px; -} - -.progress-bar-status { - line-height: 20px; - width : 40px; - overflow : hidden; - margin: 0 0 0 10px; -} - -.progress-bar { - border : 1px solid grey; - margin-top: 8px; - height : 4px; - width : 300px; - background : linear-gradient(to left, gold, gold) no-repeat -300px 0; - background-color : black; -} -.toolbox-container { - border: 4px solid #888; - font-size: medium; - color: white; - text-align: left; - border-radius: 4px; - margin-top: 5px; - margin-bottom: 10px; - overflow: hidden; -} - -.toolbox-title { - padding: 8px; - margin: 0; - font-size: 15px; - background: #222; -} - -/** - * Layers container - */ -.layers-list-container { -} - -/*.layers-title { - background-image: url('../img/layers.svg'); - background-size: 22px; - background-repeat: no-repeat; - background-position: 97%; -}*/ - -.layers-title { - position: relative; -} - -.layers-toggle-preview { - position: absolute; - top: 0.3em; - right: 0.5em; - - color: #999; - font-size: 1.3em; - cursor: pointer; - - transition: 0.2s linear; -} - -.layers-toggle-preview:hover { - color: white; -} - -.layers-toggle-preview-enabled, -.layers-toggle-preview-enabled:hover { - color : gold; -} - -.layers-list { - font-size : 12px; -} - -.layer-item { - height:24px; - line-height: 24px; - padding : 0 0 0 10px; - border-top: 1px solid #444; - cursor : pointer; -} - -.layer-item:hover { - background : #222; -} - -.current-layer-item, -.current-layer-item:hover { - background : #333; - color: gold; -} - -.layers-button-container { - overflow : hidden; -} - -.layers-button { - margin: 0; - width: 16.66667%; - float : left; -} - -/* @override */ -.layers-button-container .layers-button { - border-left-width: 0; -} - -.layers-button:last-child { - border-right-width: 0; -} -.palettes-title { - background-size: 22px; - background-repeat: no-repeat; - background-position: 97%; -} -.palettes-list-colors { - overflow: auto; - max-height: 160px; -} -.palettes-list-color { - cursor: pointer; - float: left; - margin: 0 0 5px 5px; - width: 32px; - height: 32px; - position: relative; -} -.palettes-list-color:nth-child(-n+5) { - margin-top: 5px; -} -.palettes-list-color div { - width: 32px; - height: 32px; -} -.palettes-list-has-scrollbar .palettes-list-color, .palettes-list-has-scrollbar .palettes-list-color div { - width: 29px -} -.palettes-list-primary-color:before, .palettes-list-secondary-color:before { - content: ""; - position: absolute; - bottom: 1px; - display: inline-block; - border: 7px solid gold; - border-top-color: transparent; - width: 0px; - height: 0px; -} -.palettes-list-primary-color:before { - left: 1px; - border-right-color: transparent; -} -.palettes-list-secondary-color:before { - right: 1px; - border-left-color: transparent; -} -.palettes-list-actions { - background-color: #3f3f3f; - border-bottom-color: #222; - height: 24px; - padding: 0; - overflow: hidden; -} - -.palettes-list-button, -.palettes-list-select { - margin: 0; - float: left; -} - -.palettes-list-button { - width: 16.66667%; -} -.palettes-list-select { - width: 66.66667%; - height: 100%; - padding: 0 5px 0 5px; - - border-style: solid; - border-width: 1px 0 1px 0; - - color: #aaa; - font-size : 0.75em; - - /*thanks firefox, you suck*/ - text-align:left; - /*text-shadow:none;*/ - font-weight: normal; - - transition : background-color 0.3s, color 0.3s; - cursor:pointer; -} - -.palettes-list-select:hover { - color: white; - background-color: #484848; -} - -.palettes-list-select:focus { - background-color: #484848; - color: white; - outline: none; -} - -.palettes-list-actions .edit-icon { - background-size: 15px; - background-position: 50%; -} -.palettes-list-no-colors { - height: 42px; - width: 100%; - color: grey; - font-size: 0.7em; - font-style: italic; - line-height: 42px; - text-align: center -} - -/** - * Animated preview styles. - */ - -.preview-container { - border : 0 Solid black; - border-radius:5px 0 0 5px; - box-shadow : 0 0 2px rgba(0,0,0,0.2); - font-size: 0; -} - -.preview-container .canvas-container { - overflow : hidden; -} - -.preview-container canvas { - border : 0 Solid transparent; -} - -.canvas-container .animated-preview-canvas-background { - position : relative; - height: 100%; -} - -#animated-preview-container { - background: #333; - border-radius : 0 0 2px 2px; - overflow : hidden; -} - -.canvas-container-wrapper { - height :200px; - width : 200px; - overflow:hidden; -} - -.tiled-frame-container { - height: 100%; - width: 100%; - position: relative; - background-repeat : repeat; -} - -.display-fps { - float: left; - color: #aaa; - font-size: 12px; - min-width: 55px; - vertical-align: bottom; - line-height: 26px; -} - -.range-fps { - overflow: hidden; - width: 100px; - height : 26px; - margin : 0; - box-sizing: border-box; - padding:0; -} - -.preview-toggle-onion-skin { - font-size: 2rem; - color: #aaa; - float: left; - line-height: 26px; - height: 100%; - padding-left: 5px; - padding-right: 5px; - border-right: 1px solid #222; - transition: 0.2s linear; - cursor:pointer; -} - -.preview-toggle-onion-skin:hover { - color : white; -} - -.preview-toggle-onion-skin-enabled, -.preview-toggle-onion-skin-enabled:hover { - color : gold; -} - -.open-popup-preview-button { - position : absolute; - z-index: 500; - right : 10px; - top : 10px; - width : 24px; - height: 18px; - - border : 2px solid white; - background : rgba(0,0,0,0.3); - cursor : pointer; - - opacity: 0; - transition: 0.3s opacity, 0.3s border-color; -} - -.minimap-container:hover .open-popup-preview-button { - opacity: 1; -} - -.open-popup-preview-button:hover { - border-color: gold; -} - -.transformations-container .tool-icon { - float:left; -} -/*** -Spectrum Colorpicker v1.1.2 -https://github.com/bgrins/spectrum -Author: Brian Grinstead -License: MIT -***/ - -.sp-container { - position:absolute; - top:0; - left:0; - display:inline-block; - *display: inline; - *zoom: 1; - /* https://github.com/bgrins/spectrum/issues/40 */ - z-index: 9999994; - overflow: hidden; -} -.sp-container.sp-flat { - position: relative; -} - -/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */ -.sp-top { - position:relative; - width: 100%; - display:inline-block; -} -.sp-top-inner { - position:absolute; - top:0; - left:0; - bottom:0; - right:0; -} -.sp-color { - position: absolute; - top:0; - left:0; - bottom:0; - right:20%; -} -.sp-hue { - position: absolute; - top:0; - right:0; - bottom:0; - left:84%; - height: 100%; -} -.sp-fill { - padding-top: 80%; -} -.sp-sat, .sp-val { - position: absolute; - top:0; - left:0; - right:0; - bottom:0; -} - -.sp-alpha-enabled .sp-top { - margin-bottom: 18px; -} -.sp-alpha-enabled .sp-alpha { - display: block; -} -.sp-alpha-handle { - position:absolute; - top:-4px; - bottom: -4px; - width: 6px; - left: 50%; - cursor: pointer; - border: 1px solid black; - background: white; - opacity: .8; -} -.sp-alpha { - display: none; - position: absolute; - bottom: -14px; - right: 0; - left: 0; - height: 8px; -} -.sp-alpha-inner { - border: solid 1px #333; -} - -/* Don't allow text selection */ -.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button { - -webkit-user-select:none; - -moz-user-select: -moz-none; - -o-user-select:none; - user-select: none; -} - -.sp-container.sp-input-disabled .sp-input-container { - display: none; -} -.sp-container.sp-buttons-disabled .sp-button-container { - display: none; -} -.sp-palette-only .sp-picker-container { - display: none; -} -.sp-palette-disabled .sp-palette-container { - display: none; -} - -.sp-initial-disabled .sp-initial { - display: none; -} - - -/* Gradients for hue, saturation and value instead of images. Not pretty... but it works */ -.sp-sat { - background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0))); - background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0)); - background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); - background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); - background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); - background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0)); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)"; - filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81'); -} -.sp-val { - background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0))); - background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0)); - background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); - background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); - background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); - background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0)); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)"; - filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000'); -} - -.sp-hue { - background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); - background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); - background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); - 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)); - background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); -} - -/* IE filters do not support multiple color stops. - Generate 6 divs, line them up, and do two color gradients for each. - Yes, really. - */ -.sp-1 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00'); -} -.sp-2 { - height:16%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00'); -} -.sp-3 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff'); -} -.sp-4 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff'); -} -.sp-5 { - height:16%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff'); -} -.sp-6 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000'); -} - -.sp-hidden { - display: none !important; -} - -/* Clearfix hack */ -.sp-cf:before, .sp-cf:after { content: ""; display: table; } -.sp-cf:after { clear: both; } -.sp-cf { *zoom: 1; } - -/* Mobile devices, make hue slider bigger so it is easier to slide */ -@media (max-device-width: 480px) { - .sp-color { right: 40%; } - .sp-hue { left: 63%; } - .sp-fill { padding-top: 60%; } -} -.sp-dragger { - border-radius: 5px; - height: 5px; - width: 5px; - border: 1px solid #fff; - background: #000; - cursor: pointer; - position:absolute; - top:0; - left: 0; -} -.sp-slider { - position: absolute; - top:0; - cursor:pointer; - height: 3px; - left: -1px; - right: -1px; - border: 1px solid #000; - background: white; - opacity: .8; -} - -/* -Theme authors: -Here are the basic themeable display options (colors, fonts, global widths). -See http://bgrins.github.io/spectrum/themes/ for instructions. -*/ - -.sp-container { - border-radius: 0; - background-color: #ECECEC; - border: solid 1px #f0c49B; - padding: 0; -} -.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue -{ - font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} -.sp-top -{ - margin-bottom: 3px; -} -.sp-color, .sp-hue -{ - border: solid 1px #666; -} - -/* Input */ -.sp-input-container { - float:right; - width: 100px; - margin-bottom: 4px; -} -.sp-initial-disabled .sp-input-container { - width: 100%; -} -.sp-input { - font-size: 12px !important; - border: 1px inset; - padding: 4px 5px; - margin: 0; - width: 100%; - background:transparent; - border-radius: 3px; - color: #222; -} -.sp-input:focus { - border: 1px solid orange; -} -.sp-input.sp-validation-error -{ - border: 1px solid red; - background: #fdd; -} -.sp-picker-container , .sp-palette-container -{ - float:left; - position: relative; - padding: 10px; - padding-bottom: 300px; - margin-bottom: -290px; -} -.sp-picker-container -{ - width: 172px; - border-left: solid 1px #fff; -} - -/* Palettes */ -.sp-palette-container -{ - border-right: solid 1px #ccc; -} - -.sp-palette .sp-thumb-el { - display: block; - position:relative; - float:left; - width: 24px; - height: 15px; - margin: 3px; - cursor: pointer; - border:solid 2px transparent; -} -.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active { - border-color: orange; -} -.sp-thumb-el -{ - position:relative; -} - -/* Initial */ -.sp-initial -{ - float: left; - border: solid 1px #333; -} -.sp-initial span { - width: 30px; - height: 25px; - border:none; - display:block; - float:left; - margin:0; -} - -/* Buttons */ -.sp-button-container { - float: right; -} - -/* Replacer (the little preview div that shows up instead of the ) */ -.sp-replacer { - margin:0; - overflow:hidden; - cursor:pointer; - padding: 4px; - display:inline-block; - *zoom: 1; - *display: inline; - border: solid 1px #91765d; - background: #eee; - color: #333; - vertical-align: middle; -} -.sp-replacer:hover, .sp-replacer.sp-active { - border-color: #F0C49B; - color: #111; -} -.sp-replacer.sp-disabled { - cursor:default; - border-color: silver; - color: silver; -} -.sp-dd { - padding: 2px 0; - height: 16px; - line-height: 16px; - float:left; - font-size:10px; -} -.sp-preview -{ - position:relative; - width:25px; - height: 20px; - border: solid 1px #222; - margin-right: 5px; - float:left; - z-index: 0; -} - -.sp-palette -{ - *width: 220px; - max-width: 220px; -} -.sp-palette .sp-thumb-el -{ - width:16px; - height: 16px; - margin:2px 1px; - border: solid 1px #d0d0d0; -} - -.sp-container -{ - padding-bottom:0; -} - - -/* Buttons: http://hellohappy.org/css3-buttons/ */ -.sp-container button { - background-color: #eeeeee; - background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); - background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); - background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); - background-image: -o-linear-gradient(top, #eeeeee, #cccccc); - background-image: linear-gradient(to bottom, #eeeeee, #cccccc); - border: 1px solid #ccc; - border-bottom: 1px solid #bbb; - border-radius: 3px; - color: #333; - font-size: 14px; - line-height: 1; - padding: 5px 4px; - text-align: center; - text-shadow: 0 1px 0 #eee; - vertical-align: middle; -} -.sp-container button:hover { - background-color: #dddddd; - background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb); - background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb); - background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb); - background-image: -o-linear-gradient(top, #dddddd, #bbbbbb); - background-image: linear-gradient(to bottom, #dddddd, #bbbbbb); - border: 1px solid #bbb; - border-bottom: 1px solid #999; - cursor: pointer; - text-shadow: 0 1px 0 #ddd; -} -.sp-container button:active { - border: 1px solid #aaa; - border-bottom: 1px solid #888; - -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; -} -.sp-cancel -{ - font-size: 11px; - color: #d93f3f !important; - margin:0; - padding:2px; - margin-right: 5px; - vertical-align: middle; - text-decoration:none; - -} -.sp-cancel:hover -{ - color: #d93f3f !important; - text-decoration: underline; -} - - -.sp-palette span:hover, .sp-palette span.sp-thumb-active -{ - border-color: #000; -} - -.sp-preview, .sp-alpha, .sp-thumb-el -{ - position:relative; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); -} -.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner -{ - display:block; - position:absolute; - top:0;left:0;bottom:0;right:0; -} - -.sp-palette .sp-thumb-inner -{ - background-position: 50% 50%; - background-repeat: no-repeat; -} - -.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner -{ - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=); -} - -.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner -{ - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=); -} - -/** - * Piskel specific CSS for spectrum widgets - */ - -/* Widget's main container */ -.sp-container { - border-radius: 4px; - background-color: #2B2B2B; - border: solid 4px #888; - padding: 5px 5px 0 5px; - box-shadow : 0 0 5px 0 black; -} - -.sp-container[data-y-position=bottom] { - border-top-left-radius: 0; -} - -.sp-container[data-y-position=top] { - border-bottom-left-radius: 0; -} - -/* Color square container */ -.sp-color, .sp-hue { - border : 1px solid #222; -} - -/* Remove the padding on the input container */ -.sp-replacer { - padding: 4px; - height: 100%; - border-width: 0; - box-sizing: border-box; - -moz-box-sizing:border-box; - background-color: #444; -} - -.sp-replacer:hover { - background-color: #888; -} - -/* Hide the triangle */ -.sp-dd { - display: none; -} - -/* */ -.sp-preview { - margin-right: 0; - height: 100%; - width: 39px; - border-width: 0; -} - -.sp-palette-row-selection { - max-width: 62px; -} - -.sp-palette .sp-thumb-el { - margin : 0 5px 5px 0; - width: 24px; - height: 24px; - border-color: #444; - -} - -.sp-picker-container, .sp-palette-container { - padding-top: 5px; - padding-right: 5px; - padding-left: 5px; - border-left-width: 0; - border-right-width: 0; -} - -.sp-picker-container { - padding: 5px; - padding-bottom: 300px; - margin-bottom: -295px; -} - -.sp-slider { - height: 5px; - left: -2px; - right: -2px; - border: 2px solid white; - background: rgba(255,255,255,0); - opacity: 1; - border-radius: 2px; - box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(0,0,0,0.5); -} - -.sp-dragger { - border-radius: 8px; - height: 12px; - width: 12px; - border: 2px solid white; - background: none; - box-sizing:border-box; - -moz-box-sizing:border-box; - box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(0,0,0,0.5); -} - -.sp-palette .sp-thumb-el.sp-thumb-active { - border-color: gold; - box-shadow: 0 0 0px 1px gold; -} - -.sp-input { - border: 1px solid #666; - margin: 0; - background: #111; - border-radius: 2px; - color: #D3D3D3; - font-family: Courier!important; -} - -.sp-input.sp-validation-error { - background: #330000; -} -/*! - * Bootstrap v2.1.1 - * - * Copyright 2012 Twitter, Inc - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Designed and built with all the love in the world @twitter by @mdo and @fat. - */ -.clearfix { - *zoom: 1; -} -.clearfix:before, -.clearfix:after { - display: table; - content: ""; - line-height: 0; -} -.clearfix:after { - clear: both; -} -.hide-text { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; -} -.input-block-level { - display: block; - width: 100%; - min-height: 30px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -.tooltip { - position: absolute; - z-index: 30000; - display: block; - visibility: visible; - padding: 5px; - font-size: 11px; - opacity: 0; - filter: alpha(opacity=0); -} -.tooltip.in { - opacity: 0.8; - filter: alpha(opacity=80); -} -.tooltip.top { - margin-top: -3px; -} -.tooltip.right { - margin-left: 3px; -} -.tooltip.bottom { - margin-top: 3px; -} -.tooltip.left { - margin-left: -3px; -} -.tooltip-inner { - max-width: 200px; - padding: 3px 8px; - color: #ffffff; - text-align: center; - text-decoration: none; - background-color: #000000; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} -.tooltip.top .tooltip-arrow { - bottom: 0; - left: 50%; - margin-left: -5px; - border-width: 5px 5px 0; - border-top-color: #000000; -} -.tooltip.right .tooltip-arrow { - top: 50%; - left: 0; - margin-top: -5px; - border-width: 5px 5px 5px 0; - border-right-color: #000000; -} -.tooltip.left .tooltip-arrow { - top: 50%; - right: 0; - margin-top: -5px; - border-width: 5px 0 5px 5px; - border-left-color: #000000; -} -.tooltip.bottom .tooltip-arrow { - top: 0; - left: 50%; - margin-left: -5px; - border-width: 0 5px 5px; - border-bottom-color: #000000; -} - -.tooltip { - line-height: 20px; -} - -.tooltip.in { - opacity: 0.95; - filter: alpha(opacity=95); -} - -.tooltip { - line-height: 20px; -} -.preview-list-wrapper { - position: relative; - height: 100%; - overflow: hidden; -} - -.preview-list-scroller { - overflow-y: scroll; - overflow-x: hidden; - height: 100%; -} - -.top-overflow, -.bottom-overflow { - height: 20px; - position: absolute; - left: 0; - right: 12px; - - -webkit-transition: all 500ms ease-out; - -moz-transition: all 500ms ease-out; - -ms-transition: all 500ms ease-out; - -o-transition: all 500ms ease-out; - transition: all 500ms ease-out; - - background-image: linear-gradient(45deg, rgba(0,0,0, 0.8) 25%, transparent 25%, transparent 75%, rgba(0,0,0, 0.8) 75%, rgba(0,0,0, 0.8)), - linear-gradient(-45deg, rgba(0,0,0, 0.8) 25%, transparent 25%, transparent 75%, rgba(0,0,0, 0.8) 75%, rgba(0,0,0, 0.8)); - background-size: 29px 45px; - background-repeat: repeat-x; - background-position-x: 3px; - z-index: 10; -} - -.top-overflow { - top: -20px; -} - -.bottom-overflow { - bottom: -20px; - background-position-x: 0; - background-position-y: -23px; -} - -.top-overflow-visible .top-overflow { - top: 0; -} - -.bottom-overflow-visible .bottom-overflow { - bottom: 0; -} - -.preview-list { - list-style-type: none; - padding-right: 7px; -} - -.add-frame-action { - border: #888 solid 4px; - font-size: 13px; - color: #888; - cursor: pointer; - padding: 6px 0; - border-radius: 4px; - margin-top: 8px; - background-image: url(../img/plus.png); - background-repeat: no-repeat; - background-position: 3px 7px; - background-size: 26px 26px; - text-indent: 18px; - background-color: #222; -} - -.add-frame-action .label { - width: 80px; - margin: 0 auto; -} - -.add-frame-action:hover { - border-color: gold; -} - -.preview-tile { - position: relative; - border: #444 3px solid; - border-radius: 3px; - margin: 5px 0; - width: 96px; - height: 96px; -} - -.preview-tile:first-child { - margin-top: 0; -} - -.preview-tile:hover { - border: #999 3px solid; -} - -.tile-view { - position : relative; -} - -.preview-tile .tile-overlay { - z-index: 10; - position: absolute; - background-color: rgba(100, 100, 100, 0.6); - opacity: 0; - height: 30px; - width: 30px; - border: none; -} - -.preview-tile:hover .tile-overlay { - opacity: 1.0; -} - -.preview-tile .tile-overlay.tile-count { - display: block; - opacity: 1.0; - border-bottom-right-radius: 3px; - top: 0; - left: 0; - font-size: 14px; - line-height: 30px; - color: white; - font-weight: bold; - text-align: center; - cursor: default; -} - -.preview-tile .tile-overlay.delete-frame-action { - background-image: url(../img/garbage.png); - background-repeat: no-repeat; - top: 0; - right: 0; - border-bottom-left-radius: 3px; - height: 30px; - width: 30px; - background-position: 5px 5px; - background-size: 20px; - cursor: pointer; -} - -.preview-tile .tile-overlay.duplicate-frame-action { - bottom: 0; - right: 0; - border-bottom-left-radius: 3px; - background-image: url(../img/duplicate.png); - background-repeat: no-repeat; - background-position: 5px 5px; - background-size: 20px; - cursor: pointer; -} - -.preview-tile .tile-overlay.dnd-action { - bottom: 0; - left: 0; - border-top-right-radius: 3px; - background-image: url(../img/dragndrop.png); - background-repeat: no-repeat; - background-position: 5px 5px; - background-size: 20px; - cursor: move; -} - -.preview-tile.selected { - border-color: gold; -} - -.preview-tile.selected:after { - content: " "; - position: absolute; - top: 38px; - right: -15px; - border: transparent 4px solid; - border-left-color: gold; - border-width: 6px; - border-style: solid; -} - - -/** - * Drag n drop styles. - */ - -.preview-tile-drop-proxy { - border: 3px dashed gold; - height: 90px; - border-radius: 9px; - background-color: rgba(255, 215,0, 0.2); -} - -.minimap-crop-frame { - position:absolute; - border:1px solid rgba(255,255,255,0.5); - z-index:100; - box-sizing : border-box; - -moz-box-sizing : border-box; - cursor : pointer; -} \ No newline at end of file diff --git a/css/piskel-style-packaged-2015-03-02-09-41.css b/css/piskel-style-packaged-2015-03-02-09-41.css deleted file mode 100644 index 8017ce2e..00000000 --- a/css/piskel-style-packaged-2015-03-02-09-41.css +++ /dev/null @@ -1,3005 +0,0 @@ -html, body { - height : 100%; width: 100%; - margin : 0; - overflow: hidden; - cursor : default; - font-family: arial; - font-size: 11px; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -ul, li { - margin : 0; - padding : 0; - list-style-type: none; -} - - -/* Force apparition of scrollbars on leopard */ -::-webkit-scrollbar { - -webkit-appearance: none; - width: 6px; -} - -::-webkit-scrollbar-thumb { - border-radius: 2px; - background-color: #666; -} - -::-webkit-scrollbar-track { - background-color: rgba(50, 50, 50, 0.4); -} - -a, a:visited { - color:gold; -} -body { - background: #1D1D1D; -} - -/* Browser fixes */ -::-ms-clear { - display: none; -} - -.allow-user-select { - -webkit-touch-callout: initial; - -webkit-user-select: initial; - -khtml-user-select: initial; - -moz-user-select: initial; - -ms-user-select: initial; - user-select: initial; -} - -.no-overflow { - overflow : hidden; -} - -.image-link { - color : gold; -} - -.pull-top, -.pull-right, -.pull-bottom, -.pull-left { - position:absolute; -} - -.pull-top { - top:0; -} - -.pull-right { - right:0; -} - -.pull-bottom { - bottom:0; -} - -.pull-left { - left:0; -} - -.uppercase { - text-transform: uppercase; -} - -/** - * Application layout - */ - -.main-wrapper { - position: absolute; - top: 5px; - right: 0; - bottom: 5px; - left: 0; -} - -.column-wrapper { - text-align: center; - font-size: 0; - position: absolute; - left: 100px; /* Reserve room for tools on the left edge of the screen. */ - top: 0; - right: 50px; /* Reserve room for actions on the right edge of the screen. */ - bottom: 0; -} - -.column { - display: inline-block; -} - -.left-column { - vertical-align: top; - height: 100%; - margin-right: 7px; -} - -.main-column { - height: 100%; - position: relative; -} - -.right-column { - vertical-align: top; - margin-left: 10px; - height: 100%; - position: relative; -} - -.drawing-canvas-container { - font-size: 0; -} - -.sticky-section { - position: fixed; - top: 0; - bottom: 0; - z-index: 1000; -} - -.sticky-section .sticky-section-wrap { - display: table; - height: 100%; -} - -.sticky-section .vertical-centerer { - display: table-cell; - vertical-align: middle; -} - -.left-sticky-section.sticky-section { - left: 0; - max-width: 100px; -} - -.left-sticky-section .tool-icon { - float: left; -} - -.cursor-coordinates { - color:#888; - font-size:12px; - font-weight:bold; - font-family:Courier; -} - -/** - * Canvases layout - */ - -.canvas { - position: relative; - z-index: 1; -} - -.canvas-container { - position: relative; - display: block; -} - -.canvas-container .canvas-background { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; -} - -.light-picker-background, -.light-canvas-background .canvas-background { - background: url(../img/canvas_background/light_canvas_background.png) repeat; -} - -.medium-picker-background, -.medium-canvas-background .canvas-background { - background: url(../img/canvas_background/medium_canvas_background.png) repeat; -} - -.lowcont-medium-picker-background, -.lowcont-medium-canvas-background .canvas-background { - background: url(../img/canvas_background/lowcont_medium_canvas_background.png) repeat; -} - -.lowcont-dark-picker-background, -.lowcont-dark-canvas-background .canvas-background { - background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat; -} - -.layers-canvas, -.canvas.onion-skin-canvas { - opacity: 0.2; -} - -.canvas.canvas-overlay, -.canvas.layers-canvas, -.canvas.onion-skin-canvas { - position: absolute; - top: 0; - left: 0; -} - -.tools-wrapper, -.options-wrapper, -.palette-wrapper { - float : left; -} - -/** - * Z-indexes should match the drawing area canvas superposition order : - * - 1 : draw layers below current layer - * - 2 : draw current layer - * - 3 : draw layers above current layer - * - 4 : draw the tools overlay - */ -.canvas.layers-below-canvas {z-index: 7;} -.canvas.drawing-canvas {z-index: 8;} -.canvas.canvas-overlay {z-index: 9;} -.canvas.onion-skin-canvas {z-index: 10;} -.canvas.layers-above-canvas {z-index: 11;} -@font-face { - font-family: 'piskel'; - src:url('fonts/icomoon.eot?-3olv93'); - src:url('fonts/icomoon.eot?#iefix-3olv93') format('embedded-opentype'), - url('fonts/icomoon.woff?-3olv93') format('woff'), - url('fonts/icomoon.ttf?-3olv93') format('truetype'), - url('fonts/icomoon.svg?-3olv93#icomoon') format('svg'); - font-weight: normal; - font-style: normal; -} - -[class^="piskel-icon-"], [class*=" piskel-icon-"] { - font-family: 'piskel'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.piskel-icon-eye:before { - content: "\e602"; -} - -.piskel-icon-onion:before { - content: "\e601"; -} - -.piskel-icon-download:before { - content: "\e600"; -} - -.piskel-icon-rotateleft:before { - content: "\e603"; -} - -.piskel-icon-rotateright:before { - content: "\e604"; -} - -.piskel-icon-fliph:before { - content: "\e605"; -} - -.piskel-icon-flipv:before { - content: "\e606"; -} - -.piskel-icon-trashplain:before { - content: "\e607"; -} - -.piskel-icon-trash:before { - content: "\e608"; -} - -.piskel-icon-merge:before { - content: "\e609"; -} - -.piskel-icon-pencil:before { - content: "\e610"; -} - -.piskel-icon-close:before { - content: "\e611"; -} - -.piskel-icon-minus:before { - content: "\e60a"; -} - -.piskel-icon-plus:before { - content: "\e60b"; -} - -.piskel-icon-arrow-up-fat:before { - content: "\e60c"; -} - -.piskel-icon-arrow-down-fat:before { - content: "\e60d"; -} - -.piskel-icon-arrow-up-thin:before { - content: "\e60e"; -} - -.piskel-icon-arrow-down-thin:before { - content: "\e60f"; -} - -.row { - display: block; -} - -.textfield { - box-sizing:border-box; - - background : black; - border : 1px solid #888; - border-radius : 2px; - padding : 3px 10px; - color : white; -} - -.textfield[disabled=disabled] { - background : #3a3a3a; -} - -.textfield-small { - width : 50px; -} - -.button { - box-sizing: border-box; - height: 24px; - - background-color: #3f3f3f; - border: 1px solid #333; - border-top-color: #666; - border-bottom-color: #222; - - cursor: pointer; - text-decoration: none; - - color: white; - text-shadow: 0 -1px 0 black; - font-weight: bold; - font-size: 1rem; - text-align: center; - - transition: background-color 0.2s linear; -} - -.button:hover { - text-decoration: none; - background-color: #484848; - color: gold; -} - -.button-primary { - background-color: rgb(255,215,0); /* gold */ - - border-color: rgb(179, 164, 0); - border-top-color: white; - border-bottom-color: rgb(151, 133, 0); - - color: black; - text-shadow: 0 1px 0 #fff; -} - -.button-primary:hover { - background-color: rgb(255,235,20); - color: #333; -} - -.button[disabled], -.button[disabled]:hover { - cursor:default; - background-color: #aaa; - color: #777; - text-shadow: 0 1px 0 #bbb; - border-color: #666; - border-top-color: #999; - border-bottom-color: #555; -} - -/** Righty sticky drawer expanded state. */ - -.right-sticky-section.sticky-section { - right: 0; - width: 47px; - - -webkit-transition: all 200ms ease-out; - -moz-transition: all 200ms ease-out; - -ms-transition: all 200ms ease-out; - -o-transition: all 200ms ease-out; - transition: all 200ms ease-out; -} - -.right-sticky-section.expanded { - right: 280px; -} - -.right-sticky-section .tool-icon { - float: right; - margin-right: 0; -} - -/********************************************************** *j* j** j*j j j j** *****************/ -/* Settings icons I I I I I\I \ */ -/********************************************************** *** *** *** * * '** *****************/ - -.tool-icon.gallery-icon { - background-image: url(../img/gallery.png); - background-position: 3px 3px; - background-size: 39px 39px; -} - -.tool-icon.resize-icon { - background-image: url(../img/resize-icon.png); - background-position: 10px 10px; - background-size: 26px 26px; -} - -.tool-icon.save-icon { - background-image: url(../img/save.png); - background-position: 6px 6px; - background-size: 36px 36px; -} - -.tool-icon.gear-icon { - background-image: url(../img/gear.png); - background-position: 6px 7px; - background-size: 32px 32px; -} - -.tool-icon.export-icon { - background-image: url(../img/export.png); - background-position: 7px 5px; - background-size: 36px 36px; - position: relative; -} - -.tool-icon.local-storage-icon { - background-image: url(../img/local-storage-icon.png); - background-position: 10px 12px; - background-size: 30px; - position: relative; -} - -.tool-icon.import-icon { - background-image: url(../img/import-icon.png); - background-position: 10px 5px; - background-size: 26px; - position: relative; -} - -.tool-icon .label { - position: absolute; - left: 0; - bottom: 4px; - right: 0; - font-size: 11px; - text-transform: uppercase; - color: #fff; - text-align: center; -} - -.drawer-content { - overflow: hidden; - background-color: #444; - height: 550px; - max-height: 100%; - width: 280px; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - box-shadow: 0 0 5px 0 black; -} - -.right-sticky-section.expanded .tool-icon { - padding-right: 1px; -} - -.right-sticky-section .tool-icon.has-expanded-drawer { - position: relative; - background-color: #444; - margin-right: 0; - padding-right: 2px; - border-left : 3px solid gold; -} - -/************************************************************************************************/ -/* Common settings classes */ -/************************************************************************************************/ - -.settings-section { - margin: 10px 20px; - font-size: 12px; - font-weight: bold; - color: #ccc; - text-shadow: 1px 1px #000; -} - -.settings-section .button { - margin: 0; -} - -.settings-title { - color : gold; - margin-top: 20px; - margin-bottom: 10px; - text-transform: uppercase; - border-bottom: 1px #aaa solid; - padding-bottom: 5px; - color: gold; -} - -.settings-description { - margin : 0 0 10px 0; - display : inline-block; -} - -.settings-form-section { - margin-bottom: 10px; -} - -.settings-item { - margin : 10px 0; -} - -[name*=checkbox] { - vertical-align: middle; -} - -/************************************************************************************************/ -/* Application settings */ -/************************************************************************************************/ - -.background-picker-wrapper { - overflow: hidden; - padding: 5px; -} - -.background-picker { - cursor: pointer; - float: left; - height: 35px; - width: 35px; - background-color: transparent; - margin-right: 15px; - padding: 1px; - position: relative; -} - -.background-picker:after { - content: " "; - position: absolute; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; -} - -.background-picker:hover:after { - border: #eee 1px solid; -} - -.background-picker.selected:after { - border: gold 1px solid; -} - -/************************************************************************************************/ -/* Save panel */ -/************************************************************************************************/ - -.anonymous .save-public-section, -.anonymous #save-online-button { - display : none; -} - -.save-field { - width: 100%; -} - -.save-status { - margin-top: 10px; - margin-bottom: -10px; - vertical-align: middle; - font-weight: normal; - text-shadow: none; - font-style: italic; -} - -.save-file-name { - white-space: nowrap; - font-weight: bold; - color: white; - font-style: normal; -} -.tiled-preview-checkbox { - vertical-align: -2px; - margin-left: 0; -} -/*******************************/ -/* Gif/Png Export Setting panel*/ -/*******************************/ -.gif-download-button, -.gif-render-button { - margin-top : 10px; - margin-right : 10px; -} - -.gif-export-preview, -.png-export-preview { - position:relative; - margin-top:10px; - max-height:32px; -} - -.gif-export-preview { - max-width:32px; -} - -.png-export-preview img { - max-height:32px; - float: left; -} - -.gif-upload-status { - width: 180px; - margin-left: 5px; - margin-top: 10px; -} - -.gif-upload, -.png-export-preview { - overflow: hidden; -} - -.gif-upload-status, -.gif-export-preview { - float : left; -} - -.preview-upload-ongoing:before{ - content: "Upload ongoing ..."; - position: absolute; - display: block; - height: 100%; - width: 100%; - text-align: center; - padding-top: 45%; - box-sizing:border-box; - -moz-box-sizing:border-box; - background: rgba(0,0,0,0.5); - color: white; -} -/************************************************************************************************/ -/* Import panel */ -/************************************************************************************************/ - -.import-section, -.resize-section { - margin: 10px 0; -} - -.file-input-button { - margin-right: 8px; - border-radius: 2px; -} - -.import-highlight { - font-weight: bold; - color: white; -} -.resize-section-title { - vertical-align: top; - display: inline-block; - padding-top: 5px; - width: 25%; -} - -.resize-content-checkbox { - margin-left: 0; -} - -.resize-ratio-checkbox, -.resize-smooth-checkbox { - vertical-align: -2px; - margin-left: 0; -} - - -/*****************/ -/* ANCHOR WIDGET */ -/*****************/ - -.resize-origin-container { - overflow: hidden; - position: relative; - width: 70px; - margin-top: 5px; - display: inline-block; -} - -.transition .resize-origin-option, -.transition .resize-origin-option:before { - transition: background-color 0.2s, border-color 0.2s; -} - -.resize-origin-option { - float: left; - position: relative; - - box-sizing: border-box; - margin: 0 1px 1px 0; - width: 20px; - height: 20px; - - background : #888; - - font-size: 8px; - text-align: center; - cursor: pointer; -} - -.disabled .resize-origin-option { - cursor: default; - background : #555; - border-color: #555 !important; -} - -.resize-origin-option.selected { - border : 3px solid gold; -} - -.resize-origin-option:before { - content: ''; - position: absolute; - display: block; - top: 50%; - left: 50%; - margin: -2px; -} - -.resize-origin-option.selected:before { - content: ''; - width: 4px; - height: 4px; - background: gold; -} - -.disabled .resize-origin-option.selected:before { - background: #555; -} - -.disabled .resize-origin-option[data-neighbor]:before { - border-color: #555 !important; -} - -.resize-origin-option[data-neighbor]:before { - width: 0; - height: 0; - border-width: 4px; - border-style: solid; - border-color: transparent; -} - -.resize-origin-option[data-neighbor="bottom"]:before { - border-top-color: gold; - margin-left: -4px; -} - -.resize-origin-option[data-neighbor="left"]:before { - border-right-color: gold; - margin-top: -4px; - margin-left: -6px; -} - -.resize-origin-option[data-neighbor="top"]:before { - border-bottom-color: gold; - margin-top: -6px; - margin-left: -4px; -} - -.resize-origin-option[data-neighbor="right"]:before { - border-left-color: gold; - margin-top: -4px; -} -.tool-icon { - position : relative; - cursor : pointer; - width: 46px; - height: 46px; - margin: 1px; - background-color: #3a3a3a; - background-repeat: no-repeat; - background-position: 12px 12px; - background-size: 24px 24px; -} - -.tool-icon.selected { - cursor: default; - background-color: #444; -} - -.tool-icon.selected:before { - content:""; - position : absolute; - height : 100%; - width : 100%; - border: 3px solid gold; - box-sizing: border-box; - -moz-box-sizing: border-box; -} - -.tool-icon:hover { - background-color: #444; -} - -/* - * Tool icons: - */ -.tool-icon.tool-pen { - background-image: url(../img/tools/pen.png); -} - -.tool-icon.tool-vertical-mirror-pen { - background-image: url(../img/tools/mirror.png); - background-position: 0px 10px; - background-size: 38px 27px; -} - -.tool-icon.tool-paint-bucket { - background-image: url(../img/tools/paintbucket.png); -} - -.tool-icon.tool-eraser { - background-image: url(../img/tools/eraser.png); -} - -.tool-icon.tool-stroke { - background-image: url(../img/tools/stroke.png); -} - -.tool-icon.tool-rectangle { - background-image: url(../img/tools/rectangle.png); - background-position: 12px 14px; - background-size: 24px 20px; -} - -.tool-icon.tool-circle { - background-image: url(../img/tools/circle.png); -} - -.tool-icon.tool-move { - background-image: url(../img/tools/hand.png); - background-size: 24px 24px; -} - -.tool-icon.tool-rectangle-select { - background-image: url(../img/tools/rectangle_selection.png); - background-position: 12px 14px; - background-size: 24px 20px; -} - -.tool-icon.tool-shape-select { - background-image: url(../img/tools/magicwand.png); -} - -.tool-icon.tool-lighten { - background-image: url(../img/tools/lighten.png); - background-position: 8px 8px; - background-size: 30px 30px; -} - -.tool-icon.tool-colorpicker { - background-image: url(../img/tools/eyedropper.png); - background-size: 23px 23px; -} - -.tool-icon.tool-colorswap { - background-image: url(../img/tools/swap-colors.png); - background-position: 6px 6px; - background-size: 36px 36px; -} - -.tool-icon.tool-flip { - background-image: url(../img/tools/flip.png); - background-position: 7px 11px; - background-size: 32px; -} - -.tool-icon.tool-rotate { - background-image: url(../img/tools/rotate.png); - background-position: 10px 9px; - background-size: 26px; -} - -.tool-icon.tool-clone { - background-image: url(../img/tools/clone.png); - background-position: 9px 15px; - background-size: 30px; -} - -/* - * Tool cursors: - */ - -.tool-paint-bucket .drawing-canvas-container:hover, -.tool-colorswap .drawing-canvas-container:hover { - cursor: url(../img/icons/paint-bucket.png) 12 12, pointer; -} - -.tool-vertical-mirror-pen .drawing-canvas-container:hover { - cursor: url(../img/icons/vertical-mirror-pen.png) 5 15, pointer; -} - -.tool-pen .drawing-canvas-container:hover, -.tool-lighten .drawing-canvas-container:hover { - cursor: url(../img/icons/pen.png) 0 15, pointer; -} - -.tool-eraser .drawing-canvas-container:hover { - cursor: url(../img/icons/eraser.png) 0 15, pointer; -} - -.tool-stroke .drawing-canvas-container:hover { - cursor: url(../img/icons/pen.png) 0 15, pointer; -} - -.tool-rectangle .drawing-canvas-container:hover { - cursor: url(../img/icons/rectangle.png) 0 15, pointer; -} - -.tool-circle .drawing-canvas-container:hover { - cursor: url(../img/icons/circle.png) 2 15, pointer; -} - -.tool-move .drawing-canvas-container:hover { - cursor: url(../img/icons/hand.png) 15 15, pointer; -} - -.tool-rectangle-select .drawing-canvas-container:hover { - cursor: crosshair; -} - -.tool-shape-select .drawing-canvas-container:hover { - cursor: url(../img/icons/wand.png) 15 15, pointer; -} - -.tool-colorpicker .drawing-canvas-container:hover { - cursor: url(../img/icons/dropper.png) 0 15, pointer; -} - -.swap-colors-icon { - background-image: url(../img/tools/swap-arrow-square-small-grey.png); - position: relative; - top: 50px; - left: 6px; - height: 18px; - width: 18px; - background-size: 18px; - opacity : 0.3; - cursor : pointer; -} - -.swap-colors-icon:hover { - opacity : 1; -} - -.tool-color-picker { - position:relative; -} - -.tool-color-picker:nth-child(1) { - z-index : 100; -} - -.tool-color-picker:nth-child(2) { - z-index : 90; - margin-top: 25px; - margin-left:-20px; -} - -.tool-color-picker input { - width: 16px; - height: 16px; - text-indent: -10000px; - border: 1px solid black; - background: white; - cursor: pointer; - position : relative; - top: 10px; - margin-left: 2px; -} - -.tool-color-picker .secondary-color-picker { - top : 18px; - margin-left: 0; -} - -.palette-wrapper { - margin-top: 10px; - margin-left: 10px; -} - -.palette-color[data-color=TRANSPARENT] { - position: relative; - top: 10px; - left: 10px; - background-color: white; - height : 16px; - width : 16px; - border: 2px solid #000; - background-size: 16px 16px; - background-position: 0 0; - background-image: -webkit-gradient( - linear, - left top, - right bottom, - color-stop(0, #fff), - color-stop(0.45, #fff), - color-stop(0.5, #ff0000), - color-stop(0.55, #fff), - color-stop(1, #fff) - ); - background-image: -moz-linear-gradient( - left top, - #fff 0%, - #fff 45%, - #f00 50%, - #fff 55%, - #fff 100% - ); -} - -.tools-tooltip-container { - text-align: left; - padding-bottom: 5px; -} - -.tools-tooltip-shortcut { - color:gold; -} - -.tools-tooltip-descriptor { - color:#999; -} - -.tools-tooltip-descriptor-button { - padding:2px; - border:1px Solid #999; - font-size:0.8em; - margin-right:5px; - width:35px; - text-align:center; - border-radius:3px; - display:inline-block; - line-height: 10px; -} - - -.action-icon { - cursor: pointer; - height: 100%; - background-repeat: no-repeat; - background-position: 50%; -} - -.edit-icon { - background-image: url('../img/tools/pen.png'); - background-repeat: no-repeat; -} - -.merge-icon { - background-image: url('../img/merge-icon.png'); - background-repeat: no-repeat; -} - -.plus-icon { - font-size:15px; - text-align:center; -} - -.delete-icon { -} -.cheatsheet-link { - position: fixed; - bottom: 10px; - left: 10px; - - padding: 1px 0 0 45px; - color : gold; - font-weight: bold; - font-size : 1.25em; - line-height: 20px; - - cursor : pointer; - - background-image:url('../img/keyboard.png'); - background-size:35px 20px; - background-repeat:no-repeat; - opacity: 0.5; - z-index: 11000; - transition : opacity 0.3s; -} - -.cheatsheet-link:hover { - opacity: 1; -} - -#cheatsheet-wrapper { - position: absolute; - z-index: 10000; - - top: 0; - right: 0; - bottom: 0; - left: 0; - - padding: 50px; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - color: white; -} - -.cheatsheet-container { - width: 100%; - height: 100%; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - padding: 20px 3%; - border-radius: 3px; - background: rgba(0,0,0,0.9); - overflow: auto; -} - -.cheatsheet-container h3 { - font-size:24px; - margin-top: 0; -} - -.cheatsheet-section { - float: left; - width : 33%; -} - -.cheatsheet-shortcut { - overflow: hidden; - margin: 10px 0; -} - -.cheatsheet-icon.tool-icon { - float: left; - display: inline-block; - - height: 30px; - width: 30px; - margin: 0 20px 0 0; - - background-size: 20px 20px; - background-position: 5px 5px; -} - -.cheatsheet-description { - font-family:Courier; - color: white; - font-size : 13px; - margin-left: 20px; - line-height : 30px; -} - -.cheatsheet-key { - display : inline-block; - height: 30px; - line-height: 30px; - padding: 0 10px; - - border : 1px solid gold; - border-radius: 2px; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - text-align: center; - font-family:Courier; - font-weight: bold; - font-size : 18px; - color: gold; -} -.color-picker-slider * { - box-sizing: border-box; -} - -.color-picker-slider input[type="range"] { - -webkit-appearance: none; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - width: 100%; - border: none; - padding: 1px 2px; - border-radius: 3px; - background-image: linear-gradient(to right, hsl(0, 30%, 70%) 0, hsl(359, 30%, 70%) 100%); - box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42; - outline: none; /* no focus outline */ -} - -/* thumb */ - -.color-picker-slider input[type="range"]::-webkit-slider-thumb { - -webkit-appearance: none; - cursor:pointer; - width: 7px; - height: 18px; - border: none; - border-radius: 2px; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #529de1), color-stop(100%, #245e8f)); /* android <= 2.2 */ - background-image: -webkit-linear-gradient(top , #529de1 0, #245e8f 100%); /* older mobile safari and android > 2.2 */; - background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */ -} -.color-picker-slider input[type="range"]::-moz-range-thumb { - width: 7px; - height: 18px; - border: none; - border-radius: 2px; - background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */ -} - -.color-picker-slider input[type="range"]::-ms-thumb { - width: 7px; - height: 18px; - border-radius: 2px; - border: 0; - background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */ -} - -/*CROSS BROWSER RESET*/ - - -.color-picker-slider input[type="range"]::-moz-range-track { - border: inherit; - background: transparent; -} - -.color-picker-slider input[type="range"]::-ms-track { - border: inherit; - color: transparent; /* don't drawn vertical reference line */ - background: transparent; -} - -.color-picker-slider input[type="range"]::-ms-fill-lower, -.color-picker-slider input[type="range"]::-ms-fill-upper { - background: transparent; -} - -.color-picker-slider input[type="range"]::-ms-tooltip { - display: none; -} - -.color-picker-slider, -.color-picker-input { - padding: 0 10px; - height : 25px; - overflow: hidden; -} - -.color-picker-slider span{ - line-height : 25px; - width : 10px; - float:left; -} - -.color-picker-slider input[type="range"]{ - float:left; - height : 10px; - width : 100px; - margin: 7px 1px 7px 8px; -} - -.color-picker-slider input[type="text"]{ - float:left; - width : 47px; - margin-left: 5px; -} - -.color-picker-input { - margin-bottom: 10px; -} - -.color-picker-input .textfield{ - width:100%; -} - -.color-picker-slider input[type="range"][data-dimension="h"] { - background-image:linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); -} -#dialog-container-wrapper { - position: absolute; - z-index: 20000; - - top: 0; - right: 0; - bottom: 0; - left: 0; - - padding: 50px 150px; - overflow: hidden; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - background-color: rgba(0,0,0,0.8); - opacity: 0; - pointer-events: none; - - color: white; -} - -#dialog-container-wrapper.animated { - transition: opacity 0.5s; -} - -#dialog-container-wrapper.show { - opacity: 1; - pointer-events: auto; -} - -#dialog-container { - width: 100%; - height: 100%; - - margin-top: -1500px; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - border-radius: 3px; - border : 3px solid gold; - background: #444; - overflow: auto; -} - -.animated #dialog-container { - transition:margin-top 0.5s; -} - -.show #dialog-container { - margin-top: 0; -} - -#dialog-container.browse-local { - width: 700px; - height: 500px; - top : 50%; - left : 50%; - position : absolute; - margin-left: -350px; -} - -.show #dialog-container.browse-local { - margin-top: -250px; -} - -#dialog-container.import-image { - width: 500px; - height: 300px; - top : 50%; - left : 50%; - position : absolute; - margin-left: -250px; -} - -.show #dialog-container.import-image { - margin-top: -150px; -} - -.dialog-wrapper { - height: 100%; - position : relative; -} - -.dialog-head { - width: 100%; - background: gold; - margin: 0; - padding: 10px; - color: black; - font-size: 1.8em; - box-sizing: border-box; - -moz-box-sizing: border-box; -} - -.dialog-close { - position: absolute; - top: 0; - right: 0; - line-height: 45px; - margin-right: 10px; - font-size: 1.3em; - cursor: pointer; -} -/************************************************************************************************/ -/* Import dialog */ -/************************************************************************************************/ - -.import-section-preview { - display : inline-block; - height : 60px; - width: 60px; - border : 1px dashed #999; - border-radius: 3px; -} - -.dialog-section-title { - display : inline-block; - width: 55px; -} - -.import-size-field, -.resize-size-field { - width: 50px; - margin-right: 8px; - text-align: right; -} - -.import-size-field:nth-of-type(2), -.resize-size-field:nth-of-type(2) { - margin-left: 5px; -} - -.import-image-file-name { - display: inline-block; - overflow: hidden; - - height: 2rem; - word-break : break-all; - vertical-align: middle; - font-style: italic; - font-weight: normal; - text-shadow: none; -} - -[name=smooth-resize-checkbox] { - margin : 0 8px; -} - -.dialog-import-body { - padding:10px 20px; - font-size:1.5em -} - -.import-button { - font-size: 1em; - height: auto; - padding: 5px 10px; -} - -/************************************************************************************************/ -/* Browse local piskels panel */ -/************************************************************************************************/ - -.local-piskel-list { - width: 100%; -} - -.local-piskel-item { - height: 3em; -} - -.local-piskel-name { - width: 40%; -} - -.local-piskel-save-date { - font-weight : normal; -} - -.local-piskel-list a { - text-decoration: none; -} - -.local-piskel-list a:hover { - text-decoration: underline; -} - -.local-piskel-list-head { - font-weight: bold; - color: gold; -} - -.local-piskel-load-button, -.local-piskel-delete-button { - width : 75px; -} -#dialog-container.create-palette { - width: 500px; - height: 600px; - top : 50%; - left : 50%; - position : absolute; - margin-left: -250px; -} - -.show #dialog-container.create-palette { - margin-top: -300px; -} - -.create-palette-section { - position: absolute; - left: 10px; - top: 50px; -} - -.create-palette-import-section { - display : inline-block; -} - -.colors-container { - position: absolute; - - left: 10px; - right: 10px; - top: 85px; - - height: 460px; - - border: 1px solid black; - background: #333; -} - -.color-picker-container { - position:absolute; - left : 280px; - top:0; - bottom:0; - right:0; - background: #222; -} - -.create-palette-actions { - position: absolute; - box-sizing: border-box; - - width:100%; - height: 45px; - - left: 0; - right: 0; - bottom: 0; - - padding:10px; - text-align:right; -} - -.color-preview { - width: 170px; - height: 70px; - margin: 11px; -} - -.colors-list { - overflow: auto; - width: 280px; - box-sizing: border-box; - height: 100%; - padding-bottom: 10px; -} - -.create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{ - position:relative; - float : left; - - width : 44px; - height : 44px; - margin : 10px 0 0 10px; - - box-sizing : border-box; - - cursor : pointer; -} - -@-moz-document url-prefix() { - .create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{ - margin : 7px 0 0 7px; - } -} - -@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - .create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{ - margin : 7px 0 0 7px; - } -} - - -.create-palette-color { - border:1px solid #2c2c2c; - transition : border-color 0.2s; -} -.create-palette-color:hover { - border:1px solid gold; -} - -.colors-list-drop-proxy { - border:2px dotted #eee; -} - -.create-palette-new-color { - border:2px dotted gold; - - border-radius: 2px; - line-height: 40px; - text-align: center; - font-size: 20px; - color: gold; -} - -.create-palette-color.selected { - border:2px solid gold; -} - -.create-palette-remove-color { - position: absolute; - top: 0; - right: 0; - padding: 2px 4px 0 0; - opacity : 0.2; - - font-weight: bold; - color: rgb(255,255,255); - text-shadow : 0 0 1px rgb(0,0,0); - - transition : opacity 0.3s, color 0.1s; -} - -.light-color .create-palette-remove-color { - color: rgb(0,0,0); - text-shadow : 0 0 1px rgb(255,255,255); -} - -.selected .create-palette-remove-color { - top: -1px; - right: -1px; -} - -.create-palette-color:hover .create-palette-remove-color { - opacity: 0.6; -} - -.create-palette-color .create-palette-remove-color:hover { - opacity: 1; - color: rgb(240,80,80); - text-shadow : 0 0 1px rgb(0,0,0); -} - -/*SPECTRUM OVERRIDES*/ - -.create-palette .sp-container{ - background-color: transparent; - border: none; - box-shadow : none; - border-radius:0; - padding:5px; -} -.user-message { - position: absolute; - right: 0; - bottom: 0; - padding: 10px 47px; - max-width: 300px; - - border-top-left-radius: 7px; - border: #F0C36D 1px solid; - border-right: 0; - border-bottom: 0; - - color: #222; - background-color: #F9EDBE; - - font-weight: bold; - font-size: 13px; - - z-index: 30000; -} - -.user-message .close { - position: absolute; - top: 6px; - right: 17px; - - color: gray; - - font-size: 18px; - font-weight: bold; - - cursor: pointer; -} - -.user-message .close:hover { - color: black; -} - -.progress-bar-container { - position: absolute; - left: 0; - bottom: 0; - padding: 10px; - width: 360px; - border-top-right-radius: 2px; - border: gold 2px solid; - border-left: 0; - border-bottom: 0; - background-color: #444; - font-size: 14px; - z-index: 30000; - color: #eee; -} - -.progress-bar-item { - float: left; - height:20px; -} - -.progress-bar-status { - line-height: 20px; - width : 40px; - overflow : hidden; - margin: 0 0 0 10px; -} - -.progress-bar { - border : 1px solid grey; - margin-top: 8px; - height : 4px; - width : 300px; - background : linear-gradient(to left, gold, gold) no-repeat -300px 0; - background-color : black; -} -.toolbox-container { - border: 4px solid #888; - font-size: medium; - color: white; - text-align: left; - border-radius: 4px; - margin-top: 5px; - margin-bottom: 10px; - overflow: hidden; -} - -.toolbox-title { - padding: 8px; - margin: 0; - font-size: 15px; - background: #222; -} - -/** - * Layers container - */ -.layers-list-container { -} - -/*.layers-title { - background-image: url('../img/layers.svg'); - background-size: 22px; - background-repeat: no-repeat; - background-position: 97%; -}*/ - -.layers-title { - position: relative; -} - -.layers-toggle-preview { - position: absolute; - top: 0.3em; - right: 0.5em; - - color: #999; - font-size: 1.3em; - cursor: pointer; - - transition: 0.2s linear; -} - -.layers-toggle-preview:hover { - color: white; -} - -.layers-toggle-preview-enabled, -.layers-toggle-preview-enabled:hover { - color : gold; -} - -.layers-list { - font-size : 12px; -} - -.layer-item { - height:24px; - line-height: 24px; - padding : 0 0 0 10px; - border-top: 1px solid #444; - cursor : pointer; -} - -.layer-item:hover { - background : #222; -} - -.current-layer-item, -.current-layer-item:hover { - background : #333; - color: gold; -} - -.layers-button-container { - overflow : hidden; -} - -.layers-button { - margin: 0; - width: 16.66667%; - float : left; -} - -/* @override */ -.layers-button-container .layers-button { - border-left-width: 0; -} - -.layers-button:last-child { - border-right-width: 0; -} -.palettes-title { - background-size: 22px; - background-repeat: no-repeat; - background-position: 97%; -} -.palettes-list-colors { - overflow: auto; - max-height: 160px; -} -.palettes-list-color { - cursor: pointer; - float: left; - margin: 0 0 5px 5px; - width: 32px; - height: 32px; - position: relative; -} -.palettes-list-color:nth-child(-n+5) { - margin-top: 5px; -} -.palettes-list-color div { - width: 32px; - height: 32px; -} -.palettes-list-has-scrollbar .palettes-list-color, .palettes-list-has-scrollbar .palettes-list-color div { - width: 29px -} -.palettes-list-primary-color:before, .palettes-list-secondary-color:before { - content: ""; - position: absolute; - bottom: 1px; - display: inline-block; - border: 7px solid gold; - border-top-color: transparent; - width: 0px; - height: 0px; -} -.palettes-list-primary-color:before { - left: 1px; - border-right-color: transparent; -} -.palettes-list-secondary-color:before { - right: 1px; - border-left-color: transparent; -} -.palettes-list-actions { - background-color: #3f3f3f; - border-bottom-color: #222; - height: 24px; - padding: 0; - overflow: hidden; -} - -.palettes-list-button, -.palettes-list-select { - margin: 0; - float: left; -} - -.palettes-list-button { - width: 16.66667%; -} -.palettes-list-select { - width: 66.66667%; - height: 100%; - padding: 0 5px 0 5px; - - border-style: solid; - border-width: 1px 0 1px 0; - - color: #aaa; - font-size : 0.75em; - - /*thanks firefox, you suck*/ - text-align:left; - /*text-shadow:none;*/ - font-weight: normal; - - transition : background-color 0.3s, color 0.3s; - cursor:pointer; -} - -.palettes-list-select:hover { - color: white; - background-color: #484848; -} - -.palettes-list-select:focus { - background-color: #484848; - color: white; - outline: none; -} - -.palettes-list-actions .edit-icon { - background-size: 15px; - background-position: 50%; -} -.palettes-list-no-colors { - height: 42px; - width: 100%; - color: grey; - font-size: 0.7em; - font-style: italic; - line-height: 42px; - text-align: center -} - -/** - * Animated preview styles. - */ - -.preview-container { - border : 0 Solid black; - border-radius:5px 0 0 5px; - box-shadow : 0 0 2px rgba(0,0,0,0.2); - font-size: 0; -} - -.preview-container .canvas-container { - overflow : hidden; -} - -.preview-container canvas { - border : 0 Solid transparent; -} - -.canvas-container .animated-preview-canvas-background { - position : relative; - height: 100%; -} - -#animated-preview-container { - background: #333; - border-radius : 0 0 2px 2px; - overflow : hidden; -} - -.canvas-container-wrapper { - height :200px; - width : 200px; - overflow:hidden; -} - -.tiled-frame-container { - height: 100%; - width: 100%; - position: relative; - background-repeat : repeat; -} - -.display-fps { - float: left; - color: #aaa; - font-size: 12px; - min-width: 55px; - vertical-align: bottom; - line-height: 26px; -} - -.range-fps { - overflow: hidden; - width: 100px; - height : 26px; - margin : 0; - box-sizing: border-box; - padding:0; -} - -.preview-toggle-onion-skin { - font-size: 2rem; - color: #aaa; - float: left; - line-height: 26px; - height: 100%; - padding-left: 5px; - padding-right: 5px; - border-right: 1px solid #222; - transition: 0.2s linear; - cursor:pointer; -} - -.preview-toggle-onion-skin:hover { - color : white; -} - -.preview-toggle-onion-skin-enabled, -.preview-toggle-onion-skin-enabled:hover { - color : gold; -} - -.open-popup-preview-button { - position : absolute; - z-index: 500; - right : 10px; - top : 10px; - width : 24px; - height: 18px; - - border : 2px solid white; - background : rgba(0,0,0,0.3); - cursor : pointer; - - opacity: 0; - transition: 0.3s opacity, 0.3s border-color; -} - -.minimap-container:hover .open-popup-preview-button { - opacity: 1; -} - -.open-popup-preview-button:hover { - border-color: gold; -} - -.transformations-container .tool-icon { - float:left; -} -/*** -Spectrum Colorpicker v1.1.2 -https://github.com/bgrins/spectrum -Author: Brian Grinstead -License: MIT -***/ - -.sp-container { - position:absolute; - top:0; - left:0; - display:inline-block; - *display: inline; - *zoom: 1; - /* https://github.com/bgrins/spectrum/issues/40 */ - z-index: 9999994; - overflow: hidden; -} -.sp-container.sp-flat { - position: relative; -} - -/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */ -.sp-top { - position:relative; - width: 100%; - display:inline-block; -} -.sp-top-inner { - position:absolute; - top:0; - left:0; - bottom:0; - right:0; -} -.sp-color { - position: absolute; - top:0; - left:0; - bottom:0; - right:20%; -} -.sp-hue { - position: absolute; - top:0; - right:0; - bottom:0; - left:84%; - height: 100%; -} -.sp-fill { - padding-top: 80%; -} -.sp-sat, .sp-val { - position: absolute; - top:0; - left:0; - right:0; - bottom:0; -} - -.sp-alpha-enabled .sp-top { - margin-bottom: 18px; -} -.sp-alpha-enabled .sp-alpha { - display: block; -} -.sp-alpha-handle { - position:absolute; - top:-4px; - bottom: -4px; - width: 6px; - left: 50%; - cursor: pointer; - border: 1px solid black; - background: white; - opacity: .8; -} -.sp-alpha { - display: none; - position: absolute; - bottom: -14px; - right: 0; - left: 0; - height: 8px; -} -.sp-alpha-inner { - border: solid 1px #333; -} - -/* Don't allow text selection */ -.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button { - -webkit-user-select:none; - -moz-user-select: -moz-none; - -o-user-select:none; - user-select: none; -} - -.sp-container.sp-input-disabled .sp-input-container { - display: none; -} -.sp-container.sp-buttons-disabled .sp-button-container { - display: none; -} -.sp-palette-only .sp-picker-container { - display: none; -} -.sp-palette-disabled .sp-palette-container { - display: none; -} - -.sp-initial-disabled .sp-initial { - display: none; -} - - -/* Gradients for hue, saturation and value instead of images. Not pretty... but it works */ -.sp-sat { - background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0))); - background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0)); - background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); - background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); - background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); - background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0)); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)"; - filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81'); -} -.sp-val { - background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0))); - background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0)); - background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); - background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); - background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); - background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0)); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)"; - filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000'); -} - -.sp-hue { - background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); - background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); - background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); - 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)); - background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); -} - -/* IE filters do not support multiple color stops. - Generate 6 divs, line them up, and do two color gradients for each. - Yes, really. - */ -.sp-1 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00'); -} -.sp-2 { - height:16%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00'); -} -.sp-3 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff'); -} -.sp-4 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff'); -} -.sp-5 { - height:16%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff'); -} -.sp-6 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000'); -} - -.sp-hidden { - display: none !important; -} - -/* Clearfix hack */ -.sp-cf:before, .sp-cf:after { content: ""; display: table; } -.sp-cf:after { clear: both; } -.sp-cf { *zoom: 1; } - -/* Mobile devices, make hue slider bigger so it is easier to slide */ -@media (max-device-width: 480px) { - .sp-color { right: 40%; } - .sp-hue { left: 63%; } - .sp-fill { padding-top: 60%; } -} -.sp-dragger { - border-radius: 5px; - height: 5px; - width: 5px; - border: 1px solid #fff; - background: #000; - cursor: pointer; - position:absolute; - top:0; - left: 0; -} -.sp-slider { - position: absolute; - top:0; - cursor:pointer; - height: 3px; - left: -1px; - right: -1px; - border: 1px solid #000; - background: white; - opacity: .8; -} - -/* -Theme authors: -Here are the basic themeable display options (colors, fonts, global widths). -See http://bgrins.github.io/spectrum/themes/ for instructions. -*/ - -.sp-container { - border-radius: 0; - background-color: #ECECEC; - border: solid 1px #f0c49B; - padding: 0; -} -.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue -{ - font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} -.sp-top -{ - margin-bottom: 3px; -} -.sp-color, .sp-hue -{ - border: solid 1px #666; -} - -/* Input */ -.sp-input-container { - float:right; - width: 100px; - margin-bottom: 4px; -} -.sp-initial-disabled .sp-input-container { - width: 100%; -} -.sp-input { - font-size: 12px !important; - border: 1px inset; - padding: 4px 5px; - margin: 0; - width: 100%; - background:transparent; - border-radius: 3px; - color: #222; -} -.sp-input:focus { - border: 1px solid orange; -} -.sp-input.sp-validation-error -{ - border: 1px solid red; - background: #fdd; -} -.sp-picker-container , .sp-palette-container -{ - float:left; - position: relative; - padding: 10px; - padding-bottom: 300px; - margin-bottom: -290px; -} -.sp-picker-container -{ - width: 172px; - border-left: solid 1px #fff; -} - -/* Palettes */ -.sp-palette-container -{ - border-right: solid 1px #ccc; -} - -.sp-palette .sp-thumb-el { - display: block; - position:relative; - float:left; - width: 24px; - height: 15px; - margin: 3px; - cursor: pointer; - border:solid 2px transparent; -} -.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active { - border-color: orange; -} -.sp-thumb-el -{ - position:relative; -} - -/* Initial */ -.sp-initial -{ - float: left; - border: solid 1px #333; -} -.sp-initial span { - width: 30px; - height: 25px; - border:none; - display:block; - float:left; - margin:0; -} - -/* Buttons */ -.sp-button-container { - float: right; -} - -/* Replacer (the little preview div that shows up instead of the ) */ -.sp-replacer { - margin:0; - overflow:hidden; - cursor:pointer; - padding: 4px; - display:inline-block; - *zoom: 1; - *display: inline; - border: solid 1px #91765d; - background: #eee; - color: #333; - vertical-align: middle; -} -.sp-replacer:hover, .sp-replacer.sp-active { - border-color: #F0C49B; - color: #111; -} -.sp-replacer.sp-disabled { - cursor:default; - border-color: silver; - color: silver; -} -.sp-dd { - padding: 2px 0; - height: 16px; - line-height: 16px; - float:left; - font-size:10px; -} -.sp-preview -{ - position:relative; - width:25px; - height: 20px; - border: solid 1px #222; - margin-right: 5px; - float:left; - z-index: 0; -} - -.sp-palette -{ - *width: 220px; - max-width: 220px; -} -.sp-palette .sp-thumb-el -{ - width:16px; - height: 16px; - margin:2px 1px; - border: solid 1px #d0d0d0; -} - -.sp-container -{ - padding-bottom:0; -} - - -/* Buttons: http://hellohappy.org/css3-buttons/ */ -.sp-container button { - background-color: #eeeeee; - background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); - background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); - background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); - background-image: -o-linear-gradient(top, #eeeeee, #cccccc); - background-image: linear-gradient(to bottom, #eeeeee, #cccccc); - border: 1px solid #ccc; - border-bottom: 1px solid #bbb; - border-radius: 3px; - color: #333; - font-size: 14px; - line-height: 1; - padding: 5px 4px; - text-align: center; - text-shadow: 0 1px 0 #eee; - vertical-align: middle; -} -.sp-container button:hover { - background-color: #dddddd; - background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb); - background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb); - background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb); - background-image: -o-linear-gradient(top, #dddddd, #bbbbbb); - background-image: linear-gradient(to bottom, #dddddd, #bbbbbb); - border: 1px solid #bbb; - border-bottom: 1px solid #999; - cursor: pointer; - text-shadow: 0 1px 0 #ddd; -} -.sp-container button:active { - border: 1px solid #aaa; - border-bottom: 1px solid #888; - -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; -} -.sp-cancel -{ - font-size: 11px; - color: #d93f3f !important; - margin:0; - padding:2px; - margin-right: 5px; - vertical-align: middle; - text-decoration:none; - -} -.sp-cancel:hover -{ - color: #d93f3f !important; - text-decoration: underline; -} - - -.sp-palette span:hover, .sp-palette span.sp-thumb-active -{ - border-color: #000; -} - -.sp-preview, .sp-alpha, .sp-thumb-el -{ - position:relative; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); -} -.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner -{ - display:block; - position:absolute; - top:0;left:0;bottom:0;right:0; -} - -.sp-palette .sp-thumb-inner -{ - background-position: 50% 50%; - background-repeat: no-repeat; -} - -.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner -{ - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=); -} - -.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner -{ - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=); -} - -/** - * Piskel specific CSS for spectrum widgets - */ - -/* Widget's main container */ -.sp-container { - border-radius: 4px; - background-color: #2B2B2B; - border: solid 4px #888; - padding: 5px 5px 0 5px; - box-shadow : 0 0 5px 0 black; -} - -.sp-container[data-y-position=bottom] { - border-top-left-radius: 0; -} - -.sp-container[data-y-position=top] { - border-bottom-left-radius: 0; -} - -/* Color square container */ -.sp-color, .sp-hue { - border : 1px solid #222; -} - -/* Remove the padding on the input container */ -.sp-replacer { - padding: 4px; - height: 100%; - border-width: 0; - box-sizing: border-box; - -moz-box-sizing:border-box; - background-color: #444; -} - -.sp-replacer:hover { - background-color: #888; -} - -/* Hide the triangle */ -.sp-dd { - display: none; -} - -/* */ -.sp-preview { - margin-right: 0; - height: 100%; - width: 39px; - border-width: 0; -} - -.sp-palette-row-selection { - max-width: 62px; -} - -.sp-palette .sp-thumb-el { - margin : 0 5px 5px 0; - width: 24px; - height: 24px; - border-color: #444; - -} - -.sp-picker-container, .sp-palette-container { - padding-top: 5px; - padding-right: 5px; - padding-left: 5px; - border-left-width: 0; - border-right-width: 0; -} - -.sp-picker-container { - padding: 5px; - padding-bottom: 300px; - margin-bottom: -295px; -} - -.sp-slider { - height: 5px; - left: -2px; - right: -2px; - border: 2px solid white; - background: rgba(255,255,255,0); - opacity: 1; - border-radius: 2px; - box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(0,0,0,0.5); -} - -.sp-dragger { - border-radius: 8px; - height: 12px; - width: 12px; - border: 2px solid white; - background: none; - box-sizing:border-box; - -moz-box-sizing:border-box; - box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(0,0,0,0.5); -} - -.sp-palette .sp-thumb-el.sp-thumb-active { - border-color: gold; - box-shadow: 0 0 0px 1px gold; -} - -.sp-input { - border: 1px solid #666; - margin: 0; - background: #111; - border-radius: 2px; - color: #D3D3D3; - font-family: Courier!important; -} - -.sp-input.sp-validation-error { - background: #330000; -} -/*! - * Bootstrap v2.1.1 - * - * Copyright 2012 Twitter, Inc - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Designed and built with all the love in the world @twitter by @mdo and @fat. - */ -.clearfix { - *zoom: 1; -} -.clearfix:before, -.clearfix:after { - display: table; - content: ""; - line-height: 0; -} -.clearfix:after { - clear: both; -} -.hide-text { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; -} -.input-block-level { - display: block; - width: 100%; - min-height: 30px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -.tooltip { - position: absolute; - z-index: 30000; - display: block; - visibility: visible; - padding: 5px; - font-size: 11px; - opacity: 0; - filter: alpha(opacity=0); -} -.tooltip.in { - opacity: 0.8; - filter: alpha(opacity=80); -} -.tooltip.top { - margin-top: -3px; -} -.tooltip.right { - margin-left: 3px; -} -.tooltip.bottom { - margin-top: 3px; -} -.tooltip.left { - margin-left: -3px; -} -.tooltip-inner { - max-width: 200px; - padding: 3px 8px; - color: #ffffff; - text-align: center; - text-decoration: none; - background-color: #000000; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} -.tooltip.top .tooltip-arrow { - bottom: 0; - left: 50%; - margin-left: -5px; - border-width: 5px 5px 0; - border-top-color: #000000; -} -.tooltip.right .tooltip-arrow { - top: 50%; - left: 0; - margin-top: -5px; - border-width: 5px 5px 5px 0; - border-right-color: #000000; -} -.tooltip.left .tooltip-arrow { - top: 50%; - right: 0; - margin-top: -5px; - border-width: 5px 0 5px 5px; - border-left-color: #000000; -} -.tooltip.bottom .tooltip-arrow { - top: 0; - left: 50%; - margin-left: -5px; - border-width: 0 5px 5px; - border-bottom-color: #000000; -} - -.tooltip { - line-height: 20px; -} - -.tooltip.in { - opacity: 0.95; - filter: alpha(opacity=95); -} - -.tooltip { - line-height: 20px; -} -.preview-list-wrapper { - position: relative; - height: 100%; - overflow: hidden; -} - -.preview-list-scroller { - overflow-y: scroll; - overflow-x: hidden; - height: 100%; -} - -.top-overflow, -.bottom-overflow { - height: 20px; - position: absolute; - left: 0; - right: 12px; - - -webkit-transition: all 500ms ease-out; - -moz-transition: all 500ms ease-out; - -ms-transition: all 500ms ease-out; - -o-transition: all 500ms ease-out; - transition: all 500ms ease-out; - - background-image: linear-gradient(45deg, rgba(0,0,0, 0.8) 25%, transparent 25%, transparent 75%, rgba(0,0,0, 0.8) 75%, rgba(0,0,0, 0.8)), - linear-gradient(-45deg, rgba(0,0,0, 0.8) 25%, transparent 25%, transparent 75%, rgba(0,0,0, 0.8) 75%, rgba(0,0,0, 0.8)); - background-size: 29px 45px; - background-repeat: repeat-x; - background-position-x: 3px; - z-index: 10; -} - -.top-overflow { - top: -20px; -} - -.bottom-overflow { - bottom: -20px; - background-position-x: 0; - background-position-y: -23px; -} - -.top-overflow-visible .top-overflow { - top: 0; -} - -.bottom-overflow-visible .bottom-overflow { - bottom: 0; -} - -.preview-list { - list-style-type: none; - padding-right: 7px; -} - -.add-frame-action { - border: #888 solid 4px; - font-size: 13px; - color: #888; - cursor: pointer; - padding: 6px 0; - border-radius: 4px; - margin-top: 8px; - background-image: url(../img/plus.png); - background-repeat: no-repeat; - background-position: 3px 7px; - background-size: 26px 26px; - text-indent: 18px; - background-color: #222; -} - -.add-frame-action .label { - width: 80px; - margin: 0 auto; -} - -.add-frame-action:hover { - border-color: gold; -} - -.preview-tile { - position: relative; - border: #444 3px solid; - border-radius: 3px; - margin: 5px 0; - width: 96px; - height: 96px; -} - -.preview-tile:first-child { - margin-top: 0; -} - -.preview-tile:hover { - border: #999 3px solid; -} - -.tile-view { - position : relative; -} - -.preview-tile .tile-overlay { - z-index: 10; - position: absolute; - background-color: rgba(100, 100, 100, 0.6); - opacity: 0; - height: 30px; - width: 30px; - border: none; -} - -.preview-tile:hover .tile-overlay { - opacity: 1.0; -} - -.preview-tile .tile-overlay.tile-count { - display: block; - opacity: 1.0; - border-bottom-right-radius: 3px; - top: 0; - left: 0; - font-size: 14px; - line-height: 30px; - color: white; - font-weight: bold; - text-align: center; - cursor: default; -} - -.preview-tile .tile-overlay.delete-frame-action { - background-image: url(../img/garbage.png); - background-repeat: no-repeat; - top: 0; - right: 0; - border-bottom-left-radius: 3px; - height: 30px; - width: 30px; - background-position: 5px 5px; - background-size: 20px; - cursor: pointer; -} - -.preview-tile .tile-overlay.duplicate-frame-action { - bottom: 0; - right: 0; - border-bottom-left-radius: 3px; - background-image: url(../img/duplicate.png); - background-repeat: no-repeat; - background-position: 5px 5px; - background-size: 20px; - cursor: pointer; -} - -.preview-tile .tile-overlay.dnd-action { - bottom: 0; - left: 0; - border-top-right-radius: 3px; - background-image: url(../img/dragndrop.png); - background-repeat: no-repeat; - background-position: 5px 5px; - background-size: 20px; - cursor: move; -} - -.preview-tile.selected { - border-color: gold; -} - -.preview-tile.selected:after { - content: " "; - position: absolute; - top: 38px; - right: -15px; - border: transparent 4px solid; - border-left-color: gold; - border-width: 6px; - border-style: solid; -} - - -/** - * Drag n drop styles. - */ - -.preview-tile-drop-proxy { - border: 3px dashed gold; - height: 90px; - border-radius: 9px; - background-color: rgba(255, 215,0, 0.2); -} - -.minimap-crop-frame { - position:absolute; - border:1px solid rgba(255,255,255,0.5); - z-index:100; - box-sizing : border-box; - -moz-box-sizing : border-box; - cursor : pointer; -} \ No newline at end of file diff --git a/css/piskel-style-packaged-2015-03-02-09-45.css b/css/piskel-style-packaged-2015-03-02-09-45.css deleted file mode 100644 index 8017ce2e..00000000 --- a/css/piskel-style-packaged-2015-03-02-09-45.css +++ /dev/null @@ -1,3005 +0,0 @@ -html, body { - height : 100%; width: 100%; - margin : 0; - overflow: hidden; - cursor : default; - font-family: arial; - font-size: 11px; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -ul, li { - margin : 0; - padding : 0; - list-style-type: none; -} - - -/* Force apparition of scrollbars on leopard */ -::-webkit-scrollbar { - -webkit-appearance: none; - width: 6px; -} - -::-webkit-scrollbar-thumb { - border-radius: 2px; - background-color: #666; -} - -::-webkit-scrollbar-track { - background-color: rgba(50, 50, 50, 0.4); -} - -a, a:visited { - color:gold; -} -body { - background: #1D1D1D; -} - -/* Browser fixes */ -::-ms-clear { - display: none; -} - -.allow-user-select { - -webkit-touch-callout: initial; - -webkit-user-select: initial; - -khtml-user-select: initial; - -moz-user-select: initial; - -ms-user-select: initial; - user-select: initial; -} - -.no-overflow { - overflow : hidden; -} - -.image-link { - color : gold; -} - -.pull-top, -.pull-right, -.pull-bottom, -.pull-left { - position:absolute; -} - -.pull-top { - top:0; -} - -.pull-right { - right:0; -} - -.pull-bottom { - bottom:0; -} - -.pull-left { - left:0; -} - -.uppercase { - text-transform: uppercase; -} - -/** - * Application layout - */ - -.main-wrapper { - position: absolute; - top: 5px; - right: 0; - bottom: 5px; - left: 0; -} - -.column-wrapper { - text-align: center; - font-size: 0; - position: absolute; - left: 100px; /* Reserve room for tools on the left edge of the screen. */ - top: 0; - right: 50px; /* Reserve room for actions on the right edge of the screen. */ - bottom: 0; -} - -.column { - display: inline-block; -} - -.left-column { - vertical-align: top; - height: 100%; - margin-right: 7px; -} - -.main-column { - height: 100%; - position: relative; -} - -.right-column { - vertical-align: top; - margin-left: 10px; - height: 100%; - position: relative; -} - -.drawing-canvas-container { - font-size: 0; -} - -.sticky-section { - position: fixed; - top: 0; - bottom: 0; - z-index: 1000; -} - -.sticky-section .sticky-section-wrap { - display: table; - height: 100%; -} - -.sticky-section .vertical-centerer { - display: table-cell; - vertical-align: middle; -} - -.left-sticky-section.sticky-section { - left: 0; - max-width: 100px; -} - -.left-sticky-section .tool-icon { - float: left; -} - -.cursor-coordinates { - color:#888; - font-size:12px; - font-weight:bold; - font-family:Courier; -} - -/** - * Canvases layout - */ - -.canvas { - position: relative; - z-index: 1; -} - -.canvas-container { - position: relative; - display: block; -} - -.canvas-container .canvas-background { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; -} - -.light-picker-background, -.light-canvas-background .canvas-background { - background: url(../img/canvas_background/light_canvas_background.png) repeat; -} - -.medium-picker-background, -.medium-canvas-background .canvas-background { - background: url(../img/canvas_background/medium_canvas_background.png) repeat; -} - -.lowcont-medium-picker-background, -.lowcont-medium-canvas-background .canvas-background { - background: url(../img/canvas_background/lowcont_medium_canvas_background.png) repeat; -} - -.lowcont-dark-picker-background, -.lowcont-dark-canvas-background .canvas-background { - background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat; -} - -.layers-canvas, -.canvas.onion-skin-canvas { - opacity: 0.2; -} - -.canvas.canvas-overlay, -.canvas.layers-canvas, -.canvas.onion-skin-canvas { - position: absolute; - top: 0; - left: 0; -} - -.tools-wrapper, -.options-wrapper, -.palette-wrapper { - float : left; -} - -/** - * Z-indexes should match the drawing area canvas superposition order : - * - 1 : draw layers below current layer - * - 2 : draw current layer - * - 3 : draw layers above current layer - * - 4 : draw the tools overlay - */ -.canvas.layers-below-canvas {z-index: 7;} -.canvas.drawing-canvas {z-index: 8;} -.canvas.canvas-overlay {z-index: 9;} -.canvas.onion-skin-canvas {z-index: 10;} -.canvas.layers-above-canvas {z-index: 11;} -@font-face { - font-family: 'piskel'; - src:url('fonts/icomoon.eot?-3olv93'); - src:url('fonts/icomoon.eot?#iefix-3olv93') format('embedded-opentype'), - url('fonts/icomoon.woff?-3olv93') format('woff'), - url('fonts/icomoon.ttf?-3olv93') format('truetype'), - url('fonts/icomoon.svg?-3olv93#icomoon') format('svg'); - font-weight: normal; - font-style: normal; -} - -[class^="piskel-icon-"], [class*=" piskel-icon-"] { - font-family: 'piskel'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.piskel-icon-eye:before { - content: "\e602"; -} - -.piskel-icon-onion:before { - content: "\e601"; -} - -.piskel-icon-download:before { - content: "\e600"; -} - -.piskel-icon-rotateleft:before { - content: "\e603"; -} - -.piskel-icon-rotateright:before { - content: "\e604"; -} - -.piskel-icon-fliph:before { - content: "\e605"; -} - -.piskel-icon-flipv:before { - content: "\e606"; -} - -.piskel-icon-trashplain:before { - content: "\e607"; -} - -.piskel-icon-trash:before { - content: "\e608"; -} - -.piskel-icon-merge:before { - content: "\e609"; -} - -.piskel-icon-pencil:before { - content: "\e610"; -} - -.piskel-icon-close:before { - content: "\e611"; -} - -.piskel-icon-minus:before { - content: "\e60a"; -} - -.piskel-icon-plus:before { - content: "\e60b"; -} - -.piskel-icon-arrow-up-fat:before { - content: "\e60c"; -} - -.piskel-icon-arrow-down-fat:before { - content: "\e60d"; -} - -.piskel-icon-arrow-up-thin:before { - content: "\e60e"; -} - -.piskel-icon-arrow-down-thin:before { - content: "\e60f"; -} - -.row { - display: block; -} - -.textfield { - box-sizing:border-box; - - background : black; - border : 1px solid #888; - border-radius : 2px; - padding : 3px 10px; - color : white; -} - -.textfield[disabled=disabled] { - background : #3a3a3a; -} - -.textfield-small { - width : 50px; -} - -.button { - box-sizing: border-box; - height: 24px; - - background-color: #3f3f3f; - border: 1px solid #333; - border-top-color: #666; - border-bottom-color: #222; - - cursor: pointer; - text-decoration: none; - - color: white; - text-shadow: 0 -1px 0 black; - font-weight: bold; - font-size: 1rem; - text-align: center; - - transition: background-color 0.2s linear; -} - -.button:hover { - text-decoration: none; - background-color: #484848; - color: gold; -} - -.button-primary { - background-color: rgb(255,215,0); /* gold */ - - border-color: rgb(179, 164, 0); - border-top-color: white; - border-bottom-color: rgb(151, 133, 0); - - color: black; - text-shadow: 0 1px 0 #fff; -} - -.button-primary:hover { - background-color: rgb(255,235,20); - color: #333; -} - -.button[disabled], -.button[disabled]:hover { - cursor:default; - background-color: #aaa; - color: #777; - text-shadow: 0 1px 0 #bbb; - border-color: #666; - border-top-color: #999; - border-bottom-color: #555; -} - -/** Righty sticky drawer expanded state. */ - -.right-sticky-section.sticky-section { - right: 0; - width: 47px; - - -webkit-transition: all 200ms ease-out; - -moz-transition: all 200ms ease-out; - -ms-transition: all 200ms ease-out; - -o-transition: all 200ms ease-out; - transition: all 200ms ease-out; -} - -.right-sticky-section.expanded { - right: 280px; -} - -.right-sticky-section .tool-icon { - float: right; - margin-right: 0; -} - -/********************************************************** *j* j** j*j j j j** *****************/ -/* Settings icons I I I I I\I \ */ -/********************************************************** *** *** *** * * '** *****************/ - -.tool-icon.gallery-icon { - background-image: url(../img/gallery.png); - background-position: 3px 3px; - background-size: 39px 39px; -} - -.tool-icon.resize-icon { - background-image: url(../img/resize-icon.png); - background-position: 10px 10px; - background-size: 26px 26px; -} - -.tool-icon.save-icon { - background-image: url(../img/save.png); - background-position: 6px 6px; - background-size: 36px 36px; -} - -.tool-icon.gear-icon { - background-image: url(../img/gear.png); - background-position: 6px 7px; - background-size: 32px 32px; -} - -.tool-icon.export-icon { - background-image: url(../img/export.png); - background-position: 7px 5px; - background-size: 36px 36px; - position: relative; -} - -.tool-icon.local-storage-icon { - background-image: url(../img/local-storage-icon.png); - background-position: 10px 12px; - background-size: 30px; - position: relative; -} - -.tool-icon.import-icon { - background-image: url(../img/import-icon.png); - background-position: 10px 5px; - background-size: 26px; - position: relative; -} - -.tool-icon .label { - position: absolute; - left: 0; - bottom: 4px; - right: 0; - font-size: 11px; - text-transform: uppercase; - color: #fff; - text-align: center; -} - -.drawer-content { - overflow: hidden; - background-color: #444; - height: 550px; - max-height: 100%; - width: 280px; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - box-shadow: 0 0 5px 0 black; -} - -.right-sticky-section.expanded .tool-icon { - padding-right: 1px; -} - -.right-sticky-section .tool-icon.has-expanded-drawer { - position: relative; - background-color: #444; - margin-right: 0; - padding-right: 2px; - border-left : 3px solid gold; -} - -/************************************************************************************************/ -/* Common settings classes */ -/************************************************************************************************/ - -.settings-section { - margin: 10px 20px; - font-size: 12px; - font-weight: bold; - color: #ccc; - text-shadow: 1px 1px #000; -} - -.settings-section .button { - margin: 0; -} - -.settings-title { - color : gold; - margin-top: 20px; - margin-bottom: 10px; - text-transform: uppercase; - border-bottom: 1px #aaa solid; - padding-bottom: 5px; - color: gold; -} - -.settings-description { - margin : 0 0 10px 0; - display : inline-block; -} - -.settings-form-section { - margin-bottom: 10px; -} - -.settings-item { - margin : 10px 0; -} - -[name*=checkbox] { - vertical-align: middle; -} - -/************************************************************************************************/ -/* Application settings */ -/************************************************************************************************/ - -.background-picker-wrapper { - overflow: hidden; - padding: 5px; -} - -.background-picker { - cursor: pointer; - float: left; - height: 35px; - width: 35px; - background-color: transparent; - margin-right: 15px; - padding: 1px; - position: relative; -} - -.background-picker:after { - content: " "; - position: absolute; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; -} - -.background-picker:hover:after { - border: #eee 1px solid; -} - -.background-picker.selected:after { - border: gold 1px solid; -} - -/************************************************************************************************/ -/* Save panel */ -/************************************************************************************************/ - -.anonymous .save-public-section, -.anonymous #save-online-button { - display : none; -} - -.save-field { - width: 100%; -} - -.save-status { - margin-top: 10px; - margin-bottom: -10px; - vertical-align: middle; - font-weight: normal; - text-shadow: none; - font-style: italic; -} - -.save-file-name { - white-space: nowrap; - font-weight: bold; - color: white; - font-style: normal; -} -.tiled-preview-checkbox { - vertical-align: -2px; - margin-left: 0; -} -/*******************************/ -/* Gif/Png Export Setting panel*/ -/*******************************/ -.gif-download-button, -.gif-render-button { - margin-top : 10px; - margin-right : 10px; -} - -.gif-export-preview, -.png-export-preview { - position:relative; - margin-top:10px; - max-height:32px; -} - -.gif-export-preview { - max-width:32px; -} - -.png-export-preview img { - max-height:32px; - float: left; -} - -.gif-upload-status { - width: 180px; - margin-left: 5px; - margin-top: 10px; -} - -.gif-upload, -.png-export-preview { - overflow: hidden; -} - -.gif-upload-status, -.gif-export-preview { - float : left; -} - -.preview-upload-ongoing:before{ - content: "Upload ongoing ..."; - position: absolute; - display: block; - height: 100%; - width: 100%; - text-align: center; - padding-top: 45%; - box-sizing:border-box; - -moz-box-sizing:border-box; - background: rgba(0,0,0,0.5); - color: white; -} -/************************************************************************************************/ -/* Import panel */ -/************************************************************************************************/ - -.import-section, -.resize-section { - margin: 10px 0; -} - -.file-input-button { - margin-right: 8px; - border-radius: 2px; -} - -.import-highlight { - font-weight: bold; - color: white; -} -.resize-section-title { - vertical-align: top; - display: inline-block; - padding-top: 5px; - width: 25%; -} - -.resize-content-checkbox { - margin-left: 0; -} - -.resize-ratio-checkbox, -.resize-smooth-checkbox { - vertical-align: -2px; - margin-left: 0; -} - - -/*****************/ -/* ANCHOR WIDGET */ -/*****************/ - -.resize-origin-container { - overflow: hidden; - position: relative; - width: 70px; - margin-top: 5px; - display: inline-block; -} - -.transition .resize-origin-option, -.transition .resize-origin-option:before { - transition: background-color 0.2s, border-color 0.2s; -} - -.resize-origin-option { - float: left; - position: relative; - - box-sizing: border-box; - margin: 0 1px 1px 0; - width: 20px; - height: 20px; - - background : #888; - - font-size: 8px; - text-align: center; - cursor: pointer; -} - -.disabled .resize-origin-option { - cursor: default; - background : #555; - border-color: #555 !important; -} - -.resize-origin-option.selected { - border : 3px solid gold; -} - -.resize-origin-option:before { - content: ''; - position: absolute; - display: block; - top: 50%; - left: 50%; - margin: -2px; -} - -.resize-origin-option.selected:before { - content: ''; - width: 4px; - height: 4px; - background: gold; -} - -.disabled .resize-origin-option.selected:before { - background: #555; -} - -.disabled .resize-origin-option[data-neighbor]:before { - border-color: #555 !important; -} - -.resize-origin-option[data-neighbor]:before { - width: 0; - height: 0; - border-width: 4px; - border-style: solid; - border-color: transparent; -} - -.resize-origin-option[data-neighbor="bottom"]:before { - border-top-color: gold; - margin-left: -4px; -} - -.resize-origin-option[data-neighbor="left"]:before { - border-right-color: gold; - margin-top: -4px; - margin-left: -6px; -} - -.resize-origin-option[data-neighbor="top"]:before { - border-bottom-color: gold; - margin-top: -6px; - margin-left: -4px; -} - -.resize-origin-option[data-neighbor="right"]:before { - border-left-color: gold; - margin-top: -4px; -} -.tool-icon { - position : relative; - cursor : pointer; - width: 46px; - height: 46px; - margin: 1px; - background-color: #3a3a3a; - background-repeat: no-repeat; - background-position: 12px 12px; - background-size: 24px 24px; -} - -.tool-icon.selected { - cursor: default; - background-color: #444; -} - -.tool-icon.selected:before { - content:""; - position : absolute; - height : 100%; - width : 100%; - border: 3px solid gold; - box-sizing: border-box; - -moz-box-sizing: border-box; -} - -.tool-icon:hover { - background-color: #444; -} - -/* - * Tool icons: - */ -.tool-icon.tool-pen { - background-image: url(../img/tools/pen.png); -} - -.tool-icon.tool-vertical-mirror-pen { - background-image: url(../img/tools/mirror.png); - background-position: 0px 10px; - background-size: 38px 27px; -} - -.tool-icon.tool-paint-bucket { - background-image: url(../img/tools/paintbucket.png); -} - -.tool-icon.tool-eraser { - background-image: url(../img/tools/eraser.png); -} - -.tool-icon.tool-stroke { - background-image: url(../img/tools/stroke.png); -} - -.tool-icon.tool-rectangle { - background-image: url(../img/tools/rectangle.png); - background-position: 12px 14px; - background-size: 24px 20px; -} - -.tool-icon.tool-circle { - background-image: url(../img/tools/circle.png); -} - -.tool-icon.tool-move { - background-image: url(../img/tools/hand.png); - background-size: 24px 24px; -} - -.tool-icon.tool-rectangle-select { - background-image: url(../img/tools/rectangle_selection.png); - background-position: 12px 14px; - background-size: 24px 20px; -} - -.tool-icon.tool-shape-select { - background-image: url(../img/tools/magicwand.png); -} - -.tool-icon.tool-lighten { - background-image: url(../img/tools/lighten.png); - background-position: 8px 8px; - background-size: 30px 30px; -} - -.tool-icon.tool-colorpicker { - background-image: url(../img/tools/eyedropper.png); - background-size: 23px 23px; -} - -.tool-icon.tool-colorswap { - background-image: url(../img/tools/swap-colors.png); - background-position: 6px 6px; - background-size: 36px 36px; -} - -.tool-icon.tool-flip { - background-image: url(../img/tools/flip.png); - background-position: 7px 11px; - background-size: 32px; -} - -.tool-icon.tool-rotate { - background-image: url(../img/tools/rotate.png); - background-position: 10px 9px; - background-size: 26px; -} - -.tool-icon.tool-clone { - background-image: url(../img/tools/clone.png); - background-position: 9px 15px; - background-size: 30px; -} - -/* - * Tool cursors: - */ - -.tool-paint-bucket .drawing-canvas-container:hover, -.tool-colorswap .drawing-canvas-container:hover { - cursor: url(../img/icons/paint-bucket.png) 12 12, pointer; -} - -.tool-vertical-mirror-pen .drawing-canvas-container:hover { - cursor: url(../img/icons/vertical-mirror-pen.png) 5 15, pointer; -} - -.tool-pen .drawing-canvas-container:hover, -.tool-lighten .drawing-canvas-container:hover { - cursor: url(../img/icons/pen.png) 0 15, pointer; -} - -.tool-eraser .drawing-canvas-container:hover { - cursor: url(../img/icons/eraser.png) 0 15, pointer; -} - -.tool-stroke .drawing-canvas-container:hover { - cursor: url(../img/icons/pen.png) 0 15, pointer; -} - -.tool-rectangle .drawing-canvas-container:hover { - cursor: url(../img/icons/rectangle.png) 0 15, pointer; -} - -.tool-circle .drawing-canvas-container:hover { - cursor: url(../img/icons/circle.png) 2 15, pointer; -} - -.tool-move .drawing-canvas-container:hover { - cursor: url(../img/icons/hand.png) 15 15, pointer; -} - -.tool-rectangle-select .drawing-canvas-container:hover { - cursor: crosshair; -} - -.tool-shape-select .drawing-canvas-container:hover { - cursor: url(../img/icons/wand.png) 15 15, pointer; -} - -.tool-colorpicker .drawing-canvas-container:hover { - cursor: url(../img/icons/dropper.png) 0 15, pointer; -} - -.swap-colors-icon { - background-image: url(../img/tools/swap-arrow-square-small-grey.png); - position: relative; - top: 50px; - left: 6px; - height: 18px; - width: 18px; - background-size: 18px; - opacity : 0.3; - cursor : pointer; -} - -.swap-colors-icon:hover { - opacity : 1; -} - -.tool-color-picker { - position:relative; -} - -.tool-color-picker:nth-child(1) { - z-index : 100; -} - -.tool-color-picker:nth-child(2) { - z-index : 90; - margin-top: 25px; - margin-left:-20px; -} - -.tool-color-picker input { - width: 16px; - height: 16px; - text-indent: -10000px; - border: 1px solid black; - background: white; - cursor: pointer; - position : relative; - top: 10px; - margin-left: 2px; -} - -.tool-color-picker .secondary-color-picker { - top : 18px; - margin-left: 0; -} - -.palette-wrapper { - margin-top: 10px; - margin-left: 10px; -} - -.palette-color[data-color=TRANSPARENT] { - position: relative; - top: 10px; - left: 10px; - background-color: white; - height : 16px; - width : 16px; - border: 2px solid #000; - background-size: 16px 16px; - background-position: 0 0; - background-image: -webkit-gradient( - linear, - left top, - right bottom, - color-stop(0, #fff), - color-stop(0.45, #fff), - color-stop(0.5, #ff0000), - color-stop(0.55, #fff), - color-stop(1, #fff) - ); - background-image: -moz-linear-gradient( - left top, - #fff 0%, - #fff 45%, - #f00 50%, - #fff 55%, - #fff 100% - ); -} - -.tools-tooltip-container { - text-align: left; - padding-bottom: 5px; -} - -.tools-tooltip-shortcut { - color:gold; -} - -.tools-tooltip-descriptor { - color:#999; -} - -.tools-tooltip-descriptor-button { - padding:2px; - border:1px Solid #999; - font-size:0.8em; - margin-right:5px; - width:35px; - text-align:center; - border-radius:3px; - display:inline-block; - line-height: 10px; -} - - -.action-icon { - cursor: pointer; - height: 100%; - background-repeat: no-repeat; - background-position: 50%; -} - -.edit-icon { - background-image: url('../img/tools/pen.png'); - background-repeat: no-repeat; -} - -.merge-icon { - background-image: url('../img/merge-icon.png'); - background-repeat: no-repeat; -} - -.plus-icon { - font-size:15px; - text-align:center; -} - -.delete-icon { -} -.cheatsheet-link { - position: fixed; - bottom: 10px; - left: 10px; - - padding: 1px 0 0 45px; - color : gold; - font-weight: bold; - font-size : 1.25em; - line-height: 20px; - - cursor : pointer; - - background-image:url('../img/keyboard.png'); - background-size:35px 20px; - background-repeat:no-repeat; - opacity: 0.5; - z-index: 11000; - transition : opacity 0.3s; -} - -.cheatsheet-link:hover { - opacity: 1; -} - -#cheatsheet-wrapper { - position: absolute; - z-index: 10000; - - top: 0; - right: 0; - bottom: 0; - left: 0; - - padding: 50px; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - color: white; -} - -.cheatsheet-container { - width: 100%; - height: 100%; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - padding: 20px 3%; - border-radius: 3px; - background: rgba(0,0,0,0.9); - overflow: auto; -} - -.cheatsheet-container h3 { - font-size:24px; - margin-top: 0; -} - -.cheatsheet-section { - float: left; - width : 33%; -} - -.cheatsheet-shortcut { - overflow: hidden; - margin: 10px 0; -} - -.cheatsheet-icon.tool-icon { - float: left; - display: inline-block; - - height: 30px; - width: 30px; - margin: 0 20px 0 0; - - background-size: 20px 20px; - background-position: 5px 5px; -} - -.cheatsheet-description { - font-family:Courier; - color: white; - font-size : 13px; - margin-left: 20px; - line-height : 30px; -} - -.cheatsheet-key { - display : inline-block; - height: 30px; - line-height: 30px; - padding: 0 10px; - - border : 1px solid gold; - border-radius: 2px; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - text-align: center; - font-family:Courier; - font-weight: bold; - font-size : 18px; - color: gold; -} -.color-picker-slider * { - box-sizing: border-box; -} - -.color-picker-slider input[type="range"] { - -webkit-appearance: none; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - width: 100%; - border: none; - padding: 1px 2px; - border-radius: 3px; - background-image: linear-gradient(to right, hsl(0, 30%, 70%) 0, hsl(359, 30%, 70%) 100%); - box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42; - outline: none; /* no focus outline */ -} - -/* thumb */ - -.color-picker-slider input[type="range"]::-webkit-slider-thumb { - -webkit-appearance: none; - cursor:pointer; - width: 7px; - height: 18px; - border: none; - border-radius: 2px; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #529de1), color-stop(100%, #245e8f)); /* android <= 2.2 */ - background-image: -webkit-linear-gradient(top , #529de1 0, #245e8f 100%); /* older mobile safari and android > 2.2 */; - background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */ -} -.color-picker-slider input[type="range"]::-moz-range-thumb { - width: 7px; - height: 18px; - border: none; - border-radius: 2px; - background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */ -} - -.color-picker-slider input[type="range"]::-ms-thumb { - width: 7px; - height: 18px; - border-radius: 2px; - border: 0; - background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */ -} - -/*CROSS BROWSER RESET*/ - - -.color-picker-slider input[type="range"]::-moz-range-track { - border: inherit; - background: transparent; -} - -.color-picker-slider input[type="range"]::-ms-track { - border: inherit; - color: transparent; /* don't drawn vertical reference line */ - background: transparent; -} - -.color-picker-slider input[type="range"]::-ms-fill-lower, -.color-picker-slider input[type="range"]::-ms-fill-upper { - background: transparent; -} - -.color-picker-slider input[type="range"]::-ms-tooltip { - display: none; -} - -.color-picker-slider, -.color-picker-input { - padding: 0 10px; - height : 25px; - overflow: hidden; -} - -.color-picker-slider span{ - line-height : 25px; - width : 10px; - float:left; -} - -.color-picker-slider input[type="range"]{ - float:left; - height : 10px; - width : 100px; - margin: 7px 1px 7px 8px; -} - -.color-picker-slider input[type="text"]{ - float:left; - width : 47px; - margin-left: 5px; -} - -.color-picker-input { - margin-bottom: 10px; -} - -.color-picker-input .textfield{ - width:100%; -} - -.color-picker-slider input[type="range"][data-dimension="h"] { - background-image:linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); -} -#dialog-container-wrapper { - position: absolute; - z-index: 20000; - - top: 0; - right: 0; - bottom: 0; - left: 0; - - padding: 50px 150px; - overflow: hidden; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - background-color: rgba(0,0,0,0.8); - opacity: 0; - pointer-events: none; - - color: white; -} - -#dialog-container-wrapper.animated { - transition: opacity 0.5s; -} - -#dialog-container-wrapper.show { - opacity: 1; - pointer-events: auto; -} - -#dialog-container { - width: 100%; - height: 100%; - - margin-top: -1500px; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - border-radius: 3px; - border : 3px solid gold; - background: #444; - overflow: auto; -} - -.animated #dialog-container { - transition:margin-top 0.5s; -} - -.show #dialog-container { - margin-top: 0; -} - -#dialog-container.browse-local { - width: 700px; - height: 500px; - top : 50%; - left : 50%; - position : absolute; - margin-left: -350px; -} - -.show #dialog-container.browse-local { - margin-top: -250px; -} - -#dialog-container.import-image { - width: 500px; - height: 300px; - top : 50%; - left : 50%; - position : absolute; - margin-left: -250px; -} - -.show #dialog-container.import-image { - margin-top: -150px; -} - -.dialog-wrapper { - height: 100%; - position : relative; -} - -.dialog-head { - width: 100%; - background: gold; - margin: 0; - padding: 10px; - color: black; - font-size: 1.8em; - box-sizing: border-box; - -moz-box-sizing: border-box; -} - -.dialog-close { - position: absolute; - top: 0; - right: 0; - line-height: 45px; - margin-right: 10px; - font-size: 1.3em; - cursor: pointer; -} -/************************************************************************************************/ -/* Import dialog */ -/************************************************************************************************/ - -.import-section-preview { - display : inline-block; - height : 60px; - width: 60px; - border : 1px dashed #999; - border-radius: 3px; -} - -.dialog-section-title { - display : inline-block; - width: 55px; -} - -.import-size-field, -.resize-size-field { - width: 50px; - margin-right: 8px; - text-align: right; -} - -.import-size-field:nth-of-type(2), -.resize-size-field:nth-of-type(2) { - margin-left: 5px; -} - -.import-image-file-name { - display: inline-block; - overflow: hidden; - - height: 2rem; - word-break : break-all; - vertical-align: middle; - font-style: italic; - font-weight: normal; - text-shadow: none; -} - -[name=smooth-resize-checkbox] { - margin : 0 8px; -} - -.dialog-import-body { - padding:10px 20px; - font-size:1.5em -} - -.import-button { - font-size: 1em; - height: auto; - padding: 5px 10px; -} - -/************************************************************************************************/ -/* Browse local piskels panel */ -/************************************************************************************************/ - -.local-piskel-list { - width: 100%; -} - -.local-piskel-item { - height: 3em; -} - -.local-piskel-name { - width: 40%; -} - -.local-piskel-save-date { - font-weight : normal; -} - -.local-piskel-list a { - text-decoration: none; -} - -.local-piskel-list a:hover { - text-decoration: underline; -} - -.local-piskel-list-head { - font-weight: bold; - color: gold; -} - -.local-piskel-load-button, -.local-piskel-delete-button { - width : 75px; -} -#dialog-container.create-palette { - width: 500px; - height: 600px; - top : 50%; - left : 50%; - position : absolute; - margin-left: -250px; -} - -.show #dialog-container.create-palette { - margin-top: -300px; -} - -.create-palette-section { - position: absolute; - left: 10px; - top: 50px; -} - -.create-palette-import-section { - display : inline-block; -} - -.colors-container { - position: absolute; - - left: 10px; - right: 10px; - top: 85px; - - height: 460px; - - border: 1px solid black; - background: #333; -} - -.color-picker-container { - position:absolute; - left : 280px; - top:0; - bottom:0; - right:0; - background: #222; -} - -.create-palette-actions { - position: absolute; - box-sizing: border-box; - - width:100%; - height: 45px; - - left: 0; - right: 0; - bottom: 0; - - padding:10px; - text-align:right; -} - -.color-preview { - width: 170px; - height: 70px; - margin: 11px; -} - -.colors-list { - overflow: auto; - width: 280px; - box-sizing: border-box; - height: 100%; - padding-bottom: 10px; -} - -.create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{ - position:relative; - float : left; - - width : 44px; - height : 44px; - margin : 10px 0 0 10px; - - box-sizing : border-box; - - cursor : pointer; -} - -@-moz-document url-prefix() { - .create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{ - margin : 7px 0 0 7px; - } -} - -@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - .create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{ - margin : 7px 0 0 7px; - } -} - - -.create-palette-color { - border:1px solid #2c2c2c; - transition : border-color 0.2s; -} -.create-palette-color:hover { - border:1px solid gold; -} - -.colors-list-drop-proxy { - border:2px dotted #eee; -} - -.create-palette-new-color { - border:2px dotted gold; - - border-radius: 2px; - line-height: 40px; - text-align: center; - font-size: 20px; - color: gold; -} - -.create-palette-color.selected { - border:2px solid gold; -} - -.create-palette-remove-color { - position: absolute; - top: 0; - right: 0; - padding: 2px 4px 0 0; - opacity : 0.2; - - font-weight: bold; - color: rgb(255,255,255); - text-shadow : 0 0 1px rgb(0,0,0); - - transition : opacity 0.3s, color 0.1s; -} - -.light-color .create-palette-remove-color { - color: rgb(0,0,0); - text-shadow : 0 0 1px rgb(255,255,255); -} - -.selected .create-palette-remove-color { - top: -1px; - right: -1px; -} - -.create-palette-color:hover .create-palette-remove-color { - opacity: 0.6; -} - -.create-palette-color .create-palette-remove-color:hover { - opacity: 1; - color: rgb(240,80,80); - text-shadow : 0 0 1px rgb(0,0,0); -} - -/*SPECTRUM OVERRIDES*/ - -.create-palette .sp-container{ - background-color: transparent; - border: none; - box-shadow : none; - border-radius:0; - padding:5px; -} -.user-message { - position: absolute; - right: 0; - bottom: 0; - padding: 10px 47px; - max-width: 300px; - - border-top-left-radius: 7px; - border: #F0C36D 1px solid; - border-right: 0; - border-bottom: 0; - - color: #222; - background-color: #F9EDBE; - - font-weight: bold; - font-size: 13px; - - z-index: 30000; -} - -.user-message .close { - position: absolute; - top: 6px; - right: 17px; - - color: gray; - - font-size: 18px; - font-weight: bold; - - cursor: pointer; -} - -.user-message .close:hover { - color: black; -} - -.progress-bar-container { - position: absolute; - left: 0; - bottom: 0; - padding: 10px; - width: 360px; - border-top-right-radius: 2px; - border: gold 2px solid; - border-left: 0; - border-bottom: 0; - background-color: #444; - font-size: 14px; - z-index: 30000; - color: #eee; -} - -.progress-bar-item { - float: left; - height:20px; -} - -.progress-bar-status { - line-height: 20px; - width : 40px; - overflow : hidden; - margin: 0 0 0 10px; -} - -.progress-bar { - border : 1px solid grey; - margin-top: 8px; - height : 4px; - width : 300px; - background : linear-gradient(to left, gold, gold) no-repeat -300px 0; - background-color : black; -} -.toolbox-container { - border: 4px solid #888; - font-size: medium; - color: white; - text-align: left; - border-radius: 4px; - margin-top: 5px; - margin-bottom: 10px; - overflow: hidden; -} - -.toolbox-title { - padding: 8px; - margin: 0; - font-size: 15px; - background: #222; -} - -/** - * Layers container - */ -.layers-list-container { -} - -/*.layers-title { - background-image: url('../img/layers.svg'); - background-size: 22px; - background-repeat: no-repeat; - background-position: 97%; -}*/ - -.layers-title { - position: relative; -} - -.layers-toggle-preview { - position: absolute; - top: 0.3em; - right: 0.5em; - - color: #999; - font-size: 1.3em; - cursor: pointer; - - transition: 0.2s linear; -} - -.layers-toggle-preview:hover { - color: white; -} - -.layers-toggle-preview-enabled, -.layers-toggle-preview-enabled:hover { - color : gold; -} - -.layers-list { - font-size : 12px; -} - -.layer-item { - height:24px; - line-height: 24px; - padding : 0 0 0 10px; - border-top: 1px solid #444; - cursor : pointer; -} - -.layer-item:hover { - background : #222; -} - -.current-layer-item, -.current-layer-item:hover { - background : #333; - color: gold; -} - -.layers-button-container { - overflow : hidden; -} - -.layers-button { - margin: 0; - width: 16.66667%; - float : left; -} - -/* @override */ -.layers-button-container .layers-button { - border-left-width: 0; -} - -.layers-button:last-child { - border-right-width: 0; -} -.palettes-title { - background-size: 22px; - background-repeat: no-repeat; - background-position: 97%; -} -.palettes-list-colors { - overflow: auto; - max-height: 160px; -} -.palettes-list-color { - cursor: pointer; - float: left; - margin: 0 0 5px 5px; - width: 32px; - height: 32px; - position: relative; -} -.palettes-list-color:nth-child(-n+5) { - margin-top: 5px; -} -.palettes-list-color div { - width: 32px; - height: 32px; -} -.palettes-list-has-scrollbar .palettes-list-color, .palettes-list-has-scrollbar .palettes-list-color div { - width: 29px -} -.palettes-list-primary-color:before, .palettes-list-secondary-color:before { - content: ""; - position: absolute; - bottom: 1px; - display: inline-block; - border: 7px solid gold; - border-top-color: transparent; - width: 0px; - height: 0px; -} -.palettes-list-primary-color:before { - left: 1px; - border-right-color: transparent; -} -.palettes-list-secondary-color:before { - right: 1px; - border-left-color: transparent; -} -.palettes-list-actions { - background-color: #3f3f3f; - border-bottom-color: #222; - height: 24px; - padding: 0; - overflow: hidden; -} - -.palettes-list-button, -.palettes-list-select { - margin: 0; - float: left; -} - -.palettes-list-button { - width: 16.66667%; -} -.palettes-list-select { - width: 66.66667%; - height: 100%; - padding: 0 5px 0 5px; - - border-style: solid; - border-width: 1px 0 1px 0; - - color: #aaa; - font-size : 0.75em; - - /*thanks firefox, you suck*/ - text-align:left; - /*text-shadow:none;*/ - font-weight: normal; - - transition : background-color 0.3s, color 0.3s; - cursor:pointer; -} - -.palettes-list-select:hover { - color: white; - background-color: #484848; -} - -.palettes-list-select:focus { - background-color: #484848; - color: white; - outline: none; -} - -.palettes-list-actions .edit-icon { - background-size: 15px; - background-position: 50%; -} -.palettes-list-no-colors { - height: 42px; - width: 100%; - color: grey; - font-size: 0.7em; - font-style: italic; - line-height: 42px; - text-align: center -} - -/** - * Animated preview styles. - */ - -.preview-container { - border : 0 Solid black; - border-radius:5px 0 0 5px; - box-shadow : 0 0 2px rgba(0,0,0,0.2); - font-size: 0; -} - -.preview-container .canvas-container { - overflow : hidden; -} - -.preview-container canvas { - border : 0 Solid transparent; -} - -.canvas-container .animated-preview-canvas-background { - position : relative; - height: 100%; -} - -#animated-preview-container { - background: #333; - border-radius : 0 0 2px 2px; - overflow : hidden; -} - -.canvas-container-wrapper { - height :200px; - width : 200px; - overflow:hidden; -} - -.tiled-frame-container { - height: 100%; - width: 100%; - position: relative; - background-repeat : repeat; -} - -.display-fps { - float: left; - color: #aaa; - font-size: 12px; - min-width: 55px; - vertical-align: bottom; - line-height: 26px; -} - -.range-fps { - overflow: hidden; - width: 100px; - height : 26px; - margin : 0; - box-sizing: border-box; - padding:0; -} - -.preview-toggle-onion-skin { - font-size: 2rem; - color: #aaa; - float: left; - line-height: 26px; - height: 100%; - padding-left: 5px; - padding-right: 5px; - border-right: 1px solid #222; - transition: 0.2s linear; - cursor:pointer; -} - -.preview-toggle-onion-skin:hover { - color : white; -} - -.preview-toggle-onion-skin-enabled, -.preview-toggle-onion-skin-enabled:hover { - color : gold; -} - -.open-popup-preview-button { - position : absolute; - z-index: 500; - right : 10px; - top : 10px; - width : 24px; - height: 18px; - - border : 2px solid white; - background : rgba(0,0,0,0.3); - cursor : pointer; - - opacity: 0; - transition: 0.3s opacity, 0.3s border-color; -} - -.minimap-container:hover .open-popup-preview-button { - opacity: 1; -} - -.open-popup-preview-button:hover { - border-color: gold; -} - -.transformations-container .tool-icon { - float:left; -} -/*** -Spectrum Colorpicker v1.1.2 -https://github.com/bgrins/spectrum -Author: Brian Grinstead -License: MIT -***/ - -.sp-container { - position:absolute; - top:0; - left:0; - display:inline-block; - *display: inline; - *zoom: 1; - /* https://github.com/bgrins/spectrum/issues/40 */ - z-index: 9999994; - overflow: hidden; -} -.sp-container.sp-flat { - position: relative; -} - -/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */ -.sp-top { - position:relative; - width: 100%; - display:inline-block; -} -.sp-top-inner { - position:absolute; - top:0; - left:0; - bottom:0; - right:0; -} -.sp-color { - position: absolute; - top:0; - left:0; - bottom:0; - right:20%; -} -.sp-hue { - position: absolute; - top:0; - right:0; - bottom:0; - left:84%; - height: 100%; -} -.sp-fill { - padding-top: 80%; -} -.sp-sat, .sp-val { - position: absolute; - top:0; - left:0; - right:0; - bottom:0; -} - -.sp-alpha-enabled .sp-top { - margin-bottom: 18px; -} -.sp-alpha-enabled .sp-alpha { - display: block; -} -.sp-alpha-handle { - position:absolute; - top:-4px; - bottom: -4px; - width: 6px; - left: 50%; - cursor: pointer; - border: 1px solid black; - background: white; - opacity: .8; -} -.sp-alpha { - display: none; - position: absolute; - bottom: -14px; - right: 0; - left: 0; - height: 8px; -} -.sp-alpha-inner { - border: solid 1px #333; -} - -/* Don't allow text selection */ -.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button { - -webkit-user-select:none; - -moz-user-select: -moz-none; - -o-user-select:none; - user-select: none; -} - -.sp-container.sp-input-disabled .sp-input-container { - display: none; -} -.sp-container.sp-buttons-disabled .sp-button-container { - display: none; -} -.sp-palette-only .sp-picker-container { - display: none; -} -.sp-palette-disabled .sp-palette-container { - display: none; -} - -.sp-initial-disabled .sp-initial { - display: none; -} - - -/* Gradients for hue, saturation and value instead of images. Not pretty... but it works */ -.sp-sat { - background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0))); - background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0)); - background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); - background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); - background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); - background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0)); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)"; - filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81'); -} -.sp-val { - background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0))); - background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0)); - background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); - background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); - background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); - background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0)); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)"; - filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000'); -} - -.sp-hue { - background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); - background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); - background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); - 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)); - background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); -} - -/* IE filters do not support multiple color stops. - Generate 6 divs, line them up, and do two color gradients for each. - Yes, really. - */ -.sp-1 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00'); -} -.sp-2 { - height:16%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00'); -} -.sp-3 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff'); -} -.sp-4 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff'); -} -.sp-5 { - height:16%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff'); -} -.sp-6 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000'); -} - -.sp-hidden { - display: none !important; -} - -/* Clearfix hack */ -.sp-cf:before, .sp-cf:after { content: ""; display: table; } -.sp-cf:after { clear: both; } -.sp-cf { *zoom: 1; } - -/* Mobile devices, make hue slider bigger so it is easier to slide */ -@media (max-device-width: 480px) { - .sp-color { right: 40%; } - .sp-hue { left: 63%; } - .sp-fill { padding-top: 60%; } -} -.sp-dragger { - border-radius: 5px; - height: 5px; - width: 5px; - border: 1px solid #fff; - background: #000; - cursor: pointer; - position:absolute; - top:0; - left: 0; -} -.sp-slider { - position: absolute; - top:0; - cursor:pointer; - height: 3px; - left: -1px; - right: -1px; - border: 1px solid #000; - background: white; - opacity: .8; -} - -/* -Theme authors: -Here are the basic themeable display options (colors, fonts, global widths). -See http://bgrins.github.io/spectrum/themes/ for instructions. -*/ - -.sp-container { - border-radius: 0; - background-color: #ECECEC; - border: solid 1px #f0c49B; - padding: 0; -} -.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue -{ - font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} -.sp-top -{ - margin-bottom: 3px; -} -.sp-color, .sp-hue -{ - border: solid 1px #666; -} - -/* Input */ -.sp-input-container { - float:right; - width: 100px; - margin-bottom: 4px; -} -.sp-initial-disabled .sp-input-container { - width: 100%; -} -.sp-input { - font-size: 12px !important; - border: 1px inset; - padding: 4px 5px; - margin: 0; - width: 100%; - background:transparent; - border-radius: 3px; - color: #222; -} -.sp-input:focus { - border: 1px solid orange; -} -.sp-input.sp-validation-error -{ - border: 1px solid red; - background: #fdd; -} -.sp-picker-container , .sp-palette-container -{ - float:left; - position: relative; - padding: 10px; - padding-bottom: 300px; - margin-bottom: -290px; -} -.sp-picker-container -{ - width: 172px; - border-left: solid 1px #fff; -} - -/* Palettes */ -.sp-palette-container -{ - border-right: solid 1px #ccc; -} - -.sp-palette .sp-thumb-el { - display: block; - position:relative; - float:left; - width: 24px; - height: 15px; - margin: 3px; - cursor: pointer; - border:solid 2px transparent; -} -.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active { - border-color: orange; -} -.sp-thumb-el -{ - position:relative; -} - -/* Initial */ -.sp-initial -{ - float: left; - border: solid 1px #333; -} -.sp-initial span { - width: 30px; - height: 25px; - border:none; - display:block; - float:left; - margin:0; -} - -/* Buttons */ -.sp-button-container { - float: right; -} - -/* Replacer (the little preview div that shows up instead of the ) */ -.sp-replacer { - margin:0; - overflow:hidden; - cursor:pointer; - padding: 4px; - display:inline-block; - *zoom: 1; - *display: inline; - border: solid 1px #91765d; - background: #eee; - color: #333; - vertical-align: middle; -} -.sp-replacer:hover, .sp-replacer.sp-active { - border-color: #F0C49B; - color: #111; -} -.sp-replacer.sp-disabled { - cursor:default; - border-color: silver; - color: silver; -} -.sp-dd { - padding: 2px 0; - height: 16px; - line-height: 16px; - float:left; - font-size:10px; -} -.sp-preview -{ - position:relative; - width:25px; - height: 20px; - border: solid 1px #222; - margin-right: 5px; - float:left; - z-index: 0; -} - -.sp-palette -{ - *width: 220px; - max-width: 220px; -} -.sp-palette .sp-thumb-el -{ - width:16px; - height: 16px; - margin:2px 1px; - border: solid 1px #d0d0d0; -} - -.sp-container -{ - padding-bottom:0; -} - - -/* Buttons: http://hellohappy.org/css3-buttons/ */ -.sp-container button { - background-color: #eeeeee; - background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); - background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); - background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); - background-image: -o-linear-gradient(top, #eeeeee, #cccccc); - background-image: linear-gradient(to bottom, #eeeeee, #cccccc); - border: 1px solid #ccc; - border-bottom: 1px solid #bbb; - border-radius: 3px; - color: #333; - font-size: 14px; - line-height: 1; - padding: 5px 4px; - text-align: center; - text-shadow: 0 1px 0 #eee; - vertical-align: middle; -} -.sp-container button:hover { - background-color: #dddddd; - background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb); - background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb); - background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb); - background-image: -o-linear-gradient(top, #dddddd, #bbbbbb); - background-image: linear-gradient(to bottom, #dddddd, #bbbbbb); - border: 1px solid #bbb; - border-bottom: 1px solid #999; - cursor: pointer; - text-shadow: 0 1px 0 #ddd; -} -.sp-container button:active { - border: 1px solid #aaa; - border-bottom: 1px solid #888; - -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; -} -.sp-cancel -{ - font-size: 11px; - color: #d93f3f !important; - margin:0; - padding:2px; - margin-right: 5px; - vertical-align: middle; - text-decoration:none; - -} -.sp-cancel:hover -{ - color: #d93f3f !important; - text-decoration: underline; -} - - -.sp-palette span:hover, .sp-palette span.sp-thumb-active -{ - border-color: #000; -} - -.sp-preview, .sp-alpha, .sp-thumb-el -{ - position:relative; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); -} -.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner -{ - display:block; - position:absolute; - top:0;left:0;bottom:0;right:0; -} - -.sp-palette .sp-thumb-inner -{ - background-position: 50% 50%; - background-repeat: no-repeat; -} - -.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner -{ - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=); -} - -.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner -{ - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=); -} - -/** - * Piskel specific CSS for spectrum widgets - */ - -/* Widget's main container */ -.sp-container { - border-radius: 4px; - background-color: #2B2B2B; - border: solid 4px #888; - padding: 5px 5px 0 5px; - box-shadow : 0 0 5px 0 black; -} - -.sp-container[data-y-position=bottom] { - border-top-left-radius: 0; -} - -.sp-container[data-y-position=top] { - border-bottom-left-radius: 0; -} - -/* Color square container */ -.sp-color, .sp-hue { - border : 1px solid #222; -} - -/* Remove the padding on the input container */ -.sp-replacer { - padding: 4px; - height: 100%; - border-width: 0; - box-sizing: border-box; - -moz-box-sizing:border-box; - background-color: #444; -} - -.sp-replacer:hover { - background-color: #888; -} - -/* Hide the triangle */ -.sp-dd { - display: none; -} - -/* */ -.sp-preview { - margin-right: 0; - height: 100%; - width: 39px; - border-width: 0; -} - -.sp-palette-row-selection { - max-width: 62px; -} - -.sp-palette .sp-thumb-el { - margin : 0 5px 5px 0; - width: 24px; - height: 24px; - border-color: #444; - -} - -.sp-picker-container, .sp-palette-container { - padding-top: 5px; - padding-right: 5px; - padding-left: 5px; - border-left-width: 0; - border-right-width: 0; -} - -.sp-picker-container { - padding: 5px; - padding-bottom: 300px; - margin-bottom: -295px; -} - -.sp-slider { - height: 5px; - left: -2px; - right: -2px; - border: 2px solid white; - background: rgba(255,255,255,0); - opacity: 1; - border-radius: 2px; - box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(0,0,0,0.5); -} - -.sp-dragger { - border-radius: 8px; - height: 12px; - width: 12px; - border: 2px solid white; - background: none; - box-sizing:border-box; - -moz-box-sizing:border-box; - box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(0,0,0,0.5); -} - -.sp-palette .sp-thumb-el.sp-thumb-active { - border-color: gold; - box-shadow: 0 0 0px 1px gold; -} - -.sp-input { - border: 1px solid #666; - margin: 0; - background: #111; - border-radius: 2px; - color: #D3D3D3; - font-family: Courier!important; -} - -.sp-input.sp-validation-error { - background: #330000; -} -/*! - * Bootstrap v2.1.1 - * - * Copyright 2012 Twitter, Inc - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Designed and built with all the love in the world @twitter by @mdo and @fat. - */ -.clearfix { - *zoom: 1; -} -.clearfix:before, -.clearfix:after { - display: table; - content: ""; - line-height: 0; -} -.clearfix:after { - clear: both; -} -.hide-text { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; -} -.input-block-level { - display: block; - width: 100%; - min-height: 30px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -.tooltip { - position: absolute; - z-index: 30000; - display: block; - visibility: visible; - padding: 5px; - font-size: 11px; - opacity: 0; - filter: alpha(opacity=0); -} -.tooltip.in { - opacity: 0.8; - filter: alpha(opacity=80); -} -.tooltip.top { - margin-top: -3px; -} -.tooltip.right { - margin-left: 3px; -} -.tooltip.bottom { - margin-top: 3px; -} -.tooltip.left { - margin-left: -3px; -} -.tooltip-inner { - max-width: 200px; - padding: 3px 8px; - color: #ffffff; - text-align: center; - text-decoration: none; - background-color: #000000; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} -.tooltip.top .tooltip-arrow { - bottom: 0; - left: 50%; - margin-left: -5px; - border-width: 5px 5px 0; - border-top-color: #000000; -} -.tooltip.right .tooltip-arrow { - top: 50%; - left: 0; - margin-top: -5px; - border-width: 5px 5px 5px 0; - border-right-color: #000000; -} -.tooltip.left .tooltip-arrow { - top: 50%; - right: 0; - margin-top: -5px; - border-width: 5px 0 5px 5px; - border-left-color: #000000; -} -.tooltip.bottom .tooltip-arrow { - top: 0; - left: 50%; - margin-left: -5px; - border-width: 0 5px 5px; - border-bottom-color: #000000; -} - -.tooltip { - line-height: 20px; -} - -.tooltip.in { - opacity: 0.95; - filter: alpha(opacity=95); -} - -.tooltip { - line-height: 20px; -} -.preview-list-wrapper { - position: relative; - height: 100%; - overflow: hidden; -} - -.preview-list-scroller { - overflow-y: scroll; - overflow-x: hidden; - height: 100%; -} - -.top-overflow, -.bottom-overflow { - height: 20px; - position: absolute; - left: 0; - right: 12px; - - -webkit-transition: all 500ms ease-out; - -moz-transition: all 500ms ease-out; - -ms-transition: all 500ms ease-out; - -o-transition: all 500ms ease-out; - transition: all 500ms ease-out; - - background-image: linear-gradient(45deg, rgba(0,0,0, 0.8) 25%, transparent 25%, transparent 75%, rgba(0,0,0, 0.8) 75%, rgba(0,0,0, 0.8)), - linear-gradient(-45deg, rgba(0,0,0, 0.8) 25%, transparent 25%, transparent 75%, rgba(0,0,0, 0.8) 75%, rgba(0,0,0, 0.8)); - background-size: 29px 45px; - background-repeat: repeat-x; - background-position-x: 3px; - z-index: 10; -} - -.top-overflow { - top: -20px; -} - -.bottom-overflow { - bottom: -20px; - background-position-x: 0; - background-position-y: -23px; -} - -.top-overflow-visible .top-overflow { - top: 0; -} - -.bottom-overflow-visible .bottom-overflow { - bottom: 0; -} - -.preview-list { - list-style-type: none; - padding-right: 7px; -} - -.add-frame-action { - border: #888 solid 4px; - font-size: 13px; - color: #888; - cursor: pointer; - padding: 6px 0; - border-radius: 4px; - margin-top: 8px; - background-image: url(../img/plus.png); - background-repeat: no-repeat; - background-position: 3px 7px; - background-size: 26px 26px; - text-indent: 18px; - background-color: #222; -} - -.add-frame-action .label { - width: 80px; - margin: 0 auto; -} - -.add-frame-action:hover { - border-color: gold; -} - -.preview-tile { - position: relative; - border: #444 3px solid; - border-radius: 3px; - margin: 5px 0; - width: 96px; - height: 96px; -} - -.preview-tile:first-child { - margin-top: 0; -} - -.preview-tile:hover { - border: #999 3px solid; -} - -.tile-view { - position : relative; -} - -.preview-tile .tile-overlay { - z-index: 10; - position: absolute; - background-color: rgba(100, 100, 100, 0.6); - opacity: 0; - height: 30px; - width: 30px; - border: none; -} - -.preview-tile:hover .tile-overlay { - opacity: 1.0; -} - -.preview-tile .tile-overlay.tile-count { - display: block; - opacity: 1.0; - border-bottom-right-radius: 3px; - top: 0; - left: 0; - font-size: 14px; - line-height: 30px; - color: white; - font-weight: bold; - text-align: center; - cursor: default; -} - -.preview-tile .tile-overlay.delete-frame-action { - background-image: url(../img/garbage.png); - background-repeat: no-repeat; - top: 0; - right: 0; - border-bottom-left-radius: 3px; - height: 30px; - width: 30px; - background-position: 5px 5px; - background-size: 20px; - cursor: pointer; -} - -.preview-tile .tile-overlay.duplicate-frame-action { - bottom: 0; - right: 0; - border-bottom-left-radius: 3px; - background-image: url(../img/duplicate.png); - background-repeat: no-repeat; - background-position: 5px 5px; - background-size: 20px; - cursor: pointer; -} - -.preview-tile .tile-overlay.dnd-action { - bottom: 0; - left: 0; - border-top-right-radius: 3px; - background-image: url(../img/dragndrop.png); - background-repeat: no-repeat; - background-position: 5px 5px; - background-size: 20px; - cursor: move; -} - -.preview-tile.selected { - border-color: gold; -} - -.preview-tile.selected:after { - content: " "; - position: absolute; - top: 38px; - right: -15px; - border: transparent 4px solid; - border-left-color: gold; - border-width: 6px; - border-style: solid; -} - - -/** - * Drag n drop styles. - */ - -.preview-tile-drop-proxy { - border: 3px dashed gold; - height: 90px; - border-radius: 9px; - background-color: rgba(255, 215,0, 0.2); -} - -.minimap-crop-frame { - position:absolute; - border:1px solid rgba(255,255,255,0.5); - z-index:100; - box-sizing : border-box; - -moz-box-sizing : border-box; - cursor : pointer; -} \ No newline at end of file diff --git a/css/piskel-style-packaged-2015-04-27-12-01.css b/css/piskel-style-packaged-2015-04-27-12-01.css deleted file mode 100644 index 817f7525..00000000 --- a/css/piskel-style-packaged-2015-04-27-12-01.css +++ /dev/null @@ -1,3017 +0,0 @@ -html, body { - height : 100%; width: 100%; - margin : 0; - overflow: hidden; - cursor : default; - font-family: arial; - font-size: 11px; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -ul, li { - margin : 0; - padding : 0; - list-style-type: none; -} - - -/* Force apparition of scrollbars on leopard */ -::-webkit-scrollbar { - -webkit-appearance: none; - width: 6px; -} - -::-webkit-scrollbar-thumb { - border-radius: 2px; - background-color: #666; -} - -::-webkit-scrollbar-track { - background-color: rgba(50, 50, 50, 0.4); -} - -a, a:visited { - color:gold; -} -body { - background: #1D1D1D; -} - -/* Browser fixes */ -::-ms-clear { - display: none; -} - -.allow-user-select { - -webkit-touch-callout: initial; - -webkit-user-select: initial; - -khtml-user-select: initial; - -moz-user-select: initial; - -ms-user-select: initial; - user-select: initial; -} - -.no-overflow { - overflow : hidden; -} - -.image-link { - color : gold; -} - -.pull-top, -.pull-right, -.pull-bottom, -.pull-left { - position:absolute; -} - -.pull-top { - top:0; -} - -.pull-right { - right:0; -} - -.pull-bottom { - bottom:0; -} - -.pull-left { - left:0; -} - -.uppercase { - text-transform: uppercase; -} - -/** - * Application layout - */ - -.main-wrapper { - position: absolute; - top: 5px; - right: 0; - bottom: 5px; - left: 0; -} - -.column-wrapper { - text-align: center; - font-size: 0; - position: absolute; - left: 100px; /* Reserve room for tools on the left edge of the screen. */ - top: 0; - right: 50px; /* Reserve room for actions on the right edge of the screen. */ - bottom: 0; -} - -.column { - display: inline-block; -} - -.left-column { - vertical-align: top; - height: 100%; - margin-right: 7px; -} - -.main-column { - height: 100%; - position: relative; -} - -.right-column { - vertical-align: top; - margin-left: 10px; - height: 100%; - position: relative; -} - -.drawing-canvas-container { - font-size: 0; -} - -.sticky-section { - position: fixed; - top: 0; - bottom: 0; - z-index: 1000; -} - -.sticky-section .sticky-section-wrap { - display: table; - height: 100%; -} - -.sticky-section .vertical-centerer { - display: table-cell; - vertical-align: middle; -} - -.left-sticky-section.sticky-section { - left: 0; - max-width: 100px; -} - -.left-sticky-section .tool-icon { - float: left; -} - -.cursor-coordinates { - color:#888; - font-size:12px; - font-weight:bold; - font-family:Courier; -} - -/** - * Canvases layout - */ - -.canvas { - position: relative; - z-index: 1; -} - -.canvas-container { - position: relative; - display: block; -} - -.canvas-container .canvas-background { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; -} - -.light-picker-background, -.light-canvas-background .canvas-background { - background: url(../img/canvas_background/light_canvas_background.png) repeat; -} - -.medium-picker-background, -.medium-canvas-background .canvas-background { - background: url(../img/canvas_background/medium_canvas_background.png) repeat; -} - -.lowcont-medium-picker-background, -.lowcont-medium-canvas-background .canvas-background { - background: url(../img/canvas_background/lowcont_medium_canvas_background.png) repeat; -} - -.lowcont-dark-picker-background, -.lowcont-dark-canvas-background .canvas-background { - background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat; -} - -.layers-canvas, -.canvas.onion-skin-canvas { - opacity: 0.2; -} - -.canvas.canvas-overlay, -.canvas.layers-canvas, -.canvas.onion-skin-canvas { - position: absolute; - top: 0; - left: 0; -} - -.tools-wrapper, -.options-wrapper, -.palette-wrapper { - float : left; -} - -/** - * Z-indexes should match the drawing area canvas superposition order : - * - 1 : draw layers below current layer - * - 2 : draw current layer - * - 3 : draw layers above current layer - * - 4 : draw the tools overlay - */ -.canvas.layers-below-canvas {z-index: 7;} -.canvas.drawing-canvas {z-index: 8;} -.canvas.canvas-overlay {z-index: 9;} -.canvas.onion-skin-canvas {z-index: 10;} -.canvas.layers-above-canvas {z-index: 11;} -@font-face { - font-family: 'piskel'; - src:url('fonts/icomoon.eot?-3olv93'); - src:url('fonts/icomoon.eot?#iefix-3olv93') format('embedded-opentype'), - url('fonts/icomoon.woff?-3olv93') format('woff'), - url('fonts/icomoon.ttf?-3olv93') format('truetype'), - url('fonts/icomoon.svg?-3olv93#icomoon') format('svg'); - font-weight: normal; - font-style: normal; -} - -[class^="piskel-icon-"], [class*=" piskel-icon-"] { - font-family: 'piskel'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.piskel-icon-eye:before { - content: "\e602"; -} - -.piskel-icon-onion:before { - content: "\e601"; -} - -.piskel-icon-download:before { - content: "\e600"; -} - -.piskel-icon-rotateleft:before { - content: "\e603"; -} - -.piskel-icon-rotateright:before { - content: "\e604"; -} - -.piskel-icon-fliph:before { - content: "\e605"; -} - -.piskel-icon-flipv:before { - content: "\e606"; -} - -.piskel-icon-trashplain:before { - content: "\e607"; -} - -.piskel-icon-trash:before { - content: "\e608"; -} - -.piskel-icon-merge:before { - content: "\e609"; -} - -.piskel-icon-pencil:before { - content: "\e610"; -} - -.piskel-icon-close:before { - content: "\e611"; -} - -.piskel-icon-minus:before { - content: "\e60a"; -} - -.piskel-icon-plus:before { - content: "\e60b"; -} - -.piskel-icon-arrow-up-fat:before { - content: "\e60c"; -} - -.piskel-icon-arrow-down-fat:before { - content: "\e60d"; -} - -.piskel-icon-arrow-up-thin:before { - content: "\e60e"; -} - -.piskel-icon-arrow-down-thin:before { - content: "\e60f"; -} - -.row { - display: block; -} - -.textfield { - box-sizing:border-box; - - background : black; - border : 1px solid #888; - border-radius : 2px; - padding : 3px 10px; - color : white; -} - -.textfield[disabled=disabled] { - background : #3a3a3a; -} - -.textfield-small { - width : 50px; -} - -.button { - box-sizing: border-box; - height: 24px; - - background-color: #3f3f3f; - border: 1px solid #333; - border-top-color: #666; - border-bottom-color: #222; - - cursor: pointer; - text-decoration: none; - - color: white; - text-shadow: 0 -1px 0 black; - font-weight: bold; - font-size: 1rem; - text-align: center; - - transition: background-color 0.2s linear; -} - -.button:hover { - text-decoration: none; - background-color: #484848; - color: gold; -} - -.button-primary { - background-color: rgb(255,215,0); /* gold */ - - border-color: rgb(179, 164, 0); - border-top-color: white; - border-bottom-color: rgb(151, 133, 0); - - color: black; - text-shadow: 0 1px 0 #fff; -} - -.button-primary:hover { - background-color: rgb(255,235,20); - color: #333; -} - -.button[disabled], -.button[disabled]:hover { - cursor:default; - background-color: #aaa; - color: #777; - text-shadow: 0 1px 0 #bbb; - border-color: #666; - border-top-color: #999; - border-bottom-color: #555; -} - -.import-size-field, -.resize-size-field, -.export-size-field { - width: 50px; - margin-right: 8px; - text-align: right; -} - -/** Righty sticky drawer expanded state. */ - -.right-sticky-section.sticky-section { - right: 0; - width: 47px; - - -webkit-transition: all 200ms ease-out; - -moz-transition: all 200ms ease-out; - -ms-transition: all 200ms ease-out; - -o-transition: all 200ms ease-out; - transition: all 200ms ease-out; -} - -.right-sticky-section.expanded { - right: 280px; -} - -.right-sticky-section .tool-icon { - float: right; - margin-right: 0; -} - -/********************************************************** *j* j** j*j j j j** *****************/ -/* Settings icons I I I I I\I \ */ -/********************************************************** *** *** *** * * '** *****************/ - -.tool-icon.gallery-icon { - background-image: url(../img/gallery.png); - background-position: 3px 3px; - background-size: 39px 39px; -} - -.tool-icon.resize-icon { - background-image: url(../img/resize-icon.png); - background-position: 10px 10px; - background-size: 26px 26px; -} - -.tool-icon.save-icon { - background-image: url(../img/save.png); - background-position: 6px 6px; - background-size: 36px 36px; -} - -.tool-icon.gear-icon { - background-image: url(../img/gear.png); - background-position: 6px 7px; - background-size: 32px 32px; -} - -.tool-icon.export-icon { - background-image: url(../img/export.png); - background-position: 7px 5px; - background-size: 36px 36px; - position: relative; -} - -.tool-icon.local-storage-icon { - background-image: url(../img/local-storage-icon.png); - background-position: 10px 12px; - background-size: 30px; - position: relative; -} - -.tool-icon.import-icon { - background-image: url(../img/import-icon.png); - background-position: 10px 5px; - background-size: 26px; - position: relative; -} - -.tool-icon .label { - position: absolute; - left: 0; - bottom: 4px; - right: 0; - font-size: 11px; - text-transform: uppercase; - color: #fff; - text-align: center; -} - -.drawer-content { - overflow: hidden; - background-color: #444; - height: 550px; - max-height: 100%; - width: 280px; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - box-shadow: 0 0 5px 0 black; -} - -.right-sticky-section.expanded .tool-icon { - padding-right: 1px; -} - -.right-sticky-section .tool-icon.has-expanded-drawer { - position: relative; - background-color: #444; - margin-right: 0; - padding-right: 2px; - border-left : 3px solid gold; -} - -/************************************************************************************************/ -/* Common settings classes */ -/************************************************************************************************/ - -.settings-section { - margin: 10px 20px; - font-size: 12px; - font-weight: bold; - color: #ccc; - text-shadow: 1px 1px #000; -} - -.settings-section .button { - margin: 0; -} - -.settings-title { - color : gold; - margin-top: 20px; - margin-bottom: 10px; - text-transform: uppercase; - border-bottom: 1px #aaa solid; - padding-bottom: 5px; - color: gold; -} - -.settings-description { - margin : 0 0 10px 0; - display : inline-block; -} - -.settings-form-section { - margin-bottom: 10px; -} - -.settings-item { - margin : 10px 0; -} - -[name*=checkbox] { - vertical-align: middle; -} - -/************************************************************************************************/ -/* Application settings */ -/************************************************************************************************/ - -.background-picker-wrapper { - overflow: hidden; - padding: 5px; -} - -.background-picker { - cursor: pointer; - float: left; - height: 35px; - width: 35px; - background-color: transparent; - margin-right: 15px; - padding: 1px; - position: relative; -} - -.background-picker:after { - content: " "; - position: absolute; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; -} - -.background-picker:hover:after { - border: #eee 1px solid; -} - -.background-picker.selected:after { - border: gold 1px solid; -} - -/************************************************************************************************/ -/* Save panel */ -/************************************************************************************************/ - -.anonymous .save-public-section, -.anonymous #save-online-button { - display : none; -} - -.save-field { - width: 100%; -} - -.save-status { - margin-top: 10px; - margin-bottom: -10px; - vertical-align: middle; - font-weight: normal; - text-shadow: none; - font-style: italic; -} - -.save-file-name { - white-space: nowrap; - font-weight: bold; - color: white; - font-style: normal; -} - -.save-desktop-file-name { - word-wrap: break-word; - font-weight: bold; - color: white; - font-style: normal; -} - -.tiled-preview-checkbox { - vertical-align: -2px; - margin-left: 0; -} -/*******************************/ -/* Gif/Png Export Setting panel*/ -/*******************************/ -.gif-download-button, -.gif-render-button { - margin-top : 10px; - margin-right : 10px; -} - -.gif-export-preview, -.png-export-preview { - position:relative; - margin-top:10px; - max-height:32px; -} - -.gif-export-preview { - max-width:32px; -} - -.png-export-preview img { - max-height:32px; - float: left; -} - -.png-export-preview .light-picker-background { - max-width:240px; -} - -.gif-upload-status { - width: 180px; - margin-left: 5px; - margin-top: 10px; -} - -.gif-upload, -.png-export-preview { - overflow: hidden; -} - -.gif-upload-status, -.gif-export-preview { - float : left; -} - -.preview-upload-ongoing:before{ - content: "Upload ongoing ..."; - position: absolute; - display: block; - height: 100%; - width: 100%; - text-align: center; - padding-top: 45%; - box-sizing:border-box; - -moz-box-sizing:border-box; - background: rgba(0,0,0,0.5); - color: white; -} -/************************************************************************************************/ -/* Import panel */ -/************************************************************************************************/ - -.import-section, -.resize-section { - margin: 10px 0; -} - -.file-input-button { - margin-right: 8px; - border-radius: 2px; -} - -.import-highlight { - font-weight: bold; - color: white; -} -.resize-section-title { - vertical-align: top; - display: inline-block; - padding-top: 5px; - width: 25%; -} - -.resize-content-checkbox { - margin-left: 0; -} - -.resize-ratio-checkbox, -.resize-smooth-checkbox { - vertical-align: -2px; - margin-left: 0; -} - - -/*****************/ -/* ANCHOR WIDGET */ -/*****************/ - -.resize-origin-container { - overflow: hidden; - position: relative; - width: 70px; - margin-top: 5px; - display: inline-block; -} - -.transition .resize-origin-option, -.transition .resize-origin-option:before { - transition: background-color 0.2s, border-color 0.2s; -} - -.resize-origin-option { - float: left; - position: relative; - - box-sizing: border-box; - margin: 0 1px 1px 0; - width: 20px; - height: 20px; - - background : #888; - - font-size: 8px; - text-align: center; - cursor: pointer; -} - -.disabled .resize-origin-option { - cursor: default; - background : #555; - border-color: #555 !important; -} - -.resize-origin-option.selected { - border : 3px solid gold; -} - -.resize-origin-option:before { - content: ''; - position: absolute; - display: block; - top: 50%; - left: 50%; - margin: -2px; -} - -.resize-origin-option.selected:before { - content: ''; - width: 4px; - height: 4px; - background: gold; -} - -.disabled .resize-origin-option.selected:before { - background: #555; -} - -.disabled .resize-origin-option[data-neighbor]:before { - border-color: #555 !important; -} - -.resize-origin-option[data-neighbor]:before { - width: 0; - height: 0; - border-width: 4px; - border-style: solid; - border-color: transparent; -} - -.resize-origin-option[data-neighbor="bottom"]:before { - border-top-color: gold; - margin-left: -4px; -} - -.resize-origin-option[data-neighbor="left"]:before { - border-right-color: gold; - margin-top: -4px; - margin-left: -6px; -} - -.resize-origin-option[data-neighbor="top"]:before { - border-bottom-color: gold; - margin-top: -6px; - margin-left: -4px; -} - -.resize-origin-option[data-neighbor="right"]:before { - border-left-color: gold; - margin-top: -4px; -} -.tool-icon { - position : relative; - cursor : pointer; - width: 46px; - height: 46px; - margin: 1px; - background-color: #3a3a3a; - background-repeat: no-repeat; - background-position: 12px 12px; - background-size: 24px 24px; -} - -.tool-icon.selected { - cursor: default; - background-color: #444; -} - -.tool-icon.selected:before { - content:""; - position : absolute; - height : 100%; - width : 100%; - border: 3px solid gold; - box-sizing: border-box; - -moz-box-sizing: border-box; -} - -.tool-icon:hover { - background-color: #444; -} - -/* - * Tool icons: - */ -.tool-icon.tool-pen { - background-image: url(../img/tools/pen.png); -} - -.tool-icon.tool-vertical-mirror-pen { - background-image: url(../img/tools/mirror.png); - background-position: 0px 10px; - background-size: 38px 27px; -} - -.tool-icon.tool-paint-bucket { - background-image: url(../img/tools/paintbucket.png); -} - -.tool-icon.tool-eraser { - background-image: url(../img/tools/eraser.png); -} - -.tool-icon.tool-stroke { - background-image: url(../img/tools/stroke.png); -} - -.tool-icon.tool-rectangle { - background-image: url(../img/tools/rectangle.png); - background-position: 12px 14px; - background-size: 24px 20px; -} - -.tool-icon.tool-circle { - background-image: url(../img/tools/circle.png); -} - -.tool-icon.tool-move { - background-image: url(../img/tools/hand.png); - background-size: 24px 24px; -} - -.tool-icon.tool-rectangle-select { - background-image: url(../img/tools/rectangle_selection.png); - background-position: 12px 14px; - background-size: 24px 20px; -} - -.tool-icon.tool-shape-select { - background-image: url(../img/tools/magicwand.png); -} - -.tool-icon.tool-lighten { - background-image: url(../img/tools/lighten.png); - background-position: 8px 8px; - background-size: 30px 30px; -} - -.tool-icon.tool-colorpicker { - background-image: url(../img/tools/eyedropper.png); - background-size: 23px 23px; -} - -.tool-icon.tool-colorswap { - background-image: url(../img/tools/swap-colors.png); - background-position: 6px 6px; - background-size: 36px 36px; -} - -.tool-icon.tool-flip { - background-image: url(../img/tools/flip.png); - background-position: 7px 11px; - background-size: 32px; -} - -.tool-icon.tool-rotate { - background-image: url(../img/tools/rotate.png); - background-position: 10px 9px; - background-size: 26px; -} - -.tool-icon.tool-clone { - background-image: url(../img/tools/clone.png); - background-position: 9px 15px; - background-size: 30px; -} - -/* - * Tool cursors: - */ - -.tool-paint-bucket .drawing-canvas-container:hover, -.tool-colorswap .drawing-canvas-container:hover { - cursor: url(../img/icons/paint-bucket.png) 12 12, pointer; -} - -.tool-vertical-mirror-pen .drawing-canvas-container:hover { - cursor: url(../img/icons/vertical-mirror-pen.png) 5 15, pointer; -} - -.tool-pen .drawing-canvas-container:hover, -.tool-lighten .drawing-canvas-container:hover { - cursor: url(../img/icons/pen.png) 0 15, pointer; -} - -.tool-eraser .drawing-canvas-container:hover { - cursor: url(../img/icons/eraser.png) 0 15, pointer; -} - -.tool-stroke .drawing-canvas-container:hover { - cursor: url(../img/icons/pen.png) 0 15, pointer; -} - -.tool-rectangle .drawing-canvas-container:hover { - cursor: url(../img/icons/rectangle.png) 0 15, pointer; -} - -.tool-circle .drawing-canvas-container:hover { - cursor: url(../img/icons/circle.png) 2 15, pointer; -} - -.tool-move .drawing-canvas-container:hover { - cursor: url(../img/icons/hand.png) 15 15, pointer; -} - -.tool-rectangle-select .drawing-canvas-container:hover { - cursor: crosshair; -} - -.tool-shape-select .drawing-canvas-container:hover { - cursor: url(../img/icons/wand.png) 15 15, pointer; -} - -.tool-colorpicker .drawing-canvas-container:hover { - cursor: url(../img/icons/dropper.png) 0 15, pointer; -} - -.swap-colors-icon { - background-image: url(../img/tools/swap-arrow-square-small-grey.png); - position: relative; - top: 50px; - left: 6px; - height: 18px; - width: 18px; - background-size: 18px; - opacity : 0.3; - cursor : pointer; -} - -.swap-colors-icon:hover { - opacity : 1; -} - -.tool-color-picker { - position:relative; -} - -.tool-color-picker:nth-child(1) { - z-index : 100; -} - -.tool-color-picker:nth-child(2) { - z-index : 90; - margin-top: 25px; - margin-left:-20px; -} - -.tool-color-picker input { - width: 16px; - height: 16px; - text-indent: -10000px; - border: 1px solid black; - background: white; - cursor: pointer; - position : relative; - top: 10px; - margin-left: 2px; -} - -.tool-color-picker .secondary-color-picker { - top : 18px; - margin-left: 0; -} - -.palette-wrapper { - margin-top: 10px; - margin-left: 10px; -} - -.palette-color[data-color=TRANSPARENT] { - position: relative; - top: 10px; - left: 10px; - background-color: white; - height : 16px; - width : 16px; - border: 2px solid #000; - background-size: 16px 16px; - background-position: 0 0; - background-image: -webkit-gradient( - linear, - left top, - right bottom, - color-stop(0, #fff), - color-stop(0.45, #fff), - color-stop(0.5, #ff0000), - color-stop(0.55, #fff), - color-stop(1, #fff) - ); - background-image: -moz-linear-gradient( - left top, - #fff 0%, - #fff 45%, - #f00 50%, - #fff 55%, - #fff 100% - ); -} - -.tools-tooltip-container { - text-align: left; - padding-bottom: 5px; -} - -.tools-tooltip-shortcut { - color:gold; -} - -.tools-tooltip-descriptor { - color:#999; -} - -.tools-tooltip-descriptor-button { - padding:2px; - border:1px Solid #999; - font-size:0.8em; - margin-right:5px; - width:35px; - text-align:center; - border-radius:3px; - display:inline-block; - line-height: 10px; -} - - -.action-icon { - cursor: pointer; - height: 100%; - background-repeat: no-repeat; - background-position: 50%; -} - -.edit-icon { - background-image: url('../img/tools/pen.png'); - background-repeat: no-repeat; -} - -.merge-icon { - background-image: url('../img/merge-icon.png'); - background-repeat: no-repeat; -} - -.plus-icon { - font-size:15px; - text-align:center; -} - -.delete-icon { -} -.cheatsheet-link { - position: fixed; - bottom: 10px; - left: 10px; - - padding: 1px 0 0 45px; - color : gold; - font-weight: bold; - font-size : 1.25em; - line-height: 20px; - - cursor : pointer; - - background-image:url('../img/keyboard.png'); - background-size:35px 20px; - background-repeat:no-repeat; - opacity: 0.5; - z-index: 11000; - transition : opacity 0.3s; -} - -.cheatsheet-link:hover { - opacity: 1; -} - -#cheatsheet-wrapper { - position: absolute; - z-index: 10000; - - top: 50px; - right: 50px; - bottom: 50px; - left: 50px; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - color: white; -} - -.cheatsheet-container { - width: 100%; - height: 100%; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - padding: 20px 3%; - border-radius: 3px; - background: rgba(0,0,0,0.9); - overflow: auto; -} - -.cheatsheet-container h3 { - font-size:24px; - margin-top: 0; -} - -.cheatsheet-section { - float: left; - width : 33%; -} - -.cheatsheet-shortcut { - overflow: hidden; - margin: 10px 0; -} - -.cheatsheet-icon.tool-icon { - float: left; - display: inline-block; - - height: 30px; - width: 30px; - margin: 0 20px 0 0; - - background-size: 20px 20px; - background-position: 5px 5px; -} - -.cheatsheet-description { - font-family:Courier; - color: white; - font-size : 13px; - margin-left: 20px; - line-height : 30px; -} - -.cheatsheet-key { - display : inline-block; - height: 30px; - line-height: 30px; - padding: 0 10px; - - border : 1px solid gold; - border-radius: 2px; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - text-align: center; - font-family:Courier; - font-weight: bold; - font-size : 18px; - color: gold; -} -.color-picker-slider * { - box-sizing: border-box; -} - -.color-picker-slider input[type="range"] { - -webkit-appearance: none; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - width: 100%; - border: none; - padding: 1px 2px; - border-radius: 3px; - background-image: linear-gradient(to right, hsl(0, 30%, 70%) 0, hsl(359, 30%, 70%) 100%); - box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42; - outline: none; /* no focus outline */ -} - -/* thumb */ - -.color-picker-slider input[type="range"]::-webkit-slider-thumb { - -webkit-appearance: none; - cursor:pointer; - width: 7px; - height: 18px; - border: none; - border-radius: 2px; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #529de1), color-stop(100%, #245e8f)); /* android <= 2.2 */ - background-image: -webkit-linear-gradient(top , #529de1 0, #245e8f 100%); /* older mobile safari and android > 2.2 */; - background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */ -} -.color-picker-slider input[type="range"]::-moz-range-thumb { - width: 7px; - height: 18px; - border: none; - border-radius: 2px; - background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */ -} - -.color-picker-slider input[type="range"]::-ms-thumb { - width: 7px; - height: 18px; - border-radius: 2px; - border: 0; - background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */ -} - -/*CROSS BROWSER RESET*/ - - -.color-picker-slider input[type="range"]::-moz-range-track { - border: inherit; - background: transparent; -} - -.color-picker-slider input[type="range"]::-ms-track { - border: inherit; - color: transparent; /* don't drawn vertical reference line */ - background: transparent; -} - -.color-picker-slider input[type="range"]::-ms-fill-lower, -.color-picker-slider input[type="range"]::-ms-fill-upper { - background: transparent; -} - -.color-picker-slider input[type="range"]::-ms-tooltip { - display: none; -} - -.color-picker-slider, -.color-picker-input { - padding: 0 10px; - height : 25px; - overflow: hidden; -} - -.color-picker-slider span{ - line-height : 25px; - width : 10px; - float:left; -} - -.color-picker-slider input[type="range"]{ - float:left; - height : 10px; - width : 100px; - margin: 7px 1px 7px 8px; -} - -.color-picker-slider input[type="text"]{ - float:left; - width : 47px; - margin-left: 5px; -} - -.color-picker-input { - margin-bottom: 10px; -} - -.color-picker-input .textfield{ - width:100%; -} - -.color-picker-slider input[type="range"][data-dimension="h"] { - background-image:linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); -} -#dialog-container-wrapper { - position: absolute; - z-index: 20000; - - top: 0; - right: 0; - bottom: 0; - left: 0; - - padding: 50px 150px; - overflow: hidden; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - background-color: rgba(0,0,0,0.8); - opacity: 0; - pointer-events: none; - - color: white; -} - -#dialog-container-wrapper.animated { - transition: opacity 0.5s; -} - -#dialog-container-wrapper.show { - opacity: 1; - pointer-events: auto; -} - -#dialog-container { - width: 100%; - height: 100%; - - margin-top: -1500px; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - border-radius: 3px; - border : 3px solid gold; - background: #444; - overflow: auto; -} - -.animated #dialog-container { - transition:margin-top 0.5s; -} - -.show #dialog-container { - margin-top: 0; -} - -#dialog-container.browse-local { - width: 700px; - height: 500px; - top : 50%; - left : 50%; - position : absolute; - margin-left: -350px; -} - -.show #dialog-container.browse-local { - margin-top: -250px; -} - -#dialog-container.import-image { - width: 500px; - height: 300px; - top : 50%; - left : 50%; - position : absolute; - margin-left: -250px; -} - -.show #dialog-container.import-image { - margin-top: -150px; -} - -.dialog-wrapper { - height: 100%; - position : relative; -} - -.dialog-head { - width: 100%; - background: gold; - margin: 0; - padding: 10px; - color: black; - font-size: 1.8em; - box-sizing: border-box; - -moz-box-sizing: border-box; -} - -.dialog-close { - position: absolute; - top: 0; - right: 0; - line-height: 45px; - margin-right: 10px; - font-size: 1.3em; - cursor: pointer; -} -/************************************************************************************************/ -/* Import dialog */ -/************************************************************************************************/ - -.import-section-preview { - display : inline-block; - height : 60px; - width: 60px; - border: 1px dashed #999; - border-radius: 3px; -} - -.dialog-section-title { - display : inline-block; - width: 55px; -} - -.import-size-field:nth-of-type(2) { - margin-left: 5px; -} - -.import-image-file-name { - display: inline-block; - overflow: hidden; - - height: 2rem; - word-break : break-all; - vertical-align: middle; - font-style: italic; - font-weight: normal; - text-shadow: none; -} - -[name=smooth-resize-checkbox] { - margin : 0 8px; -} - -.dialog-import-body { - padding:10px 20px; - font-size:1.5em -} - -.import-button { - font-size: 1em; - height: auto; - padding: 5px 10px; -} - -/************************************************************************************************/ -/* Browse local piskels panel */ -/************************************************************************************************/ - -.local-piskel-list { - width: 100%; -} - -.local-piskel-item { - height: 3em; -} - -.local-piskel-name { - width: 40%; -} - -.local-piskel-save-date { - font-weight : normal; -} - -.local-piskel-list a { - text-decoration: none; -} - -.local-piskel-list a:hover { - text-decoration: underline; -} - -.local-piskel-list-head { - font-weight: bold; - color: gold; -} - -.local-piskel-load-button, -.local-piskel-delete-button { - width : 75px; -} -#dialog-container.create-palette { - width: 500px; - height: 600px; - top : 50%; - left : 50%; - position : absolute; - margin-left: -250px; -} - -.show #dialog-container.create-palette { - margin-top: -300px; -} - -.create-palette-section { - position: absolute; - left: 10px; - top: 50px; -} - -.create-palette-import-section { - display : inline-block; -} - -.colors-container { - position: absolute; - - left: 10px; - right: 10px; - top: 85px; - - height: 460px; - - border: 1px solid black; - background: #333; -} - -.color-picker-container { - position:absolute; - left : 280px; - top:0; - bottom:0; - right:0; - background: #222; -} - -.create-palette-actions { - position: absolute; - box-sizing: border-box; - - width:100%; - height: 45px; - - left: 0; - right: 0; - bottom: 0; - - padding:10px; - text-align:right; -} - -.color-preview { - width: 170px; - height: 70px; - margin: 11px; -} - -.colors-list { - overflow: auto; - width: 280px; - box-sizing: border-box; - height: 100%; - padding-bottom: 10px; -} - -.create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{ - position:relative; - float : left; - - width : 44px; - height : 44px; - margin : 10px 0 0 10px; - - box-sizing : border-box; - - cursor : pointer; -} - -@-moz-document url-prefix() { - .create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{ - margin : 7px 0 0 7px; - } -} - -@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - .create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{ - margin : 7px 0 0 7px; - } -} - - -.create-palette-color { - border:1px solid #2c2c2c; - transition : border-color 0.2s; -} -.create-palette-color:hover { - border:1px solid gold; -} - -.colors-list-drop-proxy { - border:2px dotted #eee; -} - -.create-palette-new-color { - border:2px dotted gold; - - border-radius: 2px; - line-height: 40px; - text-align: center; - font-size: 20px; - color: gold; -} - -.create-palette-color.selected { - border:2px solid gold; -} - -.create-palette-remove-color { - position: absolute; - top: 0; - right: 0; - padding: 2px 4px 0 0; - opacity : 0.2; - - font-weight: bold; - color: rgb(255,255,255); - text-shadow : 0 0 1px rgb(0,0,0); - - transition : opacity 0.3s, color 0.1s; -} - -.light-color .create-palette-remove-color { - color: rgb(0,0,0); - text-shadow : 0 0 1px rgb(255,255,255); -} - -.selected .create-palette-remove-color { - top: -1px; - right: -1px; -} - -.create-palette-color:hover .create-palette-remove-color { - opacity: 0.6; -} - -.create-palette-color .create-palette-remove-color:hover { - opacity: 1; - color: rgb(240,80,80); - text-shadow : 0 0 1px rgb(0,0,0); -} - -/*SPECTRUM OVERRIDES*/ - -.create-palette .sp-container{ - background-color: transparent; - border: none; - box-shadow : none; - border-radius:0; - padding:5px; -} -.user-message { - position: absolute; - right: 0; - bottom: 0; - padding: 10px 47px; - max-width: 300px; - - border-top-left-radius: 7px; - border: #F0C36D 1px solid; - border-right: 0; - border-bottom: 0; - - color: #222; - background-color: #F9EDBE; - - font-weight: bold; - font-size: 13px; - - z-index: 30000; -} - -.user-message .close { - position: absolute; - top: 6px; - right: 17px; - - color: gray; - - font-size: 18px; - font-weight: bold; - - cursor: pointer; -} - -.user-message .close:hover { - color: black; -} - -.progress-bar-container { - position: absolute; - left: 0; - bottom: 0; - padding: 10px; - width: 360px; - border-top-right-radius: 2px; - border: gold 2px solid; - border-left: 0; - border-bottom: 0; - background-color: #444; - font-size: 14px; - z-index: 30000; - color: #eee; -} - -.progress-bar-item { - float: left; - height:20px; -} - -.progress-bar-status { - line-height: 20px; - width : 40px; - overflow : hidden; - margin: 0 0 0 10px; -} - -.progress-bar { - border : 1px solid grey; - margin-top: 8px; - height : 4px; - width : 300px; - background : linear-gradient(to left, gold, gold) no-repeat -300px 0; - background-color : black; -} -.toolbox-container { - border: 4px solid #888; - font-size: medium; - color: white; - text-align: left; - border-radius: 4px; - margin-top: 5px; - margin-bottom: 10px; - overflow: hidden; -} - -.toolbox-title { - padding: 8px; - margin: 0; - font-size: 15px; - background: #222; -} - -/** - * Layers container - */ -.layers-list-container { -} - -/*.layers-title { - background-image: url('../img/layers.svg'); - background-size: 22px; - background-repeat: no-repeat; - background-position: 97%; -}*/ - -.layers-title { - position: relative; -} - -.layers-toggle-preview { - position: absolute; - top: 0.3em; - right: 0.5em; - - color: #999; - font-size: 1.3em; - cursor: pointer; - - transition: 0.2s linear; -} - -.layers-toggle-preview:hover { - color: white; -} - -.layers-toggle-preview-enabled, -.layers-toggle-preview-enabled:hover { - color : gold; -} - -.layers-list { - font-size : 12px; -} - -.layer-item { - height:24px; - line-height: 24px; - padding : 0 0 0 10px; - border-top: 1px solid #444; - cursor : pointer; -} - -.layer-item:hover { - background : #222; -} - -.current-layer-item, -.current-layer-item:hover { - background : #333; - color: gold; -} - -.layers-button-container { - overflow : hidden; -} - -.layers-button { - margin: 0; - width: 16.66667%; - float : left; -} - -/* @override */ -.layers-button-container .layers-button { - border-left-width: 0; -} - -.layers-button:last-child { - border-right-width: 0; -} -.palettes-title { - background-size: 22px; - background-repeat: no-repeat; - background-position: 97%; -} -.palettes-list-colors { - overflow: auto; - max-height: 160px; -} -.palettes-list-color { - cursor: pointer; - float: left; - margin: 0 0 5px 5px; - width: 32px; - height: 32px; - position: relative; -} -.palettes-list-color:nth-child(-n+5) { - margin-top: 5px; -} -.palettes-list-color div { - width: 32px; - height: 32px; -} -.palettes-list-has-scrollbar .palettes-list-color, .palettes-list-has-scrollbar .palettes-list-color div { - width: 29px -} -.palettes-list-primary-color:before, .palettes-list-secondary-color:before { - content: ""; - position: absolute; - bottom: 1px; - display: inline-block; - border: 7px solid gold; - border-top-color: transparent; - width: 0px; - height: 0px; -} -.palettes-list-primary-color:before { - left: 1px; - border-right-color: transparent; -} -.palettes-list-secondary-color:before { - right: 1px; - border-left-color: transparent; -} -.palettes-list-actions { - background-color: #3f3f3f; - border-bottom-color: #222; - height: 24px; - padding: 0; - overflow: hidden; -} - -.palettes-list-button, -.palettes-list-select { - margin: 0; - float: left; -} - -.palettes-list-button { - width: 16.66667%; -} -.palettes-list-select { - width: 66.66667%; - height: 100%; - padding: 0 5px 0 5px; - - border-style: solid; - border-width: 1px 0 1px 0; - - color: #aaa; - font-size : 0.75em; - - /*thanks firefox, you suck*/ - text-align:left; - /*text-shadow:none;*/ - font-weight: normal; - - transition : background-color 0.3s, color 0.3s; - cursor:pointer; -} - -.palettes-list-select:hover { - color: white; - background-color: #484848; -} - -.palettes-list-select:focus { - background-color: #484848; - color: white; - outline: none; -} - -.palettes-list-actions .edit-icon { - background-size: 15px; - background-position: 50%; -} -.palettes-list-no-colors { - height: 42px; - width: 100%; - color: grey; - font-size: 0.7em; - font-style: italic; - line-height: 42px; - text-align: center -} - -/** - * Animated preview styles. - */ - -.preview-container { - border : 0 Solid black; - border-radius:5px 0 0 5px; - box-shadow : 0 0 2px rgba(0,0,0,0.2); - font-size: 0; -} - -.preview-container .canvas-container { - overflow : hidden; -} - -.preview-container canvas { - border : 0 Solid transparent; -} - -.canvas-container .animated-preview-canvas-background { - position : relative; - height: 100%; -} - -#animated-preview-container { - background: #333; - border-radius : 0 0 2px 2px; - overflow : hidden; -} - -.canvas-container-wrapper { - height :200px; - width : 200px; - overflow:hidden; -} - -.tiled-frame-container { - height: 100%; - width: 100%; - position: relative; - background-repeat : repeat; -} - -.display-fps { - float: left; - color: #aaa; - font-size: 12px; - min-width: 55px; - vertical-align: bottom; - line-height: 26px; -} - -.range-fps { - overflow: hidden; - width: 100px; - height : 26px; - margin : 0; - box-sizing: border-box; - padding:0; -} - -.preview-toggle-onion-skin { - font-size: 2rem; - color: #aaa; - float: left; - line-height: 26px; - height: 100%; - padding-left: 5px; - padding-right: 5px; - border-right: 1px solid #222; - transition: 0.2s linear; - cursor:pointer; -} - -.preview-toggle-onion-skin:hover { - color : white; -} - -.preview-toggle-onion-skin-enabled, -.preview-toggle-onion-skin-enabled:hover { - color : gold; -} - -.open-popup-preview-button { - position : absolute; - z-index: 500; - right : 10px; - top : 10px; - width : 24px; - height: 18px; - - border : 2px solid white; - background : rgba(0,0,0,0.3); - cursor : pointer; - - opacity: 0; - transition: 0.3s opacity, 0.3s border-color; -} - -.minimap-container:hover .open-popup-preview-button { - opacity: 1; -} - -.open-popup-preview-button:hover { - border-color: gold; -} - - -.transformations-container .tool-icon { - float:left; -} - -/*** -Spectrum Colorpicker v1.1.2 -https://github.com/bgrins/spectrum -Author: Brian Grinstead -License: MIT -***/ - -.sp-container { - position:absolute; - top:0; - left:0; - display:inline-block; - *display: inline; - *zoom: 1; - /* https://github.com/bgrins/spectrum/issues/40 */ - z-index: 9999994; - overflow: hidden; -} -.sp-container.sp-flat { - position: relative; -} - -/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */ -.sp-top { - position:relative; - width: 100%; - display:inline-block; -} -.sp-top-inner { - position:absolute; - top:0; - left:0; - bottom:0; - right:0; -} -.sp-color { - position: absolute; - top:0; - left:0; - bottom:0; - right:20%; -} -.sp-hue { - position: absolute; - top:0; - right:0; - bottom:0; - left:84%; - height: 100%; -} -.sp-fill { - padding-top: 80%; -} -.sp-sat, .sp-val { - position: absolute; - top:0; - left:0; - right:0; - bottom:0; -} - -.sp-alpha-enabled .sp-top { - margin-bottom: 18px; -} -.sp-alpha-enabled .sp-alpha { - display: block; -} -.sp-alpha-handle { - position:absolute; - top:-4px; - bottom: -4px; - width: 6px; - left: 50%; - cursor: pointer; - border: 1px solid black; - background: white; - opacity: .8; -} -.sp-alpha { - display: none; - position: absolute; - bottom: -14px; - right: 0; - left: 0; - height: 8px; -} -.sp-alpha-inner { - border: solid 1px #333; -} - -/* Don't allow text selection */ -.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button { - -webkit-user-select:none; - -moz-user-select: -moz-none; - -o-user-select:none; - user-select: none; -} - -.sp-container.sp-input-disabled .sp-input-container { - display: none; -} -.sp-container.sp-buttons-disabled .sp-button-container { - display: none; -} -.sp-palette-only .sp-picker-container { - display: none; -} -.sp-palette-disabled .sp-palette-container { - display: none; -} - -.sp-initial-disabled .sp-initial { - display: none; -} - - -/* Gradients for hue, saturation and value instead of images. Not pretty... but it works */ -.sp-sat { - background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0))); - background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0)); - background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); - background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); - background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); - background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0)); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)"; - filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81'); -} -.sp-val { - background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0))); - background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0)); - background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); - background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); - background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); - background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0)); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)"; - filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000'); -} - -.sp-hue { - background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); - background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); - background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); - 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)); - background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); -} - -/* IE filters do not support multiple color stops. - Generate 6 divs, line them up, and do two color gradients for each. - Yes, really. - */ -.sp-1 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00'); -} -.sp-2 { - height:16%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00'); -} -.sp-3 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff'); -} -.sp-4 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff'); -} -.sp-5 { - height:16%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff'); -} -.sp-6 { - height:17%; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000'); -} - -.sp-hidden { - display: none !important; -} - -/* Clearfix hack */ -.sp-cf:before, .sp-cf:after { content: ""; display: table; } -.sp-cf:after { clear: both; } -.sp-cf { *zoom: 1; } - -/* Mobile devices, make hue slider bigger so it is easier to slide */ -@media (max-device-width: 480px) { - .sp-color { right: 40%; } - .sp-hue { left: 63%; } - .sp-fill { padding-top: 60%; } -} -.sp-dragger { - border-radius: 5px; - height: 5px; - width: 5px; - border: 1px solid #fff; - background: #000; - cursor: pointer; - position:absolute; - top:0; - left: 0; -} -.sp-slider { - position: absolute; - top:0; - cursor:pointer; - height: 3px; - left: -1px; - right: -1px; - border: 1px solid #000; - background: white; - opacity: .8; -} - -/* -Theme authors: -Here are the basic themeable display options (colors, fonts, global widths). -See http://bgrins.github.io/spectrum/themes/ for instructions. -*/ - -.sp-container { - border-radius: 0; - background-color: #ECECEC; - border: solid 1px #f0c49B; - padding: 0; -} -.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue -{ - font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} -.sp-top -{ - margin-bottom: 3px; -} -.sp-color, .sp-hue -{ - border: solid 1px #666; -} - -/* Input */ -.sp-input-container { - float:right; - width: 100px; - margin-bottom: 4px; -} -.sp-initial-disabled .sp-input-container { - width: 100%; -} -.sp-input { - font-size: 12px !important; - border: 1px inset; - padding: 4px 5px; - margin: 0; - width: 100%; - background:transparent; - border-radius: 3px; - color: #222; -} -.sp-input:focus { - border: 1px solid orange; -} -.sp-input.sp-validation-error -{ - border: 1px solid red; - background: #fdd; -} -.sp-picker-container , .sp-palette-container -{ - float:left; - position: relative; - padding: 10px; - padding-bottom: 300px; - margin-bottom: -290px; -} -.sp-picker-container -{ - width: 172px; - border-left: solid 1px #fff; -} - -/* Palettes */ -.sp-palette-container -{ - border-right: solid 1px #ccc; -} - -.sp-palette .sp-thumb-el { - display: block; - position:relative; - float:left; - width: 24px; - height: 15px; - margin: 3px; - cursor: pointer; - border:solid 2px transparent; -} -.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active { - border-color: orange; -} -.sp-thumb-el -{ - position:relative; -} - -/* Initial */ -.sp-initial -{ - float: left; - border: solid 1px #333; -} -.sp-initial span { - width: 30px; - height: 25px; - border:none; - display:block; - float:left; - margin:0; -} - -/* Buttons */ -.sp-button-container { - float: right; -} - -/* Replacer (the little preview div that shows up instead of the ) */ -.sp-replacer { - margin:0; - overflow:hidden; - cursor:pointer; - padding: 4px; - display:inline-block; - *zoom: 1; - *display: inline; - border: solid 1px #91765d; - background: #eee; - color: #333; - vertical-align: middle; -} -.sp-replacer:hover, .sp-replacer.sp-active { - border-color: #F0C49B; - color: #111; -} -.sp-replacer.sp-disabled { - cursor:default; - border-color: silver; - color: silver; -} -.sp-dd { - padding: 2px 0; - height: 16px; - line-height: 16px; - float:left; - font-size:10px; -} -.sp-preview -{ - position:relative; - width:25px; - height: 20px; - border: solid 1px #222; - margin-right: 5px; - float:left; - z-index: 0; -} - -.sp-palette -{ - *width: 220px; - max-width: 220px; -} -.sp-palette .sp-thumb-el -{ - width:16px; - height: 16px; - margin:2px 1px; - border: solid 1px #d0d0d0; -} - -.sp-container -{ - padding-bottom:0; -} - - -/* Buttons: http://hellohappy.org/css3-buttons/ */ -.sp-container button { - background-color: #eeeeee; - background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); - background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); - background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); - background-image: -o-linear-gradient(top, #eeeeee, #cccccc); - background-image: linear-gradient(to bottom, #eeeeee, #cccccc); - border: 1px solid #ccc; - border-bottom: 1px solid #bbb; - border-radius: 3px; - color: #333; - font-size: 14px; - line-height: 1; - padding: 5px 4px; - text-align: center; - text-shadow: 0 1px 0 #eee; - vertical-align: middle; -} -.sp-container button:hover { - background-color: #dddddd; - background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb); - background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb); - background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb); - background-image: -o-linear-gradient(top, #dddddd, #bbbbbb); - background-image: linear-gradient(to bottom, #dddddd, #bbbbbb); - border: 1px solid #bbb; - border-bottom: 1px solid #999; - cursor: pointer; - text-shadow: 0 1px 0 #ddd; -} -.sp-container button:active { - border: 1px solid #aaa; - border-bottom: 1px solid #888; - -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; - box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; -} -.sp-cancel -{ - font-size: 11px; - color: #d93f3f !important; - margin:0; - padding:2px; - margin-right: 5px; - vertical-align: middle; - text-decoration:none; - -} -.sp-cancel:hover -{ - color: #d93f3f !important; - text-decoration: underline; -} - - -.sp-palette span:hover, .sp-palette span.sp-thumb-active -{ - border-color: #000; -} - -.sp-preview, .sp-alpha, .sp-thumb-el -{ - position:relative; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); -} -.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner -{ - display:block; - position:absolute; - top:0;left:0;bottom:0;right:0; -} - -.sp-palette .sp-thumb-inner -{ - background-position: 50% 50%; - background-repeat: no-repeat; -} - -.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner -{ - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=); -} - -.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner -{ - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=); -} - -/** - * Piskel specific CSS for spectrum widgets - */ - -/* Widget's main container */ -.sp-container { - border-radius: 4px; - background-color: #2B2B2B; - border: solid 4px #888; - padding: 5px 5px 0 5px; - box-shadow : 0 0 5px 0 black; -} - -.sp-container[data-y-position=bottom] { - border-top-left-radius: 0; -} - -.sp-container[data-y-position=top] { - border-bottom-left-radius: 0; -} - -/* Color square container */ -.sp-color, .sp-hue { - border : 1px solid #222; -} - -/* Remove the padding on the input container */ -.sp-replacer { - padding: 4px; - height: 100%; - border-width: 0; - box-sizing: border-box; - -moz-box-sizing:border-box; - background-color: #444; -} - -.sp-replacer:hover { - background-color: #888; -} - -/* Hide the triangle */ -.sp-dd { - display: none; -} - -/* */ -.sp-preview { - margin-right: 0; - height: 100%; - width: 39px; - border-width: 0; -} - -.sp-palette-row-selection { - max-width: 62px; -} - -.sp-palette .sp-thumb-el { - margin : 0 5px 5px 0; - width: 24px; - height: 24px; - border-color: #444; - -} - -.sp-picker-container, .sp-palette-container { - padding-top: 5px; - padding-right: 5px; - padding-left: 5px; - border-left-width: 0; - border-right-width: 0; -} - -.sp-picker-container { - padding: 5px; - padding-bottom: 300px; - margin-bottom: -295px; -} - -.sp-slider { - height: 5px; - left: -2px; - right: -2px; - border: 2px solid white; - background: rgba(255,255,255,0); - opacity: 1; - border-radius: 2px; - box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(0,0,0,0.5); -} - -.sp-dragger { - border-radius: 8px; - height: 12px; - width: 12px; - border: 2px solid white; - background: none; - box-sizing:border-box; - -moz-box-sizing:border-box; - box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(0,0,0,0.5); -} - -.sp-palette .sp-thumb-el.sp-thumb-active { - border-color: gold; - box-shadow: 0 0 0px 1px gold; -} - -.sp-input { - border: 1px solid #666; - margin: 0; - background: #111; - border-radius: 2px; - color: #D3D3D3; - font-family: Courier!important; -} - -.sp-input.sp-validation-error { - background: #330000; -} -/*! - * Bootstrap v2.1.1 - * - * Copyright 2012 Twitter, Inc - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Designed and built with all the love in the world @twitter by @mdo and @fat. - */ -.clearfix { - *zoom: 1; -} -.clearfix:before, -.clearfix:after { - display: table; - content: ""; - line-height: 0; -} -.clearfix:after { - clear: both; -} -.hide-text { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; -} -.input-block-level { - display: block; - width: 100%; - min-height: 30px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -.tooltip { - position: absolute; - z-index: 30000; - display: block; - visibility: visible; - padding: 5px; - font-size: 11px; - opacity: 0; - filter: alpha(opacity=0); -} -.tooltip.in { - opacity: 0.8; - filter: alpha(opacity=80); -} -.tooltip.top { - margin-top: -3px; -} -.tooltip.right { - margin-left: 3px; -} -.tooltip.bottom { - margin-top: 3px; -} -.tooltip.left { - margin-left: -3px; -} -.tooltip-inner { - max-width: 200px; - padding: 3px 8px; - color: #ffffff; - text-align: center; - text-decoration: none; - background-color: #000000; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} -.tooltip.top .tooltip-arrow { - bottom: 0; - left: 50%; - margin-left: -5px; - border-width: 5px 5px 0; - border-top-color: #000000; -} -.tooltip.right .tooltip-arrow { - top: 50%; - left: 0; - margin-top: -5px; - border-width: 5px 5px 5px 0; - border-right-color: #000000; -} -.tooltip.left .tooltip-arrow { - top: 50%; - right: 0; - margin-top: -5px; - border-width: 5px 0 5px 5px; - border-left-color: #000000; -} -.tooltip.bottom .tooltip-arrow { - top: 0; - left: 50%; - margin-left: -5px; - border-width: 0 5px 5px; - border-bottom-color: #000000; -} - -.tooltip { - line-height: 20px; -} - -.tooltip.in { - opacity: 0.95; - filter: alpha(opacity=95); -} - -.tooltip { - line-height: 20px; -} -.preview-list-wrapper { - position: relative; - height: 100%; - overflow: hidden; -} - -.preview-list-scroller { - overflow-y: scroll; - overflow-x: hidden; - height: 100%; -} - -.top-overflow, -.bottom-overflow { - height: 20px; - position: absolute; - left: 0; - right: 12px; - - -webkit-transition: all 500ms ease-out; - -moz-transition: all 500ms ease-out; - -ms-transition: all 500ms ease-out; - -o-transition: all 500ms ease-out; - transition: all 500ms ease-out; - - background-image: linear-gradient(45deg, rgba(0,0,0, 0.8) 25%, transparent 25%, transparent 75%, rgba(0,0,0, 0.8) 75%, rgba(0,0,0, 0.8)), - linear-gradient(-45deg, rgba(0,0,0, 0.8) 25%, transparent 25%, transparent 75%, rgba(0,0,0, 0.8) 75%, rgba(0,0,0, 0.8)); - background-size: 29px 45px; - background-repeat: repeat-x; - background-position-x: 3px; - z-index: 10; -} - -.top-overflow { - top: -20px; -} - -.bottom-overflow { - bottom: -20px; - background-position-x: 0; - background-position-y: -23px; -} - -.top-overflow-visible .top-overflow { - top: 0; -} - -.bottom-overflow-visible .bottom-overflow { - bottom: 0; -} - -.preview-list { - list-style-type: none; - padding-right: 7px; -} - -.add-frame-action { - border: #888 solid 4px; - font-size: 13px; - color: #888; - cursor: pointer; - padding: 6px 0; - border-radius: 4px; - margin-top: 8px; - background-image: url(../img/plus.png); - background-repeat: no-repeat; - background-position: 3px 7px; - background-size: 26px 26px; - text-indent: 18px; - background-color: #222; -} - -.add-frame-action .label { - width: 80px; - margin: 0 auto; -} - -.add-frame-action:hover { - border-color: gold; -} - -.preview-tile { - position: relative; - border: #444 3px solid; - border-radius: 3px; - margin: 5px 0; - width: 96px; - height: 96px; -} - -.preview-tile:first-child { - margin-top: 0; -} - -.preview-tile:hover { - border: #999 3px solid; -} - -.tile-view { - position : relative; -} - -.preview-tile .tile-overlay { - z-index: 10; - position: absolute; - background-color: rgba(100, 100, 100, 0.6); - opacity: 0; - height: 30px; - width: 30px; - border: none; -} - -.preview-tile:hover .tile-overlay { - opacity: 1.0; -} - -.preview-tile .tile-overlay.tile-count { - display: block; - opacity: 1.0; - border-bottom-right-radius: 3px; - top: 0; - left: 0; - font-size: 14px; - line-height: 30px; - color: white; - font-weight: bold; - text-align: center; - cursor: default; -} - -.preview-tile .tile-overlay.delete-frame-action { - background-image: url(../img/garbage.png); - background-repeat: no-repeat; - top: 0; - right: 0; - border-bottom-left-radius: 3px; - height: 30px; - width: 30px; - background-position: 5px 5px; - background-size: 20px; - cursor: pointer; -} - -.preview-tile .tile-overlay.duplicate-frame-action { - bottom: 0; - right: 0; - border-bottom-left-radius: 3px; - background-image: url(../img/duplicate.png); - background-repeat: no-repeat; - background-position: 5px 5px; - background-size: 20px; - cursor: pointer; -} - -.preview-tile .tile-overlay.dnd-action { - bottom: 0; - left: 0; - border-top-right-radius: 3px; - background-image: url(../img/dragndrop.png); - background-repeat: no-repeat; - background-position: 5px 5px; - background-size: 20px; - cursor: move; -} - -.preview-tile.selected { - border-color: gold; -} - -.preview-tile.selected:after { - content: " "; - position: absolute; - top: 38px; - right: -15px; - border: transparent 4px solid; - border-left-color: gold; - border-width: 6px; - border-style: solid; -} - - -/** - * Drag n drop styles. - */ - -.preview-tile-drop-proxy { - border: 3px dashed gold; - height: 90px; - border-radius: 9px; - background-color: rgba(255, 215,0, 0.2); -} - -.minimap-crop-frame { - position:absolute; - border:1px solid rgba(255,255,255,0.5); - z-index:100; - box-sizing : border-box; - -moz-box-sizing : border-box; - cursor : pointer; -} \ No newline at end of file diff --git a/css/piskel-style-packaged-2015-09-14-10-01.css b/css/piskel-style-packaged-2016-01-14-12-02.css similarity index 83% rename from css/piskel-style-packaged-2015-09-14-10-01.css rename to css/piskel-style-packaged-2016-01-14-12-02.css index 32d12920..5f614827 100644 --- a/css/piskel-style-packaged-2015-09-14-10-01.css +++ b/css/piskel-style-packaged-2016-01-14-12-02.css @@ -107,9 +107,40 @@ body { margin-left: 0; } +/** + * TOOLTIPS + */ .tooltip-shortcut { color:gold; } + +.tooltip-container { + text-align: left; +} + +.tooltip-descriptor { + color:#999; +} + +.tooltip-descriptor:last-child { + padding-bottom: 5px; +} + +.tooltip-descriptor-button { + padding: 2px; + border: 1px Solid #999; + font-size: 0.8em; + margin-right: 5px; + width: 35px; + text-align: center; + border-radius: 3px; + display: inline-block; + line-height: 10px; +} +@keyframes fade { + 50% { opacity: 0.5; } +} + /** * Application layout */ @@ -215,22 +246,22 @@ body { .light-picker-background, .light-canvas-background .canvas-background { - background: url(../img/canvas_background/light_canvas_background.png) repeat; + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEXf39////8zI3BgAAAAHklEQVR4AWNghAIGCMDgjwgFCDDSw2M0PSCD0fQAACRcAgF4ciGUAAAAAElFTkSuQmCC') repeat; } .medium-picker-background, .medium-canvas-background .canvas-background { - background: url(../img/canvas_background/medium_canvas_background.png) repeat; + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEW6urr///82MBGFAAAAHUlEQVR4AWOAAUYoQOePEAUj3v9oYDQ9gMBoegAAJFwCAbLaTIMAAAAASUVORK5CYII=') repeat; } .lowcont-medium-picker-background, .lowcont-medium-canvas-background .canvas-background { - background: url(../img/canvas_background/lowcont_medium_canvas_background.png) repeat; + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEXV1dXb29tFGkCIAAAAHklEQVR4AWNghAIGCMDgjwgFCDDSw2M0PSCD0fQAACRcAgF4ciGUAAAAAElFTkSuQmCC') repeat; } .lowcont-dark-picker-background, .lowcont-dark-canvas-background .canvas-background { - background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat; + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEVMTExVVVUnhsEkAAAAHUlEQVR4AWOAAUYoQOePEAUj3v9oYDQ9gMBoegAAJFwCAbLaTIMAAAAASUVORK5CYII=') repeat; } .canvas.onion-skin-canvas { @@ -468,55 +499,6 @@ body { margin-right: 0; } -/********************************************************** *j* j** j*j j j j** *****************/ -/* Settings icons I I I I I\I \ */ -/********************************************************** *** *** *** * * '** *****************/ - -.tool-icon.gallery-icon { - background-image: url(../img/gallery.png); - background-position: 3px 3px; - background-size: 39px 39px; -} - -.tool-icon.resize-icon { - background-image: url(../img/resize-icon.png); - background-position: 10px 10px; - background-size: 26px 26px; -} - -.tool-icon.save-icon { - background-image: url(../img/save.png); - background-position: 6px 6px; - background-size: 36px 36px; -} - -.tool-icon.gear-icon { - background-image: url(../img/gear.png); - background-position: 6px 7px; - background-size: 32px 32px; -} - -.tool-icon.export-icon { - background-image: url(../img/export.png); - background-position: 7px 5px; - background-size: 36px 36px; - position: relative; -} - -.tool-icon.local-storage-icon { - background-image: url(../img/local-storage-icon.png); - background-position: 10px 12px; - background-size: 30px; - position: relative; -} - -.tool-icon.import-icon { - background-image: url(../img/import-icon.png); - background-position: 10px 5px; - background-size: 26px; - position: relative; -} - .tool-icon .label { position: absolute; left: 0; @@ -579,7 +561,6 @@ body { .settings-description { margin : 0 0 10px 0; - display : inline-block; } .settings-form-section { @@ -594,42 +575,6 @@ body { vertical-align: middle; } -/************************************************************************************************/ -/* Save panel */ -/************************************************************************************************/ - -.anonymous .save-public-section, -.anonymous #save-online-button { - display : none; -} - -.save-field { - width: 100%; -} - -.save-status { - margin-top: 10px; - margin-bottom: -10px; - vertical-align: middle; - font-weight: normal; - text-shadow: none; - font-style: italic; -} - -.save-file-name { - white-space: nowrap; - font-weight: bold; - color: white; - font-style: normal; -} - -.save-desktop-file-name { - word-wrap: break-word; - font-weight: bold; - color: white; - font-style: normal; -} - /*******************************/ /* Application Setting panel */ /*******************************/ @@ -749,6 +694,28 @@ body { background: rgba(0,0,0,0.5); color: white; } + +.scaling-factor { + margin-bottom: 10px; +} + +.scaling-factor-input { + margin: 5px; + vertical-align: middle; + width: 145px; +} + +.scaling-factor-text { + height: 31px; + display: inline-block; + line-height: 30px; + width: 40px; + border: 1px solid grey; + box-sizing: border-box; + border-radius: 3px; + text-align: center; +} + /************************************************************************************************/ /* Import panel */ /************************************************************************************************/ @@ -813,6 +780,10 @@ body { border-color: #555 !important; } +.resize-origin-option:hover { + border : 3px solid white; +} + .resize-origin-option.selected { border : 3px solid gold; } @@ -870,6 +841,33 @@ body { border-left-color: gold; margin-top: -4px; } +.save-field { + width: 100%; +} + +.save-status { + margin-top: 10px; + margin-bottom: -10px; + vertical-align: middle; + font-weight: normal; + text-shadow: none; + font-style: italic; +} + +.save-file-name { + white-space: nowrap; + font-weight: bold; + color: white; + font-style: normal; +} + +.save-desktop-file-name { + word-wrap: break-word; + font-weight: bold; + color: white; + font-style: normal; +} + .tool-icon { position : relative; cursor : pointer; @@ -877,9 +875,6 @@ body { height: 46px; margin: 1px; background-color: #3a3a3a; - background-repeat: no-repeat; - background-position: 12px 12px; - background-size: 24px 24px; } .tool-icon.selected { @@ -894,161 +889,77 @@ body { width : 100%; border: 3px solid gold; box-sizing: border-box; - -moz-box-sizing: border-box; } .tool-icon:hover { background-color: #444; } -/* - * Tool icons: - */ -.tool-icon.tool-pen { - background-image: url(../img/tools/pen.png); -} - -.tool-icon.tool-vertical-mirror-pen { - background-image: url(../img/tools/mirror.png); - background-position: 0px 10px; - background-size: 38px 27px; -} - -.tool-icon.tool-paint-bucket { - background-image: url(../img/tools/paintbucket.png); -} - -.tool-icon.tool-eraser { - background-image: url(../img/tools/eraser.png); -} - -.tool-icon.tool-stroke { - background-image: url(../img/tools/stroke.png); -} - -.tool-icon.tool-rectangle { - background-image: url(../img/tools/rectangle.png); - background-position: 12px 14px; - background-size: 24px 20px; -} - -.tool-icon.tool-circle { - background-image: url(../img/tools/circle.png); -} - -.tool-icon.tool-move { - background-image: url(../img/tools/hand.png); - background-size: 24px 24px; -} - -.tool-icon.tool-rectangle-select { - background-image: url(../img/tools/rectangle_selection.png); - background-position: 12px 14px; - background-size: 24px 20px; -} - -.tool-icon.tool-shape-select { - background-image: url(../img/tools/magicwand.png); -} - -.tool-icon.tool-lighten { - background-image: url(../img/tools/lighten.png); - background-position: 8px 8px; - background-size: 30px 30px; -} - -.tool-icon.tool-colorpicker { - background-image: url(../img/tools/eyedropper.png); - background-size: 23px 23px; -} - -.tool-icon.tool-colorswap { - background-image: url(../img/tools/swap-colors.png); - background-position: 6px 6px; - background-size: 36px 36px; -} - -.tool-icon.tool-flip { - background-image: url(../img/tools/flip.png); - background-position: 7px 11px; - background-size: 32px; -} - -.tool-icon.tool-rotate { - background-image: url(../img/tools/rotate.png); - background-position: 10px 9px; - background-size: 26px; -} - -.tool-icon.tool-clone { - background-image: url(../img/tools/clone.png); - background-position: 9px 15px; - background-size: 30px; -} - /* * Tool cursors: */ .tool-paint-bucket .drawing-canvas-container:hover, .tool-colorswap .drawing-canvas-container:hover { - cursor: url(../img/icons/paint-bucket.png) 12 12, pointer; + cursor: url(../img/cursors/paint-bucket.png) 12 12, pointer; } .tool-vertical-mirror-pen .drawing-canvas-container:hover { - cursor: url(../img/icons/vertical-mirror-pen.png) 5 15, pointer; + cursor: url(../img/cursors/vertical-mirror-pen.png) 5 15, pointer; } .tool-pen .drawing-canvas-container:hover, -.tool-lighten .drawing-canvas-container:hover { - cursor: url(../img/icons/pen.png) 0 15, pointer; +.tool-lighten .drawing-canvas-container:hover, +.tool-dithering .drawing-canvas-container:hover { + cursor: url(../img/cursors/pen.png) 0 15, pointer; } .tool-eraser .drawing-canvas-container:hover { - cursor: url(../img/icons/eraser.png) 0 15, pointer; + cursor: url(../img/cursors/eraser.png) 0 15, pointer; } .tool-stroke .drawing-canvas-container:hover { - cursor: url(../img/icons/pen.png) 0 15, pointer; + cursor: url(../img/cursors/pen.png) 0 15, pointer; } .tool-rectangle .drawing-canvas-container:hover { - cursor: url(../img/icons/rectangle.png) 0 15, pointer; + cursor: url(../img/cursors/rectangle.png) 0 15, pointer; } .tool-circle .drawing-canvas-container:hover { - cursor: url(../img/icons/circle.png) 2 15, pointer; + cursor: url(../img/cursors/circle.png) 2 15, pointer; } .tool-move .drawing-canvas-container:hover { - cursor: url(../img/icons/hand.png) 7 7, pointer; + cursor: url(../img/cursors/hand.png) 7 7, pointer; } -.tool-rectangle-select .drawing-canvas-container:hover { +.tool-rectangle-select .drawing-canvas-container:hover, +.tool-lasso-select .drawing-canvas-container:hover { cursor: crosshair; } .tool-shape-select .drawing-canvas-container:hover { - cursor: url(../img/icons/wand.png) 15 15, pointer; + cursor: url(../img/cursors/wand.png) 15 15, pointer; } .tool-colorpicker .drawing-canvas-container:hover { - cursor: url(../img/icons/dropper.png) 0 15, pointer; + cursor: url(../img/cursors/dropper.png) 0 15, pointer; } -.swap-colors-icon { - background-image: url(../img/tools/swap-arrow-square-small-grey.png); +.swap-colors-button { position: relative; top: 50px; left: 6px; height: 18px; width: 18px; - background-size: 18px; + opacity : 0.3; + cursor : pointer; } -.swap-colors-icon:hover { +.swap-colors-button:hover { opacity : 1; } @@ -1118,162 +1029,254 @@ body { ); } -.tools-tooltip-container { - text-align: left; - padding-bottom: 5px; -} -.tools-tooltip-descriptor { - color:#999; -} - -.tools-tooltip-descriptor-button { - padding:2px; - border:1px Solid #999; - font-size:0.8em; - margin-right:5px; - width:35px; - text-align:center; - border-radius:3px; - display:inline-block; - line-height: 10px; -} - - -.action-icon { - cursor: pointer; - height: 100%; - background-repeat: no-repeat; - background-position: 50%; -} - -.edit-icon { - background-image: url('../img/tools/pen.png'); - background-repeat: no-repeat; -} - -.merge-icon { - background-image: url('../img/merge-icon.png'); - background-repeat: no-repeat; -} - -.plus-icon { - font-size:15px; - text-align:center; -} - -.delete-icon { -} -.cheatsheet-link { - position: fixed; - bottom: 10px; - left: 10px; - - padding: 1px 0 0 45px; - color : gold; - font-weight: bold; - font-size : 1.25em; - line-height: 20px; - - cursor : pointer; - - background-image:url('../img/keyboard.png'); - background-size:35px 20px; - background-repeat:no-repeat; - opacity: 0.5; - z-index: 11000; - transition : opacity 0.3s; -} - -.cheatsheet-link:hover { - opacity: 1; -} - -#cheatsheet-wrapper { - position: absolute; - z-index: 10000; - - top: 50px; - right: 50px; - bottom: 50px; - left: 50px; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - color: white; -} - -.cheatsheet-container { - width: 100%; - height: 100%; - - box-sizing: border-box; - -moz-box-sizing : border-box; - - padding: 20px 3%; - border-radius: 3px; - background: rgba(0,0,0,0.9); - overflow: auto; -} - -.cheatsheet-container .cheatsheet-title { - font-size:24px; - margin-top: 0; -} - -.cheatsheet-container .cheatsheet-title:nth-of-type(2) { - margin-top: 30px; -} - -.cheatsheet-section { - float: left; - width : 33%; -} - -.cheatsheet-shortcut { +.pen-size-container { overflow: hidden; - margin: 10px 0; + padding: 5px 5px; } -.cheatsheet-icon.tool-icon { +.pen-size-option { float: left; - display: inline-block; - - height: 30px; - width: 30px; - margin: 0 20px 0 0; - - background-size: 20px 20px; - background-position: 5px 5px; -} - -.cheatsheet-description { - font-family:Courier; - color: white; - font-size : 13px; - margin-left: 20px; - line-height : 30px; -} - -.cheatsheet-key { - display : inline-block; - height: 30px; - line-height: 30px; - padding: 0 10px; - - border : 1px solid gold; - border-radius: 2px; - box-sizing: border-box; - -moz-box-sizing : border-box; - - text-align: center; - font-family:Courier; - font-weight: bold; - font-size : 18px; - color: gold; + width: 20px; + height: 20px; + margin-right: 2px; + border-style: solid; + border-width: 2px; + border-color: #444; + cursor: pointer; } + +.pen-size-option[data-size='1'] { + padding: 6px; +} +.pen-size-option[data-size='2'] { + padding: 5px; +} +.pen-size-option[data-size='3'] { + padding: 4px; +} +.pen-size-option[data-size='4'] { + padding: 3px; +} + +.pen-size-option:before { + content: ''; + width: 100%; + height: 100%; + background-color: white; + display: block; +} + +.pen-size-option:hover { + border-color: #888; +} + +.pen-size-option.selected:before { + background-color: gold; +} + +.pen-size-option.selected { + border-color: gold; +} +/* +Icon classes can be used entirely standalone. They are named after their original file names. + +```html + +
+ + + +``` +*/ +.icon-common-keyboard-gold { + background-image: url(../img/icons.png); + background-position: -230px 0px; + width: 35px; + height: 20px; +} +.icon-common-swapcolors-arrow-grey { + background-image: url(../img/icons.png); + background-position: -230px -46px; + width: 18px; + height: 18px; +} +.icon-frame-dragndrop-white { + background-image: url(../img/icons.png); + background-position: -198px -184px; + width: 30px; + height: 30px; +} +.icon-frame-duplicate-white { + background-image: url(../img/icons.png); + background-position: -168px -184px; + width: 30px; + height: 30px; +} +.icon-frame-plus-white { + background-image: url(../img/icons.png); + background-position: -230px -20px; + width: 26px; + height: 26px; +} +.icon-frame-recyclebin-white { + background-image: url(../img/icons.png); + background-position: -138px -184px; + width: 30px; + height: 30px; +} +.icon-minimap-popup-preview-arrow-gold { + background-image: url(../img/icons.png); + background-position: -230px -82px; + width: 18px; + height: 18px; +} +.icon-minimap-popup-preview-arrow-white { + background-image: url(../img/icons.png); + background-position: -230px -64px; + width: 18px; + height: 18px; +} +.icon-settings-export-white { + background-image: url(../img/icons.png); + background-position: -92px -92px; + width: 46px; + height: 46px; +} +.icon-settings-gear-white { + background-image: url(../img/icons.png); + background-position: -138px 0px; + width: 46px; + height: 46px; +} +.icon-settings-open-folder-white { + background-image: url(../img/icons.png); + background-position: -138px -46px; + width: 46px; + height: 46px; +} +.icon-settings-resize-white { + background-image: url(../img/icons.png); + background-position: -138px -92px; + width: 46px; + height: 46px; +} +.icon-settings-save-white { + background-image: url(../img/icons.png); + background-position: 0px -138px; + width: 46px; + height: 46px; +} +.icon-tool-circle { + background-image: url(../img/icons.png); + background-position: -46px -138px; + width: 46px; + height: 46px; +} +.icon-tool-colorpicker { + background-image: url(../img/icons.png); + background-position: -92px -138px; + width: 46px; + height: 46px; +} +.icon-tool-colorswap { + background-image: url(../img/icons.png); + background-position: 0px 0px; + width: 46px; + height: 46px; +} +.icon-tool-dithering { + background-image: url(../img/icons.png); + background-position: -184px 0px; + width: 46px; + height: 46px; +} +.icon-tool-eraser { + background-image: url(../img/icons.png); + background-position: -184px -46px; + width: 46px; + height: 46px; +} +.icon-tool-lasso-select { + background-image: url(../img/icons.png); + background-position: -184px -92px; + width: 46px; + height: 46px; +} +.icon-tool-lighten { + background-image: url(../img/icons.png); + background-position: -184px -138px; + width: 46px; + height: 46px; +} +.icon-tool-move { + background-image: url(../img/icons.png); + background-position: 0px -184px; + width: 46px; + height: 46px; +} +.icon-tool-paint-bucket { + background-image: url(../img/icons.png); + background-position: -46px -184px; + width: 46px; + height: 46px; +} +.icon-tool-pen { + background-image: url(../img/icons.png); + background-position: -92px -184px; + width: 46px; + height: 46px; +} +.icon-tool-rectangle-select { + background-image: url(../img/icons.png); + background-position: -138px -138px; + width: 46px; + height: 46px; +} +.icon-tool-rectangle { + background-image: url(../img/icons.png); + background-position: -46px -92px; + width: 46px; + height: 46px; +} +.icon-tool-shape-select { + background-image: url(../img/icons.png); + background-position: 0px -92px; + width: 46px; + height: 46px; +} +.icon-tool-stroke { + background-image: url(../img/icons.png); + background-position: -92px -46px; + width: 46px; + height: 46px; +} +.icon-tool-vertical-mirror-pen { + background-image: url(../img/icons.png); + background-position: -92px 0px; + width: 46px; + height: 46px; +} +.icon-tool-clone { + background-image: url(../img/icons.png); + background-position: -46px -46px; + width: 46px; + height: 46px; +} +.icon-tool-flip { + background-image: url(../img/icons.png); + background-position: 0px -46px; + width: 46px; + height: 46px; +} +.icon-tool-rotate { + background-image: url(../img/icons.png); + background-position: -46px 0px; + width: 46px; + height: 46px; +} + .color-picker-slider * { box-sizing: border-box; } @@ -1402,7 +1405,7 @@ body { } #dialog-container-wrapper.animated { - transition: opacity 0.5s; + transition: opacity 0.2s; } #dialog-container-wrapper.show { @@ -1425,10 +1428,6 @@ body { overflow: auto; } -.animated #dialog-container { - transition:margin-top 0.5s; -} - .show #dialog-container { margin-top: 0; } @@ -1451,6 +1450,14 @@ body { position : relative; } +.dialog-content { + position: absolute; + top: 45px; + bottom: 0; + width: 100%; + box-sizing: border-box; +} + .dialog-head { width: 100%; background: gold; @@ -1458,6 +1465,7 @@ body { padding: 10px; color: black; font-size: 1.8em; + height: 45px; box-sizing: border-box; -moz-box-sizing: border-box; } @@ -1471,107 +1479,6 @@ body { font-size: 1.3em; cursor: pointer; } -/************************************************************************************************/ -/* Import dialog */ -/************************************************************************************************/ - -#dialog-container.import-image { - width: 550px; - height: 360px; - top : 50%; - left : 50%; - position : absolute; - margin-left: -250px; -} - -.show #dialog-container.import-image { - margin-top: -150px; -} - -.import-subsection { - margin-left: 25px; -} - -.import-section:not(.import-subsection) > .dialog-section-title { - width: 50px; -} - -.import-section-preview-title { - position: absolute; - margin-left: 50%; - margin-top: -28px; -} - -.import-section-preview { - position: absolute; - display: inline-block; - border: 1px dashed #999; - border-radius: 3px; - margin-left: 50%; -} - -.import-section-preview img { - max-width: 220px; - max-height: 220px; - display: block; -} - -.import-section-preview.no-border { - border-color: transparent; -} - -.import-section-preview canvas { - position: absolute; - left: 0; - top: 0; -} - -.dialog-section-title { - display : inline-block; - width: 80px; -} - -.dialog-section-radio { - margin-top: 15px; - vertical-align: sub; -} - -.import-size-field:nth-of-type(2) { - margin-left: 5px; -} - -.import-image-file-name { - display: inline-block; - overflow: hidden; - - width: 200px; - vertical-align: middle; - - word-break : break-all; - white-space: nowrap; - text-overflow: ellipsis; - - font-style: italic; - font-weight: normal; - text-shadow: none; - color: gold; -} - -[name=smooth-resize-checkbox] { - margin : 0 8px; -} - -.dialog-import-body { - padding: 10px 20px; - font-size:1.3em -} - -.import-button { - font-size: 1em; - height: 28px; - padding: 0px 10px; - margin-top: 15px; -} /************************************************************************************************/ /* Browse local piskels panel */ @@ -1610,6 +1517,234 @@ body { .local-piskel-delete-button { width : 75px; } +.cheatsheet-link { + position: fixed; + bottom: 10px; + left: 10px; + + color : gold; + font-weight: bold; + font-size : 1.25em; + line-height: 20px; + + cursor: pointer; + + opacity: 0.5; + z-index: 11000; + transition : opacity 0.3s; +} + +.cheatsheet-link:hover { + opacity: 1; +} + +.cheatsheet-container { + box-sizing: border-box; + display: block; + + bottom: 46px; + padding: 20px 3%; + border-radius: 3px; + background-color: rgba(0,0,0,0.9); + overflow: auto; +} + +.cheatsheet-container .cheatsheet-title { + font-size:24px; + margin-top: 30px; +} + +.cheatsheet-container .cheatsheet-title:nth-of-type(1) { + margin-top: 0; +} + +.cheatsheet-section { + box-sizing: border-box; + float: left; + + vertical-align: top; + padding : 0 20px 20px 20px; + min-width: 300px; +} + +.cheatsheet-boxes { + display: flex; + flex-direction: row; + flex-wrap: wrap; + + float: left; +} + +@media (min-width: 1300px) { + .cheatsheet-container > div { + width: 33%; + } + .cheatsheet-boxes { + flex-direction: column; + } +} + +.cheatsheet-shortcut { + overflow: hidden; + margin: 10px 0; +} + +.cheatsheet-icon.tool-icon { + float: left; + + height: 30px; + width: 30px; + margin: 0 10px 0 0; + background-size: 30px 30px; +} + +.cheatsheet-description { + color: white; + font-size : 14px; + margin-left: 10px; + line-height : 30px; +} + +.cheatsheet-key { + box-sizing: border-box; + display : inline-block; + height: 30px; + line-height: 26px; + padding: 0 10px; + + border : 2px solid white; + border-radius: 2px; + + text-align: center; + font-family:Courier; + font-weight: bold; + font-size : 18px; + color: white; +} + +.cheatsheet-shorcut-conflict .cheatsheet-key { + border-color: red; + color: red; +} + +.cheatsheet-shortcut-editable { + cursor : pointer; +} + +.cheatsheet-shortcut-editable .cheatsheet-key { + border-color: gold; + color: gold; +} + +.cheatsheet-shortcut-editing .cheatsheet-key { + animation: fade .5s infinite; +} + +.cheatsheet-shortcut-undefined .cheatsheet-key { + border-color: red; + color: red; +} + +/*Cheatsheet actions*/ + +.cheatsheet-actions { + position: absolute; + box-sizing: border-box; + + bottom : 0; + left : 0; + right : 0; + height : 46px; + + padding : 10px; + overflow: hidden; + + background-color : gold; +} + +.cheatsheet-helptext { + font-size: 14px; + height : 26px; + line-height : 26px; + color: black; +} + +.cheatsheet-helptext-tooltip { + text-align: left; +} + +.cheatsheet-helptext-tooltip-item { + line-height: 0.9em; + margin: 10px 0; +} + +.cheatsheet-button { + position: absolute; + bottom: 10px; + right: 10px; +} + + +.cheatsheet-icon-tool-circle { + background-image: url(../img/icons/tools/tool-circle.png); +} + +.cheatsheet-icon-tool-colorpicker { + background-image: url(../img/icons/tools/tool-colorpicker.png); +} + +.cheatsheet-icon-tool-colorswap { + background-image: url(../img/icons/tools/tool-colorswap.png); +} + +.cheatsheet-icon-tool-dithering { + background-image: url(../img/icons/tools/tool-dithering.png); +} + +.cheatsheet-icon-tool-eraser { + background-image: url(../img/icons/tools/tool-eraser.png); +} + +.cheatsheet-icon-tool-lasso-select { + background-image: url(../img/icons/tools/tool-lasso-select.png); +} + +.cheatsheet-icon-tool-lighten { + background-image: url(../img/icons/tools/tool-lighten.png); +} + +.cheatsheet-icon-tool-move { + background-image: url(../img/icons/tools/tool-move.png); +} + +.cheatsheet-icon-tool-paint-bucket { + background-image: url(../img/icons/tools/tool-paint-bucket.png); +} + +.cheatsheet-icon-tool-pen { + background-image: url(../img/icons/tools/tool-pen.png); +} + +.cheatsheet-icon-tool-rectangle-select { + background-image: url(../img/icons/tools/tool-rectangle-select.png); +} + +.cheatsheet-icon-tool-rectangle { + background-image: url(../img/icons/tools/tool-rectangle.png); +} + +.cheatsheet-icon-tool-shape-select { + background-image: url(../img/icons/tools/tool-shape-select.png); +} + +.cheatsheet-icon-tool-stroke { + background-image: url(../img/icons/tools/tool-stroke.png); +} + +.cheatsheet-icon-tool-vertical-mirror-pen { + background-image: url(../img/icons/tools/tool-vertical-mirror-pen.png); +} + #dialog-container.create-palette { width: 500px; height: 600px; @@ -1779,6 +1914,107 @@ body { border-radius:0; padding:5px; } +/************************************************************************************************/ +/* Import dialog */ +/************************************************************************************************/ + +#dialog-container.import-image { + width: 550px; + height: 360px; + top : 50%; + left : 50%; + position : absolute; + margin-left: -250px; +} + +.show #dialog-container.import-image { + margin-top: -150px; +} + +.import-subsection { + margin-left: 25px; +} + +.import-section:not(.import-subsection) > .dialog-section-title { + width: 50px; +} + +.import-section-preview-title { + position: absolute; + margin-left: 50%; + margin-top: -28px; +} + +.import-section-preview { + position: absolute; + display: inline-block; + border: 1px dashed #999; + border-radius: 3px; + margin-left: 50%; +} + +.import-section-preview img { + max-width: 220px; + max-height: 220px; + display: block; +} + +.import-section-preview.no-border { + border-color: transparent; +} + +.import-section-preview canvas { + position: absolute; + left: 0; + top: 0; +} + +.dialog-section-title { + display : inline-block; + width: 80px; +} + +.dialog-section-radio { + margin-top: 15px; + vertical-align: sub; +} + +.import-size-field:nth-of-type(2) { + margin-left: 5px; +} + +.import-image-file-name { + display: inline-block; + overflow: hidden; + + width: 200px; + vertical-align: middle; + + word-break : break-all; + white-space: nowrap; + text-overflow: ellipsis; + + font-style: italic; + font-weight: normal; + text-shadow: none; + color: gold; +} + +[name=smooth-resize-checkbox] { + margin : 0 8px; +} + +.dialog-import-body { + padding: 10px 20px; + font-size:1.3em +} + +.import-button { + font-size: 1em; + height: 28px; + padding: 0px 10px; + margin-top: 15px; +} .user-message { position: absolute; right: 0; @@ -1877,13 +2113,6 @@ body { .layers-list-container { } -/*.layers-title { - background-image: url('../img/layers.svg'); - background-size: 22px; - background-repeat: no-repeat; - background-position: 97%; -}*/ - .layers-title { position: relative; } @@ -1983,7 +2212,6 @@ body { border-radius: 0 0 0 2px; } - .palettes-list-color:nth-child(1):after { content: "1"; } @@ -2015,6 +2243,7 @@ body { .palettes-list-color:nth-child(-n+5) { margin-top: 5px; } + .palettes-list-color div { width: 32px; height: 32px; @@ -2088,10 +2317,6 @@ body { outline: none; } -.palettes-list-actions .edit-icon { - background-size: 15px; - background-position: 50%; -} .palettes-list-no-colors { height: 42px; width: 100%; @@ -2225,17 +2450,20 @@ body { } .open-popup-preview-button { - width : 18px; - height: 18px; - border : 2px solid white; - background-image: url(../img/popup-preview-arrow-white.png); background-color : rgba(0,0,0,0.3); } .open-popup-preview-button:hover { border-color: gold; - background-image: url(../img/popup-preview-arrow-gold.png); +} + +/** + * The regular image is provided bby the sprite icons.png+icons.css + */ +.icon-minimap-popup-preview-arrow-white:hover { + background-image: url(../img/icons/minimap/minimap-popup-preview-arrow-gold.png); + background-position: 0 0; } @@ -3017,24 +3245,28 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. } .add-frame-action { - border: #888 solid 4px; - font-size: 13px; - color: #888; - cursor: pointer; - padding: 6px 0; - border-radius: 4px; margin-top: 8px; - background-image: url(../img/plus.png); - background-repeat: no-repeat; - background-position: 3px 7px; - background-size: 26px 26px; - text-indent: 18px; + padding: 6px 0; + overflow: hidden; + width: 96px; + + border: #888 solid 3px; + border-radius: 4px; + + color: #888; background-color: #222; + font-size: 13px; + cursor: pointer; +} + +.add-frame-action-icon { + margin: 3px; + float: left; } .add-frame-action .label { - width: 80px; - margin: 0 auto; + overflow: hidden; + text-align: left; } .add-frame-action:hover { @@ -3091,15 +3323,9 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. } .preview-tile .tile-overlay.delete-frame-action { - background-image: url(../img/garbage.png); - background-repeat: no-repeat; top: 0; right: 0; border-bottom-left-radius: 3px; - height: 30px; - width: 30px; - background-position: 5px 5px; - background-size: 20px; cursor: pointer; } @@ -3107,10 +3333,6 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. bottom: 0; right: 0; border-bottom-left-radius: 3px; - background-image: url(../img/duplicate.png); - background-repeat: no-repeat; - background-position: 5px 5px; - background-size: 20px; cursor: pointer; } @@ -3118,10 +3340,6 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. bottom: 0; left: 0; border-top-right-radius: 3px; - background-image: url(../img/dragndrop.png); - background-repeat: no-repeat; - background-position: 5px 5px; - background-size: 20px; cursor: move; } diff --git a/img/canvas-backgrounds/canvas-background-light.png b/img/canvas-backgrounds/canvas-background-light.png new file mode 100644 index 00000000..d11f6acd Binary files /dev/null and b/img/canvas-backgrounds/canvas-background-light.png differ diff --git a/img/canvas-backgrounds/canvas-background-lowcontrast-dark.png b/img/canvas-backgrounds/canvas-background-lowcontrast-dark.png new file mode 100644 index 00000000..9f8f188e Binary files /dev/null and b/img/canvas-backgrounds/canvas-background-lowcontrast-dark.png differ diff --git a/img/canvas-backgrounds/canvas-background-lowcontrast-medium.png b/img/canvas-backgrounds/canvas-background-lowcontrast-medium.png new file mode 100644 index 00000000..acd57cde Binary files /dev/null and b/img/canvas-backgrounds/canvas-background-lowcontrast-medium.png differ diff --git a/img/canvas-backgrounds/canvas-background-medium.png b/img/canvas-backgrounds/canvas-background-medium.png new file mode 100644 index 00000000..a90cd46c Binary files /dev/null and b/img/canvas-backgrounds/canvas-background-medium.png differ diff --git a/img/canvas_background/light_canvas_background.png b/img/canvas_background/light_canvas_background.png deleted file mode 100644 index 52b7242d..00000000 Binary files a/img/canvas_background/light_canvas_background.png and /dev/null differ diff --git a/img/canvas_background/lowcont_dark_canvas_background.png b/img/canvas_background/lowcont_dark_canvas_background.png deleted file mode 100644 index dc80a413..00000000 Binary files a/img/canvas_background/lowcont_dark_canvas_background.png and /dev/null differ diff --git a/img/canvas_background/lowcont_medium_canvas_background.png b/img/canvas_background/lowcont_medium_canvas_background.png deleted file mode 100644 index 3a21f204..00000000 Binary files a/img/canvas_background/lowcont_medium_canvas_background.png and /dev/null differ diff --git a/img/canvas_background/medium_canvas_background.png b/img/canvas_background/medium_canvas_background.png deleted file mode 100644 index 2b279524..00000000 Binary files a/img/canvas_background/medium_canvas_background.png and /dev/null differ diff --git a/img/cloud_export.png b/img/cloud_export.png deleted file mode 100644 index 654edc8c..00000000 Binary files a/img/cloud_export.png and /dev/null differ diff --git a/img/icons/circle.png b/img/cursors/circle.png similarity index 100% rename from img/icons/circle.png rename to img/cursors/circle.png diff --git a/img/icons/color-palette.png b/img/cursors/color-palette.png old mode 100755 new mode 100644 similarity index 100% rename from img/icons/color-palette.png rename to img/cursors/color-palette.png diff --git a/img/icons/dropper.png b/img/cursors/dropper.png similarity index 100% rename from img/icons/dropper.png rename to img/cursors/dropper.png diff --git a/img/icons/eraser.png b/img/cursors/eraser.png old mode 100755 new mode 100644 similarity index 100% rename from img/icons/eraser.png rename to img/cursors/eraser.png diff --git a/img/icons/hand.png b/img/cursors/hand.png similarity index 100% rename from img/icons/hand.png rename to img/cursors/hand.png diff --git a/img/icons/mirror-pen.png b/img/cursors/mirror-pen.png similarity index 100% rename from img/icons/mirror-pen.png rename to img/cursors/mirror-pen.png diff --git a/img/icons/paint-bucket.png b/img/cursors/paint-bucket.png old mode 100755 new mode 100644 similarity index 100% rename from img/icons/paint-bucket.png rename to img/cursors/paint-bucket.png diff --git a/img/icons/pen.png b/img/cursors/pen.png old mode 100755 new mode 100644 similarity index 100% rename from img/icons/pen.png rename to img/cursors/pen.png diff --git a/img/icons/rectangle.png b/img/cursors/rectangle.png old mode 100755 new mode 100644 similarity index 100% rename from img/icons/rectangle.png rename to img/cursors/rectangle.png diff --git a/img/icons/select.png b/img/cursors/select.png similarity index 100% rename from img/icons/select.png rename to img/cursors/select.png diff --git a/img/icons/stroke.png b/img/cursors/stroke.png old mode 100755 new mode 100644 similarity index 100% rename from img/icons/stroke.png rename to img/cursors/stroke.png diff --git a/img/icons/vertical-mirror-pen.png b/img/cursors/vertical-mirror-pen.png similarity index 100% rename from img/icons/vertical-mirror-pen.png rename to img/cursors/vertical-mirror-pen.png diff --git a/img/icons/wand.png b/img/cursors/wand.png old mode 100755 new mode 100644 similarity index 100% rename from img/icons/wand.png rename to img/cursors/wand.png diff --git a/img/dragndrop.png b/img/dragndrop.png deleted file mode 100644 index b1657dfb..00000000 Binary files a/img/dragndrop.png and /dev/null differ diff --git a/img/duplicate.png b/img/duplicate.png deleted file mode 100755 index 38b6955e..00000000 Binary files a/img/duplicate.png and /dev/null differ diff --git a/img/export.png b/img/export.png deleted file mode 100644 index ad5a291f..00000000 Binary files a/img/export.png and /dev/null differ diff --git a/img/garbage.png b/img/garbage.png deleted file mode 100644 index cc08dae2..00000000 Binary files a/img/garbage.png and /dev/null differ diff --git a/img/gear.png b/img/gear.png deleted file mode 100644 index c09e06fa..00000000 Binary files a/img/gear.png and /dev/null differ diff --git a/img/icons.png b/img/icons.png new file mode 100644 index 00000000..83638553 Binary files /dev/null and b/img/icons.png differ diff --git a/img/icons/common/common-keyboard-gold.png b/img/icons/common/common-keyboard-gold.png new file mode 100644 index 00000000..c765e6d6 Binary files /dev/null and b/img/icons/common/common-keyboard-gold.png differ diff --git a/img/icons/common/common-swapcolors-arrow-grey.png b/img/icons/common/common-swapcolors-arrow-grey.png new file mode 100644 index 00000000..d8b57c3f Binary files /dev/null and b/img/icons/common/common-swapcolors-arrow-grey.png differ diff --git a/img/icons/frame/frame-dragndrop-white.png b/img/icons/frame/frame-dragndrop-white.png new file mode 100644 index 00000000..22c620db Binary files /dev/null and b/img/icons/frame/frame-dragndrop-white.png differ diff --git a/img/icons/frame/frame-duplicate-white.png b/img/icons/frame/frame-duplicate-white.png new file mode 100644 index 00000000..0795aeb7 Binary files /dev/null and b/img/icons/frame/frame-duplicate-white.png differ diff --git a/img/icons/frame/frame-plus-white.png b/img/icons/frame/frame-plus-white.png new file mode 100644 index 00000000..2a4104ce Binary files /dev/null and b/img/icons/frame/frame-plus-white.png differ diff --git a/img/icons/frame/frame-recyclebin-white.png b/img/icons/frame/frame-recyclebin-white.png new file mode 100644 index 00000000..8554e55a Binary files /dev/null and b/img/icons/frame/frame-recyclebin-white.png differ diff --git a/img/icons/minimap/minimap-popup-preview-arrow-gold.png b/img/icons/minimap/minimap-popup-preview-arrow-gold.png new file mode 100644 index 00000000..c437ae00 Binary files /dev/null and b/img/icons/minimap/minimap-popup-preview-arrow-gold.png differ diff --git a/img/icons/minimap/minimap-popup-preview-arrow-white.png b/img/icons/minimap/minimap-popup-preview-arrow-white.png new file mode 100644 index 00000000..b97bd38b Binary files /dev/null and b/img/icons/minimap/minimap-popup-preview-arrow-white.png differ diff --git a/img/icons/settings/settings-export-white.png b/img/icons/settings/settings-export-white.png new file mode 100644 index 00000000..b869cd09 Binary files /dev/null and b/img/icons/settings/settings-export-white.png differ diff --git a/img/icons/settings/settings-gear-white.png b/img/icons/settings/settings-gear-white.png new file mode 100644 index 00000000..1c638b6f Binary files /dev/null and b/img/icons/settings/settings-gear-white.png differ diff --git a/img/icons/settings/settings-open-folder-white.png b/img/icons/settings/settings-open-folder-white.png new file mode 100644 index 00000000..3630df10 Binary files /dev/null and b/img/icons/settings/settings-open-folder-white.png differ diff --git a/img/icons/settings/settings-resize-white.png b/img/icons/settings/settings-resize-white.png new file mode 100644 index 00000000..f2f17eaf Binary files /dev/null and b/img/icons/settings/settings-resize-white.png differ diff --git a/img/icons/settings/settings-save-white.png b/img/icons/settings/settings-save-white.png new file mode 100644 index 00000000..d8dfeadd Binary files /dev/null and b/img/icons/settings/settings-save-white.png differ diff --git a/img/icons/tools/tool-circle.png b/img/icons/tools/tool-circle.png new file mode 100644 index 00000000..7f4dbd97 Binary files /dev/null and b/img/icons/tools/tool-circle.png differ diff --git a/img/icons/tools/tool-colorpicker.png b/img/icons/tools/tool-colorpicker.png new file mode 100644 index 00000000..fe4cbcb8 Binary files /dev/null and b/img/icons/tools/tool-colorpicker.png differ diff --git a/img/icons/tools/tool-colorswap.png b/img/icons/tools/tool-colorswap.png new file mode 100644 index 00000000..ac316bc2 Binary files /dev/null and b/img/icons/tools/tool-colorswap.png differ diff --git a/img/icons/tools/tool-dithering.png b/img/icons/tools/tool-dithering.png new file mode 100644 index 00000000..7290eb86 Binary files /dev/null and b/img/icons/tools/tool-dithering.png differ diff --git a/img/icons/tools/tool-eraser.png b/img/icons/tools/tool-eraser.png new file mode 100644 index 00000000..88fa7583 Binary files /dev/null and b/img/icons/tools/tool-eraser.png differ diff --git a/img/icons/tools/tool-lasso-select.png b/img/icons/tools/tool-lasso-select.png new file mode 100644 index 00000000..0e9abc14 Binary files /dev/null and b/img/icons/tools/tool-lasso-select.png differ diff --git a/img/icons/tools/tool-lighten.png b/img/icons/tools/tool-lighten.png new file mode 100644 index 00000000..4a3a993e Binary files /dev/null and b/img/icons/tools/tool-lighten.png differ diff --git a/img/icons/tools/tool-move.png b/img/icons/tools/tool-move.png new file mode 100644 index 00000000..7911e1a7 Binary files /dev/null and b/img/icons/tools/tool-move.png differ diff --git a/img/icons/tools/tool-paint-bucket.png b/img/icons/tools/tool-paint-bucket.png new file mode 100644 index 00000000..cea3ed36 Binary files /dev/null and b/img/icons/tools/tool-paint-bucket.png differ diff --git a/img/icons/tools/tool-pen.png b/img/icons/tools/tool-pen.png new file mode 100644 index 00000000..6f3a0317 Binary files /dev/null and b/img/icons/tools/tool-pen.png differ diff --git a/img/icons/tools/tool-rectangle-select.png b/img/icons/tools/tool-rectangle-select.png new file mode 100644 index 00000000..421e0f96 Binary files /dev/null and b/img/icons/tools/tool-rectangle-select.png differ diff --git a/img/icons/tools/tool-rectangle.png b/img/icons/tools/tool-rectangle.png new file mode 100644 index 00000000..3fa778d3 Binary files /dev/null and b/img/icons/tools/tool-rectangle.png differ diff --git a/img/icons/tools/tool-shape-select.png b/img/icons/tools/tool-shape-select.png new file mode 100644 index 00000000..10da42f1 Binary files /dev/null and b/img/icons/tools/tool-shape-select.png differ diff --git a/img/icons/tools/tool-stroke.png b/img/icons/tools/tool-stroke.png new file mode 100644 index 00000000..39b9bc14 Binary files /dev/null and b/img/icons/tools/tool-stroke.png differ diff --git a/img/icons/tools/tool-vertical-mirror-pen.png b/img/icons/tools/tool-vertical-mirror-pen.png new file mode 100644 index 00000000..f5ffc49c Binary files /dev/null and b/img/icons/tools/tool-vertical-mirror-pen.png differ diff --git a/img/icons/transform/tool-clone.png b/img/icons/transform/tool-clone.png new file mode 100644 index 00000000..0425befd Binary files /dev/null and b/img/icons/transform/tool-clone.png differ diff --git a/img/icons/transform/tool-flip.png b/img/icons/transform/tool-flip.png new file mode 100644 index 00000000..4df04b16 Binary files /dev/null and b/img/icons/transform/tool-flip.png differ diff --git a/img/icons/transform/tool-rotate.png b/img/icons/transform/tool-rotate.png new file mode 100644 index 00000000..986837a8 Binary files /dev/null and b/img/icons/transform/tool-rotate.png differ diff --git a/img/import-icon.png b/img/import-icon.png deleted file mode 100644 index ed310656..00000000 Binary files a/img/import-icon.png and /dev/null differ diff --git a/img/keyboard.png b/img/keyboard.png deleted file mode 100644 index 8bed1a3a..00000000 Binary files a/img/keyboard.png and /dev/null differ diff --git a/img/layers.svg b/img/layers.svg deleted file mode 100644 index 34f46180..00000000 --- a/img/layers.svg +++ /dev/null @@ -1,62 +0,0 @@ - - - - diff --git a/img/local-storage-icon.png b/img/local-storage-icon.png deleted file mode 100644 index d9b757e7..00000000 Binary files a/img/local-storage-icon.png and /dev/null differ diff --git a/img/merge-icon.png b/img/merge-icon.png deleted file mode 100644 index 3210c100..00000000 Binary files a/img/merge-icon.png and /dev/null differ diff --git a/img/plus.png b/img/plus.png deleted file mode 100644 index 6b60af79..00000000 Binary files a/img/plus.png and /dev/null differ diff --git a/img/popup-preview-arrow-gold.png b/img/popup-preview-arrow-gold.png deleted file mode 100644 index dcf38951..00000000 Binary files a/img/popup-preview-arrow-gold.png and /dev/null differ diff --git a/img/popup-preview-arrow-white.png b/img/popup-preview-arrow-white.png deleted file mode 100644 index 27b78b98..00000000 Binary files a/img/popup-preview-arrow-white.png and /dev/null differ diff --git a/img/resize-icon.png b/img/resize-icon.png deleted file mode 100644 index dcfb6520..00000000 Binary files a/img/resize-icon.png and /dev/null differ diff --git a/img/save.png b/img/save.png deleted file mode 100644 index fb044dc8..00000000 Binary files a/img/save.png and /dev/null differ diff --git a/img/tools/circle.png b/img/tools/circle.png deleted file mode 100644 index 5f88d096..00000000 Binary files a/img/tools/circle.png and /dev/null differ diff --git a/img/tools/clone.png b/img/tools/clone.png deleted file mode 100644 index ca02ff71..00000000 Binary files a/img/tools/clone.png and /dev/null differ diff --git a/img/tools/eraser.png b/img/tools/eraser.png deleted file mode 100644 index 2df7c84b..00000000 Binary files a/img/tools/eraser.png and /dev/null differ diff --git a/img/tools/eyedropper.png b/img/tools/eyedropper.png deleted file mode 100644 index 84a27d22..00000000 Binary files a/img/tools/eyedropper.png and /dev/null differ diff --git a/img/tools/flip.png b/img/tools/flip.png deleted file mode 100644 index c2fbc8c8..00000000 Binary files a/img/tools/flip.png and /dev/null differ diff --git a/img/tools/hand.png b/img/tools/hand.png deleted file mode 100644 index 38187685..00000000 Binary files a/img/tools/hand.png and /dev/null differ diff --git a/img/tools/lighten.png b/img/tools/lighten.png deleted file mode 100644 index 59e036fb..00000000 Binary files a/img/tools/lighten.png and /dev/null differ diff --git a/img/tools/magicwand.png b/img/tools/magicwand.png deleted file mode 100644 index a7dea845..00000000 Binary files a/img/tools/magicwand.png and /dev/null differ diff --git a/img/tools/mirror.png b/img/tools/mirror.png deleted file mode 100644 index 272a37c4..00000000 Binary files a/img/tools/mirror.png and /dev/null differ diff --git a/img/tools/paintbucket.png b/img/tools/paintbucket.png deleted file mode 100644 index 092eea7b..00000000 Binary files a/img/tools/paintbucket.png and /dev/null differ diff --git a/img/tools/pen.png b/img/tools/pen.png deleted file mode 100644 index d1e6d3a4..00000000 Binary files a/img/tools/pen.png and /dev/null differ diff --git a/img/tools/rectangle.png b/img/tools/rectangle.png deleted file mode 100644 index 2898f4f8..00000000 Binary files a/img/tools/rectangle.png and /dev/null differ diff --git a/img/tools/rectangle_selection.png b/img/tools/rectangle_selection.png deleted file mode 100644 index af8c635d..00000000 Binary files a/img/tools/rectangle_selection.png and /dev/null differ diff --git a/img/tools/rotate.png b/img/tools/rotate.png deleted file mode 100644 index cea4c5cb..00000000 Binary files a/img/tools/rotate.png and /dev/null differ diff --git a/img/tools/stroke.png b/img/tools/stroke.png deleted file mode 100644 index 80aad556..00000000 Binary files a/img/tools/stroke.png and /dev/null differ diff --git a/img/tools/swap-arrow-square-small-grey.png b/img/tools/swap-arrow-square-small-grey.png deleted file mode 100644 index ce91d240..00000000 Binary files a/img/tools/swap-arrow-square-small-grey.png and /dev/null differ diff --git a/img/tools/swap-colors.png b/img/tools/swap-colors.png deleted file mode 100644 index b0ab7aa7..00000000 Binary files a/img/tools/swap-colors.png and /dev/null differ diff --git a/img/tools/circle-dark.png b/img/unused/circle-dark.png similarity index 100% rename from img/tools/circle-dark.png rename to img/unused/circle-dark.png diff --git a/img/tools/eraser-dark.png b/img/unused/eraser-dark.png similarity index 100% rename from img/tools/eraser-dark.png rename to img/unused/eraser-dark.png diff --git a/img/tools/eyedropper-dark.png b/img/unused/eyedropper-dark.png similarity index 100% rename from img/tools/eyedropper-dark.png rename to img/unused/eyedropper-dark.png diff --git a/img/gallery.png b/img/unused/gallery.png similarity index 100% rename from img/gallery.png rename to img/unused/gallery.png diff --git a/img/tools/hand-dark.png b/img/unused/hand-dark.png similarity index 100% rename from img/tools/hand-dark.png rename to img/unused/hand-dark.png diff --git a/img/unused/lasso-dark.png b/img/unused/lasso-dark.png new file mode 100644 index 00000000..d1644cc4 Binary files /dev/null and b/img/unused/lasso-dark.png differ diff --git a/img/tools/magicwand-dark.png b/img/unused/magicwand-dark.png similarity index 100% rename from img/tools/magicwand-dark.png rename to img/unused/magicwand-dark.png diff --git a/img/tools/paintbucket-dark.png b/img/unused/paintbucket-dark.png similarity index 100% rename from img/tools/paintbucket-dark.png rename to img/unused/paintbucket-dark.png diff --git a/img/tools/pen-dark.png b/img/unused/pen-dark.png similarity index 100% rename from img/tools/pen-dark.png rename to img/unused/pen-dark.png diff --git a/img/tools/rectangle-dark.png b/img/unused/rectangle-dark.png similarity index 100% rename from img/tools/rectangle-dark.png rename to img/unused/rectangle-dark.png diff --git a/img/tools/rectangle_selection-dark.png b/img/unused/rectangle_selection-dark.png similarity index 100% rename from img/tools/rectangle_selection-dark.png rename to img/unused/rectangle_selection-dark.png diff --git a/index.html b/index.html index e7e2770e..a6413c59 100644 --- a/index.html +++ b/index.html @@ -22,17 +22,86 @@ color:white;"> Loading Piskel ... - + +t |