From 71204da8f853181c2165a99c28ebfaf6bd143737 Mon Sep 17 00:00:00 2001
From: Sam Keddy <sam@samkeddy.com>
Date: Wed, 9 Sep 2020 04:00:08 +0000
Subject: [PATCH] removed _colors.scss dependency

---
 _ext/sass/_colors.scss |  184 -----
 css/pixel-editor.scss  | 1508 ++++++++++++++++++++--------------------
 2 files changed, 768 insertions(+), 924 deletions(-)
 delete mode 100644 _ext/sass/_colors.scss

diff --git a/_ext/sass/_colors.scss b/_ext/sass/_colors.scss
deleted file mode 100644
index 0d14c89..0000000
--- a/_ext/sass/_colors.scss
+++ /dev/null
@@ -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;
diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss
index 201d947..d0f12e4 100644
--- a/css/pixel-editor.scss
+++ b/css/pixel-editor.scss
@@ -1,668 +1,695 @@
-@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);
-  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*/
+	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*/
 }
 
 #layer-properties-menu {
-  visibility:hidden;
-  margin: 0;
-  padding: 0;
-  top: 0;
-  right: 0;
-  width:120px;
-  text-align:center;
-  
-  margin-right:200px;
-  /*border:1px solid color(menu, foreground);*/
+	visibility: hidden;
+	margin: 0;
+	padding: 0;
+	top: 0;
+	right: 0;
+	width: 120px;
+	text-align: center;
 
-  list-style:none;
-  position:relative;
-  z-index:1200;
-  list-style-type: none;
-  
-  background-color: color(base);
-  position: fixed;
-  overflow: visible;
+	margin-right: 200px;
+	/*border:1px solid $basetext;*/
+	list-style: none;
+	position: relative;
+	z-index: 1200;
+	list-style-type: none;
 
-  li button {
-    color: color(menu, foreground);
-    height: 100%;
-    padding: 10px;
-    background: none;
-    border: none;
-    cursor: pointer;
-    width:100%;
-  }
+	background-color: $basecolor;
+	position: fixed;
+	overflow: visible;
 
-  li button:hover {
-    background-color:color(menu, background);
-  }
+	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+           */
+	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: color(base);
-  box-sizing: border-box;
-  position: fixed;
-  z-index: 1120;
-  list-style-type: none;
-  overflow-y:scroll;
-  overflow-x:hidden;
+	&::-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; // TODO: make the scroll bar a bit fancier
+	#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;
+	}
 
-  // TODO: make the scroll bar a bit fancier
-
-  #add-layer-button {
-    path {
-      fill:color(menu, foreground);
-    }
-    svg {
-      position:relative;
-      margin-right:10px;
-    }
-    position:relative;
-    justify-content: center;
-    display:flex;
-    align-items:center;
-    margin-top:2px;
-    font-size: 1.2em;
-    color: color(menu, foreground);
-    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);
-  }
+	#add-layer-button:hover {
+		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;
-  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;
+	cursor: pointer;
+	margin-top: 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;
+	ul.layer-buttons {
+		top: 0;
+		left: 0;
+		margin: 0;
+		padding: 0;
+		box-sizing: border-box;
+		position: relative;
+		height: 100%;
+		list-style: none;
 
-    path {
-      fill: color(base, foreground);
-    }
-    li:hover {
-      background: color(base, background, hover);
-      path {
-        fill: color(base, foreground, hover);
-      }
-    }
+		path {
+			fill: $basehovericon;
+		}
+		li:hover {
+			path {
+				fill: $basehovericonhover;
+			}
+		}
 
-    .layer-button {
-      visibility:hidden;
-      height:50%;
-    }
-  }
+		.layer-button {
+			visibility: hidden;
+			height: 50%;
+		}
+	}
 
-  .lock-layer-button, .hide-layer-button {
-    color: color(menu, foreground);
-    background: none;
-    border: none;
-    cursor: pointer;
-    background-color: color(menu);
-    transition: color 0.2s, background-color 0.2s;
-    height:100%;
-    position:relative;
-  }
+	.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;
-  }
+	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;
-  }
+	p {
+		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
 svg {
-  pointer-events: none;
-  path {
-    pointer-events: none;
-  }
+	pointer-events: none;
+	path {
+		pointer-events: none;
+	}
 }
 
 //remove blue outline in chrome
 *:focus {
-  outline: 0 !important;
+	outline: 0 !important;
 }
 
 .weak {
-  font-size: 0.8em;
-  color: color(base,foreground,weak);
+	font-size: 0.8em;
+	color: $basetextweak;
 }
 
 .drawingCanvas {
-  cursor: url('/pixel-art-where-to-start/pencil-tool-cursor.png');
+	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+           */
-  width: 400px;
-  height: 400px;
-  position: fixed;
-  display:none;
-  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.64);
-  background-color:transparent;
+	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;
+	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 {
-  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);
-  }
+	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);
-  }
+	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: none;
-  position: fixed;
-  display: block;
+	bottom: 0px;
+	left: 64px;
+	right: 48px;
+	top: 48px;
+	cursor: none;
+	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;
+	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: color(base);
-  position: fixed;
-  z-index: 1110;
-  overflow: visible;
-  &>li {
-    float: left;
-    height: 100%;
-  }
-  li button, li a {
-    color: color(menu, foreground);
-    height: 100%;
-    padding: 17px;
-    background: none;
-    border: none;
-    cursor: pointer;
-  }
-  li.selected {
-    background-color: color(menu);
-    &>button {
-      color: color(menu, foreground, hover);
-    }
-    ul {
-      display: block;
-    }
-  }
-  li ul {
-    display: none;
-    position: absolute;
-    top: 48px;
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-    background-color: color(menu);
-    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: color(menu, background, hover);
-          color: color(menu, foreground, hover);
-        }
-      }
-      a {
-        display: block;
-        text-decoration: none;
-        box-sizing: border-box;
-      }
-    }
-  }
-  .disabled {
-    color: #6f6e70 !important;
-  }
+	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: #6f6873;
-  text-transform: uppercase;
-  font-weight: bold;
-  padding: 17px 10px 0;
-  cursor: default;
-  box-sizing: border-box;
+	color: lighten($basecolor, 20%);
+	text-transform: uppercase;
+	font-weight: bold;
+	padding: 17px 10px 0;
+	cursor: default;
+	box-sizing: border-box;
 }
 
 #data-holders {
-  display: none;
+	display: none;
 }
 
 #tools-menu,
 #colors-menu {
-  list-style-type: none;
-  top: 48px;
-  bottom: 0;
-  padding: 0;
-  margin: 0;
-  background-color: color(base);
-  box-sizing: border-box;
-  position: fixed;
-  z-index: 1120;
+	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;
+	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;
+	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;
-    }
-  }
+		&: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;
-  }
+	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;
+	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);
-  }
+	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: color(base);
-  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: color(base, foreground);
-  }
-  &:hover {
-    background: color(base, background, hover);
-    path {
-      fill: color(base, foreground, hover);
-    }
-  }
-  //class added when jscolor is opened
-  &.hidden {
-    left: 0px !important;
-  }
+	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;
+	display: block;
+	left: -32px;
 }
 
 #colors-menu li.selected:hover .color-edit-button {
-  display: block;
-  left: -35px;
+	display: block;
+	left: -35px;
 }
 
 #tools-menu li,
 #colors-menu li {
-  position: relative;
+	position: relative;
 }
 
 #colors-menu li button {
-  height: 100%;
-  display: block;
+	height: 100%;
+	display: block;
 }
 
 .color-value {
-  display: none;
+	display: none;
 }
 
 #add-color-button {
-  background: color(base);
+	background: $basecolor;
 
-  path {
-    fill: #6f6873;
-  }
+	path {
+		fill: #6f6873;
+	}
 }
 
 #tools-menu li button:first-child {
-  text-align: center;
-  border: none;
-  background: none;
-  width: 100%;
-  padding: 0;
-  cursor: pointer;
-  height: 64px;
+	text-align: center;
+	border: none;
+	background: none;
+	width: 100%;
+	padding: 0;
+	cursor: pointer;
+	height: 64px;
 }
 
 #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 {
-  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;
-  }
+	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;
+	cursor: pointer;
 }
 
 #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 {
-  padding-bottom: 10px;
+	padding-bottom: 10px;
 }
 
 #tools-menu li:hover,
 #main-menu li button:hover,
 #add-color-button:hover,
 #main-menu li.open {
-  background: color(base, background, hover);
+	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;
+	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: color(subbutton, foreground) !important;
-  }
-  &:hover {
-    background: color(subbutton, background, hover) !important;
-    path {
-      fill: color(subbutton, foreground, hover) !important;
-    }
-  }
+	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{
-  left: 0;
+#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{
-  right: 0;
+#tools-menu li button#rectangle-smaller-button {
+	right: 0;
 }
 
 #tools-menu li.selected button#pencil-bigger-button,
@@ -672,302 +699,303 @@ 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{
-  display: block;
+#tools-menu li.selected button#rectangle-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: color(base, foreground, text);
-  cursor: default;
-  &>div {
-    background: color(base);
-    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: color(base, foreground, h1);
-    text-transform: uppercase;
-    font-size: 1.5em;
-  }
-  h2 {
-    margin: 25px 0 10px;
-    color: color(base, foreground, h2);
-    text-transform: uppercase;
-    font-size: 1em;
-  }
-  a {
-    color: color(base, foreground, link);
-    border-bottom: dotted 1px transparent;
-    text-decoration: none;
-    &:hover {
-      border-bottom: dotted 1px color(base, foreground, text);
-    }
-  }
+	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: color(base, foreground);
-    font-weight: bold;
-    font-size: 1em;
-    cursor: pointer;
-    border-radius: 0 3px 0 0;
-    path {
-      fill: color(base, foreground);
-    }
-    &:hover {
-      background: color(base, background, hover);
-      path {
-        fill: color(base, foreground, hover);
-      }
-    }
-  }
+	.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;
+			}
+		}
+	}
 
-  button.default {
-    float: right;
-    background: color(button);
-    border: none;
-    border-radius: 4px;
-    color: color(button, foreground);
-    padding: 10px 20px;
-    cursor: pointer;
-    margin: 20px 0 0 10px;
-    &:hover {
-      background: color(button, background, hover);
-    }
-  }
+	button.default {
+		float: right;
+		background: $basehover;
+		border: none;
+		border-radius: 4px;
+		color: $basehovertext;
+		padding: 10px 20px;
+		cursor: pointer;
+		margin: 20px 0 0 10px;
+		&:hover {
+			background: $baseselected;
+		}
+	}
 
-  input {
-    background: color(indent);
-    border: none;
-    border-radius: 4px;
-    color: color(indent, foreground);
-    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;
+	}
 
-  .dropdown-button {
-    background: color(button) url('/pixel-editor/dropdown-arrow.png') right center no-repeat;
-    border: none;
-    border-radius: 4px;
-    color: color(button, foreground);
-    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;
-    }
-    &.selected {
-      border-radius: 4px 4px 0 0;
-    }
-  }
+	.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: color(button);
-    border: none;
-    color: color(button, foreground);
-    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;
-    }
+	.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: color(button);
-      border: none;
-      color: color(button, foreground);
-      padding: 5px 20px 5px 5px;
-      cursor: pointer;
-      margin: 0;
-      width: 100%;
-      text-align: left;
-      &:hover {
-        background: color(button, background, hover);
-      }
-    }
-  }
+		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($base-color, 20%);
-  box-shadow: 0 3px 0 2px lighten($base-color, 12%);
-  padding: 0 4px;
-  border-radius: 2px;
-  margin: 6px;
-  display: inline-block;
-  color: #c0bfc1;
+	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-container {
-  display: flex;
-  align-items: baseline;
-  label {
-    flex: 1;
-  }
-  input {
-    width: 90px !important;
-    display: block;
-    box-sizing: border-box;
-  }
+	display: flex;
+	align-items: baseline;
+	label {
+		flex: 1;
+	}
+	input {
+		width: 90px !important;
+		display: block;
+		box-sizing: border-box;
+	}
 }
 
 .preload {
-  display: none;
+	display: none;
 }
 
 #new-pixel-warning {
-  display: none;
-  text-align: center;
-  margin: 20px 0 0;
-  font-style: italic;
+	display: none;
+	text-align: center;
+	margin: 20px 0 0;
+	font-style: italic;
 }
 
 .dimentions-x {
-  margin: -2px 7px;
-  path {
-    fill: color(base, foreground)
-  }
+	margin: -2px 7px;
+	path {
+		fill: $baseicon
+	}
 }
 
 .jscolor-picker-bottom {
-  display: none;
-  position: absolute;
-  left: -4px;
-  right: -4px;
-  bottom: -7px;
-  color: color(base, foreground, text);
-  span {
-    margin-left: 5px;
-  }
-  input {
-    width: 64px;
-    background: color(indent);
-    color: color(indent, foreground);
-    border-radius: 4px;
-    border: none;
-    margin: 0;
-    padding: 3px 12px;
-    margin-left: 5px;
-  }
+	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: color(base, foreground);
-  }
-  &:hover path {
-    fill: color(base, foreground, hover);
-  }
-  &.disabled {
-    cursor: not-allowed;
-    & path {
-      fill: color(base, foreground, disabled) !important;
-    }
-  }
+	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;
+	display: none;
 }
 
 #cookies-disabled-warning {
-  display: none;
-  color: color(base, foreground, weak);
-  font-style: italic;
+	display: none;
+	color: $basetextweak;
+	font-style: italic;
 }
 
 #editor-mode-info {
-  font-style:italic;
+	font-style: italic;
 }
 
 #editor-mode {
-  display:none;
+	display: none;
 }
 
 #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: color(base, foreground, text);
-  div {
-    position: relative;
-    width: 100%;
-    height: 100%;
+	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: color(base);
-      padding: 20px;
-      width: 400px;
-      height: 200px;
+		div {
+			width: 400px;
+			background-color: $basecolor;
+			padding: 20px;
+			width: 400px;
+			height: 200px;
 
-      position: absolute;
-      top: 50%;
-      left: 50%;
+			position: absolute;
+			top: 50%;
+			left: 50%;
 
-      margin: -120px 0 0 -220px;
-    }
-  }
-  a {
-    color: color(base, foreground, link);
-    border-bottom: dotted 1px transparent;
-    text-decoration: none;
-    &:hover {
-      border-bottom: dotted 1px color(base, foreground, text);
-    }
-  }
-  button {
-    background: color(button);
-    border: none;
-    border-radius: 4px;
-    color: color(button, foreground);
-    padding: 10px 20px;
-    cursor: pointer;
-    margin: 0 auto;
-    display: block;
-    &:hover {
-      background: color(button, background, hover);
-    }
-  }
+			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;
+		}
+	}
 }
\ No newline at end of file