From 24614e0764ec4655ded8b66ba6832bf8cd3cda1d Mon Sep 17 00:00:00 2001 From: ryderr Date: Mon, 29 Sep 2014 18:56:38 -0400 Subject: css --- views/controls/editor/light-control.ejs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'views') diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index 8b133a5..b90b646 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -3,7 +3,7 @@
-

Brightness Control

+

Luminance Control

-- cgit v1.2.3-70-g09d2 From 166834f03505ec7e766cb5d6d7151310fbf54d49 Mon Sep 17 00:00:00 2001 From: ryderr Date: Tue, 30 Sep 2014 11:47:11 -0400 Subject: profile stuff --- public/assets/stylesheets/app.css | 77 ++++++++++++++++++++++----------------- views/profile.ejs | 20 +++++----- 2 files changed, 53 insertions(+), 44 deletions(-) (limited to 'views') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 299f757..d5dab4f 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -42,6 +42,7 @@ body.pastePaper .wallpaper.active span:hover{ a{ color:black; + text-decoration: none; } /*page*/ @@ -170,10 +171,10 @@ h5 { .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; } .page .showcase { @@ -334,11 +335,12 @@ 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; } /* DOCUMENTATION / ABOUT SECTION / FAQ PAGES */ @@ -380,10 +382,13 @@ iframe.embed { /* PROFILE PAGE */ -.profilepage .profilePic { - font-size: 148px; - background-size: cover; - background-position: center; +.profilePic { + font-size: 148px; + background-size: cover; + background-position: center; + width: 33.3333%; + height: 50vh; + float: left; } .editProfile { margin-right: 10px; @@ -417,13 +422,15 @@ iframe.embed { 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: 66.5%; + background-image: url(../img/pattern.png); + background-size: 100%; + background-color: lightyellow; + display: table; + height: 50vh; + float: left; } .profilepage .bio.one { @@ -492,31 +499,35 @@ iframe.embed { background-size: contain; background-repeat: no-repeat; 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; + border:1px solid black; position: relative; } .templates span:after { - content: attr(data-name); - position: absolute; - top: 100%; - width: 100%; - left: 0; - background: #fff; - padding: 5px; - border-top: 1px solid black; + content: attr(data-name); + position: absolute; + top: 100%; + width: 100%; + left: 0; + background: #fff; + padding: 5px; + border-top: 1px solid black; + font-weight: 300; } .templates span:hover { - border:1px dashed black; + border:1px solid blue; cursor:pointer; } +.templates span:hover:after { + border-top: 1px solid blue; +} + .templates h1 { font-weight: 300; font-size: 21px; @@ -1304,7 +1315,8 @@ span:hover .swatch { margin-bottom:5px; } .color-swatches span.active, .color-swatches span.active:hover{ - background:#eee; + background:#000; + color:white; } .color-swatches span:nth-child(3){ clear:left; @@ -1322,9 +1334,6 @@ span:hover .swatch { cursor: pointer; top: -2px; } -.color-swatches span.active label { - font-weight: 500; -} .settings.info { @@ -1544,7 +1553,7 @@ button { } #builder-units { - width:100%; + width:75%; } #mediaEditor .warn { width:100%; diff --git a/views/profile.ejs b/views/profile.ejs index ada3d52..34b0bee 100644 --- a/views/profile.ejs +++ b/views/profile.ejs @@ -8,17 +8,17 @@
[[- include partials/header ]] - - +
[[ if (profile.photo && profile.photo.length) { ]] -
+
+
[[ } else { ]] - + [[ } ]] - - -
- +
-
+
+

[[- profile.displayName ]]

[[ if (profile.location) { ]] @@ -35,9 +35,9 @@ @[[- profile.twitterName ]] [[ } ]] -
+
+ + [[ if (projects.length) { ]]

[[- profile.username ]] has [[- projects.length ]] project[[- projects.length != 1 ? "s" : "" ]]

-- cgit v1.2.3-70-g09d2 From c0c11162c5124f5452fe162b31d708be5ec40fcc Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 30 Sep 2014 12:01:23 -0400 Subject: get rid of resize icon in toolbar --- views/controls/editor/toolbar.ejs | 2 ++ 1 file changed, 2 insertions(+) (limited to 'views') diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs index 4abf780..d721c07 100644 --- a/views/controls/editor/toolbar.ejs +++ b/views/controls/editor/toolbar.ejs @@ -3,10 +3,12 @@ data-role='open-media-viewer' data-info="add media" class="icon-ios7-photos-outline"> + Date: Tue, 30 Sep 2014 12:32:56 -0400 Subject: labeling some stuff --- public/assets/stylesheets/app.css | 30 +++++++++++++++++------------- views/controls/editor/light-control.ejs | 2 +- views/controls/editor/media-editor.ejs | 1 + views/controls/editor/settings.ejs | 1 + 4 files changed, 20 insertions(+), 14 deletions(-) (limited to 'views') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 3748401..6929cef 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1247,18 +1247,13 @@ iframe.embed { .lightcontrol { margin-top: 13%; right: 80px; - padding: 20px; + padding: 13px 20px 20px 20px; -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 { -webkit-transform: translateX(0px); transform: translateX(0px); @@ -1278,12 +1273,14 @@ input[type=range] { } 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; } + #color-picker { position: relative; } @@ -1353,14 +1350,21 @@ span:hover .swatch { left: 10px; } +.vvbox h4 { + font-weight: 600; + margin-bottom: 10px; + border-bottom: 1px solid #999; + padding-bottom: 6px; +} + .settings { - padding: 20px; + padding: 10px 20px 20px 20px; bottom: 20px; right: 10px; font-size: 12px; - -webkit-transform: translateY(400px); + -webkit-transform: translateY(450px); -webkit-transition: -webkit-transform 0.2s ease-in-out; - transform: translateY(400px); + transform: translateY(450px); transition: -webkit-transform 0.2s ease-in-out; } diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index b90b646..410aaff 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -1,9 +1,9 @@
+

Edit Room Colors

-

Luminance Control

diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs index 000e8db..8f2c1c8 100644 --- a/views/controls/editor/media-editor.ejs +++ b/views/controls/editor/media-editor.ejs @@ -1,4 +1,5 @@
+

Media Settings

diff --git a/views/controls/editor/settings.ejs b/views/controls/editor/settings.ejs index ed587fa..ad62b55 100644 --- a/views/controls/editor/settings.ejs +++ b/views/controls/editor/settings.ejs @@ -1,4 +1,5 @@
+

Room Settings

-- cgit v1.2.3-70-g09d2 From 385dc017b65cbd7cd94b16e86a8368320d4274ea Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 30 Sep 2014 13:10:08 -0400 Subject: adding prefixfree, bower install --- bower.json | 3 +- .../rectangles/engine/scenery/resize.js | 2 +- .../assets/javascripts/rectangles/models/wall.js | 5 +- .../assets/javascripts/rectangles/util/minotaur.js | 2 +- .../assets/javascripts/ui/editor/EditorToolbar.js | 59 +++++++++++++--------- views/partials/scripts.ejs | 1 + 6 files changed, 44 insertions(+), 28 deletions(-) (limited to 'views') diff --git a/bower.json b/bower.json index ee8f9ba..faffbfb 100644 --- a/bower.json +++ b/bower.json @@ -7,6 +7,7 @@ "momentjs": "~2.5.1", "lodash": "", "fiber": "", - "jquery-jsonview": "1.2.0" + "jquery-jsonview": "1.2.0", + "prefixfree": "" } } diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index ca77525..96817c2 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -122,7 +122,7 @@ Scenery.resize = new function(){ Scenery.mouse.bind_el(dot.el) $(dot.el).bind({ mouseenter: function(e){ - Scenery.resize.hovering = true +// Scenery.resize.hovering = true }, mouseleave: function(e){ // Scenery.resize.hovering = false diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 5513a9b..2bfb258 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -64,9 +64,10 @@ e.stopPropagation() return } - + + app.controller.toolbar.resetPermissions() Scenery.resize.show(scenery) - Scenery.hovering = true + Scenery.hovering = true UndoStack.push({ type: 'create-scenery', diff --git a/public/assets/javascripts/rectangles/util/minotaur.js b/public/assets/javascripts/rectangles/util/minotaur.js index 0fcc766..4d9a795 100644 --- a/public/assets/javascripts/rectangles/util/minotaur.js +++ b/public/assets/javascripts/rectangles/util/minotaur.js @@ -4,7 +4,7 @@ var base = this base.$el = $("#minotaur") base.timeout = null - base.delay = 1000 + base.delay = 5000 base.objects = {} base.init = function () { diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 9c74c7c..ec6bb46 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -6,7 +6,7 @@ var EditorToolbar = View.extend({ "click [data-role='toggle-map-view']": 'toggleMap', "click [data-role='toggle-project-settings']": 'toggleSettings', "click [data-role='open-media-viewer']": 'openMediaViewer', - "click [data-role='resize-media']": 'resizeMedia', +// "click [data-role='resize-media']": 'resizeMedia', "click [data-role='destroy-media']": 'destroyMedia', "click [data-role='toggle-wallpaper-panel']": 'toggleWallpaper', "click [data-role='toggle-light-control']": 'toggleLightControl', @@ -39,9 +39,10 @@ var EditorToolbar = View.extend({ }, resetMode: function(){ - this.resizeMedia(true) + // this.resizeMedia(true) this.destroyMedia(false) app.controller.hideExtras() + base.resetPermissions() }, resetControls: function(){ @@ -51,27 +52,34 @@ var EditorToolbar = View.extend({ this.parent.settings.hide() }, - resizeMedia: function(e, state){ - this.resetControls() - if (! state && typeof e == "boolean") { - state = e - editor.permissions.assign("resize", state) - } - else { - state = editor.permissions.toggle("resize") - } - ! state && editor.permissions.assign("move", true) - $(".inuse").removeClass("inuse") - $("[data-role='resize-media']").toggleClass("inuse", state) - if (state) { - if (this.parent.mediaEditor.scenery) { - Scenery.resize.show( this.parent.mediaEditor.scenery ) - } - } - else { - Scenery.resize.hide() - } + resetPermissions: function(){ + editor.permissions.assign("pick", true) + editor.permissions.assign("move", true) + editor.permissions.assign("resize", true) + editor.permissions.assign("destroy", false) }, + +// resizeMedia: function(e, state){ +// this.resetControls() +// if (! state && typeof e == "boolean") { +// state = e +// editor.permissions.assign("resize", state) +// } +// else { +// state = editor.permissions.toggle("resize") +// } +// ! state && editor.permissions.assign("move", true) +// $(".inuse").removeClass("inuse") +// $("[data-role='resize-media']").toggleClass("inuse", state) +// if (state) { +// if (this.parent.mediaEditor.scenery) { +// Scenery.resize.show( this.parent.mediaEditor.scenery ) +// } +// } +// else { +// Scenery.resize.hide() +// } +// }, destroyMedia: function(e, state){ this.resetControls() @@ -82,7 +90,12 @@ var EditorToolbar = View.extend({ else { state = editor.permissions.toggle("destroy") } - ! state && editor.permissions.assign("move", true) + if (! state) { + this.resetPermissions() + } + else { + app.controller.hideExtras() + } $(".inuse").removeClass("inuse") $("[data-role='destroy-media']").toggleClass("inuse", state) $("body").toggleClass("destroyActive", state) diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 7d56b2e..e0dd0f5 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -2,6 +2,7 @@ + -- cgit v1.2.3-70-g09d2 From ecf6606d7ac31d53fdb2bce8ade3eababc871dbd Mon Sep 17 00:00:00 2001 From: ryderr Date: Tue, 30 Sep 2014 14:29:26 -0400 Subject: reset --- public/assets/stylesheets/app.css | 38 ++++++++++++++++++++++++++++++------- views/controls/editor/wallpaper.ejs | 2 +- views/editor.ejs | 1 + 3 files changed, 33 insertions(+), 8 deletions(-) (limited to 'views') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 70cf498..869e5ee 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -597,7 +597,7 @@ iframe.embed { -webkit-box-sizing: content-box; box-sizing: content-box; } -.destroyActive .mx-scene, .destroyActive .mx-object3d.image { +.destroyActive .mx-scene, .destroyActive .mx-object3d.image, .menu span.inuse[data-role="destroy-media"] { cursor:url(/assets/img/delete-cursor.png), auto; } @@ -1127,7 +1127,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; @@ -1168,6 +1180,7 @@ iframe.embed { -webkit-transform: translateX(400px); transition: transform 0.1s ease-in-out; transform: translateX(400px); + padding: 5px 5px 9px 5px; } .wallpaper.active { display:inline-block; @@ -1192,13 +1205,13 @@ iframe.embed { } .wallpaper .swatches { width: 100%; - border-bottom: 1px solid black; min-height: 30px; } -.wallpaper { - font-size: 14px; - font-weight: 300; + +.wallpaperUpload { + border: 1px solid; } + .wallpaper label { position: relative; top: -6px; @@ -1206,6 +1219,12 @@ iframe.embed { } .wallpaper form { padding: 2px 0 0 0; + font-size: 14px; + font-weight: 300; +} +.wallpaper form:hover { + background:black; + color:white; } .wallpaper .icon-ios7-upload-outline { font-size: 26px; @@ -1367,7 +1386,7 @@ span:hover .swatch { } .settings { - padding: 10px 20px 20px 20px; + padding: 10px 12px 12px 12px; bottom: 20px; right: 10px; font-size: 12px; @@ -1872,6 +1891,11 @@ a[data-role="forgot-password"] { padding:5px 0; display: inline-block; } + +.vvbox .txt { + padding:5px; +} + .aboutRoom h1 a{ text-decoration: none; font-style: italic; diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs index 208dfff..95cf827 100644 --- a/views/controls/editor/wallpaper.ejs +++ b/views/controls/editor/wallpaper.ejs @@ -1,5 +1,5 @@
- +

Add Wallpaper

Add custom wallpaper to walls. Begin by uploading a pattern. Or try this one -> diff --git a/views/editor.ejs b/views/editor.ejs index 9950878..d2823fa 100755 --- a/views/editor.ejs +++ b/views/editor.ejs @@ -24,6 +24,7 @@
+
Reset Position
-- cgit v1.2.3-70-g09d2 From d42fb4d07ad373d4c2523a11fbd535481f1ce265 Mon Sep 17 00:00:00 2001 From: ryderr Date: Tue, 30 Sep 2014 14:57:58 -0400 Subject: delete thing --- public/assets/stylesheets/app.css | 41 +++++++++++++++++++++------------- views/controls/editor/media-drawer.ejs | 2 +- views/controls/editor/media-editor.ejs | 2 +- views/controls/editor/signed-out.ejs | 2 +- views/controls/editor/toolbar.ejs | 2 +- views/controls/reader/about-room.ejs | 2 +- views/editor.ejs | 1 - 7 files changed, 31 insertions(+), 21 deletions(-) (limited to 'views') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 869e5ee..3464b5c 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -402,16 +402,7 @@ iframe.embed { height: 50vh; float: left; } -.editProfile { - margin-right: 10px; - color: black; - font-weight: 100; - text-decoration: none; - padding: 50px 0 100px 0; -} -.editProfile span { - vertical-align: middle; -} + .topLinks { float: right; z-index: 3; @@ -425,7 +416,7 @@ iframe.embed { padding: 20px 8px; color: black; font-weight: 300; - float:right; + float:left; text-decoration: none; border-bottom:1px solid transparent; } @@ -445,6 +436,10 @@ iframe.embed { float: left; } +.profilepage .bio a:hover { + text-decoration:underline; +} + .profilepage .bio.one { background-color: lightyellow; } @@ -902,7 +897,23 @@ iframe.embed { background-image:url(https://s3.amazonaws.com/luckyplop/735c46b0268cd511a22c37bc0c11e9f60c4459b2.png)!important; cursor:move; } - +#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"; font-family: 'ionicons'; @@ -1936,17 +1947,17 @@ a[data-role="forgot-password"] { .share h2 { font-weight: 300; font-size: 18px; - text-align: right; } .share a{ color: #017cfe; text-decoration: none; - margin-left: 6px; font-size: 13px; font-weight: 600; } - +.share a:nth-child(3){ + margin-left:4px; +} .share a:hover{ text-decoration:underline; } diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index d73a3ef..dbab237 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -17,7 +17,7 @@
X

Your Media – Found Media


-

delete media?

+

diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs index 8f2c1c8..ef46e6f 100644 --- a/views/controls/editor/media-editor.ejs +++ b/views/controls/editor/media-editor.ejs @@ -52,6 +52,6 @@
- delete this media + remove from wall
diff --git a/views/controls/editor/signed-out.ejs b/views/controls/editor/signed-out.ejs index 20e3715..118fb7c 100644 --- a/views/controls/editor/signed-out.ejs +++ b/views/controls/editor/signed-out.ejs @@ -8,7 +8,7 @@
diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs index d721c07..1c4c26f 100644 --- a/views/controls/editor/toolbar.ejs +++ b/views/controls/editor/toolbar.ejs @@ -8,11 +8,11 @@ data-role='resize-media' data-info="resize media" class="icon-arrow-resize"> - --> + --> diff --git a/views/editor.ejs b/views/editor.ejs index d2823fa..9950878 100755 --- a/views/editor.ejs +++ b/views/editor.ejs @@ -24,7 +24,6 @@
-
Reset Position
-- cgit v1.2.3-70-g09d2 From 7562a585d47e79fa5fa8a32885f7b4bd29da4a39 Mon Sep 17 00:00:00 2001 From: ryderr Date: Tue, 30 Sep 2014 15:42:25 -0400 Subject: fixed header --- public/assets/stylesheets/app.css | 77 +++++++++------------------------------ views/partials/header.ejs | 9 ++++- views/profile.ejs | 2 +- 3 files changed, 25 insertions(+), 63 deletions(-) (limited to 'views') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 8554d59..2b6cc3e 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -45,6 +45,15 @@ a{ text-decoration: none; } +#header { + position: fixed; + width: 100%; + top: 0; + left: 0; + background: white; + z-index: 6; +} + /*page*/ .topLogo { @@ -58,9 +67,6 @@ a{ cursor: -moz-grabbing; } -.floatimgImg.edit { - -} .floatingSwatch { width: 50px; @@ -266,57 +272,6 @@ iframe.embed { } - -/* -.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; -} - -.room1.editing .formHolder { - -webkit-transform:translateY(0); - transform:translateY(0); -} -*/ - .page .questions { background: #55efcb; color:white; @@ -433,6 +388,7 @@ iframe.embed { background-color: lightyellow; display: table; height: 50vh; + border-top: 1px solid; float: left; } @@ -1778,12 +1734,13 @@ 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; + margin-top: 63px; } .hero .circle { font-size: 20px; diff --git a/views/partials/header.ejs b/views/partials/header.ejs index a48c5e1..d46155f 100644 --- a/views/partials/header.ejs +++ b/views/partials/header.ejs @@ -1,3 +1,4 @@ + +

Whats VValls For?

+ +
+
+
+ + + +

Plan Your Art Show

+ Whether you're and artist or curator, VValls makes visualizing art within a physical space much easier. With VValls you can build 3D rooms and put your add art to the walls. Map out how your next gallery show will look without having to drill into sheetrock. + +
+
+ +
+
+ + + +

Defy The Status Quo

+ There is no platform on the internet quite like VValls. Built using advanced HTML5 techniques, VValls opens up the possibilities of expression online. Go crazy, make other worldly rooms. + +
+
+ +
+
+ + + +

Put on a Show!

+ There's no cooler way than VValls for displaying your images online. Take your pix out of that drab Tumblr theme and present them in the freshest way online! + +
+
+ +
+

Room Showcase

[[ include projects/list-projects ]] -- cgit v1.2.3-70-g09d2 From c2fe9c3df33d02e6c23c738047faa22662df978b Mon Sep 17 00:00:00 2001 From: ryderr Date: Wed, 1 Oct 2014 14:09:41 -0400 Subject: stylez --- public/assets/stylesheets/app.css | 9 +++------ views/home.ejs | 4 ++-- 2 files changed, 5 insertions(+), 8 deletions(-) (limited to 'views') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 1392e05..545207a 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -516,8 +516,10 @@ iframe.embed { .profilepage .bio span { font-size: 16px; font-weight: 300; + float: left; + clear: both; } -.profilepage .bio span:after { content: ' \00b7 ' } + .profilepage .bio span:last-of-type:after { display: none; } .templates { @@ -742,11 +744,6 @@ iframe.embed { .logo { float:left; padding:6px 8px 9px 8px; - z-index:4; - position:relative; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; } .logo:hover { diff --git a/views/home.ejs b/views/home.ejs index 83ed375..885c339 100755 --- a/views/home.ejs +++ b/views/home.ejs @@ -50,10 +50,10 @@
- + -

Put on a Show!

+

Put on a Show

There's no cooler way than VValls for displaying your images online. Take your pix out of that drab Tumblr theme and present them in the freshest way online!
-- cgit v1.2.3-70-g09d2 From 4aa421b68f59b383f39661119eabc582976c1d13 Mon Sep 17 00:00:00 2001 From: ryderr Date: Wed, 1 Oct 2014 14:49:11 -0400 Subject: wow --- public/assets/javascripts/app.js | 2 + public/assets/javascripts/vendor/wow.js | 452 +++++ public/assets/stylesheets/animate.css | 3158 +++++++++++++++++++++++++++++++ public/assets/stylesheets/app.css | 1 + views/home.ejs | 8 +- views/partials/meta.ejs | 1 + views/partials/scripts.ejs | 1 + 7 files changed, 3619 insertions(+), 4 deletions(-) create mode 100644 public/assets/javascripts/vendor/wow.js create mode 100644 public/assets/stylesheets/animate.css (limited to 'views') diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js index 1dd8a5e..a6b6088 100644 --- a/public/assets/javascripts/app.js +++ b/public/assets/javascripts/app.js @@ -15,6 +15,8 @@ else { $("html").addClass("desktop"); } +new WOW().init(); + var scene, cam, map; var app = new function(){} diff --git a/public/assets/javascripts/vendor/wow.js b/public/assets/javascripts/vendor/wow.js new file mode 100644 index 0000000..83ca71b --- /dev/null +++ b/public/assets/javascripts/vendor/wow.js @@ -0,0 +1,452 @@ +(function() { + var MutationObserver, Util, WeakMap, getComputedStyle, getComputedStyleRX, + __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }, + __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }; + + Util = (function() { + function Util() {} + + Util.prototype.extend = function(custom, defaults) { + var key, value; + for (key in defaults) { + value = defaults[key]; + if (custom[key] == null) { + custom[key] = value; + } + } + return custom; + }; + + Util.prototype.isMobile = function(agent) { + return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent); + }; + + Util.prototype.addEvent = function(elem, event, fn) { + if (elem.addEventListener != null) { + return elem.addEventListener(event, fn, false); + } else if (elem.attachEvent != null) { + return elem.attachEvent("on" + event, fn); + } else { + return elem[event] = fn; + } + }; + + Util.prototype.removeEvent = function(elem, event, fn) { + if (elem.removeEventListener != null) { + return elem.removeEventListener(event, fn, false); + } else if (elem.detachEvent != null) { + return elem.detachEvent("on" + event, fn); + } else { + return delete elem[event]; + } + }; + + Util.prototype.innerHeight = function() { + if ('innerHeight' in window) { + return window.innerHeight; + } else { + return document.documentElement.clientHeight; + } + }; + + return Util; + + })(); + + WeakMap = this.WeakMap || this.MozWeakMap || (WeakMap = (function() { + function WeakMap() { + this.keys = []; + this.values = []; + } + + WeakMap.prototype.get = function(key) { + var i, item, _i, _len, _ref; + _ref = this.keys; + for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) { + item = _ref[i]; + if (item === key) { + return this.values[i]; + } + } + }; + + WeakMap.prototype.set = function(key, value) { + var i, item, _i, _len, _ref; + _ref = this.keys; + for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) { + item = _ref[i]; + if (item === key) { + this.values[i] = value; + return; + } + } + this.keys.push(key); + return this.values.push(value); + }; + + return WeakMap; + + })()); + + MutationObserver = this.MutationObserver || this.WebkitMutationObserver || this.MozMutationObserver || (MutationObserver = (function() { + function MutationObserver() { + if (typeof console !== "undefined" && console !== null) { + console.warn('MutationObserver is not supported by your browser.'); + } + if (typeof console !== "undefined" && console !== null) { + console.warn('WOW.js cannot detect dom mutations, please call .sync() after loading new content.'); + } + } + + MutationObserver.notSupported = true; + + MutationObserver.prototype.observe = function() {}; + + return MutationObserver; + + })()); + + getComputedStyle = this.getComputedStyle || function(el, pseudo) { + this.getPropertyValue = function(prop) { + var _ref; + if (prop === 'float') { + prop = 'styleFloat'; + } + if (getComputedStyleRX.test(prop)) { + prop.replace(getComputedStyleRX, function(_, char) { + return char.toUpperCase(); + }); + } + return ((_ref = el.currentStyle) != null ? _ref[prop] : void 0) || null; + }; + return this; + }; + + getComputedStyleRX = /(\-([a-z]){1})/g; + + this.WOW = (function() { + WOW.prototype.defaults = { + boxClass: 'wow', + animateClass: 'animated', + offset: 0, + mobile: true, + live: true + }; + + function WOW(options) { + if (options == null) { + options = {}; + } + this.scrollCallback = __bind(this.scrollCallback, this); + this.scrollHandler = __bind(this.scrollHandler, this); + this.start = __bind(this.start, this); + this.scrolled = true; + this.config = this.util().extend(options, this.defaults); + this.animationNameCache = new WeakMap(); + } + + WOW.prototype.init = function() { + var _ref; + this.element = window.document.documentElement; + if ((_ref = document.readyState) === "interactive" || _ref === "complete") { + this.start(); + } else { + this.util().addEvent(document, 'DOMContentLoaded', this.start); + } + return this.finished = []; + }; + + WOW.prototype.start = function() { + var box, _i, _len, _ref; + this.stopped = false; + this.boxes = (function() { + var _i, _len, _ref, _results; + _ref = this.element.querySelectorAll("." + this.config.boxClass); + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + box = _ref[_i]; + _results.push(box); + } + return _results; + }).call(this); + this.all = (function() { + var _i, _len, _ref, _results; + _ref = this.boxes; + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + box = _ref[_i]; + _results.push(box); + } + return _results; + }).call(this); + if (this.boxes.length) { + if (this.disabled()) { + this.resetStyle(); + } else { + _ref = this.boxes; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + box = _ref[_i]; + this.applyStyle(box, true); + } + this.util().addEvent(window, 'scroll', this.scrollHandler); + this.util().addEvent(window, 'resize', this.scrollHandler); + this.interval = setInterval(this.scrollCallback, 50); + } + } + if (this.config.live) { + return new MutationObserver((function(_this) { + return function(records) { + var node, record, _j, _len1, _results; + _results = []; + for (_j = 0, _len1 = records.length; _j < _len1; _j++) { + record = records[_j]; + _results.push((function() { + var _k, _len2, _ref1, _results1; + _ref1 = record.addedNodes || []; + _results1 = []; + for (_k = 0, _len2 = _ref1.length; _k < _len2; _k++) { + node = _ref1[_k]; + _results1.push(this.doSync(node)); + } + return _results1; + }).call(_this)); + } + return _results; + }; + })(this)).observe(document.body, { + childList: true, + subtree: true + }); + } + }; + + WOW.prototype.stop = function() { + this.stopped = true; + this.util().removeEvent(window, 'scroll', this.scrollHandler); + this.util().removeEvent(window, 'resize', this.scrollHandler); + if (this.interval != null) { + return clearInterval(this.interval); + } + }; + + WOW.prototype.sync = function(element) { + if (MutationObserver.notSupported) { + return this.doSync(this.element); + } + }; + + WOW.prototype.doSync = function(element) { + var box, _i, _len, _ref, _results; + if (!this.stopped) { + if (element == null) { + element = this.element; + } + if (element.nodeType !== 1) { + return; + } + element = element.parentNode || element; + _ref = element.querySelectorAll("." + this.config.boxClass); + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + box = _ref[_i]; + if (__indexOf.call(this.all, box) < 0) { + this.applyStyle(box, true); + this.boxes.push(box); + this.all.push(box); + _results.push(this.scrolled = true); + } else { + _results.push(void 0); + } + } + return _results; + } + }; + + WOW.prototype.show = function(box) { + this.applyStyle(box); + return box.className = "" + box.className + " " + this.config.animateClass; + }; + + WOW.prototype.applyStyle = function(box, hidden) { + var delay, duration, iteration; + duration = box.getAttribute('data-wow-duration'); + delay = box.getAttribute('data-wow-delay'); + iteration = box.getAttribute('data-wow-iteration'); + return this.animate((function(_this) { + return function() { + return _this.customStyle(box, hidden, duration, delay, iteration); + }; + })(this)); + }; + + WOW.prototype.animate = (function() { + if ('requestAnimationFrame' in window) { + return function(callback) { + return window.requestAnimationFrame(callback); + }; + } else { + return function(callback) { + return callback(); + }; + } + })(); + + WOW.prototype.resetStyle = function() { + var box, _i, _len, _ref, _results; + _ref = this.boxes; + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + box = _ref[_i]; + _results.push(box.setAttribute('style', 'visibility: visible;')); + } + return _results; + }; + + WOW.prototype.customStyle = function(box, hidden, duration, delay, iteration) { + if (hidden) { + this.cacheAnimationName(box); + } + box.style.visibility = hidden ? 'hidden' : 'visible'; + if (duration) { + this.vendorSet(box.style, { + animationDuration: duration + }); + } + if (delay) { + this.vendorSet(box.style, { + animationDelay: delay + }); + } + if (iteration) { + this.vendorSet(box.style, { + animationIterationCount: iteration + }); + } + this.vendorSet(box.style, { + animationName: hidden ? 'none' : this.cachedAnimationName(box) + }); + return box; + }; + + WOW.prototype.vendors = ["moz", "webkit"]; + + WOW.prototype.vendorSet = function(elem, properties) { + var name, value, vendor, _results; + _results = []; + for (name in properties) { + value = properties[name]; + elem["" + name] = value; + _results.push((function() { + var _i, _len, _ref, _results1; + _ref = this.vendors; + _results1 = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + vendor = _ref[_i]; + _results1.push(elem["" + vendor + (name.charAt(0).toUpperCase()) + (name.substr(1))] = value); + } + return _results1; + }).call(this)); + } + return _results; + }; + + WOW.prototype.vendorCSS = function(elem, property) { + var result, style, vendor, _i, _len, _ref; + style = getComputedStyle(elem); + result = style.getPropertyCSSValue(property); + _ref = this.vendors; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + vendor = _ref[_i]; + result = result || style.getPropertyCSSValue("-" + vendor + "-" + property); + } + return result; + }; + + WOW.prototype.animationName = function(box) { + var animationName; + try { + animationName = this.vendorCSS(box, 'animation-name').cssText; + } catch (_error) { + animationName = getComputedStyle(box).getPropertyValue('animation-name'); + } + if (animationName === 'none') { + return ''; + } else { + return animationName; + } + }; + + WOW.prototype.cacheAnimationName = function(box) { + return this.animationNameCache.set(box, this.animationName(box)); + }; + + WOW.prototype.cachedAnimationName = function(box) { + return this.animationNameCache.get(box); + }; + + WOW.prototype.scrollHandler = function() { + return this.scrolled = true; + }; + + WOW.prototype.scrollCallback = function() { + var box; + if (this.scrolled) { + this.scrolled = false; + this.boxes = (function() { + var _i, _len, _ref, _results; + _ref = this.boxes; + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + box = _ref[_i]; + if (!(box)) { + continue; + } + if (this.isVisible(box)) { + this.show(box); + continue; + } + _results.push(box); + } + return _results; + }).call(this); + if (!(this.boxes.length || this.config.live)) { + return this.stop(); + } + } + }; + + WOW.prototype.offsetTop = function(element) { + var top; + while (element.offsetTop === void 0) { + element = element.parentNode; + } + top = element.offsetTop; + while (element = element.offsetParent) { + top += element.offsetTop; + } + return top; + }; + + WOW.prototype.isVisible = function(box) { + var bottom, offset, top, viewBottom, viewTop; + offset = box.getAttribute('data-wow-offset') || this.config.offset; + viewTop = window.pageYOffset; + viewBottom = viewTop + Math.min(this.element.clientHeight, this.util().innerHeight()) - offset; + top = this.offsetTop(box); + bottom = top + box.clientHeight; + return top <= viewBottom && bottom >= viewTop; + }; + + WOW.prototype.util = function() { + return this._util != null ? this._util : this._util = new Util(); + }; + + WOW.prototype.disabled = function() { + return !this.config.mobile && this.util().isMobile(navigator.userAgent); + }; + + return WOW; + + })(); + +}).call(this); diff --git a/public/assets/stylesheets/animate.css b/public/assets/stylesheets/animate.css new file mode 100644 index 0000000..f784ce8 --- /dev/null +++ b/public/assets/stylesheets/animate.css @@ -0,0 +1,3158 @@ +@charset "UTF-8"; +/*! +Animate.css - http://daneden.me/animate +Licensed under the MIT license - http://opensource.org/licenses/MIT + +Copyright (c) 2014 Daniel Eden +*/ + +.animated { + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.animated.infinite { + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +.animated.hinge { + -webkit-animation-duration: 2s; + animation-duration: 2s; +} + +@-webkit-keyframes bounce { + 0%, 20%, 53%, 80%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + -webkit-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); + } + + 40%, 43% { + -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + -webkit-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0); + } + + 70% { + -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + -webkit-transform: translate3d(0, -15px, 0); + transform: translate3d(0, -15px, 0); + } + + 90% { + -webkit-transform: translate3d(0,-4px,0); + transform: translate3d(0,-4px,0); + } +} + +@keyframes bounce { + 0%, 20%, 53%, 80%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + -webkit-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); + } + + 40%, 43% { + -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + -webkit-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0); + } + + 70% { + -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + -webkit-transform: translate3d(0, -15px, 0); + transform: translate3d(0, -15px, 0); + } + + 90% { + -webkit-transform: translate3d(0,-4px,0); + transform: translate3d(0,-4px,0); + } +} + +.bounce { + -webkit-animation-name: bounce; + animation-name: bounce; + -webkit-transform-origin: center bottom; + -ms-transform-origin: center bottom; + transform-origin: center bottom; +} + +@-webkit-keyframes flash { + 0%, 50%, 100% { + opacity: 1; + } + + 25%, 75% { + opacity: 0; + } +} + +@keyframes flash { + 0%, 50%, 100% { + opacity: 1; + } + + 25%, 75% { + opacity: 0; + } +} + +.flash { + -webkit-animation-name: flash; + animation-name: flash; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-webkit-keyframes pulse { + 0% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 50% { + -webkit-transform: scale3d(1.05, 1.05, 1.05); + transform: scale3d(1.05, 1.05, 1.05); + } + + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +@keyframes pulse { + 0% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 50% { + -webkit-transform: scale3d(1.05, 1.05, 1.05); + transform: scale3d(1.05, 1.05, 1.05); + } + + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +.pulse { + -webkit-animation-name: pulse; + animation-name: pulse; +} + +@-webkit-keyframes rubberBand { + 0% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 30% { + -webkit-transform: scale3d(1.25, 0.75, 1); + transform: scale3d(1.25, 0.75, 1); + } + + 40% { + -webkit-transform: scale3d(0.75, 1.25, 1); + transform: scale3d(0.75, 1.25, 1); + } + + 50% { + -webkit-transform: scale3d(1.15, 0.85, 1); + transform: scale3d(1.15, 0.85, 1); + } + + 65% { + -webkit-transform: scale3d(.95, 1.05, 1); + transform: scale3d(.95, 1.05, 1); + } + + 75% { + -webkit-transform: scale3d(1.05, .95, 1); + transform: scale3d(1.05, .95, 1); + } + + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +@keyframes rubberBand { + 0% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 30% { + -webkit-transform: scale3d(1.25, 0.75, 1); + transform: scale3d(1.25, 0.75, 1); + } + + 40% { + -webkit-transform: scale3d(0.75, 1.25, 1); + transform: scale3d(0.75, 1.25, 1); + } + + 50% { + -webkit-transform: scale3d(1.15, 0.85, 1); + transform: scale3d(1.15, 0.85, 1); + } + + 65% { + -webkit-transform: scale3d(.95, 1.05, 1); + transform: scale3d(.95, 1.05, 1); + } + + 75% { + -webkit-transform: scale3d(1.05, .95, 1); + transform: scale3d(1.05, .95, 1); + } + + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +.rubberBand { + -webkit-animation-name: rubberBand; + animation-name: rubberBand; +} + +@-webkit-keyframes shake { + 0%, 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + + 20%, 40%, 60%, 80% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } +} + +@keyframes shake { + 0%, 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + + 20%, 40%, 60%, 80% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } +} + +.shake { + -webkit-animation-name: shake; + animation-name: shake; +} + +@-webkit-keyframes swing { + 20% { + -webkit-transform: rotate3d(0, 0, 1, 15deg); + transform: rotate3d(0, 0, 1, 15deg); + } + + 40% { + -webkit-transform: rotate3d(0, 0, 1, -10deg); + transform: rotate3d(0, 0, 1, -10deg); + } + + 60% { + -webkit-transform: rotate3d(0, 0, 1, 5deg); + transform: rotate3d(0, 0, 1, 5deg); + } + + 80% { + -webkit-transform: rotate3d(0, 0, 1, -5deg); + transform: rotate3d(0, 0, 1, -5deg); + } + + 100% { + -webkit-transform: rotate3d(0, 0, 1, 0deg); + transform: rotate3d(0, 0, 1, 0deg); + } +} + +@keyframes swing { + 20% { + -webkit-transform: rotate3d(0, 0, 1, 15deg); + transform: rotate3d(0, 0, 1, 15deg); + } + + 40% { + -webkit-transform: rotate3d(0, 0, 1, -10deg); + transform: rotate3d(0, 0, 1, -10deg); + } + + 60% { + -webkit-transform: rotate3d(0, 0, 1, 5deg); + transform: rotate3d(0, 0, 1, 5deg); + } + + 80% { + -webkit-transform: rotate3d(0, 0, 1, -5deg); + transform: rotate3d(0, 0, 1, -5deg); + } + + 100% { + -webkit-transform: rotate3d(0, 0, 1, 0deg); + transform: rotate3d(0, 0, 1, 0deg); + } +} + +.swing { + -webkit-transform-origin: top center; + -ms-transform-origin: top center; + transform-origin: top center; + -webkit-animation-name: swing; + animation-name: swing; +} + +@-webkit-keyframes tada { + 0% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 10%, 20% { + -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); + transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); + } + + 30%, 50%, 70%, 90% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + } + + 40%, 60%, 80% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + } + + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +@keyframes tada { + 0% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 10%, 20% { + -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); + transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); + } + + 30%, 50%, 70%, 90% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + } + + 40%, 60%, 80% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + } + + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +.tada { + -webkit-animation-name: tada; + animation-name: tada; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-webkit-keyframes wobble { + 0% { + -webkit-transform: none; + transform: none; + } + + 15% { + -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + } + + 30% { + -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + } + + 45% { + -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + } + + 60% { + -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + } + + 75% { + -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + } + + 100% { + -webkit-transform: none; + transform: none; + } +} + +@keyframes wobble { + 0% { + -webkit-transform: none; + transform: none; + } + + 15% { + -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + } + + 30% { + -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + } + + 45% { + -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + } + + 60% { + -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + } + + 75% { + -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + } + + 100% { + -webkit-transform: none; + transform: none; + } +} + +.wobble { + -webkit-animation-name: wobble; + animation-name: wobble; +} + +@-webkit-keyframes bounceIn { + 0%, 20%, 40%, 60%, 80%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); + } + + 20% { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + + 40% { + -webkit-transform: scale3d(.9, .9, .9); + transform: scale3d(.9, .9, .9); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(1.03, 1.03, 1.03); + transform: scale3d(1.03, 1.03, 1.03); + } + + 80% { + -webkit-transform: scale3d(.97, .97, .97); + transform: scale3d(.97, .97, .97); + } + + 100% { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +@keyframes bounceIn { + 0%, 20%, 40%, 60%, 80%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); + } + + 20% { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + + 40% { + -webkit-transform: scale3d(.9, .9, .9); + transform: scale3d(.9, .9, .9); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(1.03, 1.03, 1.03); + transform: scale3d(1.03, 1.03, 1.03); + } + + 80% { + -webkit-transform: scale3d(.97, .97, .97); + transform: scale3d(.97, .97, .97); + } + + 100% { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +.bounceIn { + -webkit-animation-name: bounceIn; + animation-name: bounceIn; + -webkit-animation-duration: .75s; + animation-duration: .75s; +} + +@-webkit-keyframes bounceInDown { + 0%, 60%, 75%, 90%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -3000px, 0); + transform: translate3d(0, -3000px, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(0, 25px, 0); + transform: translate3d(0, 25px, 0); + } + + 75% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + + 90% { + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0); + } + + 100% { + -webkit-transform: none; + transform: none; + } +} + +@keyframes bounceInDown { + 0%, 60%, 75%, 90%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -3000px, 0); + transform: translate3d(0, -3000px, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(0, 25px, 0); + transform: translate3d(0, 25px, 0); + } + + 75% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + + 90% { + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0); + } + + 100% { + -webkit-transform: none; + transform: none; + } +} + +.bounceInDown { + -webkit-animation-name: bounceInDown; + animation-name: bounceInDown; +} + +@-webkit-keyframes bounceInLeft { + 0%, 60%, 75%, 90%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + -webkit-transform: translate3d(-3000px, 0, 0); + transform: translate3d(-3000px, 0, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(25px, 0, 0); + transform: translate3d(25px, 0, 0); + } + + 75% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + + 90% { + -webkit-transform: translate3d(5px, 0, 0); + transform: translate3d(5px, 0, 0); + } + + 100% { + -webkit-transform: none; + transform: none; + } +} + +@keyframes bounceInLeft { + 0%, 60%, 75%, 90%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + -webkit-transform: translate3d(-3000px, 0, 0); + transform: translate3d(-3000px, 0, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(25px, 0, 0); + transform: translate3d(25px, 0, 0); + } + + 75% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + + 90% { + -webkit-transform: translate3d(5px, 0, 0); + transform: translate3d(5px, 0, 0); + } + + 100% { + -webkit-transform: none; + transform: none; + } +} + +.bounceInLeft { + -webkit-animation-name: bounceInLeft; + animation-name: bounceInLeft; +} + +@-webkit-keyframes bounceInRight { + 0%, 60%, 75%, 90%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + -webkit-transform: translate3d(3000px, 0, 0); + transform: translate3d(3000px, 0, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(-25px, 0, 0); + transform: translate3d(-25px, 0, 0); + } + + 75% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } + + 90% { + -webkit-transform: translate3d(-5px, 0, 0); + transform: translate3d(-5px, 0, 0); + } + + 100% { + -webkit-transform: none; + transform: none; + } +} + +@keyframes bounceInRight { + 0%, 60%, 75%, 90%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + -webkit-transform: translate3d(3000px, 0, 0); + transform: translate3d(3000px, 0, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(-25px, 0, 0); + transform: translate3d(-25px, 0, 0); + } + + 75% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } + + 90% { + -webkit-transform: translate3d(-5px, 0, 0); + transform: translate3d(-5px, 0, 0); + } + + 100% { + -webkit-transform: none; + transform: none; + } +} + +.bounceInRight { + -webkit-animation-name: bounceInRight; + animation-name: bounceInRight; +} + +@-webkit-keyframes bounceInUp { + 0%, 60%, 75%, 90%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 3000px, 0); + transform: translate3d(0, 3000px, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + + 75% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + + 90% { + -webkit-transform: translate3d(0, -5px, 0); + transform: translate3d(0, -5px, 0); + } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes bounceInUp { + 0%, 60%, 75%, 90%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 3000px, 0); + transform: translate3d(0, 3000px, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + + 75% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + + 90% { + -webkit-transform: translate3d(0, -5px, 0); + transform: translate3d(0, -5px, 0); + } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.bounceInUp { + -webkit-animation-name: bounceInUp; + animation-name: bounceInUp; +} + +@-webkit-keyframes bounceOut { + 20% { + -webkit-transform: scale3d(.9, .9, .9); + transform: scale3d(.9, .9, .9); + } + + 50%, 55% { + opacity: 1; + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + + 100% { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); + } +} + +@keyframes bounceOut { + 20% { + -webkit-transform: scale3d(.9, .9, .9); + transform: scale3d(.9, .9, .9); + } + + 50%, 55% { + opacity: 1; + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + + 100% { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); + } +} + +.bounceOut { + -webkit-animation-name: bounceOut; + animation-name: bounceOut; + -webkit-animation-duration: .75s; + animation-duration: .75s; +} + +@-webkit-keyframes bounceOutDown { + 20% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + + 40%, 45% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } +} + +@keyframes bounceOutDown { + 20% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + + 40%, 45% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } +} + +.bounceOutDown { + -webkit-animation-name: bounceOutDown; + animation-name: bounceOutDown; +} + +@-webkit-keyframes bounceOutLeft { + 20% { + opacity: 1; + -webkit-transform: translate3d(20px, 0, 0); + transform: translate3d(20px, 0, 0); + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } +} + +@keyframes bounceOutLeft { + 20% { + opacity: 1; + -webkit-transform: translate3d(20px, 0, 0); + transform: translate3d(20px, 0, 0); + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } +} + +.bounceOutLeft { + -webkit-animation-name: bounceOutLeft; + animation-name: bounceOutLeft; +} + +@-webkit-keyframes bounceOutRight { + 20% { + opacity: 1; + -webkit-transform: translate3d(-20px, 0, 0); + transform: translate3d(-20px, 0, 0); + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } +} + +@keyframes bounceOutRight { + 20% { + opacity: 1; + -webkit-transform: translate3d(-20px, 0, 0); + transform: translate3d(-20px, 0, 0); + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } +} + +.bounceOutRight { + -webkit-animation-name: bounceOutRight; + animation-name: bounceOutRight; +} + +@-webkit-keyframes bounceOutUp { + 20% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + + 40%, 45% { + opacity: 1; + -webkit-transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0); + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } +} + +@keyframes bounceOutUp { + 20% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + + 40%, 45% { + opacity: 1; + -webkit-transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0); + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } +} + +.bounceOutUp { + -webkit-animation-name: bounceOutUp; + animation-name: bounceOutUp; +} + +@-webkit-keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} +} + +@keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} +} + +.fadeIn { + -webkit-animation-name: fadeIn; + animation-name: fadeIn; +} + +@-webkit-keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } + + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +@keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } + + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +.fadeInDown { + -webkit-animation-name: fadeInDown; + animation-name: fadeInDown; +} + +@-webkit-keyframes fadeInDownBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } + + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +@keyframes fadeInDownBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } + + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +.fadeInDownBig { + -webkit-animation-name: fadeInDownBig; + animation-name: fadeInDownBig; +} + +@-webkit-keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } + + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +@keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } + + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +.fadeInLeft { + -webkit-animation-name: fadeInLeft; + animation-name: fadeInLeft; +} + +@-webkit-keyframes fadeInLeftBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } + + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +@keyframes fadeInLeftBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } + + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +.fadeInLeftBig { + -webkit-animation-name: fadeInLeftBig; + animation-name: fadeInLeftBig; +} + +@-webkit-keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } + + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +@keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } + + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +.fadeInRight { + -webkit-animation-name: fadeInRight; + animation-name: fadeInRight; +} + +@-webkit-keyframes fadeInRightBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } + + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +@keyframes fadeInRightBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } + + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +.fadeInRightBig { + -webkit-animation-name: fadeInRightBig; + animation-name: fadeInRightBig; +} + +@-webkit-keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } + + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +@keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } + + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +.fadeInUp { + -webkit-animation-name: fadeInUp; + animation-name: fadeInUp; +} + +@-webkit-keyframes fadeInUpBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } + + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +@keyframes fadeInUpBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } + + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +.fadeInUpBig { + -webkit-animation-name: fadeInUpBig; + animation-name: fadeInUpBig; +} + +@-webkit-keyframes fadeOut { + 0% {opacity: 1;} + 100% {opacity: 0;} +} + +@keyframes fadeOut { + 0% {opacity: 1;} + 100% {opacity: 0;} +} + +.fadeOut { + -webkit-animation-name: fadeOut; + animation-name: fadeOut; +} + +@-webkit-keyframes fadeOutDown { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} + +@keyframes fadeOutDown { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} + +.fadeOutDown { + -webkit-animation-name: fadeOutDown; + animation-name: fadeOutDown; +} + +@-webkit-keyframes fadeOutDownBig { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } +} + +@keyframes fadeOutDownBig { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } +} + +.fadeOutDownBig { + -webkit-animation-name: fadeOutDownBig; + animation-name: fadeOutDownBig; +} + +@-webkit-keyframes fadeOutLeft { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } +} + +@keyframes fadeOutLeft { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } +} + +.fadeOutLeft { + -webkit-animation-name: fadeOutLeft; + animation-name: fadeOutLeft; +} + +@-webkit-keyframes fadeOutLeftBig { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } +} + +@keyframes fadeOutLeftBig { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } +} + +.fadeOutLeftBig { + -webkit-animation-name: fadeOutLeftBig; + animation-name: fadeOutLeftBig; +} + +@-webkit-keyframes fadeOutRight { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } +} + +@keyframes fadeOutRight { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } +} + +.fadeOutRight { + -webkit-animation-name: fadeOutRight; + animation-name: fadeOutRight; +} + +@-webkit-keyframes fadeOutRightBig { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } +} + +@keyframes fadeOutRightBig { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } +} + +.fadeOutRightBig { + -webkit-animation-name: fadeOutRightBig; + animation-name: fadeOutRightBig; +} + +@-webkit-keyframes fadeOutUp { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } +} + +@keyframes fadeOutUp { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } +} + +.fadeOutUp { + -webkit-animation-name: fadeOutUp; + animation-name: fadeOutUp; +} + +@-webkit-keyframes fadeOutUpBig { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } +} + +@keyframes fadeOutUpBig { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } +} + +.fadeOutUpBig { + -webkit-animation-name: fadeOutUpBig; + animation-name: fadeOutUpBig; +} + +@-webkit-keyframes flip { + 0% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); + transform: perspective(400px) rotate3d(0, 1, 0, -360deg); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + 40% { + -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + 50% { + -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 80% { + -webkit-transform: perspective(400px) scale3d(.95, .95, .95); + transform: perspective(400px) scale3d(.95, .95, .95); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 100% { + -webkit-transform: perspective(400px); + transform: perspective(400px); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } +} + +@keyframes flip { + 0% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); + transform: perspective(400px) rotate3d(0, 1, 0, -360deg); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + 40% { + -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + 50% { + -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 80% { + -webkit-transform: perspective(400px) scale3d(.95, .95, .95); + transform: perspective(400px) scale3d(.95, .95, .95); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 100% { + -webkit-transform: perspective(400px); + transform: perspective(400px); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } +} + +.animated.flip { + -webkit-backface-visibility: visible; + backface-visibility: visible; + -webkit-animation-name: flip; + animation-name: flip; +} + +@-webkit-keyframes flipInX { + 0% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + -webkit-transition-timing-function: ease-in; + transition-timing-function: ease-in; + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + -webkit-transition-timing-function: ease-in; + transition-timing-function: ease-in; + } + + 60% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + opacity: 1; + } + + 80% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + } + + 100% { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } +} + +@keyframes flipInX { + 0% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + -webkit-transition-timing-function: ease-in; + transition-timing-function: ease-in; + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + -webkit-transition-timing-function: ease-in; + transition-timing-function: ease-in; + } + + 60% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + opacity: 1; + } + + 80% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + } + + 100% { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } +} + +.flipInX { + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipInX; + animation-name: flipInX; +} + +@-webkit-keyframes flipInY { + 0% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + -webkit-transition-timing-function: ease-in; + transition-timing-function: ease-in; + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + -webkit-transition-timing-function: ease-in; + transition-timing-function: ease-in; + } + + 60% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + opacity: 1; + } + + 80% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + } + + 100% { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } +} + +@keyframes flipInY { + 0% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + -webkit-transition-timing-function: ease-in; + transition-timing-function: ease-in; + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + -webkit-transition-timing-function: ease-in; + transition-timing-function: ease-in; + } + + 60% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + opacity: 1; + } + + 80% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + } + + 100% { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } +} + +.flipInY { + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipInY; + animation-name: flipInY; +} + +@-webkit-keyframes flipOutX { + 0% { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } + + 30% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + opacity: 1; + } + + 100% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + opacity: 0; + } +} + +@keyframes flipOutX { + 0% { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } + + 30% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + opacity: 1; + } + + 100% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + opacity: 0; + } +} + +.flipOutX { + -webkit-animation-name: flipOutX; + animation-name: flipOutX; + -webkit-animation-duration: .75s; + animation-duration: .75s; + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; +} + +@-webkit-keyframes flipOutY { + 0% { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } + + 30% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + opacity: 1; + } + + 100% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + opacity: 0; + } +} + +@keyframes flipOutY { + 0% { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } + + 30% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + opacity: 1; + } + + 100% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + opacity: 0; + } +} + +.flipOutY { + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipOutY; + animation-name: flipOutY; + -webkit-animation-duration: .75s; + animation-duration: .75s; +} + +@-webkit-keyframes lightSpeedIn { + 0% { + -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); + transform: translate3d(100%, 0, 0) skewX(-30deg); + opacity: 0; + } + + 60% { + -webkit-transform: skewX(20deg); + transform: skewX(20deg); + opacity: 1; + } + + 80% { + -webkit-transform: skewX(-5deg); + transform: skewX(-5deg); + opacity: 1; + } + + 100% { + -webkit-transform: none; + transform: none; + opacity: 1; + } +} + +@keyframes lightSpeedIn { + 0% { + -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); + transform: translate3d(100%, 0, 0) skewX(-30deg); + opacity: 0; + } + + 60% { + -webkit-transform: skewX(20deg); + transform: skewX(20deg); + opacity: 1; + } + + 80% { + -webkit-transform: skewX(-5deg); + transform: skewX(-5deg); + opacity: 1; + } + + 100% { + -webkit-transform: none; + transform: none; + opacity: 1; + } +} + +.lightSpeedIn { + -webkit-animation-name: lightSpeedIn; + animation-name: lightSpeedIn; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; +} + +@-webkit-keyframes lightSpeedOut { + 0% { + opacity: 1; + } + + 100% { + -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); + transform: translate3d(100%, 0, 0) skewX(30deg); + opacity: 0; + } +} + +@keyframes lightSpeedOut { + 0% { + opacity: 1; + } + + 100% { + -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); + transform: translate3d(100%, 0, 0) skewX(30deg); + opacity: 0; + } +} + +.lightSpeedOut { + -webkit-animation-name: lightSpeedOut; + animation-name: lightSpeedOut; + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; +} + +@-webkit-keyframes rotateIn { + 0% { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, -200deg); + transform: rotate3d(0, 0, 1, -200deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: none; + transform: none; + opacity: 1; + } +} + +@keyframes rotateIn { + 0% { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, -200deg); + transform: rotate3d(0, 0, 1, -200deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: none; + transform: none; + opacity: 1; + } +} + +.rotateIn { + -webkit-animation-name: rotateIn; + animation-name: rotateIn; +} + +@-webkit-keyframes rotateInDownLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: none; + transform: none; + opacity: 1; + } +} + +@keyframes rotateInDownLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: none; + transform: none; + opacity: 1; + } +} + +.rotateInDownLeft { + -webkit-animation-name: rotateInDownLeft; + animation-name: rotateInDownLeft; +} + +@-webkit-keyframes rotateInDownRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: none; + transform: none; + opacity: 1; + } +} + +@keyframes rotateInDownRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: none; + transform: none; + opacity: 1; + } +} + +.rotateInDownRight { + -webkit-animation-name: rotateInDownRight; + animation-name: rotateInDownRight; +} + +@-webkit-keyframes rotateInUpLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: none; + transform: none; + opacity: 1; + } +} + +@keyframes rotateInUpLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: none; + transform: none; + opacity: 1; + } +} + +.rotateInUpLeft { + -webkit-animation-name: rotateInUpLeft; + animation-name: rotateInUpLeft; +} + +@-webkit-keyframes rotateInUpRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, -90deg); + transform: rotate3d(0, 0, 1, -90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: none; + transform: none; + opacity: 1; + } +} + +@keyframes rotateInUpRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, -90deg); + transform: rotate3d(0, 0, 1, -90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: none; + transform: none; + opacity: 1; + } +} + +.rotateInUpRight { + -webkit-animation-name: rotateInUpRight; + animation-name: rotateInUpRight; +} + +@-webkit-keyframes rotateOut { + 0% { + -webkit-transform-origin: center; + transform-origin: center; + opacity: 1; + } + + 100% { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, 200deg); + transform: rotate3d(0, 0, 1, 200deg); + opacity: 0; + } +} + +@keyframes rotateOut { + 0% { + -webkit-transform-origin: center; + transform-origin: center; + opacity: 1; + } + + 100% { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, 200deg); + transform: rotate3d(0, 0, 1, 200deg); + opacity: 0; + } +} + +.rotateOut { + -webkit-animation-name: rotateOut; + animation-name: rotateOut; +} + +@-webkit-keyframes rotateOutDownLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + opacity: 1; + } + + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } +} + +@keyframes rotateOutDownLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + opacity: 1; + } + + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } +} + +.rotateOutDownLeft { + -webkit-animation-name: rotateOutDownLeft; + animation-name: rotateOutDownLeft; +} + +@-webkit-keyframes rotateOutDownRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + opacity: 1; + } + + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } +} + +@keyframes rotateOutDownRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + opacity: 1; + } + + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } +} + +.rotateOutDownRight { + -webkit-animation-name: rotateOutDownRight; + animation-name: rotateOutDownRight; +} + +@-webkit-keyframes rotateOutUpLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + opacity: 1; + } + + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } +} + +@keyframes rotateOutUpLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + opacity: 1; + } + + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } +} + +.rotateOutUpLeft { + -webkit-animation-name: rotateOutUpLeft; + animation-name: rotateOutUpLeft; +} + +@-webkit-keyframes rotateOutUpRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + opacity: 1; + } + + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, 90deg); + transform: rotate3d(0, 0, 1, 90deg); + opacity: 0; + } +} + +@keyframes rotateOutUpRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + opacity: 1; + } + + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, 90deg); + transform: rotate3d(0, 0, 1, 90deg); + opacity: 0; + } +} + +.rotateOutUpRight { + -webkit-animation-name: rotateOutUpRight; + animation-name: rotateOutUpRight; +} + +@-webkit-keyframes hinge { + 0% { + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 20%, 60% { + -webkit-transform: rotate3d(0, 0, 1, 80deg); + transform: rotate3d(0, 0, 1, 80deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 40%, 80% { + -webkit-transform: rotate3d(0, 0, 1, 60deg); + transform: rotate3d(0, 0, 1, 60deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + opacity: 1; + } + + 100% { + -webkit-transform: translate3d(0, 700px, 0); + transform: translate3d(0, 700px, 0); + opacity: 0; + } +} + +@keyframes hinge { + 0% { + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 20%, 60% { + -webkit-transform: rotate3d(0, 0, 1, 80deg); + transform: rotate3d(0, 0, 1, 80deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 40%, 80% { + -webkit-transform: rotate3d(0, 0, 1, 60deg); + transform: rotate3d(0, 0, 1, 60deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + opacity: 1; + } + + 100% { + -webkit-transform: translate3d(0, 700px, 0); + transform: translate3d(0, 700px, 0); + opacity: 0; + } +} + +.hinge { + -webkit-animation-name: hinge; + animation-name: hinge; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-webkit-keyframes rollIn { + 0% { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + } + + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +@keyframes rollIn { + 0% { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + } + + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +.rollIn { + -webkit-animation-name: rollIn; + animation-name: rollIn; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-webkit-keyframes rollOut { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + } +} + +@keyframes rollOut { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + } +} + +.rollOut { + -webkit-animation-name: rollOut; + animation-name: rollOut; +} + +@-webkit-keyframes zoomIn { + 0% { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); + } + + 50% { + opacity: 1; + } +} + +@keyframes zoomIn { + 0% { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); + } + + 50% { + opacity: 1; + } +} + +.zoomIn { + -webkit-animation-name: zoomIn; + animation-name: zoomIn; +} + +@-webkit-keyframes zoomInDown { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +@keyframes zoomInDown { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomInDown { + -webkit-animation-name: zoomInDown; + animation-name: zoomInDown; +} + +@-webkit-keyframes zoomInLeft { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); + transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +@keyframes zoomInLeft { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); + transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomInLeft { + -webkit-animation-name: zoomInLeft; + animation-name: zoomInLeft; +} + +@-webkit-keyframes zoomInRight { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); + transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +@keyframes zoomInRight { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); + transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomInRight { + -webkit-animation-name: zoomInRight; + animation-name: zoomInRight; +} + +@-webkit-keyframes zoomInUp { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +@keyframes zoomInUp { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomInUp { + -webkit-animation-name: zoomInUp; + animation-name: zoomInUp; +} + +@-webkit-keyframes zoomOut { + 0% { + opacity: 1; + } + + 50% { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); + } + + 100% { + opacity: 0; + } +} + +@keyframes zoomOut { + 0% { + opacity: 1; + } + + 50% { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); + } + + 100% { + opacity: 0; + } +} + +.zoomOut { + -webkit-animation-name: zoomOut; + animation-name: zoomOut; +} + +@-webkit-keyframes zoomOutDown { + 40% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 100% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); + -webkit-transform-origin: center bottom; + transform-origin: center bottom; + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +@keyframes zoomOutDown { + 40% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 100% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); + -webkit-transform-origin: center bottom; + transform-origin: center bottom; + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomOutDown { + -webkit-animation-name: zoomOutDown; + animation-name: zoomOutDown; +} + +@-webkit-keyframes zoomOutLeft { + 40% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); + } + + 100% { + opacity: 0; + -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); + transform: scale(.1) translate3d(-2000px, 0, 0); + -webkit-transform-origin: left center; + transform-origin: left center; + } +} + +@keyframes zoomOutLeft { + 40% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); + } + + 100% { + opacity: 0; + -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); + transform: scale(.1) translate3d(-2000px, 0, 0); + -webkit-transform-origin: left center; + transform-origin: left center; + } +} + +.zoomOutLeft { + -webkit-animation-name: zoomOutLeft; + animation-name: zoomOutLeft; +} + +@-webkit-keyframes zoomOutRight { + 40% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); + } + + 100% { + opacity: 0; + -webkit-transform: scale(.1) translate3d(2000px, 0, 0); + transform: scale(.1) translate3d(2000px, 0, 0); + -webkit-transform-origin: right center; + transform-origin: right center; + } +} + +@keyframes zoomOutRight { + 40% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); + } + + 100% { + opacity: 0; + -webkit-transform: scale(.1) translate3d(2000px, 0, 0); + transform: scale(.1) translate3d(2000px, 0, 0); + -webkit-transform-origin: right center; + transform-origin: right center; + } +} + +.zoomOutRight { + -webkit-animation-name: zoomOutRight; + animation-name: zoomOutRight; +} + +@-webkit-keyframes zoomOutUp { + 40% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 100% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + -webkit-transform-origin: center bottom; + transform-origin: center bottom; + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +@keyframes zoomOutUp { + 40% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 100% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + -webkit-transform-origin: center bottom; + transform-origin: center bottom; + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomOutUp { + -webkit-animation-name: zoomOutUp; + animation-name: zoomOutUp; +} + +@-webkit-keyframes slideInDown { + 0% { + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + visibility: visible; + } + + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes slideInDown { + 0% { + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + visibility: visible; + } + + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +.slideInDown { + -webkit-animation-name: slideInDown; + animation-name: slideInDown; +} + +@-webkit-keyframes slideInLeft { + 0% { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + visibility: visible; + } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes slideInLeft { + 0% { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + visibility: visible; + } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +.slideInLeft { + -webkit-animation-name: slideInLeft; + animation-name: slideInLeft; +} + +@-webkit-keyframes slideInRight { + 0% { + -webkit-transform: translateX(100%); + transform: translateX(100%); + visibility: visible; + } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes slideInRight { + 0% { + -webkit-transform: translateX(100%); + transform: translateX(100%); + visibility: visible; + } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +.slideInRight { + -webkit-animation-name: slideInRight; + animation-name: slideInRight; +} + +@-webkit-keyframes slideInUp { + 0% { + -webkit-transform: translateY(100%); + transform: translateY(100%); + visibility: visible; + } + + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes slideInUp { + 0% { + -webkit-transform: translateY(100%); + transform: translateY(100%); + visibility: visible; + } + + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +.slideInUp { + -webkit-animation-name: slideInUp; + animation-name: slideInUp; +} + +@-webkit-keyframes slideOutDown { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 100% { + visibility: hidden; + -webkit-transform: translateY(100%); + transform: translateY(100%); + } +} + +@keyframes slideOutDown { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 100% { + visibility: hidden; + -webkit-transform: translateY(100%); + transform: translateY(100%); + } +} + +.slideOutDown { + -webkit-animation-name: slideOutDown; + animation-name: slideOutDown; +} + +@-webkit-keyframes slideOutLeft { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 100% { + visibility: hidden; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + } +} + +@keyframes slideOutLeft { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 100% { + visibility: hidden; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + } +} + +.slideOutLeft { + -webkit-animation-name: slideOutLeft; + animation-name: slideOutLeft; +} + +@-webkit-keyframes slideOutRight { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 100% { + visibility: hidden; + -webkit-transform: translateX(100%); + transform: translateX(100%); + } +} + +@keyframes slideOutRight { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 100% { + visibility: hidden; + -webkit-transform: translateX(100%); + transform: translateX(100%); + } +} + +.slideOutRight { + -webkit-animation-name: slideOutRight; + animation-name: slideOutRight; +} + +@-webkit-keyframes slideOutUp { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 100% { + visibility: hidden; + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + } +} + +@keyframes slideOutUp { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 100% { + visibility: hidden; + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + } +} + +.slideOutUp { + -webkit-animation-name: slideOutUp; + animation-name: slideOutUp; +} diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 05b4871..ebe307a 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -17,6 +17,7 @@ body{ overflow-x:hidden; } + body.noOverflow{ overflow:hidden; } diff --git a/views/home.ejs b/views/home.ejs index 885c339..3c1a1dc 100755 --- a/views/home.ejs +++ b/views/home.ejs @@ -15,7 +15,7 @@
- + Create 3D Rooms

Watch video. @@ -26,7 +26,7 @@

Whats VValls For?

-
+
@@ -37,7 +37,7 @@
-
+
@@ -48,7 +48,7 @@
-
+
diff --git a/views/partials/meta.ejs b/views/partials/meta.ejs index 9916b34..4e94a5e 100644 --- a/views/partials/meta.ejs +++ b/views/partials/meta.ejs @@ -32,6 +32,7 @@ +
diff --git a/views/controls/editor/text-editor.ejs b/views/controls/editor/text-editor.ejs new file mode 100644 index 0000000..205fbdf --- /dev/null +++ b/views/controls/editor/text-editor.ejs @@ -0,0 +1,32 @@ +
+

Edit Text

+ +
+ + +
+ +
+ +
+ +
+ remove from wall +
+
+ + \ No newline at end of file diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs index 63df73c..92807e1 100644 --- a/views/controls/editor/toolbar.ejs +++ b/views/controls/editor/toolbar.ejs @@ -12,9 +12,8 @@ data-role='destroy-media' data-info="delete media" class="icon-ios7-trash-outline"> - --> @@ -26,6 +25,13 @@ data-role='toggle-light-control' data-info="edit room colors" class="icon-ios7-sunny-outline"> + +[[ if (user.username == "test12343") { ]] + +[[ } ]] diff --git a/views/partials/header.ejs b/views/partials/header.ejs index 88d832d..065385d 100644 --- a/views/partials/header.ejs +++ b/views/partials/header.ejs @@ -67,7 +67,10 @@ [[ } else if (! profile) { ]] Profile [[ } ]] + + [[ if (opt.editing) { ]] + [[ } ]] [[ } else { ]] diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 2e2d8b6..1ce180a 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -100,6 +100,7 @@ + -- cgit v1.2.3-70-g09d2