summaryrefslogtreecommitdiff
path: root/public/assets/stylesheets/app.css
diff options
context:
space:
mode:
Diffstat (limited to 'public/assets/stylesheets/app.css')
-rwxr-xr-xpublic/assets/stylesheets/app.css2431
1 files changed, 2054 insertions, 377 deletions
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index ebc21a8..7dda058 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1,15 +1,23 @@
-@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
*{
margin:0;
padding:0;
outline:0;
- font-family: 'Lato', sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
- -webkit-user-select: none;
- -moz-user-select: none;
- user-select: none;
}
+body,textarea,input {
+ font-family: 'Lato', sans-serif;
+}
+input:-webkit-autofill {
+ -webkit-box-shadow: 0 0 0px 1000px white inset;
+}
+.mobile input {
+ -webkit-appearance: none;
+ border-radius:0;
+}
+
+
+
*, *:before, *:after {
moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
@@ -17,13 +25,39 @@ body{
overflow-x:hidden;
}
+body.editing{
+ overflow:hidden;
+}
+
+::-moz-selection {
+ color: white;
+ background: black;
+}
+
+::selection {
+ color: white;
+ background: black;
+}
+
+body.editing *{
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+}
+
+body.editing input {
+ -webkit-user-select: auto;
+}
+
body.noOverflow{
overflow:hidden;
}
-body.loading * {
- -webkit-transition: all 0 ease 0 !important;
- transition: all 0 ease 0 !important;
+body.loading *,
+body.loading .animate {
+ opacity: 0.2;
+ -webkit-transition: none !important;
+ transition: none !important;
}
html, body {
@@ -40,8 +74,130 @@ body.pastePaper .wallpaper.active span:hover{
cursor:url(../img/paintbucket.png), auto;
}
-a{
+a {
color:black;
+ text-decoration: none;
+}
+
+#header {
+ position: fixed;
+ width: 100%;
+ top: 0;
+ left: 0;
+ z-index: 6;
+}
+.desktop #header.black .logo:hover {
+ background: white;
+}
+.desktop #header.black .logo:hover path {
+ fill: black;
+}
+#header.black path {
+ fill: white;
+}
+#header.black .topLinks a {
+ color: white;
+}
+.desktop #header.black .topLinks a:hover {
+ color: black;
+ background-color: white;
+}
+.desktop #header.black a#help-button:hover {
+ background-color: transparent;
+ text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
+}
+
+.videoModal {
+ position: relative;
+ width: 0;
+ height: 0;
+ background: rgba(255,255,255,0);
+ display: table;
+ opacity:0;
+ z-index: -1;
+ top:-100%;
+ left:-100%;
+ overflow:hidden;
+ -webkit-transition:0.4s background;
+ -moz-transition:0.4s background;
+ transition:0.4s background;
+ display:none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+}
+
+.videoModal.active {
+ position: fixed;
+ display:table;
+ opacity:1;
+ z-index: 6;
+ width: 100%;
+ height: 100%;
+ top:0;
+ left:0;
+ background: rgba(255,255,255,0.9);
+}
+
+.videoModal .ion-ios-close-empty {
+ position: absolute;
+ right: 50px;
+ top: 10px;
+ font-size: 80px;
+ cursor:pointer;
+ color:#444;
+}
+
+.desktop .videoModal .ion-ios-close-empty:hover {
+ color:black;
+}
+
+#help-button {
+ display: none;
+ border-right:0px!important;
+}
+.profileLink {
+ border-right:0px!important;
+}
+.editing #help-button {
+ display: inline;
+}
+.topLinks a.ion-help-circled {
+ font-size: 24px;
+ padding: 18px 27px 0 8px;
+}
+@-moz-keyframes redpulse {
+ 50%{
+ color:#f24444;
+ }
+}
+@keyframes redpulse {
+ 50%{
+ color:#f24444;
+ }
+}
+@-webkit-keyframes redpulse {
+ 50%{
+ color:#f24444;
+ }
+}
+
+.topLinks a.ion-help-circled.active {
+ -webkit-animation:1s redpulse infinite linear;
+ -moz-animation:1s redpulse infinite linear;
+ animation:1s redpulse infinite linear;
+}
+.topLinks a.ion-help-circled.active,
+.desktop .topLinks a.ion-help-circled:hover {
+ background:transparent;
+ color:red;
+}
+
+.page #header {
+ background: white;
+ border-bottom: 1px solid;
}
/*page*/
@@ -57,9 +213,6 @@ a{
cursor: -moz-grabbing;
}
-.floatimgImg.edit {
-
-}
.floatingSwatch {
width: 50px;
@@ -70,10 +223,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;
}
@@ -162,18 +317,112 @@ h5 {
.page {
text-align:center;
+ background:#f9f9f9;
}
.page.profile {
color:white;
}
-
+.profilepage {
+ margin-top:63px;
+}
.page .profilepage,
.page .projectList {
- width: 100%;
- margin: 40px 0 0 0;
- border-spacing: 0;
- clear: both;
+ width: 100%;
+ clear: both;
+ float:left;
+ display: inline-block;
+}
+
+.projectList {
+ border-top: 1px solid;
+}
+
+
+.projectList.about {
+ text-align: left;
+ border-top: 1px solid;
+ padding:10% 0;
+ margin-bottom:20px;
+}
+
+.projectList.about .item{
+ float: left;
+ width: 100%;
+ clear: both;
+}
+
+.projectList.about .item .rap {
+ max-width: 1500px;
+ margin: 0 auto;
+ padding: 0 10%;
+}
+
+.projectList.about .item span{
+ display: inline-block;
+ float: left;
+}
+
+.projectList.about .item span words {
+ max-width: 90%;
+ display: inline-block;
+ line-height: 28px;
+ font-size: 17px;
+ font-weight: 300;
+}
+
+.projectList.about.howto .item span words {
+ line-height: 43px;
+ font-size: 24px;
+}
+
+.projectList.about .item span:nth-child(1){
+ width: 300px;
+ height: 300px;
+ display: inline-block;
+ float: left;
+ border-radius: 300px;
+ background-size:cover;
+ background-position:center;
+}
+
+.projectList.about.howto .item span:nth-child(1){
+ width: 300px;
+ height: 300px;
+ display: inline-block;
+ float: left;
+ border-radius: 0;
+ background-size:cover;
+ background-position:center;
+ border: 1px solid;
+ box-shadow: 2px 2px black;
+}
+
+.projectList.about .item span h3{
+ font-weight: 500;
+ font-size: 25px;
+ margin-bottom: 8px;
+}
+
+.projectList.about .item span:nth-child(2){
+ width: calc(100% - 300px);
+ padding: 70px 50px;
+}
+
+
+.projectList.about .item:nth-child(2n+2) span:nth-child(2) {
+ padding: 70px 0 70px 100px;
+}
+.projectList.about .item:nth-child(2n+2) {
+ padding: 5% 0;
+}
+
+.projectList.about .item:nth-child(2n+2) span:nth-child(1){
+ float: right;
+}
+
+.projectList.about.makeAccountSingleton a {
+ margin: 0 20%;
}
.page .showcase {
@@ -190,37 +439,105 @@ iframe.embed {
z-index: -1;
pointer-events: none;
}
-.projectList {
+
+
+.projectList .projectItem {
+ margin: 4%;
+ width: 22vw;
display: inline-block;
- float: left;
- width: 100%;
}
.projectList .room {
- width: 33.3333%;
- height:40vh;
- display:table;
+ width: 100%;
+ height: 16vw;
+ margin: 1vw 1vw 10px 1vw;
+ display: table;
position: relative;
- float:left;
- border-top:1px solid black;
+ z-index: 1;
}
-.projectList .room:nth-child(4n+1){
- width:100%;
+.projectList .holder {
+ position: absolute;
+ top: 50%;
+ z-index: 2;
}
+
+.room .mask {
+ position: absolute;
+ top: 0; left: 0;
+ z-index: 1;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ overflow: hidden;
+ background-color: rgba(128,128,128,0.1);
+ background-size: contain;
+ background-position: center;
+}
+.desktop .projectList a:hover .room .mask {
+ background-color: rgba(128,128,128,0.1);
+}
+.room .images {
+ position: absolute;
+ top: 0; left: 0;
+ z-index: -1;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ overflow: hidden;
+}
+.room .images div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-size: cover;
+ background-position: center center;
+}
+
+/*
+.room .images[data-mediacount='1'] img:nth-child(1) { left: 20%; top: 20%; }
+
+.room .images[data-mediacount='2'] img:nth-child(1) { left: 51%; bottom: 0%; width: auto; height: 40%; }
+.room .images[data-mediacount='2'] img:nth-child(2) { right: 51%; bottom: 50%; width: auto; height: 40%; }
+
+.room .images[data-mediacount='3'] img:nth-child(1) { right: 51%; bottom: 41%; }
+.room .images[data-mediacount='3'] img:nth-child(2) { right: 51%; top: 61%; }
+.room .images[data-mediacount='3'] img:nth-child(3) { left: 51%; bottom: 0%; width:auto; height:30%;}
+
+.room .images[data-mediacount='4'] img:nth-child(1) { right: 51%; bottom: 41%; }
+.room .images[data-mediacount='4'] img:nth-child(2) { left: 51%; bottom: 61%; }
+.room .images[data-mediacount='4'] img:nth-child(3) { right: 51%; top: 61%; }
+.room .images[data-mediacount='4'] img:nth-child(4) { left: 51%; top: 41%; }
+*/
+
.page .btn {
clear: both;
padding: 30px 0;
border: 0;
-
}
.page .viewMore {
- text-decoration: none;
- font-size: 22px;
- display: block;
+ clear: both;
+ float: none;
+ text-decoration: none;
+ font-size: 22px;
+ display: block;
border-top: 1px solid black;
- border-bottom: 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;
+ border-bottom: 1px solid black;
+ margin-top: 150px;
+}
.holder {
display: table-cell;
@@ -229,80 +546,29 @@ iframe.embed {
vertical-align: middle;
}
-.page .roomName {
- font-weight: 300;
- font-size: 20px;
- letter-spacing: 1px;
- color: black;
- background: white;
- border: 1px solid;
- padding: 5px;
- box-shadow: -3px 3px black;
- text-decoration:none;
- max-width: 180px;
- display: inline-block;
+.page .projectList label {
+ font-weight: 500;
+ font-size: 11px;
+ color: black;
+ text-decoration: none;
+ display: inline-block;
+ cursor: pointer;
+ border: 1px solid #000;
+ line-height: 18px;
+ padding: 5px;
+ letter-spacing: 0.3px;
}
-.page .roomName:hover {
+.desktop .page .room .holder a:hover {
background:black;
color:white;
}
-.projectList .editBtn {
- position: absolute;
- right: 10px;
- top: 10px;
-}
-
-/*
-.room1 {
- position: relative;
- overflow: hidden;
- background-image:url(https://s3.amazonaws.com/luckyplop/7eb159e99924e6e371046d6fa12e566fd77901c9.jpg);
-}
-.room2 {
- background-image:url(https://s3.amazonaws.com/luckyplop/fd4ebe8a7a4246c8273fc999fb1ef0d6a8260b8c.png);
-}
-
-.room1 form textarea {
- width: 226px;
-}
-
-.room1 .radio-group {
- width: 226px;
-}
-
-.room1 .radio-group__label {
- width: 106px;
- font-size: 13px;
-}
-
-.room1 .formHolder {
- top: 0;
- padding-top: 10px;
- display: table;
- width: 100%;
- height: 100%;
- background: rgba(255,255,255,0.9);
- -webkit-transform:translateY(-100%);
- transform:translateY(-100%);
-}
-
-.room1 form {
- padding: 0 10px;
- max-width: 440px;
-}
-
-.room1 .formInner {
- display: table-cell;
- vertical-align: middle;
+.desktop .projectList a:hover label {
+ background:black;
+ color:white;
}
-.room1.editing .formHolder {
- -webkit-transform:translateY(0);
- transform:translateY(0);
-}
-*/
.page .questions {
background: #55efcb;
@@ -334,25 +600,46 @@ iframe.embed {
}
.page h1 {
- font-size: 80px;
- font-weight: 100;
- padding-top: 25px;
+ font-size: 80px;
+ font-weight: 100;
+ padding: 20px 0 25px 0;
float: left;
width: 100%;
+ border-top: 1px solid;
+}
+.page h1:nth-child(2) {
+ margin-top: 40px;
+}
+.page h1.leader {
+ margin-top: 60px;
+}
+.page p {
+ margin: 20px;
}
/* DOCUMENTATION / ABOUT SECTION / FAQ PAGES */
.docs .content {
- width: 600px;
+ width: 80%;
margin: 0 auto;
text-align: left;
}
+.page.docs h1 {
+ border-top: 0px solid;
+ font-weight: 500;
+ font-size: 40px;
+}
.docs .content img {
max-width: 90%;
margin: 0 auto;
display: block;
}
+.docs a {
+ border-bottom: 1px dashed;
+}
+.docs #header a, .docs .footer a {
+ border-bottom: 0;
+}
.docs .options {
margin: 50px auto 0 auto;
@@ -364,36 +651,76 @@ iframe.embed {
.docs .content p {
margin: 1em 0;
+ font-size: 30px;
+ font-weight: 300;
+ line-height: 60px;
}
-
.footer {
width: 100%;
- padding: 80px 0;
+ padding: 100px 0 120px 0;
background: #f9f9f9;
+ float: left;
+ clear: both;
+ border-top:1px solid black;
}
-.footer a, .footer span{
+.footer a, .footer span {
margin: 15px;
font-weight: 300;
font-size: 13px;
}
+.desktop .footer a:hover{
+ text-decoration:underline;
+}
+
+.docs .content.doc-privacy,
+.docs .content.doc-terms {
+ font-size: 15px;
+ line-height: 25px;
+ font-weight: 300;
+}
+
+.aboutintro {
+ text-align: center;
+ line-height: 43px;
+ font-size: 24px;
+ padding: 5% 0;
+ font-weight: 300;
+}
+.aboutintro .inner {
+ max-width: 800px;
+ margin: 0 auto;
+ text-align: center;
+}
/* PROFILE PAGE */
-.profilepage .profilePic {
- font-size: 148px;
- background-size: cover;
- background-position: center;
+
+.profilePic {
+ background-size: cover;
+ background-position: center;
+ width: 40%;
+ height: 50vh;
+ float: left;
+ display:table;
}
-.editProfile {
- margin-right: 10px;
- color: black;
- font-weight: 100;
- text-decoration: none;
- padding: 50px 0 100px 0;
+
+.noPic {
+ border-right: 1px solid;
}
-.editProfile span {
- vertical-align: middle;
+
+.profilePic .ion-ios-person-outline {
+ font-size: 100px;
+}
+
+
+.noPic input {
+ position: absolute;
+ width: 40%;
+ height: 48vh;
+ margin-top: -33vh;
+ margin-left: -20%;
+ opacity: 0;
}
.topLinks {
float: right;
@@ -408,22 +735,35 @@ iframe.embed {
padding: 20px 8px;
color: black;
font-weight: 300;
- float:right;
+ float:left;
text-decoration: none;
- border-bottom:1px solid transparent;
}
-.topLinks a:hover {
+.page .topLinks a {
+ border-right:1px solid;
+}
+
+.page .topLinks a:last-child {
+ border-right:0px solid;
+}
+.desktop .topLinks a:hover {
background: black;
color: white;
}
.profilepage .bio {
- text-align: left;
- padding: 0 5%;
- width: 66.5%;
- background-image:url(../img/pattern.png);
- background-size:100%;
- background-color: lightyellow;
- box-shadow: -4px 6px 7px rgba(0,0,0,0.1) inset;
+ text-align: left;
+ padding: 0 5%;
+ width: 60%;
+ background-image: url(../img/pattern.png);
+ background-size: 100%;
+ background-color: lightyellow;
+ display: table;
+ height: 50vh;
+ float: left;
+ background:white!important;
+}
+
+.desktop .profilepage .bio a:hover {
+ text-decoration:underline;
}
.profilepage .bio.one {
@@ -468,53 +808,415 @@ iframe.embed {
.profilepage .bio h2 {
- text-align: left;
- font-weight: 100;
- font-size: 70px;
+ text-align: left;
+ font-weight: 500;
+ font-size: 18px;
}
.profilepage .bio span {
font-size: 16px;
font-weight: 300;
+ float: left;
+ clear: both;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ display: inline-block;
}
-.profilepage .bio span:after { content: ' \00b7 ' }
+
.profilepage .bio span:last-of-type:after { display: none; }
+.profilepage .about h2 {
+ text-align: center;
+ font-weight: 300;
+ font-size: 32px;
+}
+.profilepage .about h2:nth-child(2){
+ margin:34px 0;
+}
+.profilepage .about h2 a.homeLink {
+ background: white;
+ border: 1px solid black;
+ padding: 10px;
+}
+.profilepage .about h2 a.homeLink:hover {
+ background: black;
+ border: 1px solid black;
+ color: white;
+}
+.profilepage .about h3 {
+ font-size: 13px;
+ font-weight: 300;
+ text-align: center;
+}
+.about {
+ background-color: #ffffff;background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyODkuNScgaGVpZ2h0PScyODkuNScgdmlld0JveD0nMCAwIDI4OS41IDI4OS41Jz4KCTxkZWZzPgoJCTxwYXR0ZXJuIGlkPSdibHVlc3RyaXBlJyBwYXR0ZXJuVW5pdHM9J3VzZXJTcGFjZU9uVXNlJyB4PScwJyB5PScwJyB3aWR0aD0nNTcuOScgaGVpZ2h0PSc1Ny45JyB2aWV3Qm94PScwIDAgMTE1LjggMTE1LjgnID4KCQk8cmVjdCB3aWR0aD0nMTEwJScgaGVpZ2h0PScxMTAlJyBmaWxsPScjZmZmZmZmJy8+CgkJCTxwYXRoIGQ9J00xLDFoMTE1Ljh2MTE1LjhoLTExNS44di0xMTUuOCcgZmlsbC1vcGFjaXR5PScwJyBzdHJva2Utd2lkdGg9JzAuOCcgc3Ryb2tlLWRhc2hhcnJheT0nMCwxLDEnIHN0cm9rZT0nI2NjY2NjYycvPgoJCTwvcGF0dGVybj4gCgkJPGZpbHRlciBpZD0nZnV6eicgeD0nMCcgeT0nMCc+CgkJCTxmZVR1cmJ1bGVuY2UgdHlwZT0ndHVyYnVsZW5jZScgcmVzdWx0PSd0JyBiYXNlRnJlcXVlbmN5PScuMiAuMycgbnVtT2N0YXZlcz0nNScgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPgoJCQk8ZmVDb2xvck1hdHJpeCB0eXBlPSdzYXR1cmF0ZScgaW49J3QnIHZhbHVlcz0nMCcvPgoJCTwvZmlsdGVyPgoJPC9kZWZzPgoJPHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsbD0ndXJsKCNibHVlc3RyaXBlKScvPgo8cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCgjZnV6eiknIG9wYWNpdHk9JzAnLz4KPC9zdmc+Cg==');
+ background-attachment: fixed;
+
+}
+
+
+.projectList.about.gopro {
+ padding:6% 0;
+}
+.about.gopro h3 {
+ font-weight:500;
+ text-align:center;
+ margin-bottom:20px;
+}
+.gopro span{
+ font-size: 24px;
+ font-weight: 300;
+ width: 710px;
+ display: block;
+ margin: 0 auto;
+ line-height: 50px;
+}
+.greenbtn{
+ width: 100%;
+ display: inline-block;
+ text-align: center;
+ margin-top: 40px;
+ background: limegreen;
+ color: white;
+ padding: 10px 0;
+ -webkit-transition:0.2s background;
+ -moz-transition:0.2s background;
+ transition:0.2s background;
+}
+.greenbtn.learn {
+ width: 60%;
+ clear: both;
+ font-size: 26px;
+ font-weight: 300;
+ margin: 140px 0% 0 20%;
+ background: #68B4FF;
+ padding: 20px 0;
+}
+.greenbtn:hover{
+ background:black;
+}
+.profilepage .about h2 .btn {
+ float: none;
+ border: 1px solid;
+ font-weight: 500;
+ padding: 10px;
+ font-size: 18px;
+}
+.desktop .profilepage .about h2 .btn:hover {
+ background:black;
+ color:white;
+}
+
+/* PLANS BROCHURE */
+.about_custom {
+ clear: both;
+ max-width: 600px;
+ margin: 0 auto;
+ font-size: 14px;
+ border-bottom: 1px solid #e5e5e5;
+}
+.about_custom h3 {
+ text-transform: uppercase;
+ letter-spacing: 3px;
+ font-size: 1.25em;
+ font-weight: 500;
+ background: #3A3A3A;
+ color: white;
+ text-align: center;
+}
+.about_custom li {
+ list-style-type: none;
+ line-height: 2em;
+ padding: 10px 20px;
+ background: white;
+ text-align: center;
+ border-left: 1px solid #e5e5e5;
+ border-right: 1px solid #e5e5e5;
+}
+.about_custom a {
+ border-bottom: 1px solid black;
+}
+
+ul#plans {
+ margin: 0 auto;
+ text-align: center;
+ font-size: 14px;
+}
+
+ul#plans>li {
+ display: inline-block;
+ width: 300px;
+ vertical-align: top;
+ margin: 0 25px 25px 0;
+ position: relative;
+}
+
+ul#plans>li.most-popular:before {
+ content: 'Most Popular';
+ display: block;
+ background: #F17E6F;
+ color: white;
+ font-size: 1em;
+ font-weight: 500;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ width: 100%;
+ position: absolute;
+ top: -31px;
+}
+
+ul#plans .top {
+ background: #3A3A3A;
+ color: white;
+ padding: 30px 0;
+ height: 266px;
+}
+
+ul#plans h2 {
+ padding: 0;
+ font-size: 1.25em;
+ margin-bottom: 1.75em;
+ text-transform: uppercase;
+ letter-spacing: 3px;
+ font-weight: 500;
+}
+
+ul#plans h3 {
+ margin: 0 0 20px;
+ font-weight: 200;
+}
+
+ul#plans h3 span.dollar {
+ font-size: 1.25em;
+ vertical-align: top;
+ position: relative;
+ top: -14px;
+}
+
+ul#plans h3 span.price {
+ font-size: 5em;
+ font-weight: 100;
+}
+
+ul#plans h4 {
+ font-size: 0.85em;
+ color: #e6e6e6;
+ margin: 0 auto;
+ width: 50%;
+ font-weight: 500;
+ line-height: 30px;
+}
+
+ul#plans ul {
+ border-left: 1px solid #e5e5e5;
+ border-right: 1px solid #e5e5e5;
+}
+
+ul#plans ul li {
+ text-align: left;
+ border-bottom: 1px solid #e5e5e5;
+ padding: 5px 20px;
+ font-weight: 700;
+ list-style: none;
+ background: white;
+ color:#333;
+}
+
+ul#plans .signup {
+ background: #3A3A3A;
+ padding: 25px 0;
+}
+
+.signup .current {
+ display: inline-block;
+ color: white;
+ font-weight: bold;
+ font-size: 1em;
+ padding: 4px 30px 3px;
+}
+
+.signup .button {
+ font-weight: bold;
+ padding: 16px 30px 14px;
+ -o-transition: background 0.2s ease-in-out;
+ -webkit-transition: background 0.2s ease-in-out;
+ transition: background 0.2s ease-in-out;
+ display: inline-block;
+ background: #F17E6F;
+ color: white;
+ text-decoration: none;
+ font-size: 1em;
+ padding: 4px 30px 3px;
+ border: none;
+ cursor: pointer;
+}
+
+
+.signup .button:hover {
+ color: white;
+ background: #ef6958;
+}
+
+
+/* debug sync button */
+.editSubscription .gear {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ opacity: 0.1;
+ cursor: pointer;
+ -webkit-transition: all 0.3s;
+ -webkit-transform-origin: 49% 53%;
+ transition: all 0.3s;
+ transform-origin: 49% 53%;
+}
+.editSubscription .gear.turning {
+ opacity: 0.3;
+ -webkit-animation: gear 1s infinite linear;
+ animation: gear 1s infinite linear;
+}
+@-webkit-keyframes gear {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(720deg); }
+}
+@keyframes gear {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(720deg); }
+}
+.paidPlan {
+ text-align: left;
+ font-size: 14px;
+}
+.planInfo {
+ margin: 10px 0;
+ width: 100%;
+ padding: 0;
+}
+.planInfo td, .planInfo th {
+ text-align: left;
+ padding: 10px 3px;
+ margin: 0;
+}
+.planInfo td {
+ height: 60px;
+ vertical-align: middle;
+}
+.planInfo td:nth-child(2),
+.planInfo th:nth-child(2),
+.planInfo td:nth-child(3),
+.planInfo td:nth-child(4),
+.planInfo th:nth-child(3) {
+ text-align: right;
+}
+.planInfo td:nth-child(4) {
+ width: 90px;
+}
+
+.planInfo [data-role="billingInterval"] {
+ font-size: 10px;
+}
+.totalRow td:nth-child(4) {
+ border-top: 1px solid;
+}
+.paidPlan button {
+ width: 200px;
+ float: none;
+ margin: 5px 7px;
+}
+.paidPlan [data-role="cancelSubscription"] {
+ color: #800;
+ border-color: black;
+ width: 200px;
+ float: none;
+}
+.paidPlan [data-role="cancelSubscription"]:hover {
+ color: white;
+ background: red;
+ border-color: red;
+}
+/* purchase mode */
+.paidPlan input[type=number] { display: none; float: right; }
+form .paidPlan div { float: none; }
+form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; }
+.paidPlan .upgradeMenu div { padding: 5px 10px; }
+.paidPlan .editMenu { display: none }
+.paidPlan .planMenu { display: none }
+
+.editing .section_break { display: none }
+.editing .paidPlan .currentPlanLevel { display: none }
+.editing .paidPlan .billingMenu { display: none }
+.editing .paidPlan .editMenu { display: block }
+.editing .paidPlan .planMenu { display: block }
+.editing .paidPlan input[type=number] { display: inline-block }
+.editing .paidPlan input[type=number]+span { display: none }
+
+.editMenu .fineprint { font-size: 12px; width: auto; text-align: justify; }
+/* LAYOUTS MODAL */
+
.templates {
overflow: auto;
- max-height: 80%;
+ max-height: 100%;
+ width: 100%;
+ height: 100%;
+ padding: 20px 0 40px 0;
+ text-align: center;
+}
+.templates-list,
+.userTemplatesList,
+.blueprintsList {
+ display: inline-block;
width: 100%;
+ margin-bottom: 40px;
+}
+.templates::-webkit-scrollbar {
+ width: 5px;
+ height: 5px;
}
+
+.templates::-webkit-scrollbar-thumb {
+ background-color: white;
+ border-left: 1px solid black;
+}
+
+.templates::-webkit-scrollbar-track {
+ background-color: transparent;
+}
+
.no-templates {
display: none;
}
+.no-templates a {
+ border-bottom: 1px solid;
+}
-.templates span{
+.templates span {
+ display: inline-block;
+ margin: 1vw 0;
+ width:20%;
+ padding: 2vw;
+ cursor: pointer;
+}
+.templates span .image {
background-position: center;
- background-size: contain;
- background-repeat: no-repeat;
+ background-size: cover;
background-color: #fff;
- background-image: url(http://upload.wikimedia.org/wikipedia/commons/d/d9/Graceland_Memphis_TN_Floorplan_Basement.jpg);
- width: 20vw;
- height: 20vh;
- display: inline-block;
- margin: 4vw;
- border:1px solid white;
- position: relative;
+ width: 100%;
+ height: 15vw;
+ display: block;
+ background-color: #ddd;
}
-.templates span:after {
- content: attr(data-name);
- position: absolute;
- top: 100%;
- width: 100%;
- left: 0;
- background: #fff;
- padding: 5px;
- border-top: 1px solid black;
+.templates span label {
+ width: 100%;
+ left: 0;
+ display: block;
+ font-weight: 300;
}
-.templates span:hover {
- border:1px dashed black;
+
+.desktop .templates span:hover .image {
+ background-color: #f00;
cursor:pointer;
}
@@ -524,9 +1226,6 @@ iframe.embed {
margin: 0;
}
-.templates span.active {
- border:1px solid #017cfe;
-}
.clear:after {
visibility: hidden;
@@ -547,6 +1246,8 @@ iframe.embed {
float:right;
}
+/* MX SCENE STUFF */
+
.mx-scene {
position:fixed;
top:0;
@@ -569,11 +1270,25 @@ iframe.embed {
}
.editing .mx-scenery:hover,
.editing .mx-scenery.picked {
- border: 1px dashed #000;
+ border: 1px dashed black;
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box;
+ box-sizing: content-box;
+}
+.mx-outline {
+ border-width: 2px;
+ border-style: dashed;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
+.destroyActive .mx-scene, .destroyActive .mx-object3d.image {
+ cursor:url(/assets/img/delete-cursor.png), auto;
+}
+.addText .mx-scene, .menu span.inuse[data-role="toggle-text-editor"] {
+ cursor:url(/assets/img/text-cursor.png), auto;
+}
+
.mx-scenery:active {
cursor: pointer;
}
@@ -598,10 +1313,30 @@ iframe.embed {
.mx-object3d video {
pointer-events: none;
}
-
+.mx-text {
+/*
+ overflow: hidden;
+ */
+}
+.mx-text .inner {
+ width: 100%;
+ pointer-events: none;
+}
+.mx-text p {
+ margin-bottom: 1em;
+}
+#keyhint {
+ position: fixed;
+ bottom:0;
+ right:0;
+ pointer-events:none;
+ z-index: 2;
+}
#hud {
position: fixed;
top:0;left:0;
+ width: 100%;
+ height: 100%;
z-index: 2;
}
#palette {
@@ -634,7 +1369,7 @@ iframe.embed {
.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; }
@@ -651,8 +1386,8 @@ iframe.embed {
.dot {
background:white;
- border-radius:20px;
- border: 1px solid black;
+ border-radius: 50%;
+ border: 2px solid black;
}
.image {
@@ -663,10 +1398,10 @@ iframe.embed {
/* AUTOSAVE MONITOR */
#minotaur {
- position: absolute;
- top: 25px;
- right: 260px;
- opacity: 0;
+ position: absolute;
+ top: 0px;
+ left: 150px;
+ opacity: 0;
}
#minotaur .label:after {
padding: 6px;
@@ -674,11 +1409,13 @@ iframe.embed {
font-weight: 300;
}
#minotaur.saving {
- background: white;
+ padding: 20px 8px;
+ color: white;
+ background: red;
+ font-weight: 300;
+ text-decoration: none;
+ z-index: 33;
opacity: 1;
- z-index: 20;
- font-size: 13px;
- border: 1px solid;
}
#minotaur.saving .label:after {
content: 'SAVING';
@@ -690,16 +1427,26 @@ iframe.embed {
}
.logo {
float:left;
- padding:7px 0 0 10px;
- z-index:4;
- position:relative;
- -webkit-user-select: none;
- -moz-user-select: none;
- user-select: none;
+ padding:6px 8px 9px 8px;
}
-.logo:hover {
- -webkit-filter:invert(30%);
+
+.desktop .logo:hover {
+ background:black;
+}
+.desktop .logo:hover svg {
+ fill:white;
+}
+
+#fallback {
+ width: 400px;
+ margin: 10% auto;
+ border: 2px solid black;
+ padding: 30px 20px 30px 20px;
}
+#fallback a {
+ border-bottom: 1px solid;
+}
+
.profile{
padding:8px;
float:right;
@@ -734,8 +1481,8 @@ iframe.embed {
}
.menu {
- right: 10px;
- top: 70px;
+ right: 9px;
+ top: 63px;
z-index:3;
-webkit-user-select: none;
-moz-user-select: none;
@@ -753,7 +1500,7 @@ iframe.embed {
width: 55px;
}
-.menu span:hover{
+.desktop .menu span:hover{
color:white;
background:black;
cursor:pointer;
@@ -765,17 +1512,18 @@ iframe.embed {
cursor:pointer;
}
-.menu span.inuse {
+.menu span.inuse,
+.menu span.active {
color:white;
background:black;
cursor:pointer;
}
.menu span.inuse:before {
- content: "\e736" !important;
+ content: "\f12a" !important;
}
-.menu span:hover:after{
+.desktop .menu span:hover:after{
content: attr(data-info);
position: absolute;
color: black;
@@ -787,13 +1535,20 @@ iframe.embed {
padding: 17px 13px;
margin-top: -16px;
font-size: 13px;
+ font-family:'Lato', sans-serif;
+ font-weight:600;
+}
+
+.menu span.ion-ios-sunny-outline:hover:after {
+ width: 130px;
}
+
.menu span.inuse:hover:after{
content:"";
opacity:0;
}
-.menu span.icon-map.hidden:hover:after{
+.menu span.ion-map.hidden:hover:after{
content:"show map";
}
.fixed {
@@ -802,12 +1557,12 @@ iframe.embed {
left: 0;
width: 100%;
height: 100%;
- z-index: 3;
+ z-index: 6;
overflow-y: scroll;
}
.fixed::-webkit-scrollbar {
- width: 3px;
+ width: 3px;
}
.fixed::-webkit-scrollbar-track {
@@ -830,25 +1585,31 @@ iframe.embed {
background: black;
}
.animate {
- -webkit-transition:all 0.2s ease-in-out;
- transform:translateY(-100%);
+ -webkit-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
+ -webkit-transform: translateY(-100%);
+ transform: translateY(-100%);
}
.mediaDrawer {
- -webkit-transform:translateY(-100%);
- transform:translateY(-100%);
- background:rgba(255,255,255,0.9);
- text-align:center;
+ -webkit-transform: translateY(-100%);
+ transform: translateY(-100%);
+ background: white;
+ text-align: center;
overflow-x: hidden;
}
+.editing .mediaDrawer {
+ background:rgba(255,255,255,0.95);
+}
.mediaDrawer.active {
- -webkit-transform:translateY(0%);
- transform:translateY(0%);
+ -webkit-transform: translateY(0%);
+ transform: translateY(0%);
}
.mediaDrawer.table, .mediaDrawer.error,
.mediaDrawer.signin, .mediaDrawer.signup,
.mediaDrawer.alert, .mediaDrawer.confirm,
.mediaDrawer.passwordForgot, .mediaDrawer.passwordReset, .mediaDrawer.usernameTaken,
-.mediaDrawer.layouts, .mediaDrawer.projects, .mediaDrawer.newProject {
+.mediaDrawer.layouts, .mediaDrawer.projects, .mediaDrawer.newProject,
+.mediaDrawer.blueprintEditor {
display:table;
}
.confirm button {
@@ -873,8 +1634,27 @@ iframe.embed {
background-image:url(https://s3.amazonaws.com/luckyplop/735c46b0268cd511a22c37bc0c11e9f60c4459b2.png)!important;
cursor:move;
}
-.deleteActive .mx-object3d.image {
- cursor:pointer;
+#deleteMedia {
+ font-size: 13px;
+ padding: 3px;
+ cursor:pointer;
+}
+#deleteMedia:after {
+ content:"delete media?";
+}
+.deleteArmed #deleteMedia:after {
+ content:"click media you want to delete";
+}
+.deleteArmed #deleteMedia:before {
+ content: "X";
+ background: black;
+ width: 23px;
+ height: 23px;
+ position: absolute;
+ margin-left: -25px;
+ margin-top: -4px;
+ font-size: 19px;
+
}
.deleteActive .mx-object3d.image:after {
content: "\e68f";
@@ -904,7 +1684,7 @@ iframe.embed {
cursor:text;
}
-.fileUpload{
+.fileUpload {
position: fixed;
width: 400px;
text-align: center;
@@ -913,22 +1693,22 @@ iframe.embed {
left: 50%;
padding: 26px 20px;
margin-left: -200px;
- background: white;
- z-index: 4;
+ background: rgba(255,255,255,0.99);
+ z-index: 7;
-webkit-transform: translateY(-1000%);
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transform: translateY(-1000%);
- transition: -webkit-transform 0.6s ease-in-out;
+ transition: transform 0.6s ease-in-out;
border: 1px solid;
box-shadow: -3px 3px black;
}
.fileUpload.active {
- -webkit-transform:translateY(0%);
- transform:translateY(0%);
+ -webkit-transform: translateY(0%);
+ transform: translateY(0%);
}
-.fileUpload .icon-ios7-upload-outline {
+.fileUpload .ion-ios-upload-outline {
font-size:40px;
}
.fileUpload .upload-icon.uploading {
@@ -937,7 +1717,7 @@ iframe.embed {
content: ' ' !important;
background-image: url("/assets/img/loader.gif");
background-repeat: no-repeat;
- width: 40px;
+ width: 21px;
height: 40px;
}
@@ -945,7 +1725,7 @@ iframe.embed {
border: 1px solid #ccc;
font-size: 15px;
padding: 5px;
- width: 220px;
+ width: 290px;
text-align: center;
border-radius: 20px;
}
@@ -977,8 +1757,10 @@ iframe.embed {
.myMedia.inactive {
opacity:0;
}
-
-.foundMedia {
+.noMedia {
+ margin: 40px;
+}
+.foundMedia, .wallpaperMedia {
position:absolute;
top:0;
left:0;
@@ -989,38 +1771,36 @@ iframe.embed {
padding-top:40px;
width: 100%;
}
-
-.foundMedia.active {
+.foundMedia.active, .wallpaperMedia.active {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.mediaDrawer h2{
- font-size: 18px;
+ font-size: 24px;
display: inline-block;
- margin-top: 20px;
position:relative;
z-index:4;
+ font-weight: 300;
}
-.mediaDrawer h3{
- margin-top: 28px;
- position: relative;
- z-index: 4;
+.mediaDrawer form h2{
+ font-size: 22px;
+ display: inline-block;
+ position: relative;
+ z-index: 4;
+ margin-bottom: 20px;
}
-.editBtn{
- color: #FF3B30;
- padding: 3px;
- font-size: 12px;
- display: inline-block;
- cursor:pointer;
- font-weight:600;
- text-decoration:none;
+.mediaDrawer.mediaViewer h2 {
+ margin-top:28px;
+ font-size:18px;
}
-.editBtn:hover {
- background:black;
+.mediaDrawer h3{
+ margin-top: 18px;
+ position: relative;
+ z-index: 4;
}
.deleteArmed .mediaDrawer h3 {
@@ -1028,8 +1808,6 @@ iframe.embed {
color:white;
}
-.deleteArmed .mediaContainer {
-}
.deleteArmed .mediaContainer:hover {
background:#FF3B30;
@@ -1037,22 +1815,24 @@ iframe.embed {
}
.deleteArmed .mediaContainer:before {
- content: "\e68f";
- font-family: 'ionicons';
- speak: none;
- font-style: normal;
- font-weight: normal;
- font-variant: normal;
- text-transform: none;
- line-height: 1;
- -webkit-font-smoothing: antialiased;
- font-size: 60px;
- margin-top: -62px;
- position: absolute;
- background: #FF3B30;
- border-radius: 1000px;
- margin-left: -59px;
- color: white;
+ content: "\f1eb";
+ font-family: 'ionicons';
+ speak: none;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ -webkit-font-smoothing: antialiased;
+ font-size: 40px;
+ margin-top: -50px;
+ position: absolute;
+ background: #FF3B30;
+ border-radius: 1000px;
+ margin-left: -50px;
+ color: white;
+ width: 50px;
+ height: 50px;
+ line-height: 50px;
}
.deleteArmed .mediaContainer.deleted {
@@ -1062,31 +1842,32 @@ iframe.embed {
color: #555;
text-decoration:none;
padding:5px;
- border:3px solid white;
+ border:2px solid white;
+ font-weight: 400;
+ font-size: 15px;
}
.mediaDrawer h2 a.active{
cursor:default;
- border:3px solid black;
+ border:2px solid black;
color:black;
}
.mediaDrawer h2 a:hover {
- border:3px solid #ccc;
+ border:2px solid #ccc;
}
.mediaDrawer h2 a.active{
- border:3px solid black;
+ border:2px solid black;
}
.mediaContainer {
- border: 1px solid white;
display: inline-block;
width: 25%;
margin: 4%;
vertical-align: top;
- border:1px solid white;
+ border:1px solid transparent;
padding:2%;
}
.mediaContainer:hover {
@@ -1096,7 +1877,19 @@ iframe.embed {
.mediaContainer img, .mediaContainer video {
max-width:100%;
}
-
+#reset {
+ position: fixed;
+ bottom: 160px;
+ left: 20px;
+ border-bottom: 1px solid black;
+ padding-bottom: 3px;
+ z-index:3;
+}
+#reset:hover {
+ cursor:pointer;
+ background:black;
+ color:white;
+}
#minimap {
position: fixed;
bottom: 20px;
@@ -1110,12 +1903,12 @@ iframe.embed {
-moz-user-select: none;
user-select: none;
}
-#minimap.hide{
+#minimap.hide {
-webkit-transform: translateY(155px);
transform: translateY(155px);
}
-#minimap.hide canvas{
- opacity:0;
+#minimap.hide canvas {
+ opacity: 0;
}
#minimap canvas {
display: block;
@@ -1124,21 +1917,46 @@ iframe.embed {
-webkit-transition:opacity 0.3s ease-in-out;
transition:opacity 0.3s ease-in-out;
}
+.reader #minimap {
+ right: 10px;
+ bottom: 10px;
+ left: auto;
+ -webkit-transform:translateX(180px);
+ -moz-transform:translateX(180px);
+ transform:translateX(180px);
+ -webkit-transition:0.6s -webkit-transform;
+ -moz-transition:0.6s -moz-transform;
+ transition:0.6s transform;
+}
+
+.reader #minimap.active {
+ -webkit-transform: translateX(0px);
+ -moz-transform: translateX(0px);
+ transform: translateX(0px);
+ left: auto;
+}
+.mobile .reader #minimap{
+ display:none;
+}
/* WALLPAPER PICKER */
-.wallpaper {
+.wallpaper, #presets {
right: 80px;
margin-top: 77px;
- width: 162px;
- z-index: 1;
+ 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: 10px 12px 12px 12px;
+}
+
+#presets {
+ margin-top: 110px;
}
-.wallpaper.active {
+.wallpaper.active, #presets.active {
display:inline-block;
-webkit-transform: translateX(0px);
transform: translateX(0px);
@@ -1148,11 +1966,15 @@ iframe.embed {
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;
+ background-size: auto 100%;
+ background-position: center;
}
.wallpaper.active .swatches .swatch:hover {
cursor: pointer;
@@ -1160,42 +1982,134 @@ iframe.embed {
transform: translateX(3px) translateY(-3px);
}
.wallpaper .swatches {
- width: 100%;
- border-bottom: 1px solid black;
- min-height: 30px;
+ width: 100%;
+ min-height: 30px;
+ border-bottom: 1px solid #ddd;
+ display: inline-block;
+ padding-bottom: 6px;
}
-.wallpaper {
- font-size: 14px;
+
+.wallpaper.deleteArmed.active .swatches .swatch {
+ border: 1px solid #FF3B30;
+}
+.desktop .wallpaper.deleteArmed .swatch:hover {
+ background-color: #FF3B30;
+}
+
+.wallpaper.deleteArmed .swatch:before {
+ content: "\f1eb";
+ font-family: 'ionicons';
+ speak: none;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ -webkit-font-smoothing: antialiased;
+ font-size: 16px;
+ position: absolute;
+ background: #FF3B30;
+ border-radius: 50%;
+ margin-top: -8px;
+ margin-left: -8px;
+ color: white;
+ width: 20px;
+ height: 20px;
+ line-height: 16px;
+ text-align: center;
+ padding-top: 2px;
+}
+
+.exampleTumblrs {
+ display: block;
+ margin-top: 10px;
font-weight: 300;
+ font-size: 0.8em;
+}
+.exampleTumblrs a {
+ border-bottom: 1px dotted;
+ margin-left: 5px;
+}
+
+.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;
+ position: relative;
+ float: left;
+ width: 86px;
+ height: 35px;
+ font-size: 12px;
+ font-weight: 300;
+ cursor: pointer;
}
-.wallpaper label {
+
+.toolButton label {
position: relative;
- top: -6px;
+ vertical-align: middle;
float: none;
}
+.wallpaperRemove {
+ margin-right: 4px;
+}
+.wallpaperUpload:hover {
+ cursor:pointer;
+}
.wallpaper form {
- padding: 2px 0 0 0;
+ position: relative;
+ font-weight: 300;
+ overflow: hidden;
}
-.wallpaper .icon-ios7-upload-outline {
- font-size: 26px;
+.toolButton:hover {
+ background:black;
+ color:white;
+ cursor:pointer;
+}
+.toolButton > span, .toolButton form > span{
+ font-size: 26px;
+ margin: 0 7px;
+ vertical-align: middle;
}
.wallpaper .wallpaperRemove {
cursor: pointer;
border-top: 1px solid black;
- padding: 4px 0 0 0;
+ padding: 0;
}
.wallpaper .wallpaperRemove img {
width: 18px;
margin: 0 4px;
}
+.wallpaper .wallpaperRemove:hover img {
+ -webkit-filter:invert(100%);
+}
+.wallpaperUpload .upload-icon {
+ margin: 0 8px;
+}
.wallpaperUpload .upload-icon.uploading {
}
.wallpaperUpload .upload-icon.uploading:before {
content: ' ' !important;
background-image: url("/assets/img/loader.gif");
background-repeat: no-repeat;
- width: 40px;
- height: 40px;
+ background-position: center;
+ width: 100%;
+ height: 100%;
+ position:absolute;top:0;left:0;
}
.wallpaperUpload input[type="text"]{
border: 1px solid #ccc;
@@ -1209,39 +2123,34 @@ iframe.embed {
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;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: blue;
+ height: 100%;
+ width: 100%;
+ opacity: 0;
+ cursor: pointer;
}
/* COLOR PICKER */
-.lightcontrol {
- margin-top: 13%;
+.colorcontrol {
+ margin-top: 8%;
right: 80px;
- padding: 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 h4 {
- font-weight: 600;
- font-size: 12px;
- line-height: 0;
- margin-top: 15px;
-}
-.lightcontrol.active {
+
+.colorcontrol.active {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
-.lightcontrol .slider {
+.colorcontrol .slider {
}
h4 {
font-weight:300;
@@ -1250,19 +2159,70 @@ h4 {
input[type=range] {
-webkit-appearance: none;
-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;
- background-color: #000;
- width: 10px;
- height: 10px;
+ background-color: white;
+ width: 15px;
+ height: 15px;
border-radius:10px;
cursor:pointer;
+ border:3px solid #000;
+}
+.wallpaperResizeControls {
+ transition: all 0.2s;
+ float: left;
+ height: 28px;
+ overflow: hidden;
+}
+.wallpaperResizeControls.disabled {
+ height: 0;
+ opacity: 0.3;
}
-#color-picker {
+.wallpaperResizeControls input[type=range] {
+ width: 150px;
+ position: relative;
+ top: -10px;
+}
+.wallpaperResizeControls {
+ font-size: 30px;
+}
+.wallpaperResizeControls span {
+ cursor: pointer;
+}
+.floodMessage {
+ display: none;
+ animation: flicker 0.2s infinite;
+ -webkit-animation: flicker 0.2s infinite;
+ -moz-animation: flicker 0.2s infinite;
+ color: black;
+ float: left;
+ margin: 10px 5px 5px 5px;
+ font-size: 10px;
+ text-align: center;
+ font-weight:600;
+ color:red;
+ text-transform:uppercase;
+ text-align:left;
+}
+.floodMessage:before {
+ content:"CLICK ON WALL OR ";
+}
+@keyframes flicker {
+ 50% { opacity:0.7; }
+}
+@-webkit-keyframes flicker {
+ 50% { opacity:0.7; }
+}
+@-moz-keyframes flicker {
+ 50% { opacity:0.7; }
+}
+
+.color-picker {
position: relative;
}
.colorPicker {
@@ -1286,27 +2246,61 @@ input[type="range"]::-webkit-slider-thumb {
cursor: pointer;
float:left;
}
-span:hover .swatch {
- border: 1px solid red;
-}
-.active .swatch {
+
+.color-swatches .active .swatch {
border: 1px solid #000;
}
.color-swatches {
margin-top: 10px;
}
+
+.presets {
+ margin-top: 10px;
+}
+.presets span {
+ font-size:12px;
+ font-weight:500;
+ display: inline-block;
+ width: 50%;
+ float:left;
+ cursor:pointer;
+ border-bottom: 1px transparent solid;
+ padding: 5px;
+}
+.presets span:hover,
+.presets span.active {
+ text-decoration: underline;
+}
.color-swatches span {
display: inline-block;
width: 50%;
float:left;
cursor:pointer;
+ font-size: 14px;
+ font-weight: 300;
+}
+.vvbox .color-swatches ~ h4 {
+ margin-bottom: -4px;
+ border-bottom: 1px solid #ddd;
+ padding-bottom: 4px;
+ padding-top: 11px;
+ display: inline-block;
+ width: 100%;
+ color: #555;
}
+.wallpaper .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{
- background:red;
- color:white;
+.color-swatches span.active, .color-swatches span.active:hover{
+ background: #fff;
}
.color-swatches span:nth-child(3){
clear:left;
@@ -1314,38 +2308,87 @@ span:hover .swatch {
.color-swatches span:hover {
background:#eee;
}
-
-.color-swatches span.active:hover {
- background:red;
+.color-swatches span.active label,
+.color-swatches span:hover label {
+ border-bottom: 1px solid;
}
+
.color-swatches label {
- font-size: 14px;
- font-weight: 300;
position: relative;
- padding-left: 5px;
+ font-size: 13px;
+ margin-left: 5px;
display: inline-block;
cursor: pointer;
- top: -2px;
}
-.color-swatches span.active label {
+
+#helpCursor {
+ position: fixed;
+ max-width: 200px;
+ font-size: 15px;
+ color: white;
+ background: rgba(255,0,0,0.8);
+ margin: 8px 0 0 8px;
+ padding: 10px;
font-weight: 600;
+ z-index: 22;
+ display: none;
+ margin-left:-220px;
+ margin-bottom:20px;
}
-
.settings.info {
right: auto;
left: 10px;
+ width: 230px;
+}
+
+.vvbox h4 {
+ font-weight: 600;
+ margin-bottom: 10px;
+ border-bottom: 1px solid #999;
+ padding-bottom: 6px;
}
.settings {
- padding: 20px;
- bottom: 20px;
+ padding: 10px 12px 12px 12px;
+ bottom: 10px;
right: 10px;
font-size: 12px;
- -webkit-transform: translateY(400px);
+ -webkit-transform: translateY(500px);
-webkit-transition: -webkit-transform 0.2s ease-in-out;
- transform: translateY(400px);
+ transform: translateY(500px);
transition: -webkit-transform 0.2s ease-in-out;
+ width: 210px;
+}
+#blueprintNotice.settings {
+ width: 230px;
+}
+#blueprintNotice a {
+ border-bottom: 1px solid;
+}
+#blueprintNotice .next {
+ display: inline-block;
+ background: black; color: white;
+ padding: 4px;
+ margin: 4px 0 0 0;
+ float: right;
+ cursor: pointer;
+}
+#textEditor.settings {
+ width: 320px;
+}
+#textEditor .swatch {
+ position: relative;
+ top: 6px;
+ margin-left: 6px;
+ cursor: pointer;
+ float: none;
+}
+#textEditor.color-mode {
+ width: 180px;
+}
+#textEditor.color-mode h4:after {
+ content: ' Colors';
}
.settings.active {
@@ -1356,10 +2399,13 @@ span:hover .swatch {
.modalLink {
text-decoration: none;
}
-.modalLink:hover {
+.modalLink:hover span {
text-decoration: underline;
}
-
+.settings .name {
+ display: block;
+ margin-top: 10px;
+}
@-webkit-keyframes fade {
50% {
opacity:0.6;
@@ -1370,33 +2416,45 @@ span:hover .swatch {
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;
+ max-width: 100%;
padding: 5px;
}
@@ -1406,7 +2464,11 @@ span:hover .swatch {
font-size: 12px;
width: 100%;
max-height: 200px;
- max-width: 180px;
+ max-width: 100%;
+}
+#textEditor.settings textarea {
+ max-height: none;
+ height: 290px;
}
.settings input[type="text"]:focus{
@@ -1449,6 +2511,9 @@ span:hover .swatch {
top: 5px;
font-weight:600;
}
+.setting.number.scale label {
+ top: 0;
+}
.setting.number label:after {
content:":";
}
@@ -1471,24 +2536,42 @@ span:hover .swatch {
top: 0px;
}
+.setting.number #room-height {
+ width: 60px;
+}
+.setting.number #room-height-global-label {
+ float: none;
+ margin-left: 6px;
+}
+.setting.number #room-height-global-label:after {
+ content: '';
+}
+
#mediaEditor .setting.number label {
width: 40px;
}
#mediaEditor .setting.number [type=text] {
width: 140px;
}
+#sculptureEditor .setting.number input[type=text] {
+ width: 130px;
+}
.playButton,.muteButton {
- color: white;
- background: black;
- border-radius: 50px;
- font-size: 22px;
- padding: 4px 2px 3px 6px;
+ border-radius: 50%;
+ font-size: 23px;
+ padding: 5px 0;
cursor: pointer;
margin-right: 5px;
+ width: 40px;
+ display: inline-block;
+ text-align: center;
+ border: 1px solid;
}
.playButton .on {
display: inline;
+ position: relative;
+ left: 1px;
}
.playButton.paused .on {
display: none;
@@ -1503,6 +2586,8 @@ span:hover .swatch {
.muteButton .on {
display: inline;
padding-right: 3px;
+ position: relative;
+ left: 2px;
}
.muteButton.muted .on {
display: none;
@@ -1513,6 +2598,9 @@ span:hover .swatch {
.muteButton.muted .off {
display: inline;
padding-right: 3px;
+ position: relative;
+ left: 2px;
+ top: -1px;
}
.btn, button {
@@ -1529,7 +2617,38 @@ span:hover .swatch {
color:white;
}
.btn.marg {
- margin-top:10px;
+ margin-top:5px;
+ width: 100%;
+}
+#randomize {
+ background: transparent;
+ display: inline-block;
+ color: #999;
+ text-decoration: none;
+ text-align: left;
+ font-size: 12px;
+ padding: 5px;
+ cursor: pointer;
+ position: absolute;
+ left: 10px;
+ font-weight: 500;
+ top: 0px;
+ border: 1px solid #999;
+ -webkit-transition:0.2s background;
+ -moz-transition:0.2s background;
+ transition:0.2s background;
+}
+#randomize:hover {
+ color: white;
+ background: black;
+}
+#tumblr-url {
+ border: 1px solid #999;
+ padding: 10px 5px;
+ position: absolute;
+ top: 18px;
+ left: 145px;
+ width: 216px;
}
.warn {
background:red;
@@ -1546,13 +2665,15 @@ button {
font-weight: 500;
width: 100%;
font-size:14px;
+ font-family:'Lato', sans-serif;
}
#builder-units {
- width:100%;
+ width:75%;
}
#mediaEditor .warn {
width:100%;
+ padding:5px 0;
}
.radio-group {
@@ -1627,6 +2748,8 @@ form div.hidden {
}
form h3.link {
content:"?";
+ margin-top: 0;
+ padding: 0 0 10px 0;
}
form h3.link:after {
content:"?";
@@ -1650,7 +2773,7 @@ form li {
form label {
float:left;
}
-form input[type="text"],form input[type="password"] {
+form input[type="text"],form input[type="password"],form input[type="number"] {
border: 1px solid;
font-size: 20px;
padding: 5px;
@@ -1670,7 +2793,7 @@ form input[type="submit"]:hover {
border:1px solid black;
cursor:pointer;
}
-form p{
+form p {
display: block;
float: left;
font-size: 15px;
@@ -1678,6 +2801,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;
@@ -1688,6 +2816,7 @@ form h3 {
}
#form_container {
clear:both;
+ padding-bottom: 50px;
}
.errors {
display: none;
@@ -1695,7 +2824,7 @@ form h3 {
text-align: center;
background: #f8f8f8;
padding: 10px;
- margin-top: 10px;
+ margin:5px 0 10px 0;
border-radius: 3px;
}
.errorList {
@@ -1711,6 +2840,7 @@ form li div div {
}
form li img#load_avatar {
max-width: 200px;
+ float: right;
}
form li textarea {
width: 100%;
@@ -1719,13 +2849,17 @@ form li textarea {
}
.hero {
- float:left;
- width:100%;
- clear:both;
- height:70vh;
- display:table;
- background-size:cover;
+ float: left;
+ width: 100%;
+ clear: both;
+ height: 80vh;
+ display: table;
+ background-size: cover;
+ background-position: center;
+ margin-top: 63px;
}
+
+
.hero .circle {
font-size: 20px;
font-weight: 300;
@@ -1733,14 +2867,25 @@ form li textarea {
display: inline-block;
padding: 60px 20px;
border-radius: 230px;
+ opacity:1;
+ -webkit-transition:0.2s background;
+ -moz-transition:0.2s background;
+ transition:0.2s background;
+ position: relative;
+ z-index: 6;
}
-.hero .circle:hover {
+
+.desktop .hero .circle:hover {
background:black;
color:white;
cursor:pointer;
}
-
+.chardinjs-tooltiptext {
+ font-weight: 300;
+ line-height: 20px;
+ font-size: 16px;
+}
.box {
display: table-cell;
@@ -1763,15 +2908,31 @@ 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;
+ -webkit-transform: translateY(-200px) translateZ(0);
+ transform: translateY(-200px) translateZ(0);
+}
+#fixed_close.active {
+ -webkit-transition: 0.2s -webkit-transform linear 1s;
+ transition: 0.2s transform linear 1s;
+ display: block;
+ -webkit-transform: translateY(0px) translateZ(0);
+ transform: translateY(0px) translateZ(0);
}
-.close:hover {
+
+
+
+.desktop .close:hover {
background:black;
color:white;
}
@@ -1806,8 +2967,9 @@ form li textarea {
letter-spacing: 2px;
}
.facebook b {
- float: left;
- font-size: 50px;
+ float: left;
+ font-size: 50px;
+ margin: 0 0 0 20px;
}
a[data-role="forgot-password"] {
@@ -1819,13 +2981,13 @@ a[data-role="forgot-password"] {
vertical-align: bottom;
padding-right: 14px;
font-size: 19px;
- line-height: 16px;
+ line-height: 7px;
}
.aboutRoom {
- width: 250px;
+ width: 190px;
background: rgba(255,255,255,0.95);
- padding: 20px;
+ padding: 2px 8px 8px 8px;
position: fixed;
bottom: 10px;
left: 10px;
@@ -1833,19 +2995,58 @@ a[data-role="forgot-password"] {
}
.aboutRoom h1 {
- font-size:28px;
+ font-size:26px;
+}
+.txt.description {
+ max-height: 200px;
+ overflow: auto;
+}
+.txt.description::-webkit-scrollbar {
+ width: 4px;
+}
+.txt.description::-webkit-scrollbar-track {
+}
+.txt.description::-webkit-scrollbar-thumb {
+ background: #000;
+}
+::-webkit-scrollbar-thumb:window-inactive {
+ background: #888;
}
+
.txt {
font-size:12px;
padding:5px 0;
display: inline-block;
}
-.aboutRoom h1 a{
+
+.vvbox .txt {
+ padding:5px;
+}
+
+.vvbox.wallpaper .txt{
+ padding:0;
+}
+
+.aboutRoom.vvbox .txt {
+ padding: 5px 0 3px 0;
+}
+.aboutRoom h1 a {
text-decoration: none;
font-style: italic;
+ font-weight:500;
+}
+.aboutRoom .profilePic {
+ width: 34px;
+ height: 34px;
+ float: none;
+ display: inline-block;
+ vertical-align: middle;
+}
+.aboutRoom .authorName {
+ vertical-align: middle;
}
-.aboutRoom h1 a:hover {
+.desktop .aboutRoom h1 a:hover {
text-decoration:underline;
}
@@ -1857,7 +3058,9 @@ a[data-role="forgot-password"] {
width: 100%;
text-align: center;
}
-
+.mobile .aboutRoom .editlink {
+ display:none;
+}
.aboutRoom .editlink:hover {
background:black;
color:white;
@@ -1868,43 +3071,61 @@ a[data-role="forgot-password"] {
margin: 5px 0 0 0;
}
+
.share {
- position: fixed;
- right: 0px;
- bottom: 10px;
- padding-right:10px;
- background:rgba(255,255,255,0.95);
- z-index: 2;
+ display:inline-block;
+ width:100%;
+ margin-bottom:5px;
}
-
.share h2 {
- font-weight: 300;
- font-size: 18px;
- text-align: right;
+ font-weight: 400;
+ font-size: 13px;
+ margin:0;
}
.share a{
color: #017cfe;
text-decoration: none;
- margin-left: 6px;
- font-size: 13px;
+ font-size: 12px;
font-weight: 600;
+ cursor: pointer;
}
-
-.share a:hover{
+.share a:nth-child(3), .share a:nth-child(4) {
+ margin-left:4px;
+}
+.desktop .share a:hover{
text-decoration:underline;
}
+.vvbox.share {
+ width: 230px
+}
+.vvbox.share #share_link {
+ width: 100%;
+ margin-top: 4px;
+ padding: 3px;
+ font-weight: 300;
+ font-size: 11px;
+}
+
/* COLLABORATORS */
-.collaborators > div {
- width: 600px;
+.mediaDrawer .rap {
+ display: table;
+ width: 100%;
+ height: 100%;
+}
+
+.mediaDrawer .rap .holder .inner {
+ width: 480px;
margin: 0 auto;
text-align: left;
background: white;
padding: 10px;
margin: 20px auto;
+ position: relative;
}
+
.collaborators button {
width: auto;
position: relative;
@@ -1930,15 +3151,16 @@ a[data-role="forgot-password"] {
background-color: black;
border-color: black;
}
-.collaborators p {
- margin: 20px 0;
+.mediaDrawer .rap p {
+ margin: 10px 0 20px;
+ font-weight: 300;
}
.collaborators form input[type=text] {
font-size: 16px;
width: 300px;
}
-.collaborators h2 {
- margin: 20px auto 10px;
+.mediaDrawer .rap h2 {
+ margin: 20px auto 0;
}
#collaborator-list {
margin-top: 20px;
@@ -1954,6 +3176,7 @@ a[data-role="forgot-password"] {
background-size: cover;
display: inline-block;
margin-right: 10px;
+ background-color: #ccc;
}
#collaborator-list .username {
position: relative;
@@ -1972,6 +3195,62 @@ a[data-role="forgot-password"] {
font-weight: 300;
font-style: italic;
}
+#collaborator-url-rapper {
+ display: none;
+ background: #fff;
+ border: 1px solid;
+ box-shadow: -3px 3px 0;
+ padding: 10px;
+ font-weight: 300;
+ font-size: 14px;
+ margin: 10px 0;
+}
+#collaborator-url {
+ font-size: 16px;
+ width: 500px;
+ border: 1px solid;
+ font-size: 14px;
+ padding: 5px;
+ font-weight: 300;
+ margin-top: 5px;
+ display: block;
+}
+
+/* EMBED CODE GENERATOR */
+
+.embedView {
+ font-weight: 300;
+}
+.embedView textarea {
+ border: 1px solid black;
+ width: 100%;
+ height: 100px;
+ font-family: 'Menlo', 'Monaco', 'Lucida Sans Console', monospace;
+ padding: 5px;
+ line-height: 15px;
+}
+.embedView input[type=text] {
+ border: 1px solid black;
+ width: 40px;
+ padding: 2px;
+ font-size: 14px;
+ margin: 5px;
+}
+.embedView label {
+ font-size: 14px;
+ padding: 0 3px;
+}
+#testEmbed {
+ cursor: pointer;
+ float: right;
+ font-size: 11px;
+ margin-top: 11px;
+ font-weight: 100;
+ color: #888;
+}
+#testEmbed:hover {
+ text-decoration: underline;
+}
/* MARCHING ANTS ANIMATION */
@@ -1991,3 +3270,401 @@ a[data-role="forgot-password"] {
0%{height:250px;}
100%{height:500px;top:2px;}
}
+
+
+#threesixty {
+ display:none;
+ width:80px;
+ z-index: 3;
+ position: fixed;
+ bottom: 0;
+ right: 0;
+ pointer-events:none;
+}
+
+
+/* blueprint upload box */
+
+.blueprintUploader {
+ -webkit-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
+ width: 340px;
+ position: absolute;
+ top: 50%; left: 50%;
+ background: white;
+ padding: 10px;
+ border: 1px solid black;
+ box-shadow: -3px 3px #000;
+ -webkit-transform: translate3D(0%,-200%,0);
+ transform: translate3D(0%,-200%,0);
+ margin-left: -175px;
+ margin-top: -200px;
+ opacity: 0;
+}
+.blueprintUploader.active {
+ -webkit-transform: translate3D(0,0,0);
+ transform: translate3D(0,0,0);
+ opacity: 1;
+}
+.blueprintUploader .toolButton {
+ float: none;
+ width: 108px;
+ display: inline-block;
+}
+.blueprintUploader .url {
+ font-size: 15px;
+ border: 1px solid #888;
+ padding: 2px;
+ font-weight: 300;
+ position: relative;
+ top: 3px;
+ margin-right: 10px;
+ width: 190px;
+}
+.blueprintUploader p {
+ font-weight: 300;
+ font-size: 13px;
+}
+.blueprintUploader .blueprints {
+ display: none;
+}
+.blueprintUploader .blueprints h5 {
+ width: 250px;
+ margin: 10px auto;
+ padding-top: 9px;
+}
+.blueprints .blueprint {
+ border: 2px solid black;
+ background: white;
+ padding: 0px;
+ position: relative;
+ display: inline-block;
+ margin: 0 2px;
+}
+.blueprints .blueprint img {
+ height: 100px;
+ max-width: 200px;
+ display: block;
+ cursor: pointer;
+}
+.blueprints .blueprint .remove {
+ box-shadow: -2px 2px #000;
+ cursor: pointer;
+ position: absolute;
+ color: red;
+ top: 7px;
+ right: 7px;
+ width: 20px; height: 20px;
+ text-align: center;
+ background: #fff;
+ border: 1px solid black;
+}
+.blueprints .blueprint .remove span {
+ position: relative;
+ top: -2px;
+}
+.blueprintUploader .wallpaperUpload .upload-icon {
+ margin: 0 4px;
+}
+.uploadNewBlueprint {
+ color: #333;
+ border-bottom: 1px solid;
+ cursor: pointer;
+}
+
+
+[data-role="create-new-blueprint"] {
+ margin-bottom: 10px;
+}
+.openScaler {
+ margin-left: 10px;
+ border-bottom: 1px solid;
+ cursor: pointer;
+}
+
+/* KEYBOARD SHORTCUTS */
+
+.keyboard { float: left; width: 50%; margin-top: 50px; }
+.keyboard tr { margin: 0; padding: 0; }
+.keyboard td { padding: 2px 10px; margin: 0; }
+.keyboard.first-keyboard td:nth-child(1) { text-align: center; width: 50px; padding-left: 100px; }
+.keyboard td:nth-child(1) { text-align: right; width: 150px; }
+.keyboard td:nth-child(2) { font-weight: 300; }
+
+/* MOBILE */
+
+
+@media (max-width: 680px) {
+ .logo {
+ padding: 0px 4px 0px 8px;
+ }
+ .logo svg {
+ width: 70px;
+ height: 37px;
+ }
+ .video {
+ width: 100%!important;
+ height: auto!important;
+ }
+ .video iframe {
+ width: 100%!important;
+ height: auto!important;
+ margin-top: 0!important;
+ }
+ .topLinks a {
+ padding: 12px 8px;
+ color: black;
+ font-weight: 400;
+ float: left;
+ text-decoration: none;
+ font-size: 14px;
+ }
+
+ .topLinks a[data-role="new-project-modal"], .topLinks a[data-role="show-layouts-modal"] {
+ display:none;
+ }
+ .close {
+ font-size: 40px;
+ right: 10px;
+ top: 10px;
+ width: 55px;
+ line-height: 55px;
+ }
+ .facebook b {
+ font-size: 40px;
+ }
+ .facebook span {
+ line-height: 20px;
+ }
+ form {
+ max-width: 90%;
+
+ }
+
+ form li {
+ font-size: 16px;
+ }
+ form input[type="text"],form input[type="password"],form input[type="number"] {
+ font-size: 15px;
+ }
+ .page h1 {
+ font-size: 26px;
+ padding: 10px 0 15px 0;
+ font-weight: 300;
+ border-top: 1px solid;
+ }
+ .hero {
+ height: 450px;
+ margin-top: 41px;
+ }
+ .page .profilepage {
+ margin-top: 41px;
+ }
+ .profilepage .bio {
+ height: 180px;
+ width: 50%;
+ display: inline-block;
+ padding-top: 40px;
+ }
+
+ .profilePic {
+ width: 50%;
+ height: 180px;
+ }
+ .profilepage .about h2 {
+ display:none;
+ }
+ .profilepage .projectList.about:after {
+ content:"In order to create a room in VValls you need to use a desktop or laptop computer.. Its totally worth though!";
+ margin:20px 0 10px 0;
+ font-size:22px;
+ display:inline-block;
+ width:100%;
+ padding:10px;
+ line-height: 34px;
+ }
+ .bio .holder {
+ display: inline-block;
+ }
+ .page .projectList label {
+ font-weight:600;
+ border:0;
+ }
+ .projectList.about {
+ text-align: center;
+ padding: 0px 0;
+ }
+ .projectList.about .item .rap {
+ padding: 0;
+ }
+ .projectList.about .item span h3 {
+ font-weight: 500;
+ font-size: 18px;
+ margin-bottom: 6px;
+ }
+ .projectList.about .item:nth-child(2) span:nth-child(2) {
+ padding: 10px 0;
+ }
+ .projectList.about .item span:nth-child(1) {
+ width: 100%;
+ border-radius: 0;
+ height: 160px;
+ }
+ .projectList.about .item span:nth-child(2) {
+ width: 100%;
+ padding: 10px 0;
+ }
+ .projectList.about .item:nth-child(2) {
+ padding: 50px 0;
+ }
+ .page .viewMore.btn {
+ text-decoration: none;
+ font-size: 18px;
+ padding: 18px 0;
+ }
+ .footer a, .footer span {
+ margin: 4px;
+ }
+ #keyhint {
+ display:none;
+ }
+ .projectList .projectItem {
+ width:100%;
+ margin: 20px 0;
+ }
+ .projectList .room {
+ width: 100%;
+ height:230px;
+ height: 69vw;
+ margin: 0;
+ }
+ .mediaDrawer form h2 {
+ margin-bottom: 26px;
+ width: 100%;
+ text-align: left;
+ }
+ .aboutRoom.vvbox {
+ width: 170px;
+ padding: 6px 8px 8px 8px;
+ box-shadow: 0 0;
+ bottom: 3px;
+ left: 3px;
+ }
+ .aboutRoom .profilePic {
+ display:none;
+ }
+ .aboutRoom h2 {
+ font-size: 13px;
+ margin: 1px 0 0 0;
+ }
+ .btn.marg.warn {
+ display:none;
+ }
+ .aboutRoom h1 a, .aboutRoom h1 {
+ font-size: 16px;
+ }
+ .footer {
+ padding:50px 0 120px 0;
+ }
+ .videoModal .ion-ios-close-empty {
+ right: 10px;
+ top: 20px;
+ }
+ .gopro span {
+ font-size: 16px;
+ width: 93%;
+ line-height: 22px;
+ text-align: justify;
+ }
+ .gopro span a{
+ margin-top: 20px;
+ }
+ .greenbtn.learn {
+ display:none;
+ }
+ .reader .topLinks a {
+ display:none;
+ }
+ .reader iframe {
+ display:none;
+ }
+
+}
+
+.mobile .btn.marg, .mobile #share_embed {
+ display:none;
+}
+
+@media screen and (orientation:portrait) {
+ .mobile .aboutRoom {
+ display:none;
+ }
+ .mobile .mx-scene{
+ display:none;
+ }
+ .mobile #scene:after{
+ content: "To view this room, flip your device sideways and spin around in circles :)";
+ z-index: 3;
+ position: fixed;
+ display: inline-block;
+ width: 100%;
+ top: 75px;
+ left: 0;
+ font-size: 27px;
+ font-weight: 300;
+ line-height: 50px;
+ border-top: 1px solid;
+ border-bottom: 1px solid;
+ padding: 20px 7px;
+ }
+}
+
+
+@media screen and (orientation:landscape) and (max-width: 680px){
+ .projectList.about .item span:nth-child(1) {
+ height: 180px;
+ }
+ .projectList .projectItem {
+ width: 55%;
+ }
+ #threesixty {
+ display:inline;
+ }
+}
+
+@media screen and (orientation:landscape) {
+ .mobile #threesixty {
+ display:inline;
+ }
+}
+
+@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) {
+ .hero{
+ height: 500pt;
+ }
+ #keyhint {
+ display:none;
+ }
+ .topLinks a[data-role="new-project-modal"], .topLinks a[data-role="show-layouts-modal"] {
+ display:none;
+ }
+}
+
+
+@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {
+ .hero{
+ height: 500pt;
+ }
+ #keyhint {
+ display:none;
+ }
+ .topLinks a[data-role="new-project-modal"], .topLinks a[data-role="show-layouts-modal"] {
+ display:none;
+ }
+}
+
+@media (max-height: 650px) {
+ .settings {
+ right: 80px;
+ }
+} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-28 17:00:40 +0000