Skip to content

Commit 12a3283

Browse files
jbrundagejbrundage
committed
another push
Fixed issue with color saving Redesigned color select section
1 parent 5f09ced commit 12a3283

19 files changed

+281
-117
lines changed

‎css/_canvas.scss

+6-6
Original file line numberDiff line numberDiff line change
@@ -85,9 +85,9 @@
8585

8686
#canvas-view {
8787
bottom: 0px;
88-
left: 48px;
89-
right: 48px;
90-
top: 48px;
88+
left: var(--top-nav-height);
89+
right: var(--top-nav-height);
90+
top: var(--top-nav-height);
9191
cursor: default;
9292
position: fixed;
9393
display: block;
@@ -97,9 +97,9 @@
9797
box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.4);
9898
position: fixed;
9999
bottom: 0px;
100-
left: 48px;
101-
right: 48px;
102-
top: 48px;
100+
left: var(--top-nav-height);
101+
right: var(--top-nav-height);
102+
top: var(--top-nav-height);
103103
display: block;
104104
pointer-events: none;
105105
}

‎css/_colors-menu.scss

+42-20
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,56 @@
1-
21
#colors-menu {
3-
right: 200px;
4-
width: 48px;
2+
width:var(--layers-width);
53
display: flex;
64
justify-content: flex-start;
7-
flex-direction: column;
5+
flex-direction: row;
86
list-style-type: none;
9-
top: 48px;
10-
bottom: 0;
7+
display: flex;
8+
flex-wrap: wrap;
9+
align-content: flex-start;
10+
height: var(--palette-height);
1111
padding: 0;
1212
margin: 0;
1313
background-color: $basecolor;
1414
box-sizing: border-box;
15-
position: fixed;
15+
align-items: flex-start;
1616
z-index: 1120;
17+
overflow-y: scroll;
18+
resize: vertical;
1719

1820
li {
19-
width: 48px;
20-
flex-basis: 48px;
21+
width: var(--top-nav-height);
22+
height: var(--top-nav-height);
23+
flex-basis: var(--top-nav-height);
2124

22-
&:not(.noshrink) {
23-
flex-grow: 1;
24-
}
2525
&.noshrink {
2626
flex-grow: 0;
2727
flex-shrink: 0;
2828
}
2929
}
30-
}
31-
3230

31+
svg {
32+
margin-top: 4px;
33+
}
34+
35+
&::-webkit-scrollbar {
36+
background: #232125;
37+
width: 1em;
38+
}
39+
&::-webkit-scrollbar-track {
40+
margin-top: -0.125em;
41+
width: 1em;
42+
}
43+
&::-webkit-scrollbar-thumb {
44+
background: #332f35;
45+
border-radius: 0.25em;
46+
border: solid 0.125em #232125; //same color as scrollbar back to fake padding
47+
}
48+
&::-webkit-scrollbar-corner {
49+
background: #232125;
50+
}
51+
scrollbar-color: #332f35 #232125;
52+
scroll-behavior: smooth;
53+
}
3354

3455
//added when the color is a duplicate of another
3556
#duplicate-color-warning {
@@ -118,14 +139,14 @@
118139
content: "";
119140
display: block;
120141
position: absolute;
121-
top: -3px;
122-
left: -3px;
142+
top: 0px;
143+
left: 0px;
123144
border: solid 3px #fff;
124145
width: 100%;
125146
height: 100%;
126-
border-radius: 4px;
127-
box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.15);
147+
box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.15) inset;
128148
z-index: 10;
149+
box-sizing: border-box;
129150
} //inner outline
130151
&.selected button::after {
131152
content: "";
@@ -149,7 +170,9 @@
149170
background: $basehover;
150171
}
151172

152-
173+
.jscolor-wrap {
174+
z-index: 10000 !important;
175+
}
153176

154177
.jscolor-picker-bottom {
155178
display: none;
@@ -173,7 +196,6 @@
173196
}
174197
}
175198

176-
177199
.delete-color-button {
178200
background: none;
179201
padding: 0px;

‎css/_containers.scss

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
#right-container{
2+
display: flex;
3+
flex-direction: column;
4+
position: fixed;
5+
top: var(--top-nav-height);
6+
right: var(--top-nav-height);
7+
bottom: 0;
8+
}
9+
#bottom-container{
10+
display: flex;
11+
flex-direction: column;
12+
position: fixed;
13+
left: 0;
14+
right: 0;
15+
bottom: 0;
16+
}
17+
#left-container{
18+
display: flex;
19+
flex-direction: column;
20+
position: fixed;
21+
top: var(--top-nav-height);
22+
bottom: 0;
23+
left: var(--top-nav-height);
24+
}

‎css/_general.scss

+12-1
Original file line numberDiff line numberDiff line change
@@ -43,4 +43,15 @@ svg {
4343

4444
#data-holders, .preload {
4545
display: none;
46-
}
46+
}
47+
48+
#right-nav {
49+
position: fixed;
50+
top: var(--top-nav-height);
51+
right: 0;
52+
bottom: 0;
53+
width: var(--layers-width);
54+
z-index: 9000;
55+
display: flex;
56+
flex-direction: column;
57+
}

‎css/_layers.scss

+30-7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
#layer-properties-menu {
32
visibility: hidden;
43
margin: 0;
@@ -8,7 +7,7 @@
87
width: 120px;
98
text-align: center;
109

11-
margin-right: 200px;
10+
margin-right: var(--layers-width);
1211
/*border:1px solid $basetext;*/
1312
list-style: none;
1413
position: relative;
@@ -72,19 +71,16 @@
7271
}
7372
scrollbar-color: #332f35 #232125;
7473
scroll-behavior: smooth;
75-
width:200px;
76-
top: 48px;
77-
bottom: 0;
78-
right:0;
74+
width:var(--layers-width);
7975
padding: 0;
8076
margin: 0;
8177
background-color: $basecolor;
8278
box-sizing: border-box;
83-
position: fixed;
8479
z-index: 1120;
8580
list-style-type: none;
8681
overflow-y:scroll;
8782
overflow-x:hidden;
83+
flex: 1;
8884
#add-layer-button {
8985
path {
9086
fill: $baseicon;
@@ -112,6 +108,33 @@
112108
color: $basehovertext;
113109
background-color: $basehover;
114110
}
111+
#add-reference-button {
112+
path {
113+
fill: $baseicon;
114+
}
115+
svg {
116+
position: relative;
117+
margin-right: 10px;
118+
}
119+
position:relative;
120+
justify-content: center;
121+
display:none;
122+
align-items:center;
123+
margin-top:2px;
124+
font-size: 1.2em;
125+
color: $basetext;
126+
height: 100%;
127+
width: 100%;
128+
padding: 17px;
129+
background: none;
130+
border: none;
131+
cursor: pointer;
132+
}
133+
134+
#add-reference-button:hover {
135+
color: $basehovertext;
136+
background-color: $basehover;
137+
}
115138
}
116139

117140
.selected-layer {

‎css/_main-menu.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
#main-menu {
3-
height: 48px;
3+
height: var(--top-nav-height);
44
left: 0;
55
right: 0;
66
list-style-type: none;
@@ -35,7 +35,7 @@
3535
li ul {
3636
display: none;
3737
position: absolute;
38-
top: 48px;
38+
top: var(--top-nav-height);
3939
list-style-type: none;
4040
padding: 0;
4141
margin: 0;

‎css/_new-pixel.scss

+12-2
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,29 @@
66
font-style: italic;
77
}
88

9+
#new-pixel-inventory {
10+
display: none;
11+
}
12+
13+
#new-pixel-map {
14+
display: none;
15+
}
16+
17+
#new-voxel-world {
18+
display: none;
19+
}
20+
921
.dimentions-x {
1022
margin: -2px 7px;
1123
path {
1224
fill: $baseicon
1325
}
1426
}
1527

16-
1728
#no-palette-button {
1829
display: none;
1930
}
2031

21-
2232
#editor-mode-info {
2333
font-style: italic;
2434
}

‎css/_tools-menu.scss

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11

22
#tools-menu {
33
left: 0;
4-
width: 48px;
4+
width: var(--top-nav-height);
55
list-style-type: none;
6-
top: 48px;
6+
top: var(--top-nav-height);
77
bottom: 0;
88
padding: 0;
99
margin: 0;
@@ -24,7 +24,7 @@
2424
width: 100%;
2525
padding: 0;
2626
cursor: pointer;
27-
height: 48px;
27+
height: var(--top-nav-height);
2828
z-index:0;
2929
}
3030

@@ -73,7 +73,7 @@
7373
#tools-menu .size-buttons {
7474
position:absolute;
7575
display: none;
76-
height:48px;
76+
height:var(--top-nav-height);
7777
left:8px;
7878
z-index:-1;
7979
background-color: $basecolor !important;
@@ -140,8 +140,8 @@
140140
#tool-tutorial {
141141
display:inline-block;
142142
position:absolute;
143-
margin-left:48px;
144-
margin-top:48px;
143+
margin-left:var(--top-nav-height);
144+
margin-top:var(--top-nav-height);
145145
background-color: $basehover;
146146
color:$basetext;
147147
font-size:14px;

‎css/_variables.scss

+9-1
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,12 @@ $baseselected: lighten($basecolor, 15%); //color(selectedTool, background),
1313
$baseselectediconhover: lighten($basecolor, 70%); //color(subbutton, foreground, hover)
1414
$baseselectedhover: lighten($basecolor, 25%); //color(subbutton, background, hover)
1515
$indent: darken($basecolor, 5%); //color(indent)
16-
$indenttext: lighten($basecolor, 50%); //color(indent, foreground)
16+
$indenttext: lighten($basecolor, 50%); //color(indent, foreground)
17+
18+
19+
:root{
20+
--layers-width: 206px;
21+
--palette-height: 38%;
22+
--top-nav-height: 48px;
23+
--drag-bar-size: var(--top-nav-height);
24+
}

0 commit comments

Comments
 (0)