mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

another push

Browse Source 
Fixed issue with color saving
Redesigned color select section
This commit is contained in:
Jaman Brundage
2022-03-23 08:47:57 -04:00
parent 5f09ceddcf
commit 12a3283790
19 changed files with 281 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
css/_canvas.scss
View File

@@ -85,9 +85,9 @@
#canvas-view {
bottom: 0px;
left: 48px;
right: 48px;
top: 48px;
left: var(--top-nav-height);
right: var(--top-nav-height);
top: var(--top-nav-height);
cursor: default;
position: fixed;
display: block;
@@ -97,9 +97,9 @@
box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.4);
position: fixed;
bottom: 0px;
left: 48px;
right: 48px;
top: 48px;
left: var(--top-nav-height);
right: var(--top-nav-height);
top: var(--top-nav-height);
display: block;
pointer-events: none;
}

62
css/_colors-menu.scss
View File

@@ -1,36 +1,57 @@
#colors-menu {
right: 200px;
width: 48px;
width:var(--layers-width);
display: flex;
justify-content: flex-start;
flex-direction: column;
flex-direction: row;
list-style-type: none;
top: 48px;
bottom: 0;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
height: var(--palette-height);
padding: 0;
margin: 0;
background-color: $basecolor;
box-sizing: border-box;
position: fixed;
align-items: flex-start;
z-index: 1120;
overflow-y: scroll;
resize: vertical;
li {
width: 48px;
flex-basis: 48px;
width: var(--top-nav-height);
height: var(--top-nav-height);
flex-basis: var(--top-nav-height);
&:not(.noshrink) {
flex-grow: 1;
}
&.noshrink {
flex-grow: 0;
flex-shrink: 0;
}
}
svg {
margin-top: 4px;
}
&::-webkit-scrollbar {
background: #232125;
width: 1em;
}
&::-webkit-scrollbar-track {
margin-top: -0.125em;
width: 1em;
}
&::-webkit-scrollbar-thumb {
background: #332f35;
border-radius: 0.25em;
border: solid 0.125em #232125; //same color as scrollbar back to fake padding
}
&::-webkit-scrollbar-corner {
background: #232125;
}
scrollbar-color: #332f35 #232125;
scroll-behavior: smooth;
}
//added when the color is a duplicate of another
#duplicate-color-warning {
display: inline-block;
@@ -118,14 +139,14 @@
content: "";
display: block;
position: absolute;
top: -3px;
left: -3px;
top: 0px;
left: 0px;
border: solid 3px #fff;
width: 100%;
height: 100%;
border-radius: 4px;
box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.15);
box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.15) inset;
z-index: 10;
box-sizing: border-box;
} //inner outline
&.selected button::after {
content: "";
@@ -149,7 +170,9 @@
background: $basehover;
}
.jscolor-wrap {
z-index: 10000 !important;
}
.jscolor-picker-bottom {
display: none;
@@ -173,7 +196,6 @@
}
}
.delete-color-button {
background: none;
padding: 0px;

24
css/_containers.scss Normal file
View File

@@ -0,0 +1,24 @@
#right-container{
display: flex;
flex-direction: column;
position: fixed;
top: var(--top-nav-height);
right: var(--top-nav-height);
bottom: 0;
}
#bottom-container{
display: flex;
flex-direction: column;
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
#left-container{
display: flex;
flex-direction: column;
position: fixed;
top: var(--top-nav-height);
bottom: 0;
left: var(--top-nav-height);
}

13
css/_general.scss
View File

@@ -43,4 +43,15 @@ svg {
#data-holders, .preload {
display: none;
}
}
#right-nav {
position: fixed;
top: var(--top-nav-height);
right: 0;
bottom: 0;
width: var(--layers-width);
z-index: 9000;
display: flex;
flex-direction: column;
}

37
css/_layers.scss
View File

@@ -1,4 +1,3 @@
#layer-properties-menu {
visibility: hidden;
margin: 0;
@@ -8,7 +7,7 @@
width: 120px;
text-align: center;
margin-right: 200px;
margin-right: var(--layers-width);
/*border:1px solid $basetext;*/
list-style: none;
position: relative;
@@ -72,19 +71,16 @@
}
scrollbar-color: #332f35 #232125;
scroll-behavior: smooth;
width:200px;
top: 48px;
bottom: 0;
right:0;
width:var(--layers-width);
padding: 0;
margin: 0;
background-color: $basecolor;
box-sizing: border-box;
position: fixed;
z-index: 1120;
list-style-type: none;
overflow-y:scroll;
overflow-x:hidden;
flex: 1;
#add-layer-button {
path {
fill: $baseicon;
@@ -112,6 +108,33 @@
color: $basehovertext;
background-color: $basehover;
}
#add-reference-button {
path {
fill: $baseicon;
}
svg {
position: relative;
margin-right: 10px;
}
position:relative;
justify-content: center;
display:none;
align-items:center;
margin-top:2px;
font-size: 1.2em;
color: $basetext;
height: 100%;
width: 100%;
padding: 17px;
background: none;
border: none;
cursor: pointer;
}
#add-reference-button:hover {
color: $basehovertext;
background-color: $basehover;
}
}
.selected-layer {

4
css/_main-menu.scss
View File

@@ -1,6 +1,6 @@
#main-menu {
height: 48px;
height: var(--top-nav-height);
left: 0;
right: 0;
list-style-type: none;
@@ -35,7 +35,7 @@
li ul {
display: none;
position: absolute;
top: 48px;
top: var(--top-nav-height);
list-style-type: none;
padding: 0;
margin: 0;

14
css/_new-pixel.scss
View File

@@ -6,6 +6,18 @@
font-style: italic;
}
#new-pixel-inventory {
display: none;
}
#new-pixel-map {
display: none;
}
#new-voxel-world {
display: none;
}
.dimentions-x {
margin: -2px 7px;
path {
@@ -13,12 +25,10 @@
}
}
#no-palette-button {
display: none;
}
#editor-mode-info {
font-style: italic;
}

12
css/_tools-menu.scss
View File

@@ -1,9 +1,9 @@
#tools-menu {
left: 0;
width: 48px;
width: var(--top-nav-height);
list-style-type: none;
top: 48px;
top: var(--top-nav-height);
bottom: 0;
padding: 0;
margin: 0;
@@ -24,7 +24,7 @@
width: 100%;
padding: 0;
cursor: pointer;
height: 48px;
height: var(--top-nav-height);
z-index:0;
}
@@ -73,7 +73,7 @@
#tools-menu .size-buttons {
position:absolute;
display: none;
height:48px;
height:var(--top-nav-height);
left:8px;
z-index:-1;
background-color: $basecolor !important;
@@ -140,8 +140,8 @@
#tool-tutorial {
display:inline-block;
position:absolute;
margin-left:48px;
margin-top:48px;
margin-left:var(--top-nav-height);
margin-top:var(--top-nav-height);
background-color: $basehover;
color:$basetext;
font-size:14px;

10
css/_variables.scss
View File

@@ -13,4 +13,12 @@ $baseselected: lighten($basecolor, 15%); //color(selectedTool, background),
$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)
$indenttext: lighten($basecolor, 50%); //color(indent, foreground)
:root{
--layers-width: 206px;
--palette-height: 38%;
--top-nav-height: 48px;
--drag-bar-size: var(--top-nav-height);
}