merge

1 files changed, 167 insertions, 45 deletions

diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 849c994..89a6495 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -138,10 +138,12 @@ a{
 	display: none;
 	z-index: 10;
 	pointer-events: none;
+	background-size: cover;
 }
 .floatingSwatch.scissors {
   background-image: url(/assets/img/scissors.png) !important;
   background-repeat: no-repeat;
+  background-size: auto;
   border: 0;
   box-shadow: 0 0 transparent;
 }
@@ -414,6 +416,17 @@ iframe.embed {
 	border-top: 1px solid black;
 }
 
+.mediaDrawer .viewMore {
+	clear: both;
+	float: none;
+	text-decoration: none;
+	font-size: 22px;
+	display: block;
+	text-align: center;
+	padding: 40px;
+	border: 0;
+	border-top: 1px solid black;
+}
 
 .holder {
 	display: table-cell;
@@ -524,7 +537,7 @@ iframe.embed {
 
 .footer {
 	width: 100%;
-	padding: 80px 0;
+	padding: 100px 0 120px 0;
 	background: #f9f9f9;
 	float: left;
 	clear: both;
@@ -888,7 +901,7 @@ border-left: 1px solid black;
 
 .face {
 	background-color: #fff;
-	transition: 0.1s background-color ease;
+	transition: 0.1s background-color ease, 0.05s background-color ease;
 }
 .front { background-color: #fff; }
 .back  { background-color: #fff; }
@@ -1258,7 +1271,7 @@ border-left: 1px solid black;
 .noMedia {
   margin: 40px;
 }
-.foundMedia {
+.foundMedia, .wallpaperMedia {
   position:absolute;
   top:0;
   left:0;
@@ -1269,8 +1282,7 @@ border-left: 1px solid black;
   padding-top:40px;
   width: 100%;
 }
-
-.foundMedia.active {
+.foundMedia.active, .wallpaperMedia.active {
   -webkit-transform: translateX(0%);
   transform: translateX(0%);
 }
@@ -1433,12 +1445,12 @@ border-left: 1px solid black;
 .wallpaper, #presets {
   right: 80px;
   margin-top: 77px;
-  width: 172px;
+  width: 202px;
   -webkit-transition: -webkit-transform 0.1s ease-in-out;
   -webkit-transform: translateX(400px);
   transition: transform 0.1s ease-in-out;
   transform: translateX(400px);
-	padding: 5px 5px 9px 5px;
+	padding: 10px 12px 12px 12px;
 }
 
 #presets {
@@ -1454,10 +1466,12 @@ border-left: 1px solid black;
   height: 40px;
   display: inline-block;
   border: 1px solid;
-  background-size: contain;
+  background-size: 100%;
+  margin: 0 2px 4px 2px;
   -webkit-transition: -webkit-transform 0.1s ease-in-out;
   line-height: 0;
   vertical-align: text-bottom;
+	background-color:white;
   -webkit-user-drag: element;
 }
 .wallpaper.active .swatches .swatch:hover {
@@ -1473,6 +1487,24 @@ border-left: 1px solid black;
 	padding-bottom: 6px;
 }
 
+.vvbox .colors {
+  max-width: 155px;
+	margin-bottom: 5px;
+}
+.vvbox .colors span {
+	display: inline-block;
+	font-size: 0;
+	width: 20px;
+	height: 20px;
+	border: 1px solid #ddd;
+	margin: 0px 2px 0 0;
+	cursor: pointer;
+	transition: transform 0.2s;
+}
+.vvbox .colors span:hover {
+	transform: translateX(2px) translateY(-2px);
+}
+
 .toolButton {
 	border: 1px solid;
 	display: inline-block;
@@ -1552,21 +1584,21 @@ border-left: 1px solid black;
 
 /* COLOR PICKER */
 
-.lightcontrol {
+.colorcontrol {
   margin-top: 8%;
   right: 80px;
-  padding: 13px 20px 20px 20px;
+  padding: 10px 12px 12px 12px;
   -webkit-transform: translateX(400px);
   -webkit-transition: -webkit-transform 0.2s ease-in-out;
   transform: translateX(400px);
   transition: -webkit-transform 0.2s ease-in-out;
 }
 
-.lightcontrol.active {
+.colorcontrol.active {
   -webkit-transform: translateX(0px);
   transform: translateX(0px);
 }
-.lightcontrol .slider {  
+.colorcontrol .slider {  
 }
 h4 {
   font-weight:300;
@@ -1577,8 +1609,8 @@ input[type=range] {
   -moz-appearance: none;
   cursor: pointer;
   background-color: black;
-  width: 180px;
-  height:3px;
+  width: 155px;
+  height: 3px;
 }
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
@@ -1645,7 +1677,9 @@ input[type="range"]::-webkit-slider-thumb {
 	float:left;
 	cursor:pointer;
   border-bottom: 1px transparent solid;
+	padding: 5px;
 }
+.presets span:hover,
 .presets span.active {
 	text-decoration: underline;
 }
@@ -1666,13 +1700,19 @@ input[type="range"]::-webkit-slider-thumb {
 	width: 100%;
 	color: #555;
 }
+#presets .url {
+	margin: 4px 0;
+	padding: 2px;
+	font-size: 12px;
+	border: 1px black solid;
+	width: 100%;
+}
 
 .color-swatches span:nth-child(1),.color-swatches span:nth-child(2){
 	margin-bottom:5px;
 }
 .color-swatches span.active, .color-swatches span.active:hover{
-	background:#000;
-	color:white;
+	background: #fff;
 }
 .color-swatches span:nth-child(3){
 	clear:left;
@@ -1680,14 +1720,35 @@ input[type="range"]::-webkit-slider-thumb {
 .color-swatches span:hover {
 	background:#eee;
 }
+.color-swatches span.active label,
+.color-swatches span:hover label {
+	border-bottom: 1px solid;
+}
 
 .color-swatches label {
 	position: relative;
-	padding-left: 5px;
+  font-size: 13px;
+	margin-left: 5px;
 	display: inline-block;
 	cursor: pointer;
 }
 
+#helpCursor {
+  position: fixed;
+  max-width: 200px;
+  font-size: 15px;
+  color: black;
+  background: rgba(255,255,255,0.9);
+  margin: 8px 0 0 8px;
+  padding: 10px;
+  font-weight: 600;
+  z-index: 22;
+  display: none;
+	margin-left:-210px;
+	margin-bottom:20px;
+	border:1px solid;
+	box-shadow:3px 3px black;
+}
 
 .settings.info {
   right: auto;
@@ -1722,7 +1783,7 @@ input[type="range"]::-webkit-slider-thumb {
 .modalLink {
   text-decoration: none;
 }
-.modalLink:hover {
+.modalLink:hover span {
   text-decoration: underline;
 }
 
@@ -1736,30 +1797,41 @@ input[type="range"]::-webkit-slider-thumb {
     opacity:0.6;
   }
 }
-#startpoint.active #moveText{
+
+#moveText,
+#confirmText {
+  display: none;
+}
+#startpoint.active #moveText {
+  display:inline-block;
   -webkit-animation:fade 0.5s infinite;
   animation:fade 0.5s infinite;
 }
-#moveText{
-  display:none;
+#startpoint #goText,
+#startpoint.active #startText,
+#startpoint.active #goText,
+#startpoint.confirmed #startText {
+  display: none;
 }
-#moveText.show {
-  display:inline-block;
+#startpoint.confirmed #confirmText {
+  display: inline-block;
 }
-#startText.hide {
-  display:none;
+#startpoint.confirmed #goText {
+  display: inline-block;
 }
-#startpoint.active:after {
+#moveText .done {
   content: "done";
   background: black;
   color: white;
   padding: 2px;
   font-weight: 900;
   margin-left: 5px;
+  text-decoration: none !important;
 }
 #startpoint.active:hover {
   text-decoration:none;
 }
+
 .settings input[type="text"] {
   border: 1px solid #000;
   font-size: 15px;
@@ -2055,6 +2127,11 @@ form p{
 	margin-top: 10px;
 	color: #999;
 }
+form p.guidelines {
+	width: 200px;
+	text-align: left;
+	margin: 20px 0;
+}
 form h3 {
 	text-align: left;
 	font-weight: 600;
@@ -2089,6 +2166,7 @@ form li div div {
 }
 form li img#load_avatar {
 	max-width: 200px;
+	float: right;
 }
 form li textarea {
 	width: 100%;
@@ -2152,16 +2230,27 @@ form li textarea {
 	right: 20px;
 	top: 20px;
 	z-index: 20;
-	background: #f9f9f9;
+	background: white;
 	width: 75px;
 	color: black;
 	border: 1px solid black;
 	box-shadow: -3px 4px black;
 	line-height: 75px;
-
+	text-align: center;
+}
+#fixed_close {
+	display: none;
+	transform: translateY(-200px) translateZ(0);
+}
+#fixed_close.active {
+	animation:0.2s transform linear 1s;
+	display: block;
+	transform: translateY(0px) translateZ(0);
 }
 
 
+
+
 .desktop .close:hover {
   background:black;
 	color:white;
@@ -2511,22 +2600,55 @@ a[data-role="forgot-password"] {
 	padding: 50px 0;
 	}
 	.page .viewMore.btn {
-	text-decoration: none;
-	font-size: 18px;
-	padding: 18px 0;
-}
-.footer a, .footer span {
-margin: 9px;
-}
-#keyhint {
-	display:none;
-}
-.projectList .projectItem {
-	width:100%;
-	margin: 20px 0;
-}
-.projectList .room {
-width: 100%;
-height: 260px;
+		text-decoration: none;
+		font-size: 18px;
+		padding: 18px 0;
+	}
+	.footer a, .footer span {
+	margin: 9px;
+	}
+	#keyhint {
+		display:none;
+	}
+	.projectList .projectItem {
+		width:100%;
+		margin: 20px 0;
+	}
+	.projectList .room {
+		width: 100%;
+		height: 260px;
+	}
+	.aboutRoom {
+		width: 170px;
+		padding: 6px 8px 8px 8px;
+	}
+	.aboutRoom h2 {
+	font-size: 13px;
+	margin: 1px 0 0 0;
+	}
+	.aboutRoom h1 a, .aboutRoom h1 {
+		font-size: 16px;
+	}
 }
+
+@media screen and (orientation:portrait) {
+		.aboutRoom {
+			display:none;
+		}
+		body:after{
+			content:"Hey there! For best viewing we suggest flipping your device sideways and spinning around in circles :)";
+			z-index: 3;
+			border: 1px solid;
+			position: fixed;
+			display: inline-block;
+			background: white;
+			box-shadow: -3px 3px;
+			width: 170px;
+			background: rgba(255,255,255,0.95);
+			padding: 6px 8px 8px 8px;
+			position: fixed;
+			bottom: 10px;
+			left: 10px;
+			border: 1px solid;
+		}
 }
\ No newline at end of file