color picker thingie

1 files changed, 45 insertions, 16 deletions

diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index b1be797..ff35ca4 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -636,6 +636,9 @@ iframe.embed {
 	background-size: 100% 100%;
 }
 
+
+/* AUTOSAVE MONITOR */
+
 #minotaur {
   position: absolute;
   top: 26px;
@@ -655,6 +658,7 @@ iframe.embed {
   content: 'SAVING';
 }
 
+
 .rapper {
   position:relative;
 }
@@ -1092,6 +1096,9 @@ iframe.embed {
 	transition:opacity 0.3s ease-in-out;
 }
 
+
+/* WALLPAPER PICKER */
+
 .wallpaper{
   right: 80px;
   margin-top: 77px;
@@ -1149,6 +1156,9 @@ iframe.embed {
   transform: translateX(3px) translateY(-3px);
 }
 
+
+/* COLOR PICKER */
+
 .lightcontrol {
   margin-top: 13%;
   right: 80px;
@@ -1158,35 +1168,54 @@ iframe.embed {
   transform: translateX(400px);
   transition: -webkit-transform 0.2s ease-in-out;
 }
-
 .lightcontrol.active {
   -webkit-transform: translateX(0px);
   transform: translateX(0px);
 }
-
-.lightcontrol .slider {
-  
+.lightcontrol .slider {  
 }
 h4 {
   font-weight:300;
   font-size:11px;
 }
 input[type=range] {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    background-color: black;
-    width: 180px;
-    height:3px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-color: black;
+  width: 180px;
+  height:3px;
 }
-
 input[type="range"]::-webkit-slider-thumb {
-     -webkit-appearance: none;
-    background-color: #000;
-    width: 10px;
-    height: 10px;
-    border-radius:10px;
-    cursor:pointer;
+  -webkit-appearance: none;
+  background-color: #000;
+  width: 10px;
+  height: 10px;
+  border-radius:10px;
+  cursor:pointer;
 }
+.colorPicker {
+  cursor: crosshair;
+}
+.swatch {
+  width: 20px;
+  height: 20px;
+  border: 1px solid black;
+  display: inline-block;
+}
+.swatch.selected {
+  border-width: 2px;
+}
+.color-swatches {
+  margin-top: 10px;
+}
+.color-swatches label {
+  font-size: 11px;
+  font-weight: 300;
+  position: relative;
+  top: -6px;
+  margin-right: 15px;
+}
+
 
 .settings.info {
   right: auto;