merge

1 files changed, 217 insertions, 68 deletions

diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 1c48eee..c2e7119 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -544,6 +544,13 @@ iframe.embed {
 .mx-scenery {
   cursor: pointer;
 }
+.editing .mx-scenery:hover,
+.editing .mx-scenery.picked {
+  border: 1px dashed #000;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
 .mx-scenery:active {
   cursor: pointer;
 }
@@ -629,6 +636,9 @@ iframe.embed {
 	background-size: 100% 100%;
 }
 
+
+/* AUTOSAVE MONITOR */
+
 #minotaur {
   position: absolute;
   top: 26px;
@@ -648,6 +658,7 @@ iframe.embed {
   content: 'SAVING';
 }
 
+
 .rapper {
   position:relative;
 }
@@ -757,13 +768,13 @@ iframe.embed {
   content:"show map";
 }
 .fixed {
-  position:fixed;
-  top:0;
-  left:0;
-  width:100%;
-  height:100%;
-  z-index:3;
-  overflow-y:scroll;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 3;
+  overflow-y: scroll;
 }
 
 .fixed::-webkit-scrollbar {
@@ -783,7 +794,7 @@ iframe.embed {
 }
 
 .fixed::-moz-scrollbar-track {
-  background:white;
+  background: white;
 }
 
 .fixed::-moz-scrollbar-thumb{
@@ -1085,14 +1096,17 @@ iframe.embed {
 	transition:opacity 0.3s ease-in-out;
 }
 
-.wallpaper{
+
+/* WALLPAPER PICKER */
+
+.wallpaper {
   right: 80px;
   margin-top: 77px;
   width: 162px;
   z-index: 1;
   -webkit-transition: -webkit-transform 0.1s ease-in-out;
   -webkit-transform: translateX(400px);
-  transition: -webkit-transform 0.1s ease-in-out;
+  transition: transform 0.1s ease-in-out;
   transform: translateX(400px);
 }
 .wallpaper.active {
@@ -1100,48 +1114,73 @@ iframe.embed {
   -webkit-transform: translateX(0px);
   transform: translateX(0px);
 }
-.wallpaper.active span {
+.wallpaper.active .swatches .swatch {
   width: 40px;
-  height: 35px;
+  height: 40px;
   display: inline-block;
-  float: left;
-  border:1px solid;
-  background: url(../img/MacPaint.gif);
+  border: 1px solid;
+  background-size: contain;
   -webkit-transition: -webkit-transform 0.1s ease-in-out;
+  line-height: 0;
+  vertical-align: text-bottom;
   -webkit-user-drag: element;
 }
-
-.wallpaper.active span:nth-child(1){
-  background-position:103px 70px;
+.wallpaper.active .swatches .swatch:hover {
+  cursor: pointer;
+  -webkit-transform: translateX(3px) translateY(-3px);
+  transform: translateX(3px) translateY(-3px);
 }
-.wallpaper.active span:nth-child(2){
-  background-position:200px -98px;
+.wallpaper .swatches {
+  width: 100%;
+  border-bottom: 1px solid black;
+  min-height: 30px;
 }
-.wallpaper.active span:nth-child(3){
-  background-position:200px -260px;
+.wallpaperUpload {
+  font-size: 14px;
+  font-weight: 300;
 }
-.wallpaper.active span:nth-child(4){
-  background-position:200px -350px;
+.wallpaperUpload label {
+  position: relative;
+  top: -6px;
+  float: none;
 }
-.wallpaper.active span:nth-child(5){
-  background-position:200px -484px;
+.wallpaperUpload .icon-ios7-upload-outline {
+  font-size: 26px;
 }
-.wallpaper.active span:nth-child(6){
-  background-position:200px -581px;
+.wallpaperUpload .upload-icon.uploading {
 }
-.wallpaper.active span:nth-child(7){
-  background-position:200px -645px;
+.wallpaperUpload .upload-icon.uploading:before {
+	content: ' ' !important;
+	background-image: url("/assets/img/loader.gif");
+	background-repeat: no-repeat;
+	width: 40px;
+	height: 40px;
 }
-.wallpaper.active span:nth-child(8){
-  background-position:200px -772px;
+.wallpaperUpload input[type="text"]{
+  border: 1px solid #ccc;
+  font-size: 15px;
+  padding: 5px;
+  width: 100px;
+  text-align: center;
+  border-radius: 20px;
 }
-
-.wallpaper.active span:hover {
-  cursor: pointer;
-  -webkit-transform: translateX(3px) translateY(-3px);
-  transform: translateX(3px) translateY(-3px);
+.wallpaperUpload input[type="text"]:focus{
+  border: 1px solid #000;
+}
+.wallpaperUpload input[type="file"]{
+  position: absolute;
+  margin-left: -134px;
+  background: blue;
+  height: 28px;
+  width: 100%;
+  margin-top: 0px;
+  opacity: 0;
+  cursor:pointer;
 }
 
+
+/* COLOR PICKER */
+
 .lightcontrol {
   margin-top: 13%;
   right: 80px;
@@ -1151,35 +1190,61 @@ 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;
+  cursor: pointer;
+}
+.swatch.selected {
+  border-width: 2px;
+}
+.color-swatches {
+  margin-top: 10px;
+}
+.color-swatches label {
+  font-size: 11px;
+  font-weight: 300;
+  position: relative;
+  top: -6px;
+  padding-left: 5px;
+  display: inline-block;
+  min-width: 35px;
+  cursor: pointer;
+}
+.color-swatches label.selected {
+  font-weight: 500;
+}
+
 
 .settings.info {
   right: auto;
@@ -1202,13 +1267,13 @@ input[type="range"]::-webkit-slider-thumb {
   transform: translateY(0px);
 }
 
-#startpoint {
+.modalLink {
   text-decoration: none;
 }
-
-#startpoint:hover {
+.modalLink:hover {
   text-decoration: underline;
 }
+
 @-webkit-keyframes fade {
   50% {
     opacity:0.6;
@@ -1270,7 +1335,7 @@ input[type="range"]::-webkit-slider-thumb {
   width: 100%;
   margin-top: 10px;
 }
-.settings .subButtons a{
+.settings .subButtons a {
   font-size: 12px;
   font-weight: 300;
   width: 40px;
@@ -1552,12 +1617,16 @@ form li textarea {
   cursor: pointer;
   position: fixed;
   right: 20px;
+  top: 20px;
+  z-index: 20;
 }
 
 .close:hover {
   color:lightgreen;
 }
 
+
+
 .facebook {
   width: 100%;
   display: inline-block;
@@ -1614,6 +1683,12 @@ form li textarea {
   text-decoration:underline;
 }
 
+.aboutRoom .editlink {
+  color: red;
+  text-decoration: none;
+  border-bottom: 1px dotted;
+}
+
 .aboutRoom h2{
   font-size: 13px;
   margin: 5px 0;
@@ -1645,26 +1720,100 @@ form li textarea {
 .share a:hover{
   text-decoration:underline;
 }
-@-webkit-keyframes borderanimation
-{
+
+/* COLLABORATORS */
+
+.collaborators > div {
+  width: 600px;
+  margin: 0 auto;
+  text-align: left;
+  background: white;
+  padding: 10px;
+  margin: 20px auto;
+}
+.collaborators button {
+  width: auto;
+  position: relative;
+  top: -2px;
+}
+.collaborators form {
+  max-width: none;
+}
+.collaborators form input[type=submit] {
+  float: none;
+  width: 150px;
+  position: relative;
+  top: -2px;
+  font-size: 11px;
+
+  padding: 8px;
+  border: 1px solid;
+  font-weight: 500;
+  background: white;
+  cursor: pointer;
+}
+.collaborators form input[type=submit]:hover {
+  background-color: black;
+  border-color: black;
+}
+.collaborators p {
+  margin: 20px 0;
+}
+.collaborators form input[type=text] {
+  font-size: 16px;
+  width: 300px;
+}
+.collaborators h2 {
+  margin: 20px auto 10px;
+}
+#collaborator-list {
+  margin-top: 20px;
+}
+#collaborator-list li {
+  list-style-type: none;
+  background: #fff;
+  padding-top: 4px;
+}
+#collaborator-list .avatar {
+  width: 32px;
+  height: 32px;
+  background-size: cover;
+  display: inline-block;
+  margin-right: 10px;
+}
+#collaborator-list .username {
+  position: relative;
+  top: -10px;
+}
+#collaborator-list .role {
+  float: right;
+  font-style: italic;
+  margin-top: 5px;
+  font-weight: 300;
+}
+#collaborator-list .email {
+  line-height: 31px;
+  position: relative;
+  left: 42px;
+  font-weight: 300;
+  font-style: italic;
+}
+
+/* MARCHING ANTS ANIMATION */
+
+@-webkit-keyframes borderanimation {
   0%{width:600px;}
   100%{width:750px;left:2px;}
 }
-
-@-webkit-keyframes borderanimationleftright
-{
+@-webkit-keyframes borderanimationleftright {
   0%{height:250px;}
   100%{height:500px;top:2px;}
 }
-
-@keyframes borderanimation
-{
+@keyframes borderanimation {
   0%{width:500px;}
   100%{width:750px;left:2px;}
 }
-
-@keyframes borderanimationleftright
-{
+@keyframes borderanimationleftright {
   0%{height:250px;}
   100%{height:500px;top:2px;}
 }