mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Merge branch 'master' into minor-changes
This commit is contained in:
unsettledgames
commit
232e08f84d
@ -1,184 +0,0 @@
|
||||
$base-color: #332f35;
|
||||
$shop: #b63831;
|
||||
$red: #e3474a;
|
||||
$orange: #df7c25;
|
||||
$green: #70a630;
|
||||
|
||||
$palettes: (
|
||||
base: (
|
||||
background: (
|
||||
default: $base-color,
|
||||
hover: lighten($base-color, 5%),
|
||||
lighthover: lighten($base-color, 4%),
|
||||
),
|
||||
foreground: (
|
||||
default: lighten($base-color, 20%),
|
||||
text: lighten($base-color, 50%),
|
||||
bold: lighten($base-color, 60%),
|
||||
weak: lighten($base-color, 30%),
|
||||
link: lighten($base-color, 100%),
|
||||
h1: lighten($base-color, 100%),
|
||||
h2: lighten($base-color, 70%),
|
||||
h3: lighten($base-color, 60%),
|
||||
surveyQuestion: lighten($base-color, 60%),
|
||||
hover: lighten($base-color, 40%),
|
||||
separator: lighten($base-color, 5%),
|
||||
disabled: lighten($base-color, 10%),
|
||||
)
|
||||
),
|
||||
user-menu: (
|
||||
background: (
|
||||
default: darken($base-color, 3%),
|
||||
hover: darken($base-color, 1.5%),
|
||||
highlight: lighten($base-color, 3%),
|
||||
highlight-hover: lighten($base-color, 5%),
|
||||
),
|
||||
foreground: (
|
||||
default: lighten($base-color, 50%),
|
||||
symbol: lighten($base-color, 8%),
|
||||
text: lighten($base-color, 50%),
|
||||
hover: lighten($base-color, 100%),
|
||||
)
|
||||
),
|
||||
menu: (
|
||||
background: (
|
||||
default: lighten($base-color, 5%),
|
||||
hover: lighten($base-color, 15%),
|
||||
),
|
||||
foreground: (
|
||||
default: lighten($base-color, 50%),
|
||||
hover: lighten($base-color, 100%),
|
||||
)
|
||||
),
|
||||
button: (
|
||||
background: (
|
||||
default: lighten($base-color, 10%),
|
||||
hover: lighten($base-color, 15%),
|
||||
weak: lighten($base-color, 5%),
|
||||
),
|
||||
foreground: (
|
||||
default: lighten($base-color, 50%),
|
||||
dropdown: lighten($base-color, 50%),
|
||||
text: lighten($base-color, 60%),
|
||||
symbol: lighten($base-color, 50%),
|
||||
indent: lighten($base-color, 5%),
|
||||
weak: lighten($base-color, 25%),
|
||||
hover: lighten($base-color, 75%),
|
||||
)
|
||||
),
|
||||
selectedTool: (
|
||||
background: (
|
||||
default: lighten($base-color, 10%),
|
||||
),
|
||||
foreground: (
|
||||
default: lighten($base-color, 50%),
|
||||
)
|
||||
),
|
||||
subbutton: (
|
||||
background: (
|
||||
hover: lighten($base-color, 15%),
|
||||
),
|
||||
foreground: (
|
||||
default: lighten($base-color, 30%),
|
||||
hover: lighten($base-color, 50%),
|
||||
)
|
||||
),
|
||||
indent: (
|
||||
background: (
|
||||
default: darken($base-color, 4%),
|
||||
separator: darken($base-color, 8%),
|
||||
hover: lighten($base-color, 5%),
|
||||
outline: lighten($base-color, 10%),
|
||||
),
|
||||
foreground: (
|
||||
default: #fff,
|
||||
text: lighten($base-color, 40%),
|
||||
symbol: lighten($base-color, 5%),
|
||||
symbol-hover: lighten($base-color, 20%),
|
||||
weak: lighten($base-color, 20%),
|
||||
form: lighten($base-color, 50%),
|
||||
)
|
||||
),
|
||||
indent-dark: (
|
||||
background: (
|
||||
default: darken($base-color, 6%),
|
||||
separator: darken($base-color, 11%),
|
||||
button: lighten($base-color, 2.5%),
|
||||
button-hover: lighten($base-color, 5%),
|
||||
),
|
||||
foreground: (
|
||||
default: lighten($base-color, 30%),
|
||||
link: lighten($base-color, 40%),
|
||||
hover: lighten($base-color, 50%),
|
||||
button: lighten($base-color, 50%),
|
||||
button-hover: lighten($base-color, 70%),
|
||||
)
|
||||
),
|
||||
indent-darker: (
|
||||
background: (
|
||||
default: darken($base-color, 8%),
|
||||
|
||||
),
|
||||
foreground: (
|
||||
default: lighten($base-color, 15%),
|
||||
)
|
||||
),
|
||||
footer: (
|
||||
background: (
|
||||
default: darken($base-color, 9%),
|
||||
hover: darken($base-color, 2%),
|
||||
),
|
||||
foreground: (
|
||||
default: lighten($base-color, 20%),
|
||||
hover: lighten($base-color, 35%),
|
||||
symbol: lighten($base-color, 7.5%),
|
||||
),
|
||||
),
|
||||
warning-banner: (
|
||||
background: (
|
||||
default: lighten($base-color, 10%),
|
||||
button: lighten($base-color, 20%),
|
||||
button-hover: lighten($base-color, 25%),
|
||||
),
|
||||
foreground: (
|
||||
default: lighten($base-color, 50%),
|
||||
button: lighten($base-color, 40%),
|
||||
button-hover: lighten($base-color, 45%),
|
||||
),
|
||||
),
|
||||
image-label: (
|
||||
background: (
|
||||
default: lighten($base-color, 15%),
|
||||
),
|
||||
foreground: (
|
||||
default: lighten($base-color, 80%),
|
||||
),
|
||||
triangle: (
|
||||
default: lighten($base-color, 6%),
|
||||
),
|
||||
),
|
||||
shop: (
|
||||
background: (
|
||||
default: $shop,
|
||||
hover: lighten($shop, 5%),
|
||||
),
|
||||
foreground: (
|
||||
default: lighten($shop, 65%),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
@function color($element: 'base', $location: 'background', $hover: 'default') {
|
||||
@return map-get(map-get(map-get($palettes, $element), $location), $hover);
|
||||
}
|
||||
|
||||
$twitter: #00b6f1;
|
||||
$patreon: #F96854;
|
||||
$facebook: #3b5998;
|
||||
$reddit: #ff5700;
|
||||
$youtube: #b31217;
|
||||
$pintrest: #cb2027;
|
||||
$tumblr: #2c4762;
|
||||
$deviantart: #4a5d4e;
|
||||
$instagram: #c2368a;
|
||||
$pixeljoint: #73d731;
|
||||
@ -1,4 +1,8 @@
|
||||
{
|
||||
"1.3.0 - 9/8/20": [
|
||||
{"change": "Added layers", "author": "Unsettled"}
|
||||
],
|
||||
|
||||
"1.2.0 - 4/14/20": [
|
||||
{"change": "Added rectangle / selection tools", "author": "Unsettled"}
|
||||
],
|
||||
|
||||
@ -1,7 +1,25 @@
|
||||
@import 'colors';
|
||||
@import 'zindex';
|
||||
|
||||
$basecolor: #332f35; //color(base)
|
||||
$basetext: lighten($basecolor, 50%); //color(menu, foreground), color(base, foreground, text)
|
||||
$basetextweak: lighten($basecolor, 30%); //color(menu, foreground), color(base, foreground, text)
|
||||
$baselink: lighten($basecolor, 100%); //color(menu, foreground), color(base, foreground, text)
|
||||
$baseicon: lighten($basecolor, 25%); //color(base, foreground)
|
||||
$basehover: lighten($basecolor, 6%); //color(base, background, hover), color(button), color(menu), color(menu, background, hover)
|
||||
$basehovertext: lighten($basecolor, 60%); //color(base, foreground, bold), color(menu, foreground, hover), color(button, foreground)
|
||||
$basehovericon: lighten($basecolor, 40%); //color(base, foreground, hover)
|
||||
$basehovericonhover: lighten($basecolor, 60%); //color(base, foreground, hover)
|
||||
$baseselected: lighten($basecolor, 15%); //color(selectedTool, background), color(button, background, hover)
|
||||
$baseselectedtext: lighten($basecolor, 80%); //color(base, foreground, bold)
|
||||
$baseselectedicon: lighten($basecolor, 50%); //color(subbutton, foreground), color(selectedTool, foreground)
|
||||
$baseselectediconhover: lighten($basecolor, 70%); //color(subbutton, foreground, hover)
|
||||
$baseselectedhover: lighten($basecolor, 25%); //color(subbutton, background, hover)
|
||||
$indent: darken($basecolor, 5%); //color(indent)
|
||||
$indenttext: lighten($basecolor, 50%); //color(indent, foreground)
|
||||
|
||||
|
||||
body {
|
||||
background: color(indent-dark);
|
||||
background: darken($basecolor, 6%);
|
||||
font-family: 'Roboto', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -23,50 +41,57 @@ body {
|
||||
}
|
||||
|
||||
#layer-properties-menu {
|
||||
visibility:hidden;
|
||||
visibility: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width:120px;
|
||||
text-align:center;
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
|
||||
margin-right:200px;
|
||||
/*border:1px solid color(menu, foreground);*/
|
||||
|
||||
list-style:none;
|
||||
position:relative;
|
||||
z-index:1200;
|
||||
margin-right: 200px;
|
||||
/*border:1px solid $basetext;*/
|
||||
list-style: none;
|
||||
position: relative;
|
||||
z-index: 1200;
|
||||
list-style-type: none;
|
||||
|
||||
background-color: color(base);
|
||||
background-color: $basecolor;
|
||||
position: fixed;
|
||||
overflow: visible;
|
||||
|
||||
li button {
|
||||
color: color(menu, foreground);
|
||||
color: $basetext;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
width:100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
li button:hover {
|
||||
background-color:color(menu, background);
|
||||
background-color: $basehover;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-canvas {
|
||||
image-rendering:optimizeSpeed; /* Legal fallback */
|
||||
image-rendering:-moz-crisp-edges; /* Firefox */
|
||||
image-rendering:-o-crisp-edges; /* Opera */
|
||||
image-rendering:-webkit-optimize-contrast; /* Safari */
|
||||
image-rendering:optimize-contrast; /* CSS3 Proposed */
|
||||
image-rendering:crisp-edges; /* CSS4 Proposed */
|
||||
image-rendering:pixelated; /* CSS4 Proposed */
|
||||
-ms-interpolation-mode:nearest-neighbor; /* IE8+ */
|
||||
image-rendering: optimizeSpeed;
|
||||
/* Legal fallback */
|
||||
image-rendering: -moz-crisp-edges;
|
||||
/* Firefox */
|
||||
image-rendering: -o-crisp-edges;
|
||||
/* Opera */
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
/* Safari */
|
||||
image-rendering: optimize-contrast;
|
||||
/* CSS3 Proposed */
|
||||
image-rendering: crisp-edges;
|
||||
/* CSS4 Proposed */
|
||||
image-rendering: pixelated;
|
||||
/* CSS4 Proposed */
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
/* IE8+ */
|
||||
}
|
||||
|
||||
#layers-menu {
|
||||
@ -94,23 +119,20 @@ body {
|
||||
right:0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: color(base);
|
||||
background-color: $basecolor;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
z-index: 1120;
|
||||
list-style-type: none;
|
||||
overflow-y:scroll;
|
||||
overflow-x:hidden;
|
||||
|
||||
// TODO: make the scroll bar a bit fancier
|
||||
|
||||
overflow-x:hidden; // TODO: make the scroll bar a bit fancier
|
||||
#add-layer-button {
|
||||
path {
|
||||
fill:color(menu, foreground);
|
||||
fill: $baseicon;
|
||||
}
|
||||
svg {
|
||||
position:relative;
|
||||
margin-right:10px;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
}
|
||||
position:relative;
|
||||
justify-content: center;
|
||||
@ -118,116 +140,114 @@ body {
|
||||
align-items:center;
|
||||
margin-top:2px;
|
||||
font-size: 1.2em;
|
||||
color: color(menu, foreground);
|
||||
color: $basetext;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 17px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background-color: color(menu);
|
||||
|
||||
transition: color 0.2s, background-color 0.2s;
|
||||
}
|
||||
|
||||
#add-layer-button:hover {
|
||||
color: color(base, foreground, bold);
|
||||
background-color: color(base, foreground, default);
|
||||
color: $basehovertext;
|
||||
background-color: $basehover;
|
||||
}
|
||||
}
|
||||
|
||||
.selected-layer {
|
||||
ul.layer-buttons li{
|
||||
visibility:visible;
|
||||
ul.layer-buttons li.layer-button {
|
||||
visibility: visible;
|
||||
button svg path {
|
||||
fill: $baseselectedicon;
|
||||
}
|
||||
|
||||
color: color(base, foreground, bold);
|
||||
background-color: color(base, foreground, default);
|
||||
&:hover button svg path {
|
||||
fill: $baseselectediconhover;
|
||||
}
|
||||
}
|
||||
|
||||
color: $baseselectedtext;
|
||||
background-color: $baseselected !important;
|
||||
}
|
||||
|
||||
.layerdragover {
|
||||
margin-top:5px;
|
||||
border-top: 3px solid color(base, foreground, bold);
|
||||
margin-top: 5px;
|
||||
border-top: 3px solid $basehovertext;
|
||||
}
|
||||
|
||||
.layers-menu-entry {
|
||||
cursor:pointer;
|
||||
margin-top:2px;
|
||||
cursor: pointer;
|
||||
margin-top: 2px;
|
||||
font-size: 1em;
|
||||
color: color(base, foreground, text);
|
||||
background-color: color(menu, background);
|
||||
display:inline-block;
|
||||
height:50px;
|
||||
width:100%;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
color: $basetext;
|
||||
background-color: lighten($basecolor, 4%);
|
||||
display: inline-block;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
ul.layer-buttons {
|
||||
top:0;
|
||||
left:0;
|
||||
margin:0;
|
||||
padding:0;
|
||||
box-sizing:border-box;
|
||||
position:relative;
|
||||
height:100%;
|
||||
list-style:none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
list-style: none;
|
||||
|
||||
path {
|
||||
fill: color(base, foreground);
|
||||
fill: $basehovericon;
|
||||
}
|
||||
li:hover {
|
||||
background: color(base, background, hover);
|
||||
path {
|
||||
fill: color(base, foreground, hover);
|
||||
fill: $basehovericonhover;
|
||||
}
|
||||
}
|
||||
|
||||
.layer-button {
|
||||
visibility:hidden;
|
||||
height:50%;
|
||||
visibility: hidden;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.lock-layer-button, .hide-layer-button {
|
||||
color: color(menu, foreground);
|
||||
.lock-layer-button,
|
||||
.hide-layer-button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background-color: color(menu);
|
||||
transition: color 0.2s, background-color 0.2s;
|
||||
height:100%;
|
||||
position:relative;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display:inline-block;
|
||||
height:50px;
|
||||
width:50px;
|
||||
background-color:lightgrey;
|
||||
left:4px;
|
||||
display: inline-block;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background-color: lightgrey;
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
p {
|
||||
right:0;
|
||||
display:inline-block;
|
||||
padding-left:10px;
|
||||
height:18px;
|
||||
overflow:hidden;
|
||||
position:relative;
|
||||
right: 0;
|
||||
display: inline-block;
|
||||
padding-left: 10px;
|
||||
height: 18px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
transition: color 0.1s, background-color 0.1s;
|
||||
-moz-transition: color 0.1s, background-color 0.1s;
|
||||
-webkit-transition: color 0.1s, background-color 0.1s;
|
||||
}
|
||||
|
||||
.layers-menu-entry:hover, .selected-layer {
|
||||
ul.layer-buttons li{
|
||||
visibility:visible !important;
|
||||
.layers-menu-entry:hover {
|
||||
ul.layer-buttons li {
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
color: color(base, foreground, bold);
|
||||
background-color: color(base, foreground, default);
|
||||
color: $basehovertext;
|
||||
background-color: $basehover;
|
||||
}
|
||||
|
||||
//don't let svg handle click events, just send to parents
|
||||
@ -245,46 +265,54 @@ svg {
|
||||
|
||||
.weak {
|
||||
font-size: 0.8em;
|
||||
color: color(base,foreground,weak);
|
||||
color: $basetextweak;
|
||||
}
|
||||
|
||||
.drawingCanvas {
|
||||
cursor: url('/pixel-art-where-to-start/pencil-tool-cursor.png');
|
||||
|
||||
border: solid 1px #fff;
|
||||
image-rendering:optimizeSpeed; /* Legal fallback */
|
||||
image-rendering:-moz-crisp-edges; /* Firefox */
|
||||
image-rendering:-o-crisp-edges; /* Opera */
|
||||
image-rendering:-webkit-optimize-contrast; /* Safari */
|
||||
image-rendering:optimize-contrast; /* CSS3 Proposed */
|
||||
image-rendering:crisp-edges; /* CSS4 Proposed */
|
||||
image-rendering:pixelated; /* CSS4 Proposed */
|
||||
-ms-interpolation-mode:nearest-neighbor; /* IE8+ */
|
||||
image-rendering: optimizeSpeed;
|
||||
/* Legal fallback */
|
||||
image-rendering: -moz-crisp-edges;
|
||||
/* Firefox */
|
||||
image-rendering: -o-crisp-edges;
|
||||
/* Opera */
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
/* Safari */
|
||||
image-rendering: optimize-contrast;
|
||||
/* CSS3 Proposed */
|
||||
image-rendering: crisp-edges;
|
||||
/* CSS4 Proposed */
|
||||
image-rendering: pixelated;
|
||||
/* CSS4 Proposed */
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
/* IE8+ */
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
position: fixed;
|
||||
display:none;
|
||||
display: none;
|
||||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.64);
|
||||
background-color:transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#checkerboard {
|
||||
z-index:1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#pixel-canvas {
|
||||
z-index:2;
|
||||
background:transparent;
|
||||
z-index: 2;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#tmp-canvas {
|
||||
z-index:3;
|
||||
background:transparent;
|
||||
z-index: 3;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#vfx-canvas {
|
||||
z-index:-5000;
|
||||
background:transparent;
|
||||
z-index: -5000;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#eyedropper-preview {
|
||||
@ -343,7 +371,7 @@ svg {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: color(base);
|
||||
background-color: $basecolor;
|
||||
position: fixed;
|
||||
z-index: 1110;
|
||||
overflow: visible;
|
||||
@ -351,8 +379,9 @@ svg {
|
||||
float: left;
|
||||
height: 100%;
|
||||
}
|
||||
li button, li a {
|
||||
color: color(menu, foreground);
|
||||
li button,
|
||||
li a {
|
||||
color: $basetext;
|
||||
height: 100%;
|
||||
padding: 17px;
|
||||
background: none;
|
||||
@ -360,9 +389,9 @@ svg {
|
||||
cursor: pointer;
|
||||
}
|
||||
li.selected {
|
||||
background-color: color(menu);
|
||||
background-color: $basehover;
|
||||
&>button {
|
||||
color: color(menu, foreground, hover);
|
||||
color: $basehovertext;
|
||||
}
|
||||
ul {
|
||||
display: block;
|
||||
@ -375,19 +404,20 @@ svg {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: color(menu);
|
||||
background-color: $basehover;
|
||||
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
|
||||
padding-bottom: 2px;
|
||||
li {
|
||||
width: 100%;
|
||||
button, a {
|
||||
button,
|
||||
a {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 8px 32px 8px 16px;
|
||||
font-size: 1em;
|
||||
&:hover {
|
||||
background-color: color(menu, background, hover);
|
||||
color: color(menu, foreground, hover);
|
||||
background-color: $baseselected;
|
||||
color: $baseselectedtext;
|
||||
}
|
||||
}
|
||||
a {
|
||||
@ -406,7 +436,7 @@ svg {
|
||||
/*app title*/
|
||||
|
||||
.logo {
|
||||
color: #6f6873;
|
||||
color: lighten($basecolor, 20%);
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
padding: 17px 10px 0;
|
||||
@ -425,7 +455,7 @@ svg {
|
||||
bottom: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: color(base);
|
||||
background-color: $basecolor;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
z-index: 1120;
|
||||
@ -498,7 +528,7 @@ svg {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 0px;
|
||||
background: color(base);
|
||||
background: $basecolor;
|
||||
padding: 6px 10px 3px 6px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
cursor: pointer;
|
||||
@ -506,15 +536,14 @@ svg {
|
||||
z-index: -1;
|
||||
box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.2);
|
||||
path {
|
||||
fill: color(base, foreground);
|
||||
fill: $baseicon;
|
||||
}
|
||||
&:hover {
|
||||
background: color(base, background, hover);
|
||||
background: $basehover;
|
||||
path {
|
||||
fill: color(base, foreground, hover);
|
||||
fill: $basehovericon;
|
||||
}
|
||||
}
|
||||
//class added when jscolor is opened
|
||||
} //class added when jscolor is opened
|
||||
&.hidden {
|
||||
left: 0px !important;
|
||||
}
|
||||
@ -545,7 +574,7 @@ svg {
|
||||
}
|
||||
|
||||
#add-color-button {
|
||||
background: color(base);
|
||||
background: $basecolor;
|
||||
|
||||
path {
|
||||
fill: #6f6873;
|
||||
@ -563,11 +592,11 @@ svg {
|
||||
}
|
||||
|
||||
#tools-menu li button path {
|
||||
fill: color(base, foreground);
|
||||
fill: $baseicon;
|
||||
}
|
||||
|
||||
#tools-menu li:hover button:first-child path {
|
||||
fill: color(base, foreground, hover);
|
||||
fill: $basehovericon;
|
||||
}
|
||||
|
||||
#colors-menu li {
|
||||
@ -575,8 +604,7 @@ svg {
|
||||
border: none;
|
||||
width: 100%;
|
||||
cursor: url('/pixel-editor/eyedropper.png'), auto;
|
||||
}
|
||||
//white outline
|
||||
} //white outline
|
||||
&.selected button::before {
|
||||
content: "";
|
||||
display: block;
|
||||
@ -589,8 +617,7 @@ svg {
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.15);
|
||||
z-index: 10;
|
||||
}
|
||||
//inner outline
|
||||
} //inner outline
|
||||
&.selected button::after {
|
||||
content: "";
|
||||
display: block;
|
||||
@ -609,11 +636,11 @@ svg {
|
||||
}
|
||||
|
||||
#tools-menu li.selected {
|
||||
background: color(selectedTool, background) !important;
|
||||
background: $baseselected !important;
|
||||
}
|
||||
|
||||
#tools-menu li.selected button:first-child path {
|
||||
fill: color(selectedTool, foreground);
|
||||
fill: $baseselectedicon;
|
||||
}
|
||||
|
||||
#tools-menu li.selected.expanded {
|
||||
@ -624,7 +651,7 @@ svg {
|
||||
#main-menu li button:hover,
|
||||
#add-color-button:hover,
|
||||
#main-menu li.open {
|
||||
background: color(base, background, hover);
|
||||
background: $basehover;
|
||||
}
|
||||
|
||||
.tools-menu-sub-button {
|
||||
@ -641,12 +668,12 @@ svg {
|
||||
bottom: 0;
|
||||
|
||||
path {
|
||||
fill: color(subbutton, foreground) !important;
|
||||
fill: $baseselectedicon !important;
|
||||
}
|
||||
&:hover {
|
||||
background: color(subbutton, background, hover) !important;
|
||||
background: $baseselectedhover !important;
|
||||
path {
|
||||
fill: color(subbutton, foreground, hover) !important;
|
||||
fill: $baseselectediconhover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -654,14 +681,14 @@ svg {
|
||||
#tools-menu li button#pencil-bigger-button,
|
||||
#tools-menu li button#zoom-in-button,
|
||||
#tools-menu li button#eraser-bigger-button,
|
||||
#tools-menu li button#rectangle-bigger-button{
|
||||
#tools-menu li button#rectangle-bigger-button {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#tools-menu li button#pencil-smaller-button,
|
||||
#tools-menu li button#zoom-out-button,
|
||||
#tools-menu li button#eraser-smaller-button,
|
||||
#tools-menu li button#rectangle-smaller-button{
|
||||
#tools-menu li button#rectangle-smaller-button {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@ -672,7 +699,7 @@ svg {
|
||||
#tools-menu li.selected button#eraser-bigger-button,
|
||||
#tools-menu li.selected button#eraser-smaller-button,
|
||||
#tools-menu li.selected button#rectangle-bigger-button,
|
||||
#tools-menu li.selected button#rectangle-smaller-button{
|
||||
#tools-menu li.selected button#rectangle-smaller-button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -683,10 +710,10 @@ svg {
|
||||
height: 100%;
|
||||
background-color: rgba(35, 32, 36, 0.75);
|
||||
display: none;
|
||||
color: color(base, foreground, text);
|
||||
color: $basetext;
|
||||
cursor: default;
|
||||
&>div {
|
||||
background: color(base);
|
||||
background: $basecolor;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
|
||||
width: 400px;
|
||||
@ -699,22 +726,22 @@ svg {
|
||||
}
|
||||
h1 {
|
||||
margin: 0 0 10px;
|
||||
color: color(base, foreground, h1);
|
||||
color: lighten($basecolor, 100%);
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
h2 {
|
||||
margin: 25px 0 10px;
|
||||
color: color(base, foreground, h2);
|
||||
color: lighten($basecolor, 70%);
|
||||
text-transform: uppercase;
|
||||
font-size: 1em;
|
||||
}
|
||||
a {
|
||||
color: color(base, foreground, link);
|
||||
color: $baselink;
|
||||
border-bottom: dotted 1px transparent;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
border-bottom: dotted 1px color(base, foreground, text);
|
||||
border-bottom: dotted 1px $basetext;
|
||||
}
|
||||
}
|
||||
|
||||
@ -726,41 +753,41 @@ svg {
|
||||
top: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: color(base, foreground);
|
||||
color: $baseicon;
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
border-radius: 0 3px 0 0;
|
||||
path {
|
||||
fill: color(base, foreground);
|
||||
fill: $baseicon;
|
||||
}
|
||||
&:hover {
|
||||
background: color(base, background, hover);
|
||||
background: $basehover;
|
||||
path {
|
||||
fill: color(base, foreground, hover);
|
||||
fill: $basehovericon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.default {
|
||||
float: right;
|
||||
background: color(button);
|
||||
background: $basehover;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: color(button, foreground);
|
||||
color: $basehovertext;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
margin: 20px 0 0 10px;
|
||||
&:hover {
|
||||
background: color(button, background, hover);
|
||||
background: $baseselected;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
background: color(indent);
|
||||
background: $indent;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: color(indent, foreground);
|
||||
color: $indenttext;
|
||||
padding: 10px 20px;
|
||||
margin: 0;
|
||||
width: 60px;
|
||||
@ -768,17 +795,18 @@ svg {
|
||||
}
|
||||
|
||||
.dropdown-button {
|
||||
background: color(button) url('/pixel-editor/dropdown-arrow.png') right center no-repeat;
|
||||
background: $basehover url('/pixel-editor/dropdown-arrow.png') right center no-repeat;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: color(button, foreground);
|
||||
color: $basehovertext;
|
||||
padding: 5px 20px 5px 5px;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
text-align: left;
|
||||
&:hover {
|
||||
background: color(button, background, hover) url('/pixel-editor/dropdown-arrow-hover.png') right center no-repeat;
|
||||
background: $baseselected url('/pixel-editor/dropdown-arrow-hover.png') right center no-repeat;
|
||||
color: $baseselectedtext;
|
||||
}
|
||||
&.selected {
|
||||
border-radius: 4px 4px 0 0;
|
||||
@ -786,9 +814,9 @@ svg {
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
background: color(button);
|
||||
background: $basehover;
|
||||
border: none;
|
||||
color: color(button, foreground);
|
||||
color: $basehovertext;
|
||||
padding: 0;
|
||||
margin: -1px 0 0 0;
|
||||
width: 200px;
|
||||
@ -802,24 +830,24 @@ svg {
|
||||
}
|
||||
|
||||
button {
|
||||
background: color(button);
|
||||
background: $basehover;
|
||||
border: none;
|
||||
color: color(button, foreground);
|
||||
color: $basehovertext;
|
||||
padding: 5px 20px 5px 5px;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
&:hover {
|
||||
background: color(button, background, hover);
|
||||
background: $baseselected;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.keyboard-key {
|
||||
background: lighten($base-color, 20%);
|
||||
box-shadow: 0 3px 0 2px lighten($base-color, 12%);
|
||||
background: lighten($basecolor, 20%);
|
||||
box-shadow: 0 3px 0 2px lighten($basecolor, 12%);
|
||||
padding: 0 4px;
|
||||
border-radius: 2px;
|
||||
margin: 6px;
|
||||
@ -854,7 +882,7 @@ svg {
|
||||
.dimentions-x {
|
||||
margin: -2px 7px;
|
||||
path {
|
||||
fill: color(base, foreground)
|
||||
fill: $baseicon
|
||||
}
|
||||
}
|
||||
|
||||
@ -864,14 +892,14 @@ svg {
|
||||
left: -4px;
|
||||
right: -4px;
|
||||
bottom: -7px;
|
||||
color: color(base, foreground, text);
|
||||
color: $basetext;
|
||||
span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
input {
|
||||
width: 64px;
|
||||
background: color(indent);
|
||||
color: color(indent, foreground);
|
||||
background: $indent;
|
||||
color: $indenttext;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
margin: 0;
|
||||
@ -888,15 +916,15 @@ svg {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
path {
|
||||
fill: color(base, foreground);
|
||||
fill: $baseicon;
|
||||
}
|
||||
&:hover path {
|
||||
fill: color(base, foreground, hover);
|
||||
fill: $basehovericon;
|
||||
}
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
& path {
|
||||
fill: color(base, foreground, disabled) !important;
|
||||
fill: lighten($basecolor, 10%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -907,16 +935,16 @@ svg {
|
||||
|
||||
#cookies-disabled-warning {
|
||||
display: none;
|
||||
color: color(base, foreground, weak);
|
||||
color: $basetextweak;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#editor-mode-info {
|
||||
font-style:italic;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#editor-mode {
|
||||
display:none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#resize-canvas {
|
||||
@ -1025,7 +1053,7 @@ svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(35, 32, 36, 0.92);
|
||||
color: color(base, foreground, text);
|
||||
color: $basetext;
|
||||
div {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@ -1033,7 +1061,7 @@ svg {
|
||||
|
||||
div {
|
||||
width: 400px;
|
||||
background-color: color(base);
|
||||
background-color: $basecolor;
|
||||
padding: 20px;
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
@ -1046,24 +1074,24 @@ svg {
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: color(base, foreground, link);
|
||||
color: $baselink;
|
||||
border-bottom: dotted 1px transparent;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
border-bottom: dotted 1px color(base, foreground, text);
|
||||
border-bottom: dotted 1px $basetext;
|
||||
}
|
||||
}
|
||||
button {
|
||||
background: color(button);
|
||||
background: $basehover;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: color(button, foreground);
|
||||
color: $basehovertext;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
&:hover {
|
||||
background: color(button, background, hover);
|
||||
background: $baseselected;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -35,6 +35,9 @@ function createColorPalette(selectedPalette, fillBackground, deletePreviousPalet
|
||||
}
|
||||
}
|
||||
|
||||
//prepend # if not present
|
||||
if (!darkestColor.includes('#')) darkestColor = '#' + darkestColor;
|
||||
|
||||
//set as current color
|
||||
currentLayer.context.fillStyle = darkestColor;
|
||||
}
|
||||
|
||||
@ -10,6 +10,8 @@ let modes = {
|
||||
let infoBox = document.getElementById('editor-mode-info');
|
||||
|
||||
function switchMode(currentMode, mustConfirm = true) {
|
||||
|
||||
//switch to advanced mode
|
||||
if (currentMode == 'Basic') {
|
||||
// Switch to advanced ez pez lemon squez
|
||||
document.getElementById('switch-mode-button').innerHTML = 'Switch to basic mode';
|
||||
@ -21,19 +23,30 @@ function switchMode(currentMode, mustConfirm = true) {
|
||||
|
||||
pixelEditorMode = 'Advanced';
|
||||
}
|
||||
|
||||
//switch to basic mode
|
||||
else {
|
||||
// Switch to basic
|
||||
if (mustConfirm) {
|
||||
|
||||
|
||||
//if there is a current layer (a document is active)
|
||||
if (currentLayer) {
|
||||
|
||||
//confirm with user before flattening image
|
||||
if (mustConfirm ) {
|
||||
if (!confirm('Switching to basic mode will flatten all the visible layers. Are you sure you want to continue?')) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('switch-mode-button').innerHTML = 'Switch to advanced mode';
|
||||
// Selecting the current layer
|
||||
currentLayer.selectLayer();
|
||||
// Flatten the layers
|
||||
flatten(true);
|
||||
}
|
||||
|
||||
//change menu text
|
||||
document.getElementById('switch-mode-button').innerHTML = 'Switch to advanced mode';
|
||||
|
||||
// Hide the layer menus
|
||||
layerList.style.display = 'none';
|
||||
document.getElementById('layer-button').style.display = 'none';
|
||||
|
||||
@ -175,7 +175,7 @@ function HistoryStateMoveTwoLayers(layer, oldIndex, newIndex) {
|
||||
saveHistoryState(this);
|
||||
}
|
||||
|
||||
function HistoryStateMoveLayer(afterToDrop, toDrop, static, nMoved) {
|
||||
function HistoryStateMoveLayer(afterToDrop, toDrop, staticc, nMoved) {
|
||||
this.beforeToDrop = afterToDrop;
|
||||
this.toDrop = toDrop;
|
||||
|
||||
@ -197,7 +197,7 @@ function HistoryStateMoveLayer(afterToDrop, toDrop, static, nMoved) {
|
||||
};
|
||||
|
||||
this.redo = function() {
|
||||
moveLayers(toDrop.menuEntry.id, static.menuEntry.id, true);
|
||||
moveLayers(toDrop.menuEntry.id, staticc.menuEntry.id, true);
|
||||
undoStates.push(this);
|
||||
};
|
||||
|
||||
|
||||
14
js/_layer.js
14
js/_layer.js
@ -477,7 +477,7 @@ function renameLayer(event) {
|
||||
// Swaps two layer entries in the layer menu
|
||||
function moveLayers(toDropLayer, staticLayer, saveHistory = true) {
|
||||
let toDrop = getLayerByID(toDropLayer);
|
||||
let static = getLayerByID(staticLayer);
|
||||
let staticc = getLayerByID(staticLayer);
|
||||
let layerCopy = layers.slice();
|
||||
|
||||
let beforeToDrop = toDrop.menuEntry.nextElementSibling;
|
||||
@ -486,9 +486,9 @@ function moveLayers(toDropLayer, staticLayer, saveHistory = true) {
|
||||
layerCopy.sort((a, b) => (a.canvas.style.zIndex > b.canvas.style.zIndex) ? 1 : -1);
|
||||
|
||||
let toDropIndex = layerCopy.indexOf(toDrop);
|
||||
let staticIndex = layerCopy.indexOf(static);
|
||||
let staticIndex = layerCopy.indexOf(staticc);
|
||||
|
||||
layerList.insertBefore(toDrop.menuEntry, static.menuEntry);
|
||||
layerList.insertBefore(toDrop.menuEntry, staticc.menuEntry);
|
||||
|
||||
if (toDropIndex < staticIndex) {
|
||||
let tmp = toDrop.canvas.style.zIndex;
|
||||
@ -513,7 +513,7 @@ function moveLayers(toDropLayer, staticLayer, saveHistory = true) {
|
||||
toDrop.canvas.style.zIndex = tmp;
|
||||
|
||||
if (saveHistory) {
|
||||
new HistoryStateMoveLayer(beforeToDrop, toDrop, static, nMoved);
|
||||
new HistoryStateMoveLayer(beforeToDrop, toDrop, staticc, nMoved);
|
||||
}
|
||||
}
|
||||
else {
|
||||
@ -540,7 +540,7 @@ function moveLayers(toDropLayer, staticLayer, saveHistory = true) {
|
||||
toDrop.canvas.style.zIndex = tmp;
|
||||
|
||||
if (saveHistory) {
|
||||
new HistoryStateMoveLayer(beforeToDrop, toDrop, static, nMoved);
|
||||
new HistoryStateMoveLayer(beforeToDrop, toDrop, staticc, nMoved);
|
||||
}
|
||||
|
||||
}
|
||||
@ -585,6 +585,8 @@ function addLayer(id, saveHistory = true) {
|
||||
|
||||
console.log("Tela creata: " + newCanvas);
|
||||
|
||||
if (!layerListEntry) return console.warn('skipping adding layer because no document');
|
||||
|
||||
// Clone the default layer
|
||||
let toAppend = layerListEntry.cloneNode(true);
|
||||
// Setting the default name for the layer
|
||||
@ -613,3 +615,5 @@ function addLayer(id, saveHistory = true) {
|
||||
|
||||
return newLayer;
|
||||
}
|
||||
|
||||
layerList = document.getElementById("layers-menu");
|
||||
@ -5,7 +5,6 @@ function newPixel (width, height, editorMode, fileContent = null) {
|
||||
|
||||
currentPalette = [];
|
||||
if (firstPixel) {
|
||||
layerList = document.getElementById("layers-menu");
|
||||
layerListEntry = layerList.firstElementChild;
|
||||
|
||||
currentLayer = new Layer(width, height, canvas, layerListEntry);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user