diff options
Diffstat (limited to 'public')
19 files changed, 434 insertions, 172 deletions
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index 9a557b9..f9334e6 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -38,7 +38,6 @@ Map.UI.Editor = function(map){ cursor.quantize(1/map.zoom) map.center.a = cursor.x.a map.center.b = -cursor.y.a - console.log(map.center+"") cursor.x.b = cursor.x.a cursor.y.b = cursor.y.a base.mouse.down = false diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js index cb3e980..6f96275 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js @@ -109,6 +109,14 @@ }) Rooms.clipper.update() } + + base.report = function(){ + var data = [] + base.rooms.forEach(function(room){ + data.push( room.report() ) + }) + return data + } base.sorted_by_position = function(){ return sort.rooms_by_position( base.values() ) diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index f2f395b..82ccb87 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -87,7 +87,21 @@ wall.deserialize( wall_data ) }) }, - + + base.paint = function(){ + var wallColor = rgba_string(Walls.colors.wall, app.defaults.wallOpacity) + var outlineColor = rgb_string(Walls.colors.outline) + var floorColor = rgb_string(Walls.colors.floor) + var ceilingColor = rgb_string(Walls.colors.ceiling) + Walls.forEach(function(wall){ + wall.outline(wallColor, outlineColor) + }) + Rooms.forEach(function(room){ + room.setFloorColor(floorColor) + room.setCeilingColor(ceilingColor) + }) + } + base.setColor = { wall: function(rgb){ diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js index f0935d4..6a89158 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/builder.js +++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js @@ -44,9 +44,10 @@ base.clear() base.build() Rooms.grouper.build() + app.tube("rooms-built") } } - + base.build = function (){ Rooms.regions.forEach(function(region){ this.build_walls(region).forEach(function(el){ diff --git a/public/assets/javascripts/rectangles/engine/rooms/grouper.js b/public/assets/javascripts/rectangles/engine/rooms/grouper.js index ba510e1..663d29d 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/grouper.js +++ b/public/assets/javascripts/rectangles/engine/rooms/grouper.js @@ -20,6 +20,8 @@ Surface = require('../../models/surface') sort = require('../../util/sort') _ = require('lodash') + MX = require('../../../../../../test/mocks/mx.js') + scene = MX.Scene FRONT = 0x1, BACK = 0x2, LEFT = 0x4, RIGHT = 0x8, FLOOR = 0x10, CEILING = 0x20 PI = Math.PI HALF_PI = PI/2 diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js index e8bc7f7..ef25d8d 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -10,14 +10,20 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ this.build() this.bind() - + if (opt.data) { + if (opt.wall) { + var position = opt.wall.mxToPosition(opt.data.position) + opt.index = opt.wall.surface.index_for_x( position.a, 0 ) + } + this.set_wall(opt) this.deserialize(opt.data) } else { - this.recenter() + this.set_wall(opt) + this.bounds && this.recenter() } - }, + }, build: function(){ switch (this.media.type) { diff --git a/public/assets/javascripts/rectangles/util/minotaur.js b/public/assets/javascripts/rectangles/util/minotaur.js index e6a37e0..0fcc766 100644 --- a/public/assets/javascripts/rectangles/util/minotaur.js +++ b/public/assets/javascripts/rectangles/util/minotaur.js @@ -53,7 +53,9 @@ } base.hide = function () { - base.$el.removeClass() + setTimeout(function(){ + base.$el.removeClass() + }, 500) } base.init(); diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js index 2fffdba..e6b7e97 100644 --- a/public/assets/javascripts/ui/builder/BuilderInfo.js +++ b/public/assets/javascripts/ui/builder/BuilderInfo.js @@ -55,6 +55,7 @@ var BuilderInfo = View.extend({ this.$height.unitVal( room.height ) this.$x.unitVal( room.rect.x.a ) this.$y.unitVal( room.rect.y.a ) + this.show() }, destroy: function(room){ diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index 796c398..94eed29 100644 --- a/public/assets/javascripts/ui/builder/BuilderSettings.js +++ b/public/assets/javascripts/ui/builder/BuilderSettings.js @@ -9,7 +9,7 @@ var BuilderSettings = FormView.extend({ events: { "keydown": 'stopPropagation', "keydown [name=name]": 'enterSubmit', - "click [data-role='save-layout']": 'save', + "click [data-role='save-layout']": 'clickSave', "click [data-role='clone-layout']": 'clone', "click [data-role='clear-layout']": 'clear', "click [data-role='destroy-layout']": 'destroy', @@ -118,6 +118,11 @@ var BuilderSettings = FormView.extend({ fd.append( "thumbnail", dataUriToBlob(map.canvas.toDataURL()) ) return fd }, + + clickSave: function(){ + this.toggle(false) + this.save() + }, success: function(data){ this.$id.val(data._id) diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js index a89111f..81dce52 100644 --- a/public/assets/javascripts/ui/builder/BuilderView.js +++ b/public/assets/javascripts/ui/builder/BuilderView.js @@ -12,6 +12,11 @@ var BuilderView = View.extend({ this.toolbar = new BuilderToolbar ({ parent: this }) this.settings = new BuilderSettings ({ parent: this }) this.lightControl = new LightControl ({ parent: this }) + + app.on("rooms-built", function(){ + Walls.paint() + }) + }, load: function(name){ diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index 2a3929a..92eff2b 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -10,15 +10,15 @@ var EditorSettings = FormView.extend({ "keydown": 'stopPropagation', "keydown [name=name]": 'enterSubmit', "click [data-role='show-collaborators']": 'showCollaborators', - "click [data-role='save-project']": 'save', + "click [data-role='save-project']": 'clickSave', "click [data-role='clone-project']": 'clone', "click [data-role='clear-project']": 'clear', "click [data-role='destroy-project']": 'destroy', }, initialize: function(opt){ - this.parent = opt.parent - this.__super__.initialize.call(this) + this.parent = opt.parent + this.__super__.initialize.call(this) this.$id = this.$("[name=_id]") this.$csrf = this.$("[name=_csrf]") @@ -41,6 +41,16 @@ var EditorSettings = FormView.extend({ else { this.parent.lightControl.loadDefaults() } + + if (data.walls) { + data.walls.some(function(wall){ + if (wall.background !== "none") { + this.parent.wallpaperPicker.$remove.show() + return true + } + return false + }.bind(this)) + } if (data.isNew) { this.$name.val( "Room " + moment().format("DD/MM/YYYY ha") ) @@ -96,8 +106,11 @@ var EditorSettings = FormView.extend({ }.bind(this)) }, - toggle: function(){ - this.$el.toggleClass("active") + toggle: function(state){ + var state = typeof state == 'boolean' ? state : ! this.$el.hasClass("active") + this.$el.toggleClass("active", state) + + $("[data-role='toggle-project-settings']").toggleClass("inuse", state) }, enterSubmit: function (e) { @@ -158,6 +171,11 @@ var EditorSettings = FormView.extend({ return false }, + clickSave: function(){ + this.toggle(false) + this.save() + }, + success: function(data){ this.$id.val(data._id) this.$name.val(data.name) diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index c631317..e91da0f 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -23,6 +23,11 @@ var EditorToolbar = View.extend({ }, toggleSettings: function(){ + this.resetMode() + $(".inuse").removeClass("inuse") + this.parent.lightControl.hide() + this.parent.wallpaperPicker.hide() + this.parent.mediaEditor.hide() this.parent.settings.toggle() }, @@ -84,7 +89,9 @@ var EditorToolbar = View.extend({ var state = ! $("[data-role='toggle-wallpaper-panel']").hasClass("inuse") this.resetMode() $("[data-role='toggle-wallpaper-panel']").toggleClass("inuse", state) + this.parent.mediaEditor.hide() this.parent.lightControl.hide() + this.parent.settings.hide() this.parent.wallpaperPicker.toggle(state) }, @@ -92,7 +99,9 @@ var EditorToolbar = View.extend({ var state = ! $("[data-role='toggle-light-control']").hasClass("inuse") this.resetMode() $("[data-role='toggle-light-control']").toggleClass("inuse", state) + this.parent.mediaEditor.hide() this.parent.wallpaperPicker.hide() + this.parent.settings.hide() this.parent.lightControl.toggle(state) }, diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index d975180..3eb2861 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -4,8 +4,7 @@ var LightControl = View.extend({ events: { "mousedown": "stopPropagation", - "click .swatch": "clickSwatch", - "click label": "clickLabel", + "click .color-swatches span": "select", "input #shadow-control": "updateShadow", "mousedown #brightness-control": "beginBrightness", "input #brightness-control": "updateBrightness", @@ -14,8 +13,10 @@ var LightControl = View.extend({ }, initialize: function(){ + this.colorPicker = new LabColorPicker(this, 180, 180) - this.$el.prepend( this.colorPicker.canvas ) + this.$("#color-picker").append( this.colorPicker.canvas ) + this.$("#color-picker").append( this.colorPicker.cursor ) this.$swatches = this.$(".swatch") this.$labels = this.$(".swatch + label") @@ -100,21 +101,16 @@ var LightControl = View.extend({ setMode: function (mode) { var color, brightness this.mode = mode - this.$swatches.removeClass("selected") - this.$labels.removeClass("selected") - this.$swatch[ mode ].addClass("selected") + this.$(".active").removeClass("active") + this.$swatch[ mode ].parent().addClass("active") color = Walls.colors[ mode ] - this.$(".swatch.selected").next("label").addClass("selected") this.labColor = this.colorPicker.load(color) this.$brightnessControl.val( this.labColor[0] ) }, - clickLabel: function(e){ - $(e.currentTarget).prev(".swatch").trigger("click") - }, - clickSwatch: function(e){ - var mode = $(e.currentTarget).data('mode') + select: function(e){ + var mode = $('.swatch', e.currentTarget).data('mode') this.setMode(mode) }, @@ -138,8 +134,8 @@ var LabColorPicker = function (parent, w, h) { var imageData = ctx.createImageData(w,h) var data = imageData.data -// var cursor = this.cursor = document.createElement("div") -// cursor.className = "colorPickerCursor" + var cursor = this.cursor = document.createElement("div") + cursor.className = "colorPickerCursor" canvas.width = w canvas.height = h @@ -179,9 +175,12 @@ var LabColorPicker = function (parent, w, h) { return rgb } this.pick = function(i, j){ + i = clamp(i, 0, w) + j = clamp(j, 0, h) var x = mix( i/ww, a_range[0], a_range[1] ) var y = mix( j/hh, b_range[0], b_range[1] ) var rgb = xyz2rgb(hunterlab2xyz(val, x, y)).map(Math.round) + this.moveCursor(i, j) parent.pick( rgb, [val,x,y] ) } this.load = function(rgba){ @@ -189,10 +188,15 @@ var LabColorPicker = function (parent, w, h) { var val = clamp( Lab[0], L_range[0], L_range[1] ) var x = mix( norm(Lab[1], a_range[0], a_range[1]), 0, ww ) var y = mix( norm(Lab[2], b_range[0], b_range[1]), 0, hh ) - // move the cursor + + this.moveCursor(x,y) this.setLab(Lab) return Lab } + this.moveCursor = function(x,y){ + cursor.style.left = x + "px" + cursor.style.top = y + "px" + } this.paint = function() { val = clamp(val, L_range[0], L_range[1]) var x, y, t @@ -247,11 +251,11 @@ var LabColorPicker = function (parent, w, h) { var var_G = ( RGB[1] / 255 ) // G from 0 to 255 var var_B = ( RGB[2] / 255 ) // B from 0 to 255 - if ( var_R > 0.04045 ) var_R = ( ( var_R + 0.055 ) / 1.055 ) ^ 2.4 + if ( var_R > 0.04045 ) var_R = Math.pow( ( var_R + 0.055 ) / 1.055, 2.4) else var_R = var_R / 12.92 - if ( var_G > 0.04045 ) var_G = ( ( var_G + 0.055 ) / 1.055 ) ^ 2.4 + if ( var_G > 0.04045 ) var_G = Math.pow( ( var_G + 0.055 ) / 1.055, 2.4) else var_G = var_G / 12.92 - if ( var_B > 0.04045 ) var_B = ( ( var_B + 0.055 ) / 1.055 ) ^ 2.4 + if ( var_B > 0.04045 ) var_B = Math.pow( ( var_B + 0.055 ) / 1.055, 2.4) else var_B = var_B / 12.92 var_R = var_R * 100 diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index 750cf41..9b20a43 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -39,6 +39,9 @@ var MediaEditor = FormView.extend({ }, toggle: function(state) { + if (state) { + this.parent.settings.toggle() + } this.$el.toggleClass("active", state); }, @@ -142,9 +145,15 @@ var MediaEditor = FormView.extend({ }, unbind: function(){ - if (this.scenery && this.scenery.mx) { - this.scenery.mx.bound = false - this.scenery.mx.el.classList.remove("picked") + if (this.scenery) { + this.scenery.media.title = this.$name.val() + this.scenery.media.description = this.$description.val() + Minotaur.watch( app.router.editorView.settings ) + + if (this.scenery.mx) { + this.scenery.mx.bound = false + this.scenery.mx.el.classList.remove("picked") + } } this.scenery = null }, diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 7cfa863..436c0cb 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -6,23 +6,33 @@ var MediaViewer = ModalView.extend({ events: { 'click .foundToggle': "foundToggle", - 'click .yourMedia': "userToggle", + 'click .userToggle': "userToggle", 'click #deleteMedia': "deleteArmed", 'click .mediaContainer': "pick", }, + initialize: function(opt){ + this.__super__.initialize.call(this) + this.parent = opt.parent + this.$foundMedia = this.$(".foundMedia") + this.$myMedia = this.$(".myMedia") + this.$foundToggle = this.$(".foundToggle") + this.$userToggle = this.$(".userToggle") + this.$deleteMedia = this.$("#deleteMedia") + }, + foundToggle: function(){ - this.$(".foundMedia").addClass("active"); - this.$(".myMedia").addClass("inactive"); + this.foundMedia.addClass("active"); + this.myMedia.addClass("inactive"); this.$("a").removeClass("active"); - this.$(".foundToggle").addClass("active"); + this.foundToggle.addClass("active"); }, userToggle: function(){ - this.$(".foundMedia").removeClass("active"); - this.$(".myMedia").removeClass("inactive"); + this.foundMedia.removeClass("active"); + this.myMedia.removeClass("inactive"); this.$("a").removeClass("active"); - this.$(".yourMedia").addClass("active"); + this.userToggle.addClass("active"); }, show: function(){ @@ -46,7 +56,12 @@ var MediaViewer = ModalView.extend({ populate: function(data){ this.loaded = true - data && data.forEach(this.add.bind(this)) + if (data && data.length) { + data.forEach(this.add.bind(this)) + } + else { + this.$deleteMedia.hide() + } this.__super__.show.call(this) }, @@ -78,6 +93,7 @@ var MediaViewer = ModalView.extend({ $span.append(image) this.$(".myMedia").prepend($span) + this.$deleteMedia.show() }, deleteIsArmed: false, @@ -112,6 +128,11 @@ var MediaViewer = ModalView.extend({ if (this.deleteIsArmed) { this.destroy(media._id) $target.remove() + + if ($(".myMedia .mediaContainer").length == 0) { + this.$deleteMedia.hide() + this.deleteArmed(false) + } return } diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index bcae3c5..0dd2921 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -13,6 +13,8 @@ var WallpaperPicker = UploadView.extend({ initialize: function(){ this.__super__.initialize.call(this) this.$swatches = this.$(".swatches") + this.$remove = this.$(".wallpaperRemove") + this.$remove.hide() }, loaded: false, @@ -34,9 +36,10 @@ var WallpaperPicker = UploadView.extend({ }, populate: function(data){ - console.log(data) this.loaded = true - data && data.forEach(this.add.bind(this)) + if (data && data.length) { + data.forEach(this.add.bind(this)) + } this.toggle(true) }, @@ -46,6 +49,7 @@ var WallpaperPicker = UploadView.extend({ swatch.className = "swatch" swatch.style.backgroundImage = "url(" + media.url + ")" this.$swatches.append(swatch) + this.$swatches.show() }, toggle: function (state) { @@ -69,6 +73,7 @@ var WallpaperPicker = UploadView.extend({ pick: function(e){ var $swatch = $(e.currentTarget) this.follow( e, $swatch.css('background-image') ) + this.$remove.show() }, remove: function(e){ diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js index f109ec3..2449465 100644 --- a/public/assets/javascripts/ui/site/LayoutsModal.js +++ b/public/assets/javascripts/ui/site/LayoutsModal.js @@ -25,9 +25,11 @@ var LayoutsIndex = View.extend({ // $span.html(JSON.stringify(room)) $span.data("slug", room.slug) $span.css("background-image", "url(" + room.photo + ")") + $span.attr("data-name", room.name) this.$templates.append($span) }.bind(this)) + console.log(this.$templates.html()) this.show() } @@ -57,7 +59,7 @@ var ProjectsModal = ModalView.extend(LayoutsIndex.prototype).extend({ this.$(".templates .active").removeClass("active") var $layout = $(e.currentTarget) $layout.addClass("active") - + // actually do window.location.pathname = "/project/" + $layout.data("slug") + "/edit" }, diff --git a/public/assets/javascripts/ui/site/ProjectList.js b/public/assets/javascripts/ui/site/ProjectList.js index ee1b89f..993d805 100644 --- a/public/assets/javascripts/ui/site/ProjectList.js +++ b/public/assets/javascripts/ui/site/ProjectList.js @@ -4,8 +4,8 @@ var ProjectList = View.extend({ el: ".projectList", events: { - "mouseenter td.border": 'spinOn', - "mouseleave td.border": 'spinOff', + "mouseenter .room": 'spinOn', + "mouseleave .room": 'spinOff', }, initialize: function(){ diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 17a7dc0..ebc21a8 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -6,6 +6,9 @@ outline:0; font-family: 'Lato', sans-serif; -webkit-font-smoothing: subpixel-antialiased; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } *, *:before, *:after { moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; @@ -164,26 +167,19 @@ h5 { .page.profile { color:white; } -.page table.demo, -.page table.profilepage, -.page table.projectList { + +.page .profilepage, +.page .projectList { width: 100%; - border-top: 1px solid; margin: 40px 0 0 0; border-spacing: 0; clear: both; } -.page table.profilepage tr, -.page table.projectList tr { - height: 400px; -} -.page table.showcase { + +.page .showcase { height:70vh; } -.page table.projectList td.border { - position: relative; - border-right: 1px solid; -} + iframe.embed { width: 100%; height: 100%; @@ -194,34 +190,43 @@ iframe.embed { z-index: -1; pointer-events: none; } -.page table.demo td, -.page table.profilepage td, -.page table.projectList td { +.projectList { + display: inline-block; + float: left; + width: 100%; +} +.projectList .room { width: 33.3333%; - background-size: cover; - background-repeat: no-repeat; - background-position: center; - border-bottom:1px solid black; + height:40vh; + display:table; + position: relative; + float:left; + border-top:1px solid black; +} +.projectList .room:nth-child(4n+1){ + width:100%; } +.page .btn { + clear: both; + padding: 30px 0; + border: 0; -.page table.showcase td { - height: 70vh; - background-size: cover; } -.viewMore { - color: #017cfe; +.page .viewMore { text-decoration: none; - font-weight: 300; font-size: 22px; - padding-top: 20px; display: block; - border-bottom: 1px solid black; - padding-bottom: 19px; + border-top: 1px solid black; + border-bottom: 1px solid black; } -.viewMore:hover { - text-decoration:underline; + +.holder { + display: table-cell; + height: 100%; + width: 100%; + vertical-align: middle; } .page .roomName { @@ -305,22 +310,15 @@ iframe.embed { padding:80px; } .subButtons a { - margin: 9px 0; - border: 0; - background: transparent; - font-size: 15px; - font-weight: 300; - width: 33.33333333333%; display: inline-block; float: left; - text-decoration:none; } -.subButtons a:hover { - text-decoration:underline; + +.subButtons a:nth-child(2){ + margin-left:5px; } .subButtons a:nth-child(3){ - color:#FF3A2D; - float: right; + float:right; } .page .questions span{ font-weight:300; @@ -339,6 +337,8 @@ iframe.embed { font-size: 80px; font-weight: 100; padding-top: 25px; + float: left; + width: 100%; } /* DOCUMENTATION / ABOUT SECTION / FAQ PAGES */ @@ -367,8 +367,9 @@ iframe.embed { } .footer { - width: 100%; - margin: 80px 0; + width: 100%; + padding: 80px 0; + background: #f9f9f9; } .footer a, .footer span{ @@ -388,7 +389,8 @@ iframe.embed { margin-right: 10px; color: black; font-weight: 100; - text-decoration: none + text-decoration: none; + padding: 50px 0 100px 0; } .editProfile span { vertical-align: middle; @@ -398,24 +400,21 @@ iframe.embed { z-index: 3; position: relative; font-size: 18px; - padding: 8px; - margin: 14px; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; } .topLinks span { font-weight: 300; } .topLinks a { - padding: 8px; + padding: 20px 8px; color: black; font-weight: 300; + float:right; text-decoration: none; border-bottom:1px solid transparent; } .topLinks a:hover { - border-bottom:1px solid lightgreen; + background: black; + color: white; } .profilepage .bio { text-align: left; @@ -483,6 +482,7 @@ iframe.embed { .templates { overflow: auto; max-height: 80%; + width: 100%; } .no-templates { display: none; @@ -499,6 +499,18 @@ iframe.embed { display: inline-block; margin: 4vw; border:1px solid white; + 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; } .templates span:hover { @@ -652,7 +664,7 @@ iframe.embed { #minotaur { position: absolute; - top: 26px; + top: 25px; right: 260px; opacity: 0; } @@ -662,8 +674,11 @@ iframe.embed { font-weight: 300; } #minotaur.saving { - background: #8fd; + background: white; opacity: 1; + z-index: 20; + font-size: 13px; + border: 1px solid; } #minotaur.saving .label:after { content: 'SAVING'; @@ -675,7 +690,7 @@ iframe.embed { } .logo { float:left; - padding:10px; + padding:7px 0 0 10px; z-index:4; position:relative; -webkit-user-select: none; @@ -705,6 +720,9 @@ iframe.embed { display: inline-block; background: white; box-shadow: -3px 3px; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } .edit-video.menu, @@ -1002,7 +1020,7 @@ iframe.embed { } .editBtn:hover { - background:lightgreen; + background:black; } .deleteArmed .mediaDrawer h3 { @@ -1213,6 +1231,12 @@ iframe.embed { 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); @@ -1238,34 +1262,73 @@ input[type="range"]::-webkit-slider-thumb { border-radius:10px; cursor:pointer; } +#color-picker { + position: relative; +} .colorPicker { cursor: crosshair; } +.colorPickerCursor { + position: absolute; + width: 8px; + height: 8px; + border: 2px solid black; + border-radius: 50%; + margin-left: -4px; + margin-top: -4px; +} + .swatch { width: 20px; height: 20px; - border: 1px solid black; + border: 1px solid #eee; display: inline-block; cursor: pointer; + float:left; +} +span:hover .swatch { + border: 1px solid red; } -.swatch.selected { - border-width: 2px; +.active .swatch { + border: 1px solid #000; } .color-swatches { margin-top: 10px; } +.color-swatches span { + display: inline-block; + width: 50%; + float:left; + cursor:pointer; +} +.color-swatches span:nth-child(1),.color-swatches span:nth-child(2){ + margin-bottom:5px; +} +.color-swatches span.active{ + background:red; + color:white; +} +.color-swatches span:nth-child(3){ + clear:left; +} +.color-swatches span:hover { + background:#eee; +} + +.color-swatches span.active:hover { + background:red; +} .color-swatches label { - font-size: 11px; - font-weight: 300; - position: relative; - top: -6px; - padding-left: 5px; - display: inline-block; - min-width: 35px; - cursor: pointer; + font-size: 14px; + font-weight: 300; + position: relative; + padding-left: 5px; + display: inline-block; + cursor: pointer; + top: -2px; } -.color-swatches label.selected { - font-weight: 500; +.color-swatches span.active label { + font-weight: 600; } @@ -1353,6 +1416,10 @@ input[type="range"]::-webkit-slider-thumb { .settings .setting { margin-bottom:10px; } +.settings +.settings .setting a { + text-decoration:none; +} .setting.subButtons { display: inline-block; width: 100%; @@ -1360,10 +1427,8 @@ input[type="range"]::-webkit-slider-thumb { } .settings .subButtons a { font-size: 12px; - font-weight: 300; - width: 40px; - margin: 0; } + .settings .setting:last-child{ margin-bottom:0px; } @@ -1382,6 +1447,10 @@ input[type="range"]::-webkit-slider-thumb { float: left; position: relative; top: 5px; + font-weight:600; +} +.setting.number label:after { + content:":"; } .setting.number.halflines { height: 30px; @@ -1446,22 +1515,45 @@ input[type="range"]::-webkit-slider-thumb { padding-right: 3px; } +.btn, button { + background:white; + color:black; + padding:3px; + text-decoration:none; + cursor: pointer; + border:1px solid; +} + +.btn:hover, button:hover { + background:black; + color:white; +} +.btn.marg { + margin-top:10px; +} +.warn { + background:red; + display: inline-block; + color:white; + text-decoration:none; + border:1px solid red; + text-align: center; +} + button { padding: 8px; - border: 1px solid; float: right; font-weight: 500; - background: white; - cursor: pointer; width: 100%; + font-size:14px; } -button:hover { - background:black; - color:white; +#builder-units { + width:100%; +} +#mediaEditor .warn { + width:100%; } - - .radio-group { width: 182px; @@ -1469,6 +1561,7 @@ button:hover { table-layout: fixed; border-spacing: 0; border-collapse: separate; + overflow:hidden; } .radio-group__label { @@ -1478,7 +1571,7 @@ button:hover { vertical-align: middle; text-align: center; position: relative; - border: 1px solid #ccc; + border: 1px solid #000; cursor:pointer; border-style: solid none solid solid; /* border-radius: 5px 0 0 5px;*/ @@ -1491,19 +1584,19 @@ button:hover { } .radio-group__label + input + .radio-group__label:before { - content: " "; - display: block; - position: absolute; - top:-1px; - width: 100%; - height: 100%; - border: 1px solid #000; - /*border-radius: 5px 0 0 5px;*/ - -webkit-transform: translate3d(-103%,0,0); - -webkit-transition: all 250ms; - transform: translate3d(-103%,0,0); - transition: all 250ms; - background:; + content: " "; + display: block; + position: absolute; + top: 0px; + width: 94px; + height: 100%; + border: 0; + /* border-radius: 5px 0 0 5px; */ + -webkit-transform: translate3d(-103%,0,0); + -webkit-transition: all 250ms; + transform: translate3d(-103%,0,0); + transition: all 250ms; + background: rgba(0,0,0,0.1); } .radio-group__label + input:checked + .radio-group__label:before { @@ -1528,6 +1621,24 @@ form { form div { float:right; } +form div.hidden { + height: 0; + overflow: hidden; +} +form h3.link { + content:"?"; +} +form h3.link:after { + content:"?"; +} + +form h3.link:hover { + color:#017cfe; + cursor:pointer; +} + + + form li { font-size: 20px; font-weight: 300; @@ -1554,9 +1665,9 @@ form input[type="submit"] { padding: 10px 0; } form input[type="submit"]:hover { - background:lightgreen; + background:black; color:white; - border:1px solid lightgreen; + border:1px solid black; cursor:pointer; } form p{ @@ -1607,45 +1718,62 @@ form li textarea { margin-top: 20px; } -.demo .video { - height:80vh; - min-height:300px; -} - -.demo .video span { - font-size:100px; - color:white; - cursor:pointer; +.hero { + float:left; + width:100%; + clear:both; + height:70vh; + display:table; + background-size:cover; } -.demo .video span.videoTitle { - font-size: 29px; - font-weight: 300; - padding: 3px 7px; +.hero .circle { + font-size: 20px; + font-weight: 300; + background: white; + display: inline-block; + padding: 60px 20px; + border-radius: 230px; } -.demo .video span.icon-ios7-play-outline:hover { - color:lightgreen; +.hero .circle:hover { + background:black; + color:white; + cursor:pointer; } + .box { display: table-cell; vertical-align: middle; width: 100%; } +.question { + font-size: 43px; + font-weight: 300; + margin-bottom: 10px; + display: inline-block; +} .close { - font-weight: 100; - font-size: 120px; - float: right; - cursor: pointer; - position: fixed; - right: 20px; - top: 20px; - z-index: 20; + font-weight: 100; + font-size: 70px; + float: right; + cursor: pointer; + position: fixed; + right: 20px; + top: 20px; + z-index: 20; + background: #f9f9f9; + width: 75px; + color: black; + border: 1px solid black; + box-shadow: -3px 4px black; + line-height: 75px; } .close:hover { - color:lightgreen; + background:black; + color:white; } @@ -1664,7 +1792,7 @@ form li textarea { } /* .facebook:hover{ - background:lightgreen; + background:black; } */ .box b.signin-tagline { @@ -1673,6 +1801,8 @@ form li textarea { margin-bottom: 18px; font-weight: 500; font-size: 12px; + border-bottom: 1px solid #444; + padding-bottom: 20px; letter-spacing: 2px; } .facebook b { @@ -1680,6 +1810,11 @@ form li textarea { font-size: 50px; } +a[data-role="forgot-password"] { + font-size:11px; + margin-top:10px; +} + .facebook span { vertical-align: bottom; padding-right: 14px; @@ -1697,6 +1832,14 @@ form li textarea { border: 1px solid; } +.aboutRoom h1 { + font-size:28px; +} +.txt { + font-size:12px; + padding:5px 0; + display: inline-block; +} .aboutRoom h1 a{ text-decoration: none; font-style: italic; @@ -1707,14 +1850,22 @@ form li textarea { } .aboutRoom .editlink { - color: red; - text-decoration: none; - border-bottom: 1px dotted; + border-bottom: 0; + padding: 6px; + display: inline-block; + margin-top: 10px; + width: 100%; + text-align: center; +} + +.aboutRoom .editlink:hover { + background:black; + color:white; } .aboutRoom h2{ font-size: 13px; - margin: 5px 0; + margin: 5px 0 0 0; } .share { |