mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
new version
This commit is contained in:
jdescottes
parent
0501123763
commit
d6608ab263
BIN
css/fonts/piskel.eot
Normal file
BIN
css/fonts/piskel.eot
Normal file
Binary file not shown.
12
css/fonts/piskel.svg
Normal file
12
css/fonts/piskel.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="icomoon" horiz-adv-x="512">
|
||||
<font-face units-per-em="512" ascent="480" descent="-32" />
|
||||
<missing-glyph horiz-adv-x="512" />
|
||||
<glyph unicode=" " d="" horiz-adv-x="256" />
|
||||
<glyph unicode="" d="M548.568 469.33c-230.956 1.035-548.568-255.999-548.568-255.999s288.019-255.998 548.568-255.998c229.744 0 548.568 255.998 548.568 255.998s-319.896 254.974-548.568 255.999zM543.082 387.731c100.382 0 181.713-81.33 181.713-181.713s-81.331-181.713-181.713-181.713c-100.382 0-181.827 81.331-181.827 181.713s81.445 181.713 181.827 181.713zM543.197 320.645c-65.289 0-118.285-52.996-118.285-118.285s52.996-118.171 118.285-118.171c65.289 0 118.17 52.882 118.17 118.171s-52.882 118.285-118.17 118.285z" horiz-adv-x="1097" />
|
||||
<glyph unicode="" d="M340.96 469.333l-32.981-29.267-1.969 10.697-18.862-5.459v-36.471l1.221-25.849 35.952 31.903c-0.462-6.572-0.68-13.508-0.223-21.207 0.724-12.19 4.071-23.146 10.733-31.718s15.637-14.063 25.589-18.607c19.904-9.088 44.707-23.995 75.102-49.258 57.553-47.833 64.672-71.707 75.043-113.771 9.874-54.678-5.819-94.055-28.463-127.459-16.179-23.866-36.205-45.046-80.229-53.974s-85.245-11.81-114.725-11.81v-29.712c31.378 0 73.891 2.924 120.63 12.404s92.839 24.688 121.002 54.15c30.486 31.892 59.625 89.691 42.191 180.054l-0.074 0.297c-7.766 36.041-31.345 90.17-123.528 130.25-38.13 16.578-58.817 27.279-74.37 34.381-7.777 3.551-12.257 8.151-14.697 11.29s-4.042 6.988-4.531 15.228c-1.101 18.541 1.596 32.644 4.42 41.968s5.2 12.925 5.2 12.925l-22.433 19.015zM308.574 410.875c0 0-21.425 5.601-21.425-1.56 0-39.679-0.543-46.688 13.068-74.726s31.172-56.883 57.683-81.363c50.137-46.294 46.077-53.33 54.399-77.145 3.064-8.767 4.356-29.132 2.228-45.125s-8.091-37.102-15.933-49.099c-12.322-18.852-22.247-38.122-45.82-51.216-24.626-13.678-45.867-16.634-65.626-16.634v-29.712c24.75 0 52.923 5.962 82.673 17.976s58.387 30.034 75.728 56.564c11.616 17.771 23.842 44.829 26.541 66.454s8.060 40.281-6.041 69.411c-21.705 44.841-50.569 58.307-85.806 88.136-21.815 18.466-41.428 40.207-53.325 64.713s-17.61 49.391-18.347 63.324zM304.637 391.785l-17.488-1.597c0.887-16.769 0-51.279 0-84.047 0-15.558 2.587-34.459 5.019-47.508 4.685-25.143 12.495-41.458 17.392-57.248 3.892-12.55 8.256-30.116 11.158-36.87 7.858-18.288 8.948-40.637 0.897-66.369-8.154-26.060-20.866-51.039-42.106-59.238l7.64-25.197c30.736 11.865 73.733 45.32 85.493 82.907 10.6 33.878 3.906 64.497-5.757 86.981-5.858 13.634-11.428 23.024-17.668 34.392-7.678 13.987-23.993 31.521-28.665 45.802-4.248 12.988-9.303 28.695-10.605 44.761-2.605 32.132-4.319 65.104-5.311 83.231zM235.254 469.297l32.98-29.267 1.969 10.697 18.862-5.459v-36.471l-1.221-25.85-35.952 31.903c0.463-6.572 0.68-13.508 0.223-21.207-0.724-12.19 0.731-24.346-5.931-32.918s-14.437-20.066-24.389-24.61c-19.904-9.088-43.506-23.995-73.901-49.258-57.553-47.833-56.268-60.902-66.639-102.966-3.871-55.878-7.038-55.096 5.653-93.844 7.669-23.416 26.602-46.246 70.624-67.18 40.566-19.291 102.053-35.822 131.533-35.822v-29.712c-31.378 0-73.891 2.924-120.63 12.404s-92.839 24.688-121.002 54.15c-30.485 31.892-59.626 89.691-42.191 180.054l0.074 0.297c7.766 36.041 31.345 90.17 123.528 130.25 38.13 16.578 58.816 27.279 74.37 34.381 7.777 3.551 12.256 8.151 14.697 11.29s4.042 6.988 4.531 15.228c1.101 18.541-1.595 32.644-4.419 41.968s-5.2 12.925-5.2 12.925l22.433 19.015zM279.99 414.237l10.697-15.18c-0.887-16.769 0-51.279 0-84.047 0-15.558 4.204-36.156 1.772-49.205-4.685-25.143-4.006-33.818-8.903-49.609-3.892-12.55-8.256-34.361-11.158-41.114-7.858-18.288-9.797-60.161-1.745-85.894 8.154-26.060 13.226-59.528 25.976-78.763l4.742-48.906c-28.188 38.181-56.634 82.055-68.394 119.642-10.6 33.878-9.848 93.36-0.185 115.844 5.858 13.634 11.428 27.269 17.668 38.636 7.678 13.987 12.048 27.92 15.519 43.401 2.99 13.334 8.248 35.049 9.55 51.115 2.605 32.131 3.469 65.953 4.462 84.079z" horiz-adv-x="576" />
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
BIN
css/fonts/piskel.ttf
Normal file
BIN
css/fonts/piskel.ttf
Normal file
Binary file not shown.
BIN
css/fonts/piskel.woff
Normal file
BIN
css/fonts/piskel.woff
Normal file
Binary file not shown.
@ -172,12 +172,14 @@ body {
|
||||
background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat;
|
||||
}
|
||||
|
||||
.layers-canvas {
|
||||
.layers-canvas,
|
||||
.canvas.onion-skin-canvas {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.canvas.canvas-overlay,
|
||||
.canvas.layers-canvas {
|
||||
.canvas.layers-canvas,
|
||||
.canvas.onion-skin-canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -193,60 +195,10 @@ body {
|
||||
.canvas.layers-below-canvas {z-index: 7;}
|
||||
.canvas.drawing-canvas {z-index: 8;}
|
||||
.canvas.layers-above-canvas {z-index: 9;}
|
||||
.canvas.canvas-overlay {z-index: 10;}
|
||||
.canvas.onion-skin-canvas {z-index: 10;}
|
||||
.canvas.canvas-overlay {z-index: 11;}
|
||||
|
||||
/**
|
||||
* 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: 24px;
|
||||
}
|
||||
|
||||
.range-fps {
|
||||
overflow: hidden;
|
||||
width: 120px;
|
||||
height : 24px;
|
||||
margin : 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* User messages
|
||||
@ -315,6 +267,40 @@ body {
|
||||
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: "\e600";
|
||||
}
|
||||
|
||||
.piskel-icon-onion:before {
|
||||
content: "\e601";
|
||||
}
|
||||
|
||||
|
||||
.row {
|
||||
display: block;
|
||||
}
|
||||
@ -514,6 +500,7 @@ body {
|
||||
}
|
||||
|
||||
.settings-title {
|
||||
color : gold;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
@ -1415,6 +1402,28 @@ body {
|
||||
background-size: 22px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 97%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layers-toggle-preview {
|
||||
position: absolute;
|
||||
top : 0.9em;
|
||||
right: 3.3em;
|
||||
|
||||
color: #999;
|
||||
font-size: 0.8em;
|
||||
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 {
|
||||
@ -1522,6 +1531,82 @@ body {
|
||||
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: 1.6rem;
|
||||
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
|
||||
|
||||
12
js/piskel-packaged-min.js
vendored
12
js/piskel-packaged-min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,5 +1,10 @@
|
||||
<div class="toolbox-container layers-list-container">
|
||||
<h3 class="toolbox-title layers-title">Layers</h3>
|
||||
<h3 class="toolbox-title layers-title">Layers
|
||||
<div title="Toggle layer preview (alt+L)"
|
||||
rel="tooltip"
|
||||
data-placement="top"
|
||||
class="layers-toggle-preview piskel-icon-eye"></div>
|
||||
</h3>
|
||||
<div class="toolbox-button-container layers-button-container">
|
||||
<button class="button toolbox-button" data-action="add" >Add</button>
|
||||
<button class="button toolbox-button" data-action="delete" >Delete</button>
|
||||
|
||||
@ -3,6 +3,10 @@
|
||||
<div class="canvas-background"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div title="Toggle onion skin (alt+O)"
|
||||
rel="tooltip"
|
||||
data-placement="bottom"
|
||||
class="piskel-icon-onion preview-toggle-onion-skin"></div>
|
||||
<span id="display-fps" class="display-fps"></span>
|
||||
<input id="preview-fps" class="range-fps" type="range" min="1" max="24"/>
|
||||
</div>
|
||||
|
||||
@ -29,9 +29,10 @@
|
||||
<option value="4">Enabled - 4px wide</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
|
||||
<!-- <div class="settings-item">
|
||||
<label for="tiled-preview">Display tiled preview :</label>
|
||||
<input type="checkbox" value="1" id="tiled-preview" name="tiled-preview-checkbox"/>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
|
||||
@ -3,17 +3,19 @@
|
||||
Export to Animated GIF
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<form action="" method="POST" class="gif-export-form">
|
||||
<label>Select resolution:</label>
|
||||
<form action="" method="POST" name="gif-export-upload-form">
|
||||
<script type="text/template" id="gif-export-radio-template">
|
||||
<label style="display:block"><input type="radio" name="gif-zoom-level" value="{{value}}"/>
|
||||
{{label}}</label>
|
||||
</script>
|
||||
<div class="gif-export-radio-group"></div>
|
||||
<input type="submit" class="button button-primary gif-upload-button" value="Upload" />
|
||||
|
||||
<button type="button" class="button button-primary gif-download-button">Download GIF</button>
|
||||
<button type="button" class="button button gif-upload-button">Export online</button>
|
||||
</form>
|
||||
<span class="gif-export-progress-status"></span>
|
||||
<div class="gif-export-progress-bar"></div>
|
||||
</form>
|
||||
<div class="gif-export-preview"></div>
|
||||
<div class="gif-upload-status"></div>
|
||||
</div>
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
<span>Preview : </span>
|
||||
<div class="png-export-preview"></div>
|
||||
<div class="png-export-radio-group"></div>
|
||||
<input type="button" class="button button-primary png-download-button" value="Download PNG" />
|
||||
<input type="button" class="button png-upload-button" value="Upload PNG" />
|
||||
<button type="button" class="button button-primary png-download-button">Download PNG</button>
|
||||
<button type="button" class="button png-upload-button">Export online</button>
|
||||
<!-- <input type="button" class="button png-download-button" value="Download" /> -->
|
||||
<div class="png-upload-status"></div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,9 @@
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">
|
||||
Restore previous session
|
||||
</div>
|
||||
<div class="settings-item previous-session">
|
||||
</div>
|
||||
<div class="settings-title">
|
||||
Browse Local Piskels
|
||||
</div>
|
||||
@ -15,4 +20,12 @@
|
||||
<td><a class="local-piskel-delete-link" data-action="delete" data-name="{{name}}" href="javascript:void(0);">x</a></td>
|
||||
</tr>
|
||||
</script>
|
||||
<script type="text/template" id="previous-session-info-template">
|
||||
<div>
|
||||
Restore a backup of <span style="color:gold">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
|
||||
<div style="margin-top:10px;">
|
||||
<button type="button" class="button button-primary restore-session-button">Restore</button>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user