From 512981be63c0c52dda2207dbd7d01b7baef260b4 Mon Sep 17 00:00:00 2001
From: skeddles <skeddtemp@gmail.com>
Date: Tue, 6 Jul 2021 19:14:37 -0400
Subject: [PATCH] split pixel-edtior.scss into separate files

---
 css/_canvas.scss          |  103 ++
 css/_colors-menu.scss     |  196 ++++
 css/_compatibility.scss   |   59 ++
 css/_general.scss         |   46 +
 css/_help.scss            |   39 +
 css/_layers.scss          |  210 +++++
 css/_main-menu.scss       |   85 ++
 css/_new-pixel.scss       |   28 +
 css/_palette-editor.scss  |  315 +++++++
 css/_popup-container.scss |  155 +++
 css/_resize-menus.scss    |  220 +++++
 css/_settings.scss        |   15 +
 css/_shake.scss           |   25 +
 css/_splash-page.scss     |  286 ++++++
 css/_tools-menu.scss      |  116 +++
 css/_variables.scss       |   16 +
 css/pixel-editor.scss     | 1876 +------------------------------------
 17 files changed, 1930 insertions(+), 1860 deletions(-)
 create mode 100644 css/_canvas.scss
 create mode 100644 css/_colors-menu.scss
 create mode 100644 css/_compatibility.scss
 create mode 100644 css/_general.scss
 create mode 100644 css/_help.scss
 create mode 100644 css/_layers.scss
 create mode 100644 css/_main-menu.scss
 create mode 100644 css/_new-pixel.scss
 create mode 100644 css/_palette-editor.scss
 create mode 100644 css/_popup-container.scss
 create mode 100644 css/_resize-menus.scss
 create mode 100644 css/_settings.scss
 create mode 100644 css/_shake.scss
 create mode 100644 css/_splash-page.scss
 create mode 100644 css/_tools-menu.scss
 create mode 100644 css/_variables.scss

diff --git a/css/_canvas.scss b/css/_canvas.scss
new file mode 100644
index 0000000..40633fb
--- /dev/null
+++ b/css/_canvas.scss
@@ -0,0 +1,103 @@
+
+
+.drawingCanvas {
+	cursor: url('/pixel-editor/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+           */
+	width: 400px;
+	height: 400px;
+	position: fixed;
+	display: none;
+	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.64);
+	background-color: transparent;
+}
+
+#checkerboard {
+	z-index: 1;
+}
+
+#pixel-canvas {
+	z-index: 3;
+	background: transparent;
+}
+
+#pixel-grid {
+	z-index: 5000;
+	background: transparent;
+}
+
+#tmp-canvas {
+	z-index: 5;
+	background: transparent;
+}
+
+
+#vfx-canvas {
+	z-index: -5000;
+	background: transparent;
+}
+
+#eyedropper-preview {
+	position: absolute;
+	width: 45px;
+	height: 45px;
+	border-radius: 30px;
+	border: solid 10px red;
+	z-index: 1200;
+	display: none;
+	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25), inset 0 0 6px 0 rgba(0, 0, 0, 0.2);
+	pointer-events: none;
+	&.dark {
+		box-shadow: 0 0 8px 0 rgba(255, 255, 255, 0.5), inset 0 0 6px 0 rgba(255, 255, 255, 0.5);
+	}
+}
+
+#brush-preview {
+	position: absolute;
+	border: solid 1px #fff;
+	z-index: 1200;
+	box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5), inset 0 0 2px 0 rgba(0, 0, 0, 0.5);
+	pointer-events: none;
+	left: -500px;
+	&.dark {
+		border: solid 1px #000;
+		box-shadow: 0 0 3px 0 rgba(255, 255, 255, 0.8), inset 0 0 3px 0 rgba(255, 255, 255, 0.8);
+	}
+}
+
+#canvas-view {
+	bottom: 0px;
+	left: 64px;
+	right: 48px;
+	top: 48px;
+	cursor: default;
+	position: fixed;
+	display: block;
+}
+
+#canvas-view-shadow {
+	box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.4);
+	position: fixed;
+	bottom: 0px;
+	left: 64px;
+	right: 48px;
+	top: 48px;
+	display: block;
+	pointer-events: none;
+}
\ No newline at end of file
diff --git a/css/_colors-menu.scss b/css/_colors-menu.scss
new file mode 100644
index 0000000..ec70b43
--- /dev/null
+++ b/css/_colors-menu.scss
@@ -0,0 +1,196 @@
+
+#colors-menu {
+	right: 200px;
+	width: 48px;
+	display: flex;
+	justify-content: flex-start;
+	flex-direction: column;
+	list-style-type: none;
+	top: 48px;
+	bottom: 0;
+	padding: 0;
+	margin: 0;
+	background-color: $basecolor;
+	box-sizing: border-box;
+	position: fixed;
+	z-index: 1120;
+
+	li {
+		width: 48px;
+		flex-basis: 48px;
+
+		&:not(.noshrink) {
+			flex-grow: 1;
+		}
+		&.noshrink {
+			flex-grow: 0;
+			flex-shrink: 0;
+		}
+	}
+}
+
+
+
+//added when the color is a duplicate of another
+#duplicate-color-warning {
+	display: inline-block;
+	visibility: hidden;
+	margin-left: 5px;
+	opacity: 0.75;
+	cursor: help;
+	&:hover {
+		opacity: 0.9;
+	}
+}
+
+
+
+//floating button to open jscolor picker
+.color-edit-button {
+	position: absolute;
+	top: 3px;
+	left: 0px;
+	background: $basecolor;
+	padding: 6px 10px 3px 6px;
+	border-radius: 4px 0 0 4px;
+	cursor: pointer;
+	transition: left 0.25s;
+	z-index: -1;
+	box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.2);
+	path {
+		fill: $baseicon;
+	}
+	&:hover {
+		background: $basehover;
+		path {
+			fill: $basehovericon;
+		}
+	} //class added when jscolor is opened
+	&.hidden {
+		left: 0px !important;
+	}
+}
+
+
+
+#colors-menu li {
+	position: relative;
+}
+
+
+#colors-menu li:hover .color-edit-button {
+	display: block;
+	left: -32px;
+}
+
+#colors-menu li.selected:hover .color-edit-button {
+	display: block;
+	left: -35px;
+}
+
+
+#colors-menu li button {
+	height: 100%;
+	display: block;
+}
+
+
+.color-value {
+	display: none;
+}
+
+#add-color-button {
+	background: $basecolor;
+
+	path {
+		fill: #6f6873;
+	}
+}
+
+
+#colors-menu li {
+	button {
+		border: none;
+		width: 100%;
+		cursor: url('/pixel-editor/eyedropper.png'), auto;
+	} //white outline
+	&.selected button::before {
+		content: "";
+		display: block;
+		position: absolute;
+		top: -3px;
+		left: -3px;
+		border: solid 3px #fff;
+		width: 100%;
+		height: 100%;
+		border-radius: 4px;
+		box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.15);
+		z-index: 10;
+	} //inner outline
+	&.selected button::after {
+		content: "";
+		display: block;
+		position: absolute;
+		top: 0;
+		left: 0;
+		border: solid 1px rgba(0, 0, 0, 0.15);
+		width: 100%;
+		height: 100%;
+		box-sizing: border-box;
+	}
+}
+
+#colors-menu li.noshrink button {
+	cursor: pointer;
+}
+
+
+#add-color-button:hover {
+	background: $basehover;
+}
+
+
+
+.jscolor-picker-bottom {
+	display: none;
+	position: absolute;
+	left: -4px;
+	right: -4px;
+	bottom: -7px;
+	color: $basetext;
+	span {
+		margin-left: 5px;
+	}
+	input {
+		width: 64px;
+		background: $indent;
+		color: $indenttext;
+		border-radius: 4px;
+		border: none;
+		margin: 0;
+		padding: 3px 12px;
+		margin-left: 5px;
+	}
+}
+
+
+.delete-color-button {
+	background: none;
+	padding: 0px;
+	border: none;
+	text-align: center;
+	cursor: pointer;
+	float: right;
+	path {
+		fill: $baseicon;
+	}
+	&:hover path {
+		fill: $basehovericon;
+	}
+	&.disabled {
+		cursor: not-allowed;
+		& path {
+			fill: lighten($basecolor, 10%) !important;
+		}
+	}
+}
\ No newline at end of file
diff --git a/css/_compatibility.scss b/css/_compatibility.scss
new file mode 100644
index 0000000..33b85c6
--- /dev/null
+++ b/css/_compatibility.scss
@@ -0,0 +1,59 @@
+
+#compatibility-warning {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	visibility: hidden;
+	z-index: 3000;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(35, 32, 36, 0.92);
+	color: $basetext;
+	div {
+		position: relative;
+		width: 100%;
+		height: 100%;
+
+		div {
+			width: 400px;
+			background-color: $basecolor;
+			padding: 20px;
+			width: 400px;
+			height: 200px;
+
+			position: absolute;
+			top: 50%;
+			left: 50%;
+
+			margin: -120px 0 0 -220px;
+		}
+	}
+	a {
+		color: $baselink;
+		border-bottom: dotted 1px transparent;
+		text-decoration: none;
+		&:hover {
+			border-bottom: dotted 1px $basetext;
+		}
+	}
+	button {
+		background: $basehover;
+		border: none;
+		border-radius: 4px;
+		color: $basehovertext;
+		padding: 10px 20px;
+		cursor: pointer;
+		margin: 0 auto;
+		display: block;
+		&:hover {
+			background: $baseselected;
+		}
+	}
+}
+
+#cookies-disabled-warning {
+	display: none;
+	color: $basetextweak;
+	font-style: italic;
+}
\ No newline at end of file
diff --git a/css/_general.scss b/css/_general.scss
new file mode 100644
index 0000000..e4ad7a4
--- /dev/null
+++ b/css/_general.scss
@@ -0,0 +1,46 @@
+
+body {
+	background: darken($basecolor, 6%);
+	font-family: 'Roboto', sans-serif;
+	margin: 0;
+	padding: 0;
+	color: #fff;
+	font-size: 14px;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	-moz-user-select: none;
+	/* Firefox */
+	-ms-user-select: none;
+	/* Internet Explorer */
+	-khtml-user-select: none;
+	/* KHTML browsers (e.g. Konqueror) */
+	-webkit-user-select: none;
+	/* Chrome, Safari, and Opera */
+	-webkit-touch-callout: none;
+	/* Disable Android and iOS callouts*/
+}
+
+
+
+//don't let svg handle click events, just send to parents
+svg {
+	pointer-events: none;
+	path {
+		pointer-events: none;
+	}
+}
+
+//remove blue outline in chrome
+*:focus {
+	outline: 0 !important;
+}
+
+.weak {
+	font-size: 0.8em;
+	color: $basetextweak;
+}
+
+#data-holders, .preload {
+	display: none;
+}
\ No newline at end of file
diff --git a/css/_help.scss b/css/_help.scss
new file mode 100644
index 0000000..4959708
--- /dev/null
+++ b/css/_help.scss
@@ -0,0 +1,39 @@
+
+#help {
+	max-height: 500px;
+	overflow-y:scroll;
+
+	li {
+		margin-top:5px;
+	}
+
+	// Fancy scrollbar
+	&::-webkit-scrollbar {
+		background: #232125;
+		width: 0.5em;
+	}
+	&::-webkit-scrollbar-track {
+		margin-top: -0.125em;
+		width: 0.5em;
+	}
+	&::-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;
+	}
+}
+
+
+
+.keyboard-key {
+	background: lighten($basecolor, 20%);
+	box-shadow: 0 3px 0 2px lighten($basecolor, 12%);
+	padding: 0 4px;
+	border-radius: 2px;
+	margin: 6px;
+	display: inline-block;
+	color: #c0bfc1;
+}
diff --git a/css/_layers.scss b/css/_layers.scss
new file mode 100644
index 0000000..5a505e4
--- /dev/null
+++ b/css/_layers.scss
@@ -0,0 +1,210 @@
+
+#layer-properties-menu {
+	visibility: hidden;
+	margin: 0;
+	padding: 0;
+	top: 0;
+	right: 0;
+	width: 120px;
+	text-align: center;
+
+	margin-right: 200px;
+	/*border:1px solid $basetext;*/
+	list-style: none;
+	position: relative;
+	z-index: 1200;
+	list-style-type: none;
+
+	background-color: $basecolor;
+	position: fixed;
+	overflow: visible;
+
+	li button {
+		color: $basetext;
+		height: 100%;
+		padding: 10px;
+		background: none;
+		border: none;
+		cursor: pointer;
+		width: 100%;
+	}
+
+	li button:hover {
+		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+           */
+}
+
+#layers-menu {
+	&::-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;
+	width:200px;
+	top: 48px;
+	bottom: 0;
+	right:0;
+	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;
+	#add-layer-button {
+		path {
+			fill: $baseicon;
+		}
+		svg {
+			position: relative;
+			margin-right: 10px;
+		}
+		position:relative;
+		justify-content: center;
+		display:flex;
+		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-layer-button:hover {
+		color: $basehovertext;
+		background-color: $basehover;
+	}
+}
+
+.selected-layer {
+	ul.layer-buttons li.layer-button {
+		visibility: visible;
+		button svg path {
+			fill: $baseselectedicon;
+		}
+
+		&:hover button svg path {
+			fill: $baseselectediconhover;
+		}
+	}
+
+	color: $baseselectedtext;
+	background-color: $baseselected !important;
+}
+
+.layerdragover {
+	margin-top: 5px;
+	border-top: 3px solid $basehovertext;
+}
+
+.layers-menu-entry {
+	cursor: pointer;
+	margin-bottom: 2px;
+	font-size: 1em;
+	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;
+
+		path {
+			fill: $basehovericon;
+		}
+		li:hover {
+			path {
+				fill: $basehovericonhover;
+			}
+		}
+
+		.layer-button {
+			visibility: hidden;
+			height: 50%;
+		}
+	}
+
+	.lock-layer-button,
+	.hide-layer-button {
+		background: none;
+		border: none;
+		cursor: pointer;
+		height: 100%;
+		position: relative;
+	}
+
+	canvas {
+		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;
+	}
+
+}
+
+.layers-menu-entry:hover {
+	ul.layer-buttons li {
+		visibility: visible !important;
+	}
+
+	color: $basehovertext;
+	background-color: $basehover;
+}
diff --git a/css/_main-menu.scss b/css/_main-menu.scss
new file mode 100644
index 0000000..06453d8
--- /dev/null
+++ b/css/_main-menu.scss
@@ -0,0 +1,85 @@
+
+#main-menu {
+	height: 48px;
+	left: 0;
+	right: 0;
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	background-color: $basecolor;
+	position: fixed;
+	z-index: 1110;
+	overflow: visible;
+	&>li {
+		float: left;
+		height: 100%;
+	}
+	li button,
+	li a {
+		color: $basetext;
+		height: 100%;
+		padding: 17px;
+		background: none;
+		border: none;
+		cursor: pointer;
+	}
+	li.selected {
+		background-color: $basehover;
+		&>button {
+			color: $basehovertext;
+		}
+		ul {
+			display: block;
+		}
+	}
+	li ul {
+		display: none;
+		position: absolute;
+		top: 48px;
+		list-style-type: none;
+		padding: 0;
+		margin: 0;
+		background-color: $basehover;
+		box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
+		padding-bottom: 2px;
+		li {
+			width: 100%;
+			button,
+			a {
+				width: 100%;
+				text-align: left;
+				padding: 8px 32px 8px 16px;
+				font-size: 1em;
+				&:hover {
+					background-color: $baseselected;
+					color: $baseselectedtext;
+				}
+			}
+			a {
+				display: block;
+				text-decoration: none;
+				box-sizing: border-box;
+			}
+		}
+	}
+	.disabled {
+		color: #6f6e70 !important;
+	}
+}
+
+
+
+/*app title*/
+
+.logo {
+	color: lighten($basecolor, 20%);
+	text-transform: uppercase;
+	font-weight: bold;
+	padding: 17px 10px 0;
+	cursor: default;
+	box-sizing: border-box;
+}
+
+#main-menu li.open, #main-menu li button:hover {
+	background: $basehover;
+}
diff --git a/css/_new-pixel.scss b/css/_new-pixel.scss
new file mode 100644
index 0000000..cdbdbfe
--- /dev/null
+++ b/css/_new-pixel.scss
@@ -0,0 +1,28 @@
+
+#new-pixel-warning {
+	display: none;
+	text-align: center;
+	margin: 20px 0 0;
+	font-style: italic;
+}
+
+.dimentions-x {
+	margin: -2px 7px;
+	path {
+		fill: $baseicon
+	}
+}
+
+
+#no-palette-button {
+	display: none;
+}
+
+
+#editor-mode-info {
+	font-style: italic;
+}
+
+#editor-mode {
+	display: none;
+}
\ No newline at end of file
diff --git a/css/_palette-editor.scss b/css/_palette-editor.scss
new file mode 100644
index 0000000..8460b51
--- /dev/null
+++ b/css/_palette-editor.scss
@@ -0,0 +1,315 @@
+
+
+
+/***********************COLOUR PICKER*****************************/
+#colour-picker {
+	background-color:$basecolor;
+	width:250px;
+	height:350px;
+	position:absolute;
+	display:inline-block;
+
+	input[type=text] {
+		background-color:$basetext;
+		color:$basecolor;
+		box-shadow:none;
+		border:none;
+	}
+
+	input[type=range] {
+		width: 100%;
+		margin: 2.2px 0;
+		background-color: transparent;
+		-webkit-appearance: none;
+	  }
+	  input[type=range]::-webkit-slider-runnable-track {
+		background: #484d4d;
+		border: 0;
+		width: 100%;
+		height: 25.6px;
+		cursor: pointer;
+	  }
+	  input[type=range]::-webkit-slider-thumb {
+		margin-top: -2.2px;
+		width: 18px;
+		height: 30px;
+		background: $basetext;
+		border: 0;
+		cursor: pointer;
+		-webkit-appearance: none;
+	  }
+	  input[type=range]::-moz-range-track {
+		background: #484d4d;
+		border: 0;
+		width: 100%;
+		height: 25.6px;
+		cursor: pointer;
+	  }
+	  input[type=range]::-moz-range-thumb {
+		width: 18px;
+		height: 30px;
+		background: $basetextweak;
+		border: 0;
+		cursor: pointer;
+	  }
+
+	  /*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
+	  how to remove the vertical space around the range input in IE*/
+	  @supports (-ms-ime-align:auto) {
+		/* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
+		input[type=range].slider {
+		  margin: 0;
+		  /*Edge starts the margin from the thumb, not the track as other browsers do*/
+		}
+	  }	  
+}
+
+#cp-modes {
+	margin: 0 0 0 0;
+	font-size:0;
+	height:40px;
+	float:left;
+	display:flex;
+	font-family: 'Roboto', sans-serif;
+	background-color:$basetextweak;
+	width:100%;
+	
+	button {
+		font-size:14px;
+		left:0;
+		right:0;
+		margin:0 0 0 0;
+		border: none;
+		border-radius: 0;
+		height:100%;
+		width:37x;
+		background-color:$basehover;
+		color:$basetext;
+		cursor:pointer;
+	}
+
+	button:hover {
+		background-color:$baseicon;
+		color:$basetext;
+	}
+
+	button.cp-selected-mode {
+		background-color:$baseicon;
+		color:$basetext;
+	}
+
+	input {
+		width:60px;
+	}
+
+	div {
+		background-color:yellow;
+		width:100%;
+		height:100%;
+		z-index:2;
+		position:relative;
+	}
+}
+
+#sliders-container {
+	padding:10px;
+}
+
+.cp-slider-entry {
+	width:100%;
+	height:30px;
+	display:flex;
+	align-items:center;
+	margin-top:2px;
+	position:relative;
+	
+	label {
+		width: 20px;
+		font-size:15px;
+		font-style: bold;
+	}
+
+	input[type=text] {
+		text-align:center;
+		width: 30px;
+		overflow:visible;
+		margin-left:4px;
+	}
+}
+
+.colour-picker-slider {
+	width:90%;
+}
+
+#cp-minipicker {
+	width:100%;
+	height:100px;
+	position:relative;
+	margin: 0 0 0 0;
+	z-index: inherit 2000;
+
+	input {
+		width:100%;
+		margin: none;
+		padding: none;
+	}
+
+	.cp-colours-previews {
+		width:100%;
+		position:relative;
+	}
+
+	.cp-colour-preview {
+		width:100%;
+		position:relative;
+		background-color:blue;
+		color:$basecolor;
+		float:left;
+		height:30px;
+		justify-content: center;
+		display:flex;
+		align-items: center;
+		font-size:12px;
+	}
+
+	#cp-colour-picking-modes {
+		width:100%;
+		position:relative;
+	}
+
+	button {
+		font-size:14px;
+		left:0;
+		right:0;
+		margin:0 0 0 0;
+		border: none;
+		border-radius: 0;
+		height:30px;
+		width:16.66666%;
+		float:left;
+		overflow:hidden;
+		background-color:$basehover;
+		color:$basetext;
+		cursor:pointer;
+	}
+
+	button:hover {
+		background-color:$baseicon;
+		color:$basetext;
+	}
+
+	button.cp-selected-mode {
+		background-color:$baseicon;
+		color:$basetext;
+	}
+}
+
+#cp-canvas-container {
+	width:100%;
+	height:100%;
+	position:relative;
+}
+
+#cp-spectrum {
+	width:100%;
+	height:100px;
+	position:absolute;
+	background-color: transparent;
+}
+
+.cp-picker-icon{
+	width:16px;
+	height:16px;
+	border-radius:100%;
+	position:absolute;
+	background-color:white;
+	z-index:2;
+	border:2px solid black;
+}
+
+
+/***************PALETTE BLOCK****************/
+div#palette-block {
+	z-index:1000;
+	position:relative;
+	resize: horizontal;
+	margin: 0 0 0 0;
+	width:600px;
+	height:400px;
+}
+
+div#palette-container {
+	display:inline-block;
+	background-color: #232125;
+	position:absolute;
+	scrollbar-color: #332f35 #232125;
+	scroll-behavior: smooth;
+	left:300px;
+	width:300px;
+	height:320px;
+	overflow-y: scroll;
+
+	&::-webkit-scrollbar {
+		background: #232125;
+		width: 0.5em;
+	}
+	&::-webkit-scrollbar-track {
+		margin-top: -0.125em;
+		width: 0.5em;
+	}
+	&::-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;
+	}
+}
+
+ul#palette-list {
+	list-style:none;
+	margin: 0 0 0 0;
+	padding: 0 0 0 0;
+	position:relative;
+	display:inline-block;
+	
+	li {
+		float:left;
+		width:50px;
+		height:50px;
+		border:none;
+
+		min-width:20px;
+		min-height:20px;
+		max-width:75px;
+		max-height:75px;
+	}
+}
+
+
+div#pb-options {
+	position:relative;
+	left:280px;
+	height:30px;
+	width:300px;
+	top:300px;
+
+	button {
+		border-radius:none;
+		position:relative;
+		float:left;
+		width:50%;
+		height:100%;
+		text-align:center;
+		cursor: pointer;
+		font-size:16px;
+		background-color:$baseicon;
+		border:none;
+	}
+
+	button:hover {
+		color: $basehovertext;
+		background-color: $basehover;
+	}
+}
\ No newline at end of file
diff --git a/css/_popup-container.scss b/css/_popup-container.scss
new file mode 100644
index 0000000..5191f9c
--- /dev/null
+++ b/css/_popup-container.scss
@@ -0,0 +1,155 @@
+
+#pop-up-container {
+	position: fixed;
+	z-index: 2000;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(35, 32, 36, 0.75);
+	display: none;
+	color: $basetext;
+	cursor: default;
+	&>div {
+		background: $basecolor;
+		border-radius: 3px;
+		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
+		width: 400px;
+		padding: 20px;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		display: none;
+	}
+	h1 {
+		margin: 0 0 10px;
+		color: lighten($basecolor, 100%);
+		text-transform: uppercase;
+		font-size: 1.5em;
+	}
+	h2 {
+		margin: 25px 0 10px;
+		color: lighten($basecolor, 70%);
+		text-transform: uppercase;
+		font-size: 1em;
+	}
+	a {
+		color: $baselink;
+		border-bottom: dotted 1px transparent;
+		text-decoration: none;
+		&:hover {
+			border-bottom: dotted 1px $basetext;
+		}
+	}
+
+	.close-button {
+		width: 32px;
+		height: 32px;
+		position: absolute;
+		right: 0;
+		top: 0;
+		background: transparent;
+		border: none;
+		color: $baseicon;
+		font-weight: bold;
+		font-size: 1em;
+		cursor: pointer;
+		border-radius: 0 3px 0 0;
+		path {
+			fill: $baseicon;
+		}
+		&:hover {
+			background: $basehover;
+			path {
+				fill: $basehovericon;
+			}
+		}
+	}
+
+	div.update {
+		input {
+			background: $indent;
+			border: none;
+			border-radius: 4px;
+			color: $indenttext;
+			padding: 10px 20px;
+			margin: 0;
+			width: 60px;
+			text-align: center;
+		}
+	}
+	/*
+	input {
+		background: $indent;
+		border: none;
+		border-radius: 4px;
+		color: $indenttext;
+		padding: 10px 20px;
+		margin: 0;
+		width: 60px;
+		text-align: center;
+	}
+	*/
+
+	button.default {
+		background: $basehover;
+		border: none;
+		border-radius: 4px;
+		color: $basehovertext;
+		padding: 10px 20px;
+		cursor: pointer;
+		margin: 20px 0 0 10px;
+		&:hover {
+			background: $baseselected;
+		}
+	}
+
+	.dropdown-button {
+		background: $basehover url('/pixel-editor/dropdown-arrow.png') right center no-repeat;
+		border: none;
+		border-radius: 4px;
+		color: $basehovertext;
+		padding: 5px 20px 5px 5px;
+		cursor: pointer;
+		margin: 0;
+		width: 200px;
+		text-align: left;
+		&:hover {
+			background: $baseselected url('/pixel-editor/dropdown-arrow-hover.png') right center no-repeat;
+			color: $baseselectedtext;
+		}
+		&.selected {
+			border-radius: 4px 4px 0 0;
+		}
+	}
+
+	.dropdown-menu {
+		background: $basehover;
+		border: none;
+		color: $basehovertext;
+		padding: 0;
+		margin: -1px 0 0 0;
+		width: 200px;
+		text-align: left;
+		position: absolute;
+		border-radius: 0 0 4px 4px;
+		overflow: hidden;
+		display: none;
+		&.selected {
+			display: block;
+		}
+
+		button {
+			background: $basehover;
+			border: none;
+			color: $basehovertext;
+			padding: 5px 20px 5px 5px;
+			cursor: pointer;
+			margin: 0;
+			width: 100%;
+			text-align: left;
+			&:hover {
+				background: $baseselected;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/css/_resize-menus.scss b/css/_resize-menus.scss
new file mode 100644
index 0000000..384939d
--- /dev/null
+++ b/css/_resize-menus.scss
@@ -0,0 +1,220 @@
+#resize-canvas,
+#resize-sprite {
+    display: flex;
+    position: relative;
+    flex-wrap: wrap;
+}
+
+#pivot-menu {
+    position: relative;
+    display: inline-flex;
+    flex-wrap: wrap;
+    vertical-align: middle;
+    text-align: center;
+    width: 130px;
+    float: left;
+
+    button {
+        margin-right: 10px;
+        margin-bottom: 10px;
+        position: relative;
+        width: 32px;
+        height: 32px;
+        background: $basehover;
+        border: none;
+
+        path {
+            fill: $basehovericon;
+        }
+
+        transition: background 100ms ease-in-out,
+        transform 100ms ease;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+    }
+
+    button:hover,
+    button:focus,
+    button.rc-selected-pivot {
+        cursor: pointer;
+        background-color: $baseicon;
+
+        path {
+            fill: $basehovericonhover;
+        }
+
+        border: 2px solid color(base, foreground);
+    }
+
+    button:active {
+        transform: scale(0.95);
+    }
+}
+
+#borders-menu,
+#rc-size-menu,
+#rs-size-menu,
+#rs-percentage-menu {
+    display: flex;
+    position: relative;
+    flex-wrap: wrap;
+    width: 250px;
+    font-size: 15px;
+    left: 10px;
+    text-align: center;
+
+    button {
+        background: $basehover;
+        border: none;
+
+        color: $basehovericon;
+        transition: background 100ms ease-in-out,
+            transform 100ms ease;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+    }
+
+    button:hover,
+    button:focus {
+        cursor: pointer;
+        background-color: $baseicon;
+        color: $basehovericonhover;
+        border: 2px solid color(base, foreground);
+    }
+
+    button:active {
+        transform: scale(0.95);
+    }
+
+    input[type=number] {
+        position: relative;
+        margin-left: 10px;
+        height: 15px !important;
+        width: 40px !important;
+        padding: 8px !important;
+    }
+
+    input[type=number]::-webkit-outer-spin-button,
+    input[type=number]::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    /* Firefox */
+    input[type=number] {
+        -moz-appearance: textfield;
+    }
+
+    span {
+        padding-right: 10px;
+        float: left;
+        position: relative;
+        vertical-align: middle;
+        height: 40px;
+        width: 100px;
+        display: inline-flex;
+        align-items: center;
+    }
+}
+
+#rs-percentage-menu {
+    width: 400px;
+
+    span {
+        width: 150px;
+    }
+}
+
+#rs-size-menu {
+    width: 400px;
+
+    span {
+        width: 150px;
+    }
+}
+
+#rs-percentage-menu,
+#rs-size-menu {
+    justify-content: center;
+
+    div {
+        float: none;
+    }
+}
+
+#borders-menu {
+    width: 400px;
+    justify-content: center;
+
+    div {
+        float: none;
+        width: 330px;
+        padding-left: 50px;
+
+        span {
+            padding-right: 20px;
+        }
+    }
+}
+
+#rs-ratio-div {
+    width: 400px;
+    justify-content: center;
+    padding-left: 20px;
+
+    span {
+        width: 400px;
+        justify-content: center;
+    }
+
+    select {
+        height: 30px;
+        background-color: $basehover;
+        color: $basehovericon;
+        border: none;
+        position: relative;
+        left: 10px;
+
+        option {
+            background-color: $basehover;
+            color: $basehovericon;
+            padding: 5px;
+        }
+
+        option:checked,
+        option:hover {
+            box-shadow: 0 0 10px 100px $basehovericon inset;
+            color: $basehovericonhover;
+        }
+    }
+}
+
+#rs-keep-ratio {
+    background: color(button);
+    border: none;
+    font-size: 14px;
+    color: color(button, foreground);
+    padding: 10px 20px;
+    margin: 0 auto;
+    position: relative;
+    display: block;
+}
+
+#resize-canvas-confirm,
+#resize-sprite-confirm {
+    background: color(button);
+    border: none;
+    font-size: 18px;
+    border-radius: 4px;
+    color: color(button, foreground);
+    padding: 10px 20px;
+    cursor: pointer;
+    margin: 0 auto;
+    position: relative;
+    top: 10px;
+    display: block;
+
+    &:hover {
+        background: color(button, background, hover);
+    }
+}
\ No newline at end of file
diff --git a/css/_settings.scss b/css/_settings.scss
new file mode 100644
index 0000000..cd0d334
--- /dev/null
+++ b/css/_settings.scss
@@ -0,0 +1,15 @@
+.settings-entry {
+	display: flex;
+	align-items: baseline;
+	margin-top:10px;
+
+	label {
+		flex: 1;
+	}
+	input {
+		width: 90px !important;
+		display: block;
+		box-sizing: border-box;
+		float:right;
+	}
+}
\ No newline at end of file
diff --git a/css/_shake.scss b/css/_shake.scss
new file mode 100644
index 0000000..9be6c2d
--- /dev/null
+++ b/css/_shake.scss
@@ -0,0 +1,25 @@
+
+.shake {
+	animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
+	position: relative;
+}
+
+@keyframes shake {
+	10%,
+	90% {
+		transform: translate3d(-1px, 0, 0);
+	}
+	20%,
+	80% {
+		transform: translate3d(1px, 0, 0);
+	}
+	30%,
+	50%,
+	70% {
+		transform: translate3d(-2px, 0, 0);
+	}
+	40%,
+	60% {
+		transform: translate3d(2px, 0, 0);
+	}
+}
\ No newline at end of file
diff --git a/css/_splash-page.scss b/css/_splash-page.scss
new file mode 100644
index 0000000..e731c7d
--- /dev/null
+++ b/css/_splash-page.scss
@@ -0,0 +1,286 @@
+
+/********SPLASH PAGE*************/
+#splash {
+	width:100% !important;
+	height:100%!important;
+
+	background-color: #232125 !important;
+	opacity: 1 !important;
+
+	#splash-input {
+		width:74%;
+		height:100% !important;
+		color:$baselink;
+
+		#splash-menu {
+			position:relative;
+			height:100%;
+			left:0;
+			top:0;
+		}
+
+		#editor-logo {
+			font-weight:bold;
+			text-transform:uppercase;
+			font-size:20px;
+			height:35vh;
+			width:100%;
+			position:relative;
+
+			background-image:url('https://cdn.discordapp.com/attachments/506277390050131978/795660870221955082/final.png');
+			background-size:cover;
+			background-position:center;
+			background-repeat:no-repeat;
+		}
+
+		#black {
+			width:100%;
+			height:100%;
+			position:relative;
+			background-color:rgba(0,0,0,0.2);
+		}
+
+		#sp-coverdata {
+			padding:20px;
+			
+			p, a {
+				font-size:15px;
+				position:absolute;
+				text-transform:none;
+				right:20px;
+			}
+
+			p {
+				top:0px;
+			}
+
+			a {
+				font-size:17px;
+				bottom:20px;
+				text-decoration:underline;
+			}
+		}
+	}
+	
+	#sp-quickstart-container {
+		height:100%;
+		max-height: 500px;
+		width:70%;
+		float:right;
+		padding:40px;
+
+		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
+		box-sizing: border-box;         /* Opera/IE 8+ */
+
+		overflow-y: scroll;
+		&::-webkit-scrollbar {
+			background: #232125;
+			width: 0.5em;
+		}
+		&::-webkit-scrollbar-track {
+			margin-top: -0.125em;
+			width: 0.5em;
+		}
+		&::-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;
+		}
+	}
+
+	#sp-quickstart {
+		display:flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		height:100%;
+
+		// Fancy scrollbar
+		&::-webkit-scrollbar {
+			background: #232125;
+			width: 0.5em;
+		}
+		&::-webkit-scrollbar-track {
+			margin-top: -0.125em;
+			width: 0.5em;
+		}
+		&::-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;
+		}
+	}
+
+	#sp-quickstart-title {
+		font-size:27px;
+		text-transform: uppercase;
+		font-weight: bold;
+	}
+
+	.sp-template {
+		display: flex;
+  		align-items: center;
+		text-transform: uppercase;
+		width:16%;
+		border-radius:5%;
+		margin-right:4%;
+		margin-top:4%;
+		background-color:$basecolor;
+
+		font-size: 18px;
+		text-align:center;
+		font-weight: bold;
+
+		&:hover {
+			cursor:pointer;
+			background-color:$baseselected;
+		}
+
+		p {
+			span {
+				display:block;
+				font-size:14px !important;
+				margin: 0 0 0 0;
+				padding: 0 0 0 0;
+			}
+			width:100%;
+
+			float:left;
+			position:relative;
+		}
+	}
+
+	.sp-template:before {
+		content:'';
+		float:left;
+		padding-top:100%;
+	}
+
+	#sp-newpixel {
+		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
+		box-sizing: border-box;         /* Opera/IE 8+ */
+		display: inline-block;
+		width: 30% !important;
+		height:65vh;
+		padding:20px;
+		position:relative;
+		background-color:$basecolor;
+		
+		#palette-button-splash {
+			left:5%;
+			width:90%;
+		}
+
+		.sp-np-entry {
+			width:100%;
+			text-align:center;
+		}
+
+		input {
+			border:none;
+			background-color: #232125;
+			color:$basetext;
+			font-size:14px;
+			width:40px;
+			padding:7px;
+			text-align:center;
+		}
+
+		#create-button {
+			font-size:18px;
+			width:150px;
+			margin-top:40px;
+			font-weight: bold;
+		}
+
+		#sp-mode-palette {
+			text-align: center;
+			position: relative;
+			float:bottom;
+			font-size:16px;
+			font-weight: bold;
+	
+			div.button-menu {
+				border:2px solid $basetextweak;
+				border-radius:5px;
+				position:relative;
+				display:inline-block;
+				padding: 0 0 0 0;
+				text-align:left;
+				width:90%;
+				
+				div {
+					border:none;
+					padding:none;
+					margin:none;
+					background-color:transparent;
+					width:50%;
+					float:left;
+					text-align: center;
+					height:25px;
+					cursor:pointer;
+					z-index:1;
+
+					p {
+						z-index:0;
+						-ms-transform: translateY(-60%);
+						transform: translateY(-60%);
+					}
+				}
+	
+				.sp-interface-selected {
+					background-color: $basetextweak;
+				}
+			}
+		}
+	}
+
+	#splash-news {
+		box-sizing: border-box;
+		padding-left:20px;
+		width:26%;
+		height:100%;
+		background-color:#151516 !important;
+		float: right;
+	}
+
+	#latest-update {
+		width:100%;
+		font-size:15px;
+		height:90%;
+		line-height: 1.5;
+		position:relative;
+		top:20px;
+
+		overflow-y:scroll;
+		box-sizing: border-box;
+
+		img {
+			width:100%;
+		}
+
+		&::-webkit-scrollbar {
+			background: #232125;
+			width: 0.5em;
+		}
+		&::-webkit-scrollbar-track {
+			margin-top: -0.125em;
+			width: 0.5em;
+		}
+		&::-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;
+		}
+	}
+}
\ No newline at end of file
diff --git a/css/_tools-menu.scss b/css/_tools-menu.scss
new file mode 100644
index 0000000..2f35aae
--- /dev/null
+++ b/css/_tools-menu.scss
@@ -0,0 +1,116 @@
+
+#tools-menu {
+	left: 0;
+	width: 64px;
+	list-style-type: none;
+	top: 48px;
+	bottom: 0;
+	padding: 0;
+	margin: 0;
+	background-color: $basecolor;
+	box-sizing: border-box;
+	position: fixed;
+	z-index: 1120;
+}
+
+
+
+#tools-menu li {
+	position: relative;
+}
+
+
+
+#tools-menu li button:first-child {
+	text-align: center;
+	border: none;
+	background: none;
+	width: 100%;
+	padding: 0;
+	cursor: pointer;
+	height: 64px;
+}
+
+#tools-menu li button path {
+	fill: $baseicon;
+}
+
+#tools-menu li:hover button:first-child path {
+	fill: $basehovericon;
+}
+
+
+#tools-menu li.selected {
+	background: $baseselected !important;
+}
+
+#tools-menu li.selected button:first-child path {
+	fill: $baseselectedicon;
+}
+
+#tools-menu li.selected.expanded {
+	padding-bottom: 10px;
+}
+
+
+.tools-menu-sub-button {
+	text-align: center;
+	border: none;
+	background: none;
+	cursor: pointer;
+	width: 50%;
+	height: 22px;
+	display: none;
+	line-height: 0;
+	overflow: hidden;
+	position: absolute;
+	bottom: 0;
+
+	path {
+		fill: $baseselectedicon !important;
+	}
+	&:hover {
+		background: $baseselectedhover !important;
+		path {
+			fill: $baseselectediconhover !important;
+		}
+	}
+}
+
+#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#ellipse-bigger-button,
+#tools-menu li button#line-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#ellipse-smaller-button,
+#tools-menu li button#line-smaller-button {
+	right: 0;
+}
+
+#tools-menu li.selected button#pencil-bigger-button,
+#tools-menu li.selected button#pencil-smaller-button,
+#tools-menu li.selected button#zoom-in-button,
+#tools-menu li.selected button#zoom-out-button,
+#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#ellipse-bigger-button,
+#tools-menu li.selected button#ellipse-smaller-button,
+#tools-menu li.selected button#line-bigger-button,
+#tools-menu li.selected button#line-smaller-button {
+	display: block;
+}
+
+
+#tools-menu li:hover {
+	background: $basehover;
+}
\ No newline at end of file
diff --git a/css/_variables.scss b/css/_variables.scss
new file mode 100644
index 0000000..6e4e18a
--- /dev/null
+++ b/css/_variables.scss
@@ -0,0 +1,16 @@
+$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)
\ No newline at end of file
diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss
index 80f3149..3f87961 100644
--- a/css/pixel-editor.scss
+++ b/css/pixel-editor.scss
@@ -1,1861 +1,17 @@
+@import 'variables';
+@import 'general';
 @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: darken($basecolor, 6%);
-	font-family: 'Roboto', sans-serif;
-	margin: 0;
-	padding: 0;
-	color: #fff;
-	font-size: 14px;
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-	-moz-user-select: none;
-	/* Firefox */
-	-ms-user-select: none;
-	/* Internet Explorer */
-	-khtml-user-select: none;
-	/* KHTML browsers (e.g. Konqueror) */
-	-webkit-user-select: none;
-	/* Chrome, Safari, and Opera */
-	-webkit-touch-callout: none;
-	/* Disable Android and iOS callouts*/
-}
-
-#help {
-	max-height: 500px;
-	overflow-y:scroll;
-
-	li {
-		margin-top:5px;
-	}
-
-	// Fancy scrollbar
-	&::-webkit-scrollbar {
-		background: #232125;
-		width: 0.5em;
-	}
-	&::-webkit-scrollbar-track {
-		margin-top: -0.125em;
-		width: 0.5em;
-	}
-	&::-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;
-	}
-}
-
-#layer-properties-menu {
-	visibility: hidden;
-	margin: 0;
-	padding: 0;
-	top: 0;
-	right: 0;
-	width: 120px;
-	text-align: center;
-
-	margin-right: 200px;
-	/*border:1px solid $basetext;*/
-	list-style: none;
-	position: relative;
-	z-index: 1200;
-	list-style-type: none;
-
-	background-color: $basecolor;
-	position: fixed;
-	overflow: visible;
-
-	li button {
-		color: $basetext;
-		height: 100%;
-		padding: 10px;
-		background: none;
-		border: none;
-		cursor: pointer;
-		width: 100%;
-	}
-
-	li button:hover {
-		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+           */
-}
-
-#layers-menu {
-	&::-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;
-	width:200px;
-	top: 48px;
-	bottom: 0;
-	right:0;
-	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;
-	#add-layer-button {
-		path {
-			fill: $baseicon;
-		}
-		svg {
-			position: relative;
-			margin-right: 10px;
-		}
-		position:relative;
-		justify-content: center;
-		display:flex;
-		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-layer-button:hover {
-		color: $basehovertext;
-		background-color: $basehover;
-	}
-}
-
-.selected-layer {
-	ul.layer-buttons li.layer-button {
-		visibility: visible;
-		button svg path {
-			fill: $baseselectedicon;
-		}
-
-		&:hover button svg path {
-			fill: $baseselectediconhover;
-		}
-	}
-
-	color: $baseselectedtext;
-	background-color: $baseselected !important;
-}
-
-.layerdragover {
-	margin-top: 5px;
-	border-top: 3px solid $basehovertext;
-}
-
-.layers-menu-entry {
-	cursor: pointer;
-	margin-bottom: 2px;
-	font-size: 1em;
-	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;
-
-		path {
-			fill: $basehovericon;
-		}
-		li:hover {
-			path {
-				fill: $basehovericonhover;
-			}
-		}
-
-		.layer-button {
-			visibility: hidden;
-			height: 50%;
-		}
-	}
-
-	.lock-layer-button,
-	.hide-layer-button {
-		background: none;
-		border: none;
-		cursor: pointer;
-		height: 100%;
-		position: relative;
-	}
-
-	canvas {
-		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;
-	}
-
-}
-
-.layers-menu-entry:hover {
-	ul.layer-buttons li {
-		visibility: visible !important;
-	}
-
-	color: $basehovertext;
-	background-color: $basehover;
-}
-
-//don't let svg handle click events, just send to parents
-svg {
-	pointer-events: none;
-	path {
-		pointer-events: none;
-	}
-}
-
-//remove blue outline in chrome
-*:focus {
-	outline: 0 !important;
-}
-
-.weak {
-	font-size: 0.8em;
-	color: $basetextweak;
-}
-
-.drawingCanvas {
-	cursor: url('/pixel-editor/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+           */
-	width: 400px;
-	height: 400px;
-	position: fixed;
-	display: none;
-	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.64);
-	background-color: transparent;
-}
-
-#checkerboard {
-	z-index: 1;
-}
-
-#pixel-canvas {
-	z-index: 3;
-	background: transparent;
-}
-
-#pixel-grid {
-	z-index: 5000;
-	background: transparent;
-}
-
-#tmp-canvas {
-	z-index: 5;
-	background: transparent;
-}
-
-
-#vfx-canvas {
-	z-index: -5000;
-	background: transparent;
-}
-
-#eyedropper-preview {
-	position: absolute;
-	width: 45px;
-	height: 45px;
-	border-radius: 30px;
-	border: solid 10px red;
-	z-index: 1200;
-	display: none;
-	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25), inset 0 0 6px 0 rgba(0, 0, 0, 0.2);
-	pointer-events: none;
-	&.dark {
-		box-shadow: 0 0 8px 0 rgba(255, 255, 255, 0.5), inset 0 0 6px 0 rgba(255, 255, 255, 0.5);
-	}
-}
-
-#brush-preview {
-	position: absolute;
-	border: solid 1px #fff;
-	z-index: 1200;
-	box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5), inset 0 0 2px 0 rgba(0, 0, 0, 0.5);
-	pointer-events: none;
-	left: -500px;
-	&.dark {
-		border: solid 1px #000;
-		box-shadow: 0 0 3px 0 rgba(255, 255, 255, 0.8), inset 0 0 3px 0 rgba(255, 255, 255, 0.8);
-	}
-}
-
-#canvas-view {
-	bottom: 0px;
-	left: 64px;
-	right: 48px;
-	top: 48px;
-	cursor: default;
-	position: fixed;
-	display: block;
-}
-
-#canvas-view-shadow {
-	box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.4);
-	position: fixed;
-	bottom: 0px;
-	left: 64px;
-	right: 48px;
-	top: 48px;
-	display: block;
-	pointer-events: none;
-}
-
-#main-menu {
-	height: 48px;
-	left: 0;
-	right: 0;
-	list-style-type: none;
-	margin: 0;
-	padding: 0;
-	background-color: $basecolor;
-	position: fixed;
-	z-index: 1110;
-	overflow: visible;
-	&>li {
-		float: left;
-		height: 100%;
-	}
-	li button,
-	li a {
-		color: $basetext;
-		height: 100%;
-		padding: 17px;
-		background: none;
-		border: none;
-		cursor: pointer;
-	}
-	li.selected {
-		background-color: $basehover;
-		&>button {
-			color: $basehovertext;
-		}
-		ul {
-			display: block;
-		}
-	}
-	li ul {
-		display: none;
-		position: absolute;
-		top: 48px;
-		list-style-type: none;
-		padding: 0;
-		margin: 0;
-		background-color: $basehover;
-		box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
-		padding-bottom: 2px;
-		li {
-			width: 100%;
-			button,
-			a {
-				width: 100%;
-				text-align: left;
-				padding: 8px 32px 8px 16px;
-				font-size: 1em;
-				&:hover {
-					background-color: $baseselected;
-					color: $baseselectedtext;
-				}
-			}
-			a {
-				display: block;
-				text-decoration: none;
-				box-sizing: border-box;
-			}
-		}
-	}
-	.disabled {
-		color: #6f6e70 !important;
-	}
-}
-
-
-/*app title*/
-
-.logo {
-	color: lighten($basecolor, 20%);
-	text-transform: uppercase;
-	font-weight: bold;
-	padding: 17px 10px 0;
-	cursor: default;
-	box-sizing: border-box;
-}
-
-#data-holders {
-	display: none;
-}
-
-#tools-menu,
-#colors-menu {
-	list-style-type: none;
-	top: 48px;
-	bottom: 0;
-	padding: 0;
-	margin: 0;
-	background-color: $basecolor;
-	box-sizing: border-box;
-	position: fixed;
-	z-index: 1120;
-}
-
-#tools-menu {
-	left: 0;
-	width: 64px;
-}
-
-#colors-menu {
-	right: 200px;
-	width: 48px;
-	display: flex;
-	justify-content: flex-start;
-	flex-direction: column;
-	li {
-		width: 48px;
-		flex-basis: 48px;
-
-		&:not(.noshrink) {
-			flex-grow: 1;
-		}
-		&.noshrink {
-			flex-grow: 0;
-			flex-shrink: 0;
-		}
-	}
-}
-
-//added when the color is a duplicate of another
-#duplicate-color-warning {
-	display: inline-block;
-	visibility: hidden;
-	margin-left: 5px;
-	opacity: 0.75;
-	cursor: help;
-	&:hover {
-		opacity: 0.9;
-	}
-}
-
-.shake {
-	animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
-	position: relative;
-}
-
-@keyframes shake {
-	10%,
-	90% {
-		transform: translate3d(-1px, 0, 0);
-	}
-	20%,
-	80% {
-		transform: translate3d(1px, 0, 0);
-	}
-	30%,
-	50%,
-	70% {
-		transform: translate3d(-2px, 0, 0);
-	}
-	40%,
-	60% {
-		transform: translate3d(2px, 0, 0);
-	}
-}
-
-//floating button to open jscolor picker
-.color-edit-button {
-	position: absolute;
-	top: 3px;
-	left: 0px;
-	background: $basecolor;
-	padding: 6px 10px 3px 6px;
-	border-radius: 4px 0 0 4px;
-	cursor: pointer;
-	transition: left 0.25s;
-	z-index: -1;
-	box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.2);
-	path {
-		fill: $baseicon;
-	}
-	&:hover {
-		background: $basehover;
-		path {
-			fill: $basehovericon;
-		}
-	} //class added when jscolor is opened
-	&.hidden {
-		left: 0px !important;
-	}
-}
-
-#colors-menu li:hover .color-edit-button {
-	display: block;
-	left: -32px;
-}
-
-#colors-menu li.selected:hover .color-edit-button {
-	display: block;
-	left: -35px;
-}
-
-#tools-menu li,
-#colors-menu li {
-	position: relative;
-}
-
-#colors-menu li button {
-	height: 100%;
-	display: block;
-}
-
-.color-value {
-	display: none;
-}
-
-#add-color-button {
-	background: $basecolor;
-
-	path {
-		fill: #6f6873;
-	}
-}
-
-#tools-menu li button:first-child {
-	text-align: center;
-	border: none;
-	background: none;
-	width: 100%;
-	padding: 0;
-	cursor: pointer;
-	height: 64px;
-}
-
-#tools-menu li button path {
-	fill: $baseicon;
-}
-
-#tools-menu li:hover button:first-child path {
-	fill: $basehovericon;
-}
-
-#colors-menu li {
-	button {
-		border: none;
-		width: 100%;
-		cursor: url('/pixel-editor/eyedropper.png'), auto;
-	} //white outline
-	&.selected button::before {
-		content: "";
-		display: block;
-		position: absolute;
-		top: -3px;
-		left: -3px;
-		border: solid 3px #fff;
-		width: 100%;
-		height: 100%;
-		border-radius: 4px;
-		box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.15);
-		z-index: 10;
-	} //inner outline
-	&.selected button::after {
-		content: "";
-		display: block;
-		position: absolute;
-		top: 0;
-		left: 0;
-		border: solid 1px rgba(0, 0, 0, 0.15);
-		width: 100%;
-		height: 100%;
-		box-sizing: border-box;
-	}
-}
-
-#colors-menu li.noshrink button {
-	cursor: pointer;
-}
-
-#tools-menu li.selected {
-	background: $baseselected !important;
-}
-
-#tools-menu li.selected button:first-child path {
-	fill: $baseselectedicon;
-}
-
-#tools-menu li.selected.expanded {
-	padding-bottom: 10px;
-}
-
-#tools-menu li:hover,
-#main-menu li button:hover,
-#add-color-button:hover,
-#main-menu li.open {
-	background: $basehover;
-}
-
-.tools-menu-sub-button {
-	text-align: center;
-	border: none;
-	background: none;
-	cursor: pointer;
-	width: 50%;
-	height: 22px;
-	display: none;
-	line-height: 0;
-	overflow: hidden;
-	position: absolute;
-	bottom: 0;
-
-	path {
-		fill: $baseselectedicon !important;
-	}
-	&:hover {
-		background: $baseselectedhover !important;
-		path {
-			fill: $baseselectediconhover !important;
-		}
-	}
-}
-
-#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#ellipse-bigger-button,
-#tools-menu li button#line-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#ellipse-smaller-button,
-#tools-menu li button#line-smaller-button {
-	right: 0;
-}
-
-#tools-menu li.selected button#pencil-bigger-button,
-#tools-menu li.selected button#pencil-smaller-button,
-#tools-menu li.selected button#zoom-in-button,
-#tools-menu li.selected button#zoom-out-button,
-#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#ellipse-bigger-button,
-#tools-menu li.selected button#ellipse-smaller-button,
-#tools-menu li.selected button#line-bigger-button,
-#tools-menu li.selected button#line-smaller-button {
-	display: block;
-}
-
-#pop-up-container {
-	position: fixed;
-	z-index: 2000;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(35, 32, 36, 0.75);
-	display: none;
-	color: $basetext;
-	cursor: default;
-	&>div {
-		background: $basecolor;
-		border-radius: 3px;
-		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
-		width: 400px;
-		padding: 20px;
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		display: none;
-	}
-	h1 {
-		margin: 0 0 10px;
-		color: lighten($basecolor, 100%);
-		text-transform: uppercase;
-		font-size: 1.5em;
-	}
-	h2 {
-		margin: 25px 0 10px;
-		color: lighten($basecolor, 70%);
-		text-transform: uppercase;
-		font-size: 1em;
-	}
-	a {
-		color: $baselink;
-		border-bottom: dotted 1px transparent;
-		text-decoration: none;
-		&:hover {
-			border-bottom: dotted 1px $basetext;
-		}
-	}
-
-	.close-button {
-		width: 32px;
-		height: 32px;
-		position: absolute;
-		right: 0;
-		top: 0;
-		background: transparent;
-		border: none;
-		color: $baseicon;
-		font-weight: bold;
-		font-size: 1em;
-		cursor: pointer;
-		border-radius: 0 3px 0 0;
-		path {
-			fill: $baseicon;
-		}
-		&:hover {
-			background: $basehover;
-			path {
-				fill: $basehovericon;
-			}
-		}
-	}
-
-	div.update {
-		input {
-			background: $indent;
-			border: none;
-			border-radius: 4px;
-			color: $indenttext;
-			padding: 10px 20px;
-			margin: 0;
-			width: 60px;
-			text-align: center;
-		}
-	}
-	/*
-	input {
-		background: $indent;
-		border: none;
-		border-radius: 4px;
-		color: $indenttext;
-		padding: 10px 20px;
-		margin: 0;
-		width: 60px;
-		text-align: center;
-	}
-	*/
-
-	button.default {
-		background: $basehover;
-		border: none;
-		border-radius: 4px;
-		color: $basehovertext;
-		padding: 10px 20px;
-		cursor: pointer;
-		margin: 20px 0 0 10px;
-		&:hover {
-			background: $baseselected;
-		}
-	}
-
-	.dropdown-button {
-		background: $basehover url('/pixel-editor/dropdown-arrow.png') right center no-repeat;
-		border: none;
-		border-radius: 4px;
-		color: $basehovertext;
-		padding: 5px 20px 5px 5px;
-		cursor: pointer;
-		margin: 0;
-		width: 200px;
-		text-align: left;
-		&:hover {
-			background: $baseselected url('/pixel-editor/dropdown-arrow-hover.png') right center no-repeat;
-			color: $baseselectedtext;
-		}
-		&.selected {
-			border-radius: 4px 4px 0 0;
-		}
-	}
-
-	.dropdown-menu {
-		background: $basehover;
-		border: none;
-		color: $basehovertext;
-		padding: 0;
-		margin: -1px 0 0 0;
-		width: 200px;
-		text-align: left;
-		position: absolute;
-		border-radius: 0 0 4px 4px;
-		overflow: hidden;
-		display: none;
-		&.selected {
-			display: block;
-		}
-
-		button {
-			background: $basehover;
-			border: none;
-			color: $basehovertext;
-			padding: 5px 20px 5px 5px;
-			cursor: pointer;
-			margin: 0;
-			width: 100%;
-			text-align: left;
-			&:hover {
-				background: $baseselected;
-			}
-		}
-	}
-}
-
-.keyboard-key {
-	background: lighten($basecolor, 20%);
-	box-shadow: 0 3px 0 2px lighten($basecolor, 12%);
-	padding: 0 4px;
-	border-radius: 2px;
-	margin: 6px;
-	display: inline-block;
-	color: #c0bfc1;
-}
-
-.settings-entry {
-	display: flex;
-	align-items: baseline;
-	margin-top:10px;
-
-	label {
-		flex: 1;
-	}
-	input {
-		width: 90px !important;
-		display: block;
-		box-sizing: border-box;
-		float:right;
-	}
-}
-
-.preload {
-	display: none;
-}
-
-#new-pixel-warning {
-	display: none;
-	text-align: center;
-	margin: 20px 0 0;
-	font-style: italic;
-}
-
-.dimentions-x {
-	margin: -2px 7px;
-	path {
-		fill: $baseicon
-	}
-}
-
-.jscolor-picker-bottom {
-	display: none;
-	position: absolute;
-	left: -4px;
-	right: -4px;
-	bottom: -7px;
-	color: $basetext;
-	span {
-		margin-left: 5px;
-	}
-	input {
-		width: 64px;
-		background: $indent;
-		color: $indenttext;
-		border-radius: 4px;
-		border: none;
-		margin: 0;
-		padding: 3px 12px;
-		margin-left: 5px;
-	}
-}
-
-.delete-color-button {
-	background: none;
-	padding: 0px;
-	border: none;
-	text-align: center;
-	cursor: pointer;
-	float: right;
-	path {
-		fill: $baseicon;
-	}
-	&:hover path {
-		fill: $basehovericon;
-	}
-	&.disabled {
-		cursor: not-allowed;
-		& path {
-			fill: lighten($basecolor, 10%) !important;
-		}
-	}
-}
-
-#no-palette-button {
-	display: none;
-}
-
-#cookies-disabled-warning {
-	display: none;
-	color: $basetextweak;
-	font-style: italic;
-}
-
-#editor-mode-info {
-	font-style: italic;
-}
-
-#editor-mode {
-	display: none;
-}
-
-#resize-canvas, #resize-sprite {
-  display:flex;
-  position:relative;
-  flex-wrap:wrap;
-}
-
-#pivot-menu {
-  position: relative;
-  display:inline-flex;
-  flex-wrap:wrap;
-  vertical-align:middle;
-  text-align:center;
-  width:130px;
-  float:left;
-
-  button {
-    margin-right:10px;
-    margin-bottom:10px;
-    position:relative;
-    width:32px;
-    height:32px;
-    background:$basehover;
-	border:none;
-    
-    path {
-      fill:$basehovericon;
-    }
-    transition: background 100ms ease-in-out, 
-                transform 100ms ease;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-  }
-
-  button:hover,
-  button:focus,
-  button.rc-selected-pivot {
-      cursor:pointer;
-      background-color: $baseicon;
-      path {
-        fill:$basehovericonhover;
-      }
-      border: 2px solid color(base, foreground);
-  }
-  button:active {
-      transform: scale(0.95);
-  }
-}
-
-#borders-menu, #rc-size-menu, #rs-size-menu, #rs-percentage-menu {
-  display:flex;
-  position:relative;
-  flex-wrap: wrap;
-  width:250px;
-  font-size:15px;
-  left:10px;
-  text-align:center;
-
-  button {
-	background:$basehover;
-	border:none;
-    
-    color: $basehovericon;
-    transition: background 100ms ease-in-out, 
-                transform 100ms ease;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-  }
-
-  button:hover,
-  button:focus {
-      cursor:pointer;
-      background-color: $baseicon;
-      color:$basehovericonhover;
-      border: 2px solid color(base, foreground);
-  }
-  button:active {
-      transform: scale(0.95);
-  }
-
-  input[type=number] {
-    position:relative;
-    margin-left:10px;
-	height:15px !important;
-	width:40px !important;
-	padding:8px !important;
-  }
-
-  input[type=number]::-webkit-outer-spin-button,
-	input[type=number]::-webkit-inner-spin-button {
-	-webkit-appearance: none;
-	margin: 0;
-	}
-	/* Firefox */
-	input[type=number] {
-	-moz-appearance: textfield;
-	}
-
-  span {
-    padding-right:10px;
-    float:left;
-    position:relative;
-    vertical-align:middle;
-	height:40px;
-	width:100px;
-	display: inline-flex;
-  	align-items: center;
-  }
-}
-
-#rs-percentage-menu {
-	width: 400px;
-	span {
-		width:150px;
-	}
-}
-
-#rs-size-menu {
-	width: 400px;
-	span {
-		width:150px;
-	}
-}
-
-#rs-percentage-menu, #rs-size-menu {
-	justify-content: center;
-
-	div {
-		float: none;
-	}
-}
-
-#borders-menu {
-	width:400px;
-	justify-content: center;
-
-	div {
-		float: none;
-		width: 330px;
-		padding-left:50px;
-
-		span {
-			padding-right:20px;
-		}
-	}
-}
-
-#rs-ratio-div {
-	width:400px;
-	justify-content: center;
-	padding-left:20px;
-
-	span {
-		width:400px;
-		justify-content: center;
-	}
-
-	select {
-		height:30px;
-		background-color: $basehover;
-		color: $basehovericon;
-		border:none;
-		position:relative;
-		left:10px;
-
-		option {
-			background-color: $basehover;
-			color:$basehovericon;
-			padding:5px;
-		}
-
-		option:checked, option:hover {
-			box-shadow: 0 0 10px 100px $basehovericon inset;
-			color: $basehovericonhover;
-		}
-	}
-}
-
-#rs-keep-ratio {
-	background: color(button);
-	border: none;
-	font-size:14px;
-	color: color(button, foreground);
-	padding: 10px 20px;
-	margin: 0 auto;
-	position:relative;
-	display: block;
-}
-
-#resize-canvas-confirm, #resize-sprite-confirm {
-  background: color(button);
-  border: none;
-  font-size:18px;
-  border-radius: 4px;
-  color: color(button, foreground);
-  padding: 10px 20px;
-  cursor: pointer;
-  margin: 0 auto;
-  position:relative;
-  top:10px;
-  display: block;
-  &:hover {
-    background: color(button, background, hover);
-  }
-}
-
-#compatibility-warning {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	visibility: hidden;
-	z-index: 3000;
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(35, 32, 36, 0.92);
-	color: $basetext;
-	div {
-		position: relative;
-		width: 100%;
-		height: 100%;
-
-		div {
-			width: 400px;
-			background-color: $basecolor;
-			padding: 20px;
-			width: 400px;
-			height: 200px;
-
-			position: absolute;
-			top: 50%;
-			left: 50%;
-
-			margin: -120px 0 0 -220px;
-		}
-	}
-	a {
-		color: $baselink;
-		border-bottom: dotted 1px transparent;
-		text-decoration: none;
-		&:hover {
-			border-bottom: dotted 1px $basetext;
-		}
-	}
-	button {
-		background: $basehover;
-		border: none;
-		border-radius: 4px;
-		color: $basehovertext;
-		padding: 10px 20px;
-		cursor: pointer;
-		margin: 0 auto;
-		display: block;
-		&:hover {
-			background: $baseselected;
-		}
-	}
-}
-/***********************COLOUR PICKER*****************************/
-#colour-picker {
-	background-color:$basecolor;
-	width:250px;
-	height:350px;
-	position:absolute;
-	display:inline-block;
-
-	input[type=text] {
-		background-color:$basetext;
-		color:$basecolor;
-		box-shadow:none;
-		border:none;
-	}
-
-	input[type=range] {
-		width: 100%;
-		margin: 2.2px 0;
-		background-color: transparent;
-		-webkit-appearance: none;
-	  }
-	  input[type=range]::-webkit-slider-runnable-track {
-		background: #484d4d;
-		border: 0;
-		width: 100%;
-		height: 25.6px;
-		cursor: pointer;
-	  }
-	  input[type=range]::-webkit-slider-thumb {
-		margin-top: -2.2px;
-		width: 18px;
-		height: 30px;
-		background: $basetext;
-		border: 0;
-		cursor: pointer;
-		-webkit-appearance: none;
-	  }
-	  input[type=range]::-moz-range-track {
-		background: #484d4d;
-		border: 0;
-		width: 100%;
-		height: 25.6px;
-		cursor: pointer;
-	  }
-	  input[type=range]::-moz-range-thumb {
-		width: 18px;
-		height: 30px;
-		background: $basetextweak;
-		border: 0;
-		cursor: pointer;
-	  }
-
-	  /*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
-	  how to remove the vertical space around the range input in IE*/
-	  @supports (-ms-ime-align:auto) {
-		/* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
-		input[type=range].slider {
-		  margin: 0;
-		  /*Edge starts the margin from the thumb, not the track as other browsers do*/
-		}
-	  }	  
-}
-
-#cp-modes {
-	margin: 0 0 0 0;
-	font-size:0;
-	height:40px;
-	float:left;
-	display:flex;
-	font-family: 'Roboto', sans-serif;
-	background-color:$basetextweak;
-	width:100%;
-	
-	button {
-		font-size:14px;
-		left:0;
-		right:0;
-		margin:0 0 0 0;
-		border: none;
-		border-radius: 0;
-		height:100%;
-		width:37x;
-		background-color:$basehover;
-		color:$basetext;
-		cursor:pointer;
-	}
-
-	button:hover {
-		background-color:$baseicon;
-		color:$basetext;
-	}
-
-	button.cp-selected-mode {
-		background-color:$baseicon;
-		color:$basetext;
-	}
-
-	input {
-		width:60px;
-	}
-
-	div {
-		background-color:yellow;
-		width:100%;
-		height:100%;
-		z-index:2;
-		position:relative;
-	}
-}
-
-#sliders-container {
-	padding:10px;
-}
-
-.cp-slider-entry {
-	width:100%;
-	height:30px;
-	display:flex;
-	align-items:center;
-	margin-top:2px;
-	position:relative;
-	
-	label {
-		width: 20px;
-		font-size:15px;
-		font-style: bold;
-	}
-
-	input[type=text] {
-		text-align:center;
-		width: 30px;
-		overflow:visible;
-		margin-left:4px;
-	}
-}
-
-.colour-picker-slider {
-	width:90%;
-}
-
-#cp-minipicker {
-	width:100%;
-	height:100px;
-	position:relative;
-	margin: 0 0 0 0;
-	z-index: inherit 2000;
-
-	input {
-		width:100%;
-		margin: none;
-		padding: none;
-	}
-
-	.cp-colours-previews {
-		width:100%;
-		position:relative;
-	}
-
-	.cp-colour-preview {
-		width:100%;
-		position:relative;
-		background-color:blue;
-		color:$basecolor;
-		float:left;
-		height:30px;
-		justify-content: center;
-		display:flex;
-		align-items: center;
-		font-size:12px;
-	}
-
-	#cp-colour-picking-modes {
-		width:100%;
-		position:relative;
-	}
-
-	button {
-		font-size:14px;
-		left:0;
-		right:0;
-		margin:0 0 0 0;
-		border: none;
-		border-radius: 0;
-		height:30px;
-		width:16.66666%;
-		float:left;
-		overflow:hidden;
-		background-color:$basehover;
-		color:$basetext;
-		cursor:pointer;
-	}
-
-	button:hover {
-		background-color:$baseicon;
-		color:$basetext;
-	}
-
-	button.cp-selected-mode {
-		background-color:$baseicon;
-		color:$basetext;
-	}
-}
-
-#cp-canvas-container {
-	width:100%;
-	height:100%;
-	position:relative;
-}
-
-#cp-spectrum {
-	width:100%;
-	height:100px;
-	position:absolute;
-	background-color: transparent;
-}
-
-.cp-picker-icon{
-	width:16px;
-	height:16px;
-	border-radius:100%;
-	position:absolute;
-	background-color:white;
-	z-index:2;
-	border:2px solid black;
-}
-
-
-/***************PALETTE BLOCK****************/
-div#palette-block {
-	z-index:1000;
-	position:relative;
-	resize: horizontal;
-	margin: 0 0 0 0;
-	width:600px;
-	height:400px;
-}
-
-div#palette-container {
-	display:inline-block;
-	background-color: #232125;
-	position:absolute;
-	scrollbar-color: #332f35 #232125;
-	scroll-behavior: smooth;
-	left:300px;
-	width:300px;
-	height:320px;
-	overflow-y: scroll;
-
-	&::-webkit-scrollbar {
-		background: #232125;
-		width: 0.5em;
-	}
-	&::-webkit-scrollbar-track {
-		margin-top: -0.125em;
-		width: 0.5em;
-	}
-	&::-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;
-	}
-}
-
-ul#palette-list {
-	list-style:none;
-	margin: 0 0 0 0;
-	padding: 0 0 0 0;
-	position:relative;
-	display:inline-block;
-	
-	li {
-		float:left;
-		width:50px;
-		height:50px;
-		border:none;
-
-		min-width:20px;
-		min-height:20px;
-		max-width:75px;
-		max-height:75px;
-	}
-}
-
-
-div#pb-options {
-	position:relative;
-	left:280px;
-	height:30px;
-	width:300px;
-	top:300px;
-
-	button {
-		border-radius:none;
-		position:relative;
-		float:left;
-		width:50%;
-		height:100%;
-		text-align:center;
-		cursor: pointer;
-		font-size:16px;
-		background-color:$baseicon;
-		border:none;
-	}
-
-	button:hover {
-		color: $basehovertext;
-		background-color: $basehover;
-	}
-}
-
-/********SPLASH PAGE*************/
-#splash {
-	width:100% !important;
-	height:100%!important;
-
-	background-color: #232125 !important;
-	opacity: 1 !important;
-
-	#splash-input {
-		width:74%;
-		height:100% !important;
-		color:$baselink;
-
-		#splash-menu {
-			position:relative;
-			height:100%;
-			left:0;
-			top:0;
-		}
-
-		#editor-logo {
-			font-weight:bold;
-			text-transform:uppercase;
-			font-size:20px;
-			height:35vh;
-			width:100%;
-			position:relative;
-
-			background-image:url('https://cdn.discordapp.com/attachments/506277390050131978/795660870221955082/final.png');
-			background-size:cover;
-			background-position:center;
-			background-repeat:no-repeat;
-		}
-
-		#black {
-			width:100%;
-			height:100%;
-			position:relative;
-			background-color:rgba(0,0,0,0.2);
-		}
-
-		#sp-coverdata {
-			padding:20px;
-			
-			p, a {
-				font-size:15px;
-				position:absolute;
-				text-transform:none;
-				right:20px;
-			}
-
-			p {
-				top:0px;
-			}
-
-			a {
-				font-size:17px;
-				bottom:20px;
-				text-decoration:underline;
-			}
-		}
-	}
-	
-	#sp-quickstart-container {
-		height:100%;
-		max-height: 500px;
-		width:70%;
-		float:right;
-		padding:40px;
-
-		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
-		box-sizing: border-box;         /* Opera/IE 8+ */
-
-		overflow-y: scroll;
-		&::-webkit-scrollbar {
-			background: #232125;
-			width: 0.5em;
-		}
-		&::-webkit-scrollbar-track {
-			margin-top: -0.125em;
-			width: 0.5em;
-		}
-		&::-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;
-		}
-	}
-
-	#sp-quickstart {
-		display:flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		height:100%;
-
-		// Fancy scrollbar
-		&::-webkit-scrollbar {
-			background: #232125;
-			width: 0.5em;
-		}
-		&::-webkit-scrollbar-track {
-			margin-top: -0.125em;
-			width: 0.5em;
-		}
-		&::-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;
-		}
-	}
-
-	#sp-quickstart-title {
-		font-size:27px;
-		text-transform: uppercase;
-		font-weight: bold;
-	}
-
-	.sp-template {
-		display: flex;
-  		align-items: center;
-		text-transform: uppercase;
-		width:16%;
-		border-radius:5%;
-		margin-right:4%;
-		margin-top:4%;
-		background-color:$basecolor;
-
-		font-size: 18px;
-		text-align:center;
-		font-weight: bold;
-
-		&:hover {
-			cursor:pointer;
-			background-color:$baseselected;
-		}
-
-		p {
-			span {
-				display:block;
-				font-size:14px !important;
-				margin: 0 0 0 0;
-				padding: 0 0 0 0;
-			}
-			width:100%;
-
-			float:left;
-			position:relative;
-		}
-	}
-
-	.sp-template:before {
-		content:'';
-		float:left;
-		padding-top:100%;
-	}
-
-	#sp-newpixel {
-		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
-		box-sizing: border-box;         /* Opera/IE 8+ */
-		display: inline-block;
-		width: 30% !important;
-		height:65vh;
-		padding:20px;
-		position:relative;
-		background-color:$basecolor;
-		
-		#palette-button-splash {
-			left:5%;
-			width:90%;
-		}
-
-		.sp-np-entry {
-			width:100%;
-			text-align:center;
-		}
-
-		input {
-			border:none;
-			background-color: #232125;
-			color:$basetext;
-			font-size:14px;
-			width:40px;
-			padding:7px;
-			text-align:center;
-		}
-
-		#create-button {
-			font-size:18px;
-			width:150px;
-			margin-top:40px;
-			font-weight: bold;
-		}
-
-		#sp-mode-palette {
-			text-align: center;
-			position: relative;
-			float:bottom;
-			font-size:16px;
-			font-weight: bold;
-	
-			div.button-menu {
-				border:2px solid $basetextweak;
-				border-radius:5px;
-				position:relative;
-				display:inline-block;
-				padding: 0 0 0 0;
-				text-align:left;
-				width:90%;
-				
-				div {
-					border:none;
-					padding:none;
-					margin:none;
-					background-color:transparent;
-					width:50%;
-					float:left;
-					text-align: center;
-					height:25px;
-					cursor:pointer;
-					z-index:1;
-
-					p {
-						z-index:0;
-						-ms-transform: translateY(-60%);
-						transform: translateY(-60%);
-					}
-				}
-	
-				.sp-interface-selected {
-					background-color: $basetextweak;
-				}
-			}
-		}
-	}
-
-	#splash-news {
-		box-sizing: border-box;
-		padding-left:20px;
-		width:26%;
-		height:100%;
-		background-color:#151516 !important;
-		float: right;
-	}
-
-	#latest-update {
-		width:100%;
-		font-size:15px;
-		height:90%;
-		line-height: 1.5;
-		position:relative;
-		top:20px;
-
-		overflow-y:scroll;
-		box-sizing: border-box;
-
-		img {
-			width:100%;
-		}
-
-		&::-webkit-scrollbar {
-			background: #232125;
-			width: 0.5em;
-		}
-		&::-webkit-scrollbar-track {
-			margin-top: -0.125em;
-			width: 0.5em;
-		}
-		&::-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;
-		}
-	}
-}
\ No newline at end of file
+@import 'shake';
+@import 'help';
+@import 'layers';
+@import 'canvas';
+@import 'main-menu';
+@import 'tools-menu';
+@import 'colors-menu';
+@import 'popup-container';
+@import 'settings';
+@import 'new-pixel';
+@import 'compatibility';
+@import 'resize-menus';
+@import 'palette-editor';
+@import 'splash-page';
\ No newline at end of file