No results
";else if(typ==="picture")no_content+="No public albums
";else if(typ==="cog")no_content+="No Configuration!
";no_content+="| "+infos[index][0]+" | ";infobox+=""+infos[index][1]+" | ";infobox+="
"+text+"
")},start:{local:function(files){var pre_progress=0,formData=new FormData,xhr=new XMLHttpRequest,albumID=album.getID(),popup,progress;if(files.length<=0)return false;if(albumID===false)albumID=0;formData.append("function","upload");formData.append("albumID",albumID);for(var i=0;iNo results
"; + else if (typ==="picture") no_content += "No public albums
"; + else if (typ==="cog") no_content += "No Configuration!
"; + + no_content += "| " + infos[index][0] + " | "; + infobox += "" + infos[index][1] + " | "; + infobox += "
" + text + "
"); + + }, + + start: { + + local: function(files) { + + var pre_progress = 0, + formData = new FormData(), + xhr = new XMLHttpRequest(), + albumID = album.getID(), + popup, + progress; + + if (files.length<=0) return false; + if (albumID===false) albumID = 0; + + formData.append("function", "upload"); + formData.append("albumID", albumID); + + for (var i = 0; i < files.length; i++) { + + if (files[i].type!=="image/jpeg"&&files[i].type!=="image/jpg"&&files[i].type!=="image/png"&&files[i].type!=="image/gif") { + loadingBar.show("error", "The file format of " + files[i].name + " is not supported."); + return false; + } else { + formData.append(i, files[i]); + } + + } + + upload.show(); + + window.onbeforeunload = function() { return "Lychee is currently uploading!"; }; + + xhr.open("POST", lychee.api_path); + + xhr.onload = function() { + + if (xhr.status===200) { + + upload.close(); + + // WebKit Notification + if (window.webkitNotifications&&BrowserDetect.browser==="Safari") { + popup = window.webkitNotifications.createNotification("", "Upload complete", "You can now manage your new photo."); + popup.show(); + } + + window.onbeforeunload = null; + + if (album.getID()===false) lychee.goto("0"); + else album.load(albumID); + + } + + }; + + xhr.upload.onprogress = function(e) { + + if (e.lengthComputable) { + + progress = (e.loaded / e.total * 100 | 0); + + if (progress>pre_progress) { + upload.setProgress(progress); + pre_progress = progress; + } + + if (progress>=100) { + upload.setIcon("cog"); + upload.setText("Processing photos"); + } + + } + + }; + + $("#upload_files").val(""); + + xhr.send(formData); + + }, + + url: function() { + + var albumID = album.getID(), + params, + extension, + buttons; + + if (albumID===false) albumID = 0; + + buttons = [ + ["Import", function() { + + link = $(".message input.text").val(); + + if (link&&link.length>3) { + + extension = link.split('.').pop(); + if (extension!=="jpeg"&&extension!=="jpg"&&extension!=="png"&&extension!=="gif") { + loadingBar.show("error", "The file format of this link is not supported."); + return false; + } + + modal.close(); + upload.show("cog", "Importing from URL"); + + params = "importUrl&url=" + escape(encodeURI(link)) + "&albumID=" + albumID; + lychee.api(params, function(data) { + + upload.close(); + + if (album.getID()===false) lychee.goto("0"); + else album.load(albumID); + + if (data!==true) lychee.error(null, params, data); + + }); + + } else loadingBar.show("error", "Link to short or too long. Please try another one!"); + + }], + ["Cancel", function() {}] + ]; + modal.show("Import from Link", "Please enter the direct link to a photo to import it: ", buttons); + + }, + + server: function() { + + var albumID = album.getID(), + params, + buttons; + + if (albumID===false) albumID = 0; + + buttons = [ + ["Import", function() { + + modal.close(); + upload.show("cog", "Importing photos"); + + params = "importServer&albumID=" + albumID; + lychee.api(params, function(data) { + + upload.close(); + + if (album.getID()===false) lychee.goto("0"); + else album.load(albumID); + + if (data==="Warning: Folder empty!") lychee.error("Folder empty. No photos imported!", params, data); + else if (data!==true) lychee.error(null, params, data); + + }); + + }], + ["Cancel", function() {}] + ]; + modal.show("Import from Server", "This action will import all photos which are located in 'uploads/import/' of your Lychee installation.", buttons); + + }, + + dropbox: function() { + + var albumID = album.getID(), + params; + + if (albumID===false) albumID = 0; + + lychee.loadDropbox(function() { + Dropbox.choose({ + linkType: "direct", + multiselect: true, + success: function(files) { + + if (files.length>1) { + + for (var i = 0; i < files.length; i++) files[i] = files[i].link; + + } else files = files[0].link; + + upload.show("cog", "Importing photos"); + + params = "importUrl&url=" + escape(files) + "&albumID=" + albumID; + lychee.api(params, function(data) { + + upload.close(); + + if (album.getID()===false) lychee.goto("0"); + else album.load(albumID); + + if (data!==true) lychee.error(null, params, data); + + }); + + } + }); + }); + + } + + }, + + close: function(force) { + + if (force===true) { + $(".upload_overlay").remove(); + } else { + upload.setProgress(100); + $(".upload_overlay").removeClass("fadeIn").css("opacity", 0); + setTimeout(function() { $(".upload_overlay").remove() }, 300); + } + + } + +} \ No newline at end of file diff --git a/js/modules/view.js b/assets/js/modules/view.js similarity index 64% rename from js/modules/view.js rename to assets/js/modules/view.js index 6ecb6d8..8dc23ca 100644 --- a/js/modules/view.js +++ b/assets/js/modules/view.js @@ -1,11 +1,8 @@ /** - * @name view.js - * @author Philipp Maurer - * @author Tobias Reich - * @copyright 2013 by Philipp Maurer, Tobias Reich - * - * UI View - * Responsible to reflect data changes to the UI. + * @name UI View + * @description Responsible to reflect data changes to the UI. + * @author Tobias Reich + * @copyright 2014 by Tobias Reich */ view = { @@ -19,14 +16,14 @@ view = { if (visible.photo()) { lychee.imageview.removeClass("full"); lychee.loadingBar.css("opacity", 1); - lychee.header.css("margin-Top", "0px"); + lychee.header.removeClass("hidden"); if ($("#imageview #image.small").length>0) { $("#imageview #image").css({ marginTop: -1*($("#imageview #image").height()/2)+20 }); } else { $("#imageview #image").css({ - top: 70, + top: 60, right: 30, bottom: 30, left: 30 @@ -43,7 +40,7 @@ view = { $(window).data("timeout", setTimeout(function() { lychee.imageview.addClass("full"); lychee.loadingBar.css("opacity", 0); - lychee.header.css("margin-Top", "-45px"); + lychee.header.addClass("hidden"); if ($("#imageview #image.small").length>0) { $("#imageview #image").css({ marginTop: -1*($("#imageview #image").height()/2) @@ -63,31 +60,58 @@ view = { mode: function(mode) { - var albumID; + var albumID = album.getID(); switch (mode) { case "albums": + lychee.header.removeClass("view"); $("#tools_album, #tools_photo").hide(); $("#tools_albums").show(); break; case "album": + lychee.header.removeClass("view"); $("#tools_albums, #tools_photo").hide(); $("#tools_album").show(); - albumID = album.getID(); - if (albumID=="s"||albumID=="f") $("#button_edit_album, #button_trash_album, #button_share_album").hide(); - else if (albumID==0) $("#button_edit_album, #button_share_album").hide(); - else $("#button_edit_album, #button_trash_album, #button_share_album").show(); + if (albumID==="s"||albumID==="f") { + $("#button_info_album, #button_trash_album, #button_share_album").hide(); + } else if (albumID==="0") { + $("#button_info_album, #button_share_album").hide(); + $("#button_trash_album").show(); + } else { + $("#button_info_album, #button_trash_album, #button_share_album").show(); + } break; case "photo": + lychee.header.addClass("view"); $("#tools_albums, #tools_album").hide(); $("#tools_photo").show(); break; + } } }, + infobox: { + + show: function() { + + if (!visible.infobox()) $("body").append(""); + lychee.infobox.addClass("active"); + + }, + + hide: function() { + + lychee.animate("#infobox_overlay", "fadeOut"); + setTimeout(function() { $("#infobox_overlay").remove() }, 300); + lychee.infobox.removeClass("active"); + + } + + }, + albums: { init: function() { @@ -99,7 +123,7 @@ view = { title: function() { - lychee.setTitle("Albums", null, false); + lychee.setTitle("Albums", false); }, @@ -127,7 +151,7 @@ view = { } - if (smartData==""&&albumsData=="") $("body").append(build.no_content("picture")); + if (smartData===""&&albumsData==="") $("body").append(build.no_content("picture")); else lychee.content.html(smartData + albumsData); $("img").retina(); @@ -153,6 +177,7 @@ view = { marginLeft: 0 }, 300, function() { $(this).remove(); + if (albums.json.num<=0) lychee.animate(".divider:last-of-type", "fadeOut"); }); } @@ -167,6 +192,7 @@ view = { album.parse(); + view.album.infobox(); view.album.title(); view.album.public(); view.album.content.init(); @@ -175,22 +201,29 @@ view = { }, - title: function() { + hide: function() { + + view.infobox.hide(); + + }, + + title: function(oldTitle) { if ((visible.album()||!album.json.init)&&!visible.photo()) { switch (album.getID()) { case "f": - lychee.setTitle("Starred", album.json.num, false); + lychee.setTitle("Starred", false); break; case "s": - lychee.setTitle("Public", album.json.num, false); + lychee.setTitle("Public", false); break; case "0": - lychee.setTitle("Unsorted", album.json.num, false); + lychee.setTitle("Unsorted", false); break; default: - lychee.setTitle(album.json.title, album.json.num, true); + if (album.json.init) $("#infobox .attr_name").html(album.json.title + " " + build.editIcon("edit_title_album")); + lychee.setTitle(album.json.title, true); break; } @@ -198,6 +231,12 @@ view = { }, + description: function() { + + $("#infobox .attr_description").html(album.json.description + " " + build.editIcon("edit_description_album")); + + }, + content: { init: function() { @@ -248,6 +287,7 @@ view = { // Only when search is not active if (!visible.albums()) { album.json.num--; + view.album.num(); view.album.title(); } }); @@ -256,17 +296,38 @@ view = { }, + num: function() { + + $("#infobox .attr_images").html(album.json.num); + + }, + public: function() { if (album.json.public==1) { $("#button_share_album a").addClass("active"); $("#button_share_album").attr("title", "Share Album"); $(".photo .icon-share").remove(); + if (album.json.init) $("#infobox .attr_visibility").html("Public"); } else { $("#button_share_album a").removeClass("active"); $("#button_share_album").attr("title", "Make Public"); + if (album.json.init) $("#infobox .attr_visibility").html("Private"); } + }, + + password: function() { + + if (album.json.password==1) $("#infobox .attr_password").html("Yes"); + else $("#infobox .attr_password").html("No"); + + }, + + infobox: function() { + + if ((visible.album()||!album.json.init)&&!visible.photo()) lychee.infobox.html(build.infoboxAlbum(album.json)).show(); + } }, @@ -289,11 +350,18 @@ view = { show: function() { + // Change header + lychee.content.addClass("view"); view.header.mode("photo"); // Make body not scrollable $("body").css("overflow", "hidden"); + // Fullscreen + $(document) + .bind("mouseenter", view.header.show) + .bind("mouseleave", view.header.hide); + lychee.animate(lychee.imageview, "fadeIn"); }, @@ -301,43 +369,38 @@ view = { hide: function() { if (!visible.controls()) view.header.show(); - if (visible.infobox) view.photo.hideInfobox(); + if (visible.infobox) view.infobox.hide(); + lychee.content.removeClass("view"); view.header.mode("album"); // Make body scrollable $("body").css("overflow", "scroll"); + // Disable Fullscreen + $(document) + .unbind("mouseenter") + .unbind("mouseleave"); + // Hide Photo lychee.animate(lychee.imageview, "fadeOut"); - setTimeout(function() { lychee.imageview.hide() }, 300); - - }, - - showInfobox: function() { - - if (!visible.infobox()) $("body").append(""); - lychee.infobox.css("right", "0px"); - - }, - - hideInfobox: function() { - - $("#infobox_overlay").remove(); - lychee.infobox.css("right", "-320px"); + setTimeout(function() { + lychee.imageview.hide(); + view.album.infobox(); + }, 300); }, title: function(oldTitle) { - if (photo.json.init) $("#infobox .attr_name").html($("#infobox .attr_name").html().replace(oldTitle, photo.json.title)); - lychee.setTitle(photo.json.title, null, true); + if (photo.json.init) $("#infobox .attr_name").html(photo.json.title + " " + build.editIcon("edit_title")); + lychee.setTitle(photo.json.title, true); }, - description: function(oldDescription) { + description: function() { - if (photo.json.init) $("#infobox .attr_description").html($("#infobox .attr_description").html().replace(oldDescription, photo.json.description)); + if (photo.json.init) $("#infobox .attr_description").html(photo.json.description + " " + build.editIcon("edit_description")); }, @@ -374,19 +437,16 @@ view = { photo: function() { - if (visible.controls()&&photo.isSmall()) lychee.imageview.html(""); - else if (visible.controls()) lychee.imageview.html(""); - else if (photo.isSmall()) lychee.imageview.html(""); - else lychee.imageview.html(""); + lychee.imageview.html(build.imageview(photo.json, photo.isSmall(), visible.controls())); - if (!photo.json.nextPhoto||lychee.viewMode) $("a#next").hide(); - if (!photo.json.previousPhoto||lychee.viewMode) $("a#previous").hide(); + if ((album.json&&album.json.content[photo.getID()]&&album.json.content[photo.getID()].nextPhoto==="")||lychee.viewMode) $("a#next").hide(); + if ((album.json&&album.json.content[photo.getID()]&&album.json.content[photo.getID()].previousPhoto==="")||lychee.viewMode) $("a#previous").hide(); }, infobox: function() { - lychee.infobox.html(build.infobox(photo.json)).show(); + lychee.infobox.html(build.infoboxPhoto(photo.json)).show(); } diff --git a/js/modules/visible.js b/assets/js/modules/visible.js similarity index 53% rename from js/modules/visible.js rename to assets/js/modules/visible.js index 8ece3a1..2855354 100755 --- a/js/modules/visible.js +++ b/assets/js/modules/visible.js @@ -1,22 +1,19 @@ /** - * @name visible.js - * @author Philipp Maurer - * @author Tobias Reich - * @copyright 2013 by Philipp Maurer, Tobias Reich - * - * Visible Module - * This module is used to check if elements are visible or not. + * @name Visible Module + * @description This module is used to check if elements are visible or not. + * @author Tobias Reich + * @copyright 2014 by Tobias Reich */ visible = { albums: function() { - if ($("#tools_albums").css("display")=="block") return true; + if ($("#tools_albums").css("display")==="block") return true; else return false; }, album: function() { - if ($("#tools_album").css("display")=="block") return true; + if ($("#tools_album").css("display")==="block") return true; else return false; }, @@ -26,8 +23,8 @@ visible = { }, infobox: function() { - if (parseInt(lychee.infobox.css("right").replace("px", ""))==-320) return false; - else return true; + if ($("#infobox.active").length>0) return true; + else return false; }, controls: function() { @@ -40,6 +37,11 @@ visible = { else return false; }, + signin: function() { + if ($(".message .sign_in").length>0) return true; + else return false; + }, + contextMenu: function() { if ($(".contextmenu").length>0) return true; else return false; diff --git a/js/view.js b/assets/js/view.js old mode 100755 new mode 100644 similarity index 81% rename from js/view.js rename to assets/js/view.js index d542f68..00ed53f --- a/js/view.js +++ b/assets/js/view.js @@ -1,8 +1,8 @@ /** - * @name view.js - * @author Philipp Maurer + * @name View + * @description Used to view single photos with view.php * @author Tobias Reich - * @copyright 2013 by Philipp Maurer, Tobias Reich + * @copyright 2014 by Tobias Reich */ var header = $("header"), @@ -38,7 +38,7 @@ $(document).ready(function(){ function key(e) { code = (e.keyCode ? e.keyCode : e.which); - if (code==27&&visibleInfobox()) { hideInfobox(); e.preventDefault(); } + if (code===27&&visibleInfobox()) { hideInfobox(); e.preventDefault(); } } @@ -66,15 +66,16 @@ function isPhotoSmall(photo) { function showInfobox() { - $("body").append(""); - infobox.css("right", "0px"); + $("body").append(""); + infobox.addClass("active"); } function hideInfobox() { - $("#infobox_overlay").remove(); - infobox.css("right", "-320px"); + $("#infobox_overlay").removeClass("fadeIn").addClass("fadeOut"); + setTimeout(function() { $("#infobox_overlay").remove() }, 300); + infobox.removeClass("active"); } @@ -91,10 +92,10 @@ function loadPhotoInfo(photoID) { imageview.attr("data-id", photoID); if (isPhotoSmall(data)) imageview.html(""); - else imageview.html(""); + else imageview.html(""); imageview.removeClass("fadeOut").addClass("fadeIn").show(); - infobox.html(build.infobox(data, true)).show(); + infobox.html(build.infoboxPhoto(data, true)).show(); }, error: ajaxError }); diff --git a/css/animations.css b/css/animations.css deleted file mode 100755 index e45fc77..0000000 --- a/css/animations.css +++ /dev/null @@ -1,485 +0,0 @@ -/** - * @name animations.css - * @author Philipp Maurer - * @author Tobias Reich - * @copyright 2013 by Philipp Maurer, Tobias Reich - */ - -/* bounceInDown ------------------------------------------------*/ -@-webkit-keyframes bounceInDown { - 0% { - -webkit-transform: translateY(-2000px); - } - 60% { - -webkit-transform: translateY(30px); - } - 80% { - -webkit-transform: translateY(-10px); - } - 100% { - -webkit-transform: translateY(0); - } -} -@-moz-keyframes bounceInDown { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -@-ms-keyframes bounceInDown { - 0% { - -ms-transform: translateY(-2000px); - } - 60% { - -ms-transform: translateY(30px); - } - 80% { - -ms-transform: translateY(-10px); - } - 100% { - -ms-transform: translateY(0); - } -} -@-o-keyframes bounceInDown { - 0% { - -o-transform: translateY(-2000px); - } - 60% { - -o-transform: translateY(30px); - } - 80% { - -o-transform: translateY(-10px); - } - 100% { - -o-transform: translateY(0); - } -} -@keyframes bounceInDown { - 0% { - transform: translateY(-2000px); - } - 60% { - transform: translateY(30px); - } - 80% { - transform: translateY(-10px); - } - 100% { - transform: translateY(0); - } -} - -/* bounceOutUp ------------------------------------------------*/ -@-webkit-keyframes bounceOutUp { - 0% { - -webkit-transform: translateY(0); - } - 20% { - -webkit-transform: translateY(20px); - } - 100% { - -webkit-transform: translateY(-2000px); - } -} -@-moz-keyframes bounceOutUp { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} -@-ms-keyframes bounceOutUp { - 0% { - -ms-transform: translateY(0); - } - 20% { - -ms-transform: translateY(20px); - } - 100% { - -ms-transform: translateY(-2000px); - } -} -@-o-keyframes bounceOutUp { - 0% { - -o-transform: translateY(0); - } - 20% { - -o-transform: translateY(20px); - } - 100% { - -o-transform: translateY(-2000px); - } -} -@keyframes bounceOutUp { - 0% { - transform: translateY(0); - } - 20% { - transform: translateY(20px); - } - 100% { - transform: translateY(-2000px); - } -} - -/* moveUp ------------------------------------------------*/ -@-webkit-keyframes moveUp { - 0% { - -webkit-transform: translateY(1000px); - } - 100% { - -webkit-transform: translateY(0px); - } -} -@-moz-keyframes moveUp { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -@-ms-keyframes moveUp { - 0% { - -ms-transform: translateY(1000px); - } - 100% { - -ms-transform: translateY(0px); - } -} -@-o-keyframes moveUp { - 0% { - -o-transform: translateY(1000px); - } - 100% { - -o-transform: translateY(0px); - } -} -@keyframes moveUp { - 0% { - transform: translateY(1000px); - } - 100% { - transform: translateY(0px); - } -} - -/* moveDown ------------------------------------------------*/ -@-webkit-keyframes moveDown { - 0% { - -webkit-transform: translateY(-100px); - } - 100% { - -webkit-transform: translateY(0); - } -} -@-moz-keyframes moveDown { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -@-ms-keyframes moveDown { - 0% { - -ms-transform: translateY(-100px); - } - 100% { - -ms-transform: translateY(0); - } -} -@-o-keyframes moveDown { - 0% { - -o-transform: translateY(-100px); - } - 100% { - -o-transform: translateY(0); - } -} -@keyframes moveDown { - 0% { - transform: translateY(-100px); - } - 100% { - transform: translateY(0); - } -} - -/* fadeIn ------------------------------------------------*/ -@-webkit-keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -@-moz-keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -@-ms-keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -@-o-keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -@keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - -/* fadeOut ------------------------------------------------*/ -@-webkit-keyframes fadeOut { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} -@-moz-keyframes fadeOut { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} -@-ms-keyframes fadeOut { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} -@-o-keyframes fadeOut { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} -@keyframes fadeOut { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} - -/* moveBackground ------------------------------------------------*/ -@-webkit-keyframes moveBackground { - 0% { - background-position-x: 0px; - } - 100% { - background-position-x: -33px; - } -} -@-moz-keyframes moveBackground { - 0% { - background-position-x: 0px; - } - 100% { - background-position-x: -33px; - } -} -@-ms-keyframes moveBackground { - 0% { - background-position-x: 0px; - } - 100% { - background-position-x: -33px; - } -} -@-o-keyframes moveBackground { - 0% { - background-position-x: 0px; - } - 100% { - background-position-x: -33px; - } -} -@keyframes moveBackground { - 0% { - background-position-x: 0px; - } - 100% { - background-position-x: -33px; - } -} - -/* zoomOut ------------------------------------------------*/ -@-webkit-keyframes zoomOut { - 0% { - opacity: 1; - -webkit-transform: scale(1); - } - 100% { - opacity: 0; - -webkit-transform: scale(.5); - } -} -@-moz-keyframes zoomOut { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} -@-ms-keyframes zoomOut { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} -@-o-keyframes zoomOut { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} -@keyframes zoomOut { - 0% { - opacity: 1; - transform: scale(1); - } - 100% { - opacity: 0; - transform: scale(.5); - } -} - -/* zoomIn ------------------------------------------------*/ -@-webkit-keyframes zoomIn { - 0% { - opacity: 0; - -webkit-transform: scale(.5); - } - 100% { - opacity: 1; - -webkit-transform: scale(1); - } -} -@-moz-keyframes zoomIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -@-ms-keyframes zoomIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -@-o-keyframes zoomIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -@keyframes zoomIn { - 0% { - opacity: 0; - transform: scale(.5); - } - 100% { - opacity: 1; - transform: scale(1); - } -} - -/* pulse ------------------------------------------------*/ -@-webkit-keyframes pulse { - 0% { - opacity: 1; - } - 50% { - opacity: 0.3; - } - 100% { - opacity: 1; - } -} -@-moz-keyframes pulse { - 0% { - opacity: 1; - } - 50% { - opacity: 0.8; - } - 100% { - opacity: 1; - } -} -@-ms-keyframes pulse { - 0% { - opacity: 1; - } - 50% { - opacity: 0.8; - } - 100% { - opacity: 1; - } -} -@-o-keyframes pulse { - 0% { - opacity: 1; - } - 50% { - opacity: 0.8; - } - 100% { - opacity: 1; - } -} -@keyframes pulse { - 0% { - opacity: 1; - } - 50% { - opacity: 0.8; - } - 100% { - opacity: 1; - } -} \ No newline at end of file diff --git a/css/style.css b/css/style.css deleted file mode 100755 index ef10a09..0000000 --- a/css/style.css +++ /dev/null @@ -1,1398 +0,0 @@ -/** - * @name style.css - * @author Philipp Maurer - * @author Tobias Reich - * @copyright 2013 by Philipp Maurer, Tobias Reich - */ - -/* Reset -------------------------------------------------*/ -html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; } -article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; } -body { line-height:1; } -ol,ul { list-style:none; } -blockquote,q { quotes:none; } -blockquote:before,blockquote:after,q:before,q:after { content:''; content:none; } -table { border-collapse:collapse; border-spacing:0; } - -/* Basics -------------------------------------------------*/ -html, body { - min-height: 100%; - -webkit-user-select: none; - -moz-user-select: none; - -o-user-select: none; - user-select: none; -} -body { background-color: #222; background-image: url(../img/background.jpg); font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; -webkit-font-smoothing: antialiased; } -.center { left: 50%; top:50%; position: absolute; } -* { - -webkit-transition: color .3s, opacity .3s ease-out, -webkit-transform .3s ease-out, box-shadow .3s; - -moz-transition: opacity .3s ease-out, -moz-transform .3s ease-out, box-shadow .3s; - -o-transition: opacity .3s ease-out, -o-transform .3s ease-out, box-shadow .3s; - transition: color .3s, opacity .3s ease-out, transform .3s ease-out, box-shadow .3s; -} - -/* Tooltip ------------------------------------------------*/ -.tipsy { - padding: 4px; - font-size: 12px; - position: absolute; - z-index: 100000; - - /* Animation */ - -webkit-animation-name: fadeIn; - -webkit-animation-duration: .3s; - -webkit-animation-fill-mode: forwards; - -moz-animation-name: fadeIn; - -moz-animation-duration: .3s; - -moz-animation-fill-mode: forwards; - -o-animation-name: fadeIn; - -o-animation-duration: .3s; - -o-animation-fill-mode: forwards; - animation-name: fadeIn; - animation-duration: .3s; - animation-fill-mode: forwards; -} -.tipsy-inner { - padding: 7px 10px 6px 10px; - color: white; - max-width: 200px; - text-align: center; - text-shadow: 0 -1px 0 #000; - background: #000; - box-shadow: 0 1px 2px hsla(0, 0%, 0%, .25); - border-radius: 3px; -} -.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; } -.tipsy-arrow-n { border-bottom-color: #000; } -.tipsy-arrow-s { border-top-color: #000; } -.tipsy-arrow-e { border-left-color: #000; } -.tipsy-arrow-w { border-right-color: #000; } -.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; } -.tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;} -.tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;} -.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; } -.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; } -.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; } -.tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; } -.tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; } - -/* Animations ------------------------------------------------*/ -.fadeIn { - -webkit-animation-name: fadeIn; - -webkit-animation-duration: .3s; - -webkit-animation-fill-mode: forwards; - -moz-animation-name: fadeIn; - -moz-animation-duration: .3s; - -moz-animation-fill-mode: forwards; - -o-animation-name: fadeIn; - -o-animation-duration: .3s; - -o-animation-fill-mode: forwards; - animation-name: fadeIn; - animation-duration: .3s; - animation-fill-mode: forwards; -} -.fadeOut { - -webkit-animation-name: fadeOut; - -webkit-animation-duration: .3s; - -webkit-animation-fill-mode: forwards; - -moz-animation-name: fadeOut; - -moz-animation-duration: .3s; - -moz-animation-fill-mode: forwards; - -o-animation-name: fadeOut; - -o-animation-duration: .3s; - -o-animation-fill-mode: forwards; - animation-name: fadeOut; - animation-duration: .3s; - animation-fill-mode: forwards; -} -.contentFadeIn { - -webkit-animation-name: bounceInDown; - -webkit-animation-duration: 1s; - -webkit-animation-timing-function: ease-out; - -webkit-animation-fill-mode: forwards; - -moz-animation-name: bounceInDown; - -moz-animation-duration: .3s; - -moz-animation-fill-mode: forwards; - -o-animation-name: bounceInDown; - -o-animation-duration: 1s; - -o-animation-timing-function: ease-out; - -o-animation-fill-mode: forwards; - animation-name: bounceInDown; - animation-duration: 1s; - animation-timing-function: ease-out; - animation-fill-mode: forwards; -} -.contentFadeOut { - -webkit-animation-name: bounceOutUp; - -webkit-animation-duration: 1s; - -webkit-animation-timing-function: ease-out; - -webkit-animation-fill-mode: forwards; - -moz-animation-name: bounceOutUp; - -moz-animation-duration: .3s; - -moz-animation-fill-mode: forwards; - -o-animation-name: bounceOutUp; - -o-animation-duration: 1s; - -o-animation-timing-function: ease-out; - -o-animation-fill-mode: forwards; - animation-name: bounceOutUp; - animation-duration: 1s; - animation-timing-function: ease-out; - animation-fill-mode: forwards; -} -.contentZoomOut { - -webkit-animation-name: zoomOut; - -webkit-animation-duration: .3s; - -webkit-animation-fill-mode: forwards; - -moz-animation-name: zoomOut; - -moz-animation-duration: .3s; - -moz-animation-fill-mode: forwards; - -o-animation-name: zoomOut; - -o-animation-duration: .3s; - -o-animation-fill-mode: forwards; - animation-name: zoomOut; - animation-duration: .3s; - animation-fill-mode: forwards; -} -.contentZoomIn { - -webkit-animation-name: zoomIn; - -webkit-animation-duration: .3s; - -webkit-animation-fill-mode: forwards; - -moz-animation-name: zoomIn; - -moz-animation-duration: .3s; - -moz-animation-fill-mode: forwards; - -o-animation-name: zoomIn; - -o-animation-duration: .3s; - -o-animation-fill-mode: forwards; - animation-name: zoomIn; - animation-duration: .3s; - animation-fill-mode: forwards; -} - -/* Loading ------------------------------------------------*/ -#loading { - position: fixed; - width: 100%; - height: 2px; - background-color: #2f0d0e; - background-repeat: repeat-x; - z-index: 1; - display: none; - - /* Animation */ - -webkit-animation-name: moveBackground; - -webkit-animation-duration: .2s; - -webkit-animation-timing-function: linear; - -webkit-animation-iteration-count: infinite; - -moz-animation-name: moveBackground; - -moz-animation-duration: .2s; - -moz-animation-timing-function: linear; - -moz-animation-iteration-count: infinite; - -o-animation-name: moveBackground; - -o-animation-duration: .2s; - -o-animation-timing-function: linear; - -o-animation-iteration-count: infinite; - animation-name: moveBackground; - animation-duration: .2s; - animation-timing-function: linear; - animation-iteration-count: infinite; -} -#loading h1 { - margin: 13px; - color: #ddd; - font-size: 14px; - font-weight: bold; - text-shadow: 0px 1px 0px #000; - text-transform: capitalize; -} -#loading h1 span { - margin-left: 10px; - font-weight: normal; - text-transform: none; -} -#loading.loading { - background-image: url(../img/bar/loading.png); -} -#loading.error { - background-image: url(../img/bar/error.png); -} - -/* Header ------------------------------------------------*/ -header { - position: fixed; - height: 41px; - width: 100%; - - background-color: #333; - background-image: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)); - background-image: -webkit-linear-gradient(top, #555, #333); - background-image: -moz-linear-gradient(top, #555, #333); - background-image: -o-linear-gradient(top, #555, #333); - background-image: -ms-linear-gradient(top, #555, #333); - background-image: linear-gradient(top, #555, #333); - - box-shadow: inset 0px 1px 0px #666, inset 0px -1px 0px #393939, 0px 0px 3px #000; - border-top: 1px solid #222; - z-index: 1; - - -webkit-transition: opacity .3s ease-out, -webkit-transform .3s ease-out, box-shadow .3s, margin-top .3s; - -moz-transition: opacity .3s ease-out, -moz-transform .3s ease-out, box-shadow .3s, margin-top .3s; - -o-transition: opacity .3s ease-out, -o-transform .3s ease-out, box-shadow .3s, margin-top .3s; - transition: opacity .3s ease-out, transform .3s ease-out, box-shadow .3s, margin-top .3s; - - /* Animation */ - -webkit-animation-name: moveDown; - -webkit-animation-duration: .3s; - -webkit-animation-timing-function: ease-out; - -webkit-animation-fill-mode: forwards; - -moz-animation-name: moveDown; - -moz-animation-duration: .3s; - -moz-animation-timing-function: ease-out; - -moz-animation-fill-mode: forwards; - -o-animation-name: moveDown; - -o-animation-duration: .3s; - -o-animation-timing-function: ease-out; - -o-animation-fill-mode: forwards; - animation-name: moveDown; - animation-duration: .3s; - animation-timing-function: ease-out; - animation-fill-mode: forwards; -} - - /* Title ------------------------------------------------*/ - #title { - position: absolute; - margin: 0px 30%; - width: 40%; - padding: 11px 0px; - color: #fff; - font-size: 16px; - font-weight: bold; - text-align: center; - text-shadow: 0px -1px 0px #000; - } - #title.editable { - cursor: pointer; - } - #title span { - color: #aaa; - font-size: 16px; - font-weight: normal; - } - - /* Button ------------------------------------------------*/ - header .button { - float: left; - position: absolute; - padding: 7px 10px 8px 10px; - margin: 6px 0px 0px 8px; - font-size: 12px; - font-weight: bold; - color: #fff; - text-shadow: 0px -1px 0px #000; - text-decoration: none !important; - - background: #555; - background-image: -webkit-gradient(linear, left bottom, left top, color-stop(1, #555), color-stop(0, #333)); - background-image: -webkit-linear-gradient(top, #555 0%, #333 100%); - background-image: -moz-linear-gradient(top, #555 0%, #333 100%); - background-image: -o-linear-gradient(top, #555 0%, #333 100%); - background: linear-gradient(top, #555 0%, #333 100%); - - border: 1px solid #222; - border-radius: 3px; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0px 1px 0px #444; - cursor: pointer; - } - header .button:hover { - background-color: #5c5c5c; - background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 92, 92)), to(rgb(57, 57, 57))); - background-image: -webkit-linear-gradient(top, rgb(92, 92, 92), rgb(57, 57, 57)); - background-image: -moz-linear-gradient(top, rgb(92, 92, 92), rgb(57, 57, 57)); - background-image: -o-linear-gradient(top, rgb(92, 92, 92), rgb(57, 57, 57)); - background-image: -ms-linear-gradient(top, rgb(92, 92, 92), rgb(57, 57, 57)); - background-image: linear-gradient(top, rgb(92, 92, 92), rgb(57, 57, 57)); - } - header .button:active { - background-color: #393939; - background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(57, 57, 57)), to(rgb(68, 68, 68))); - background-image: -webkit-linear-gradient(top, rgb(57, 57, 57), rgb(68, 68, 68)); - background-image: -moz-linear-gradient(top, rgb(57, 57, 57), rgb(68, 68, 68)); - background-image: -o-linear-gradient(top, rgb(57, 57, 57), rgb(68, 68, 68)); - background-image: -ms-linear-gradient(top, rgb(57, 57, 57), rgb(68, 68, 68)); - background-image: linear-gradient(top, rgb(57, 57, 57), rgb(68, 68, 68)); - } - header .button.icon { - float: right; - position: relative; - padding: 7px 11px 4px 11px; - margin: 6px 8px 0px 0px; - font-family: 'FontAwesome'; - font-size: 16px; - } - #tools_albums, #tools_album, #tools_photo, #button_signin { - display: none; - } - - /* Button Divider ------------------------------------------------*/ - header .button_divider { - float: right; - position: relative; - margin: 1px 12px 0px 0px; - width: 1px; - height: 40px; - background-color: transparent; - background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(68, 68, 68)), to(rgb(37, 37, 37))); - background-image: -webkit-linear-gradient(top, rgba(68, 68, 68, 0), rgb(25, 25, 25)); - background-image: -moz-linear-gradient(top, rgb(68, 68, 68), rgb(37, 37, 37)); - background-image: -o-linear-gradient(top, rgb(68, 68, 68), rgb(37, 37, 37)); - background-image: -ms-linear-gradient(top, rgb(68, 68, 68), rgb(37, 37, 37)); - background-image: linear-gradient(top, rgb(68, 68, 68), rgb(37, 37, 37)); - border-right: 1px solid #555; - } - header .button_divider.less { - margin: 1px 6px 0px 6px; - } - - - /* Search ------------------------------------------------*/ - #search { - float: right; - width: 80px; - margin: 7px 12px 0px 0px; - padding: 5px 10px 7px 10px; - background-color: #444; - color: #fff; - border: none; - border: 1px solid #111; - box-shadow: 0px 1px 0px #555; - outline: none; - border-radius: 5px; - opacity: .6; - -webkit-transition: opacity .3s ease-out, -webkit-transform .3s ease-out, box-shadow .3s, width .2s ease-out; - -moz-transition: opacity .3s ease-out, -moz-transform .3s ease-out, box-shadow .3s, width .2s ease-out; - -o-transition: opacity .3s ease-out, -o-transform .3s ease-out, box-shadow .3s, width .2s ease-out; - transition: opacity .3s ease-out, transform .3s ease-out, box-shadow .3s, width .2s ease-out; - } - #search:focus { - box-shadow: 0px 1px 0px #555, inset 0px 0px 2px #333; - opacity: 1; - width: 140px; - } - - /* Tools ------------------------------------------------*/ - .tools:first-of-type { - margin-right: 6px; - } - .tools { - float: right; - padding: 10px 8px; - color: #aaa; - font-size: 21px; - text-shadow: 0px -1px 0px #222; - cursor: pointer; - } - .tools:hover a { - color: #fff; - } - .tools .icon-star { - color: #f0ef77; - } - .tools .icon-share.active { - color: #ff9737; - } - - -/* Content ------------------------------------------------*/ -#content { - position: absolute; - padding: 41px 0px 33px 0px; - width: 100%; - -webkit-overflow-scrolling: touch; -} - - /* Photo ------------------------------------------------*/ - .photo { - float: left; - display: inline-block; - width: 206px; - height: 206px; - margin: 30px 0px 0px 30px; - cursor: pointer; - } - .photo img { - position: absolute; - width: 200px; - height: 200px; - background-color: #222; - border-radius: 3px; - box-shadow: 0px 1px 5px #111; - border: 3px solid #ccc; - } - .photo:hover img, .photo.active img { - box-shadow: 0px 0px 10px #005ecc; - } - - /* Album ------------------------------------------------*/ - .album { - float: left; - display: inline-block; - width: 206px; - height: 206px; - margin: 30px 0px 0px 30px; - cursor: pointer; - } - .album img:first-child, .album img:nth-child(2) { - -webkit-transform: rotate(0deg) translateY(0px) translateX(0px); - -moz-transform: rotate(0deg) translateY(0px) translateX(0px); - -o-transform: rotate(0deg) translateY(0px) translateX(0px); - transform: rotate(0deg) translateY(0px) translateX(0px); - opacity: 0; - } - .album:hover img:first-child { - -webkit-transform: rotate(-2deg) translateY(10px) translateX(-12px); - -moz-transform: rotate(-2deg) translateY(10px) translateX(-12px); - -o-transform: rotate(-2deg) translateY(10px) translateX(-12px); - transform: rotate(-2deg) translateY(10px) translateX(-12px); - opacity: 1; - } - .album:hover img:nth-child(2) { - -webkit-transform: rotate(5deg) translateY(-8px) translateX(12px); - -moz-transform: rotate(5deg) translateY(-8px) translateX(12px); - -o-transform: rotate(5deg) translateY(-8px) translateX(12px); - transform: rotate(5deg) translateY(-8px) translateX(12px); - opacity: 1; - } - .album img { - position: absolute; - width: 200px; - height: 200px; - background-color: #222; - border-radius: 3px; - box-shadow: 0px 1px 5px #111; - border: 3px solid #ccc; - } - .album:hover img, .album.active img { - box-shadow: 0px 0px 10px #005ecc; - } - - /* Album/Photo Overlay ------------------------------------------------*/ - .album .overlay, .photo .overlay { - position: absolute; - width: 200px; - height: 200px; - margin: 3px; - background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0.9) 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(20%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.9))); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0.9) 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0.9) 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0.9) 100%); /* IE10+ */ - background: linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0.9) 100%); /* W3C */ - } - .photo .overlay { - opacity: 0; - } - .photo:hover .overlay, .photo.active .overlay { - opacity: 1; - } - .album .overlay h1, .photo .overlay h1 { - min-height: 19px; - width: 190px; - margin: 153px 0px 3px 15px; - color: #fff; - font-size: 16px; - font-weight: bold; - text-shadow: 0px 1px 0px #000; - overflow: hidden; - } - .album .overlay a { - margin-left: 15px; - font-size: 11px; - color: #aaa; - text-shadow: 0px 1px 0px #000; - } - .photo .overlay a { - margin: 155px 0px 5px 15px; - font-size: 11px; - color: #aaa; - text-shadow: 0px 1px 0px #000; - } - - /* Badges ------------------------------------------------*/ - .album .badge, .photo .badge { - position: absolute; - margin-top: -1px; - margin-left: 12px; - padding: 12px 7px 3px 7px; - box-shadow: 0px 0px 3px #000; - border-radius: 0px 0px 3px 3px; - border: 1px solid #fff; - border-top: none; - color: #fff; - font-size: 24px; - text-shadow: 0px 1px 0px #000; - opacity: .9; - } - .album .badge.icon-star, .photo .badge.icon-star { - padding: 12px 8px 3px 8px; - } - .album .badge.icon-share, .photo .badge.icon-share { - padding: 12px 6px 3px 8px; - } - .album .badge::after, .photo .badge::after { - content: ""; - position: absolute; - margin-top: -12px; - margin-left: -26px; - width: 34px; - height: 5px; - background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* IE10+ */ - background: linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C */ - opacity: .4; - } - .album .badge.icon-star::after { - margin-left: -28px; - width: 36px; - } - .album .badge.icon-share::after, .photo .badge.icon-share::after { - margin-left: -30px; - width: 38px; - } - .album .badge.icon-reorder::after { - margin-left: -30px; - width: 38px; - } - .album .badge:nth-child(2n), .photo .badge:nth-child(2n) { - margin-left: 57px; - } - .album .badge.red, .photo .badge.red { - background: #d64b4b; - background: -webkit-gradient(linear, left top, left bottom, from(#d64b4b), to(#ab2c2c)); - background: -webkit-linear-gradient(top, #d64b4b, #ab2c2c); - background: -moz-linear-gradient(top, #d64b4b, #ab2c2c); - background: -ms-linear-gradient(top, #d64b4b, #ab2c2c); - background: -o-linear-gradient(top, #d64b4b, #ab2c2c); - } - .album .badge.blue, .photo .badge.blue { - background: #d64b4b; - background: -webkit-gradient(linear, left top, left bottom, from(#347cd6), to(#2945ab)); - background: -webkit-linear-gradient(top, #347cd6, #2945ab); - background: -moz-linear-gradient(top, #347cd6, #2945ab); - background: -ms-linear-gradient(top, #347cd6, #2945ab); - background: -o-linear-gradient(top, #347cd6, #2945ab); - } - - /* Divider ------------------------------------------------*/ - .divider { - float: left; - width: 100%; - height: 32px; - margin-top: 50px; - opacity: 0; - - background-color: #2b2b2b; - background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(43, 43, 43)), to(rgb(35, 35, 35))); - background-image: -webkit-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35)); - background-image: -moz-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35)); - background-image: -o-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35)); - background-image: -ms-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35)); - background-image: linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35)); - - box-shadow: 0px 1px 0px #111, inset 0px 1px 0px rgba(255, 255, 255, .1); - } - .divider:first-child { - margin-top: 2px; - } - .divider h1 { - float: left; - margin: 8px 0px 0px 30px; - color: #fff; - font-size: 14px; - font-weight: bold; - text-shadow: 0px -1px 0px #000; - } - - /* No Content ------------------------------------------------*/ - .no_content { - position: absolute; - top: 50%; - left: 50%; - height: 160px; - width: 180px; - margin-top: -80px; - margin-left: -90px; - padding-top: 20px; - color: rgba(20, 20, 20, 1); - text-shadow: 0px 1px 0px rgba(255, 255, 255, .05); - text-align: center; - } - - .no_content .icon { - font-size: 120px; - } - - .no_content p { - font-size: 18px; - } - -/* Overlay ------------------------------------------------*/ -.message_overlay { - position: fixed; - width: 100%; - height: 100%; - top: 0px; - left: 0px; - background-color: rgba(0,0,0,.3); - background-image: -webkit-gradient(radial, 50% 50%,0,50% 50%,200, from(rgba(0, 0, 0, 0.85)), to(rgba(0, 0, 0, 0.50))); - background-image: -webkit-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85)); - background-image: -moz-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85)); - background-image: -o-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85)); - background-image: -ms-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85)); - background-image: radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85)); - z-index: 1000; -} - - .message { - position: absolute; - display: inline-block; - width: 500px; - margin-left: -250px; - margin-top: -85px; - background-color: #505050; - background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(80, 80, 80)), to(rgb(43, 42, 42))); - background-image: -webkit-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42)); - background-image: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42)); - background-image: -o-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42)); - background-image: -ms-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42)); - background-image: linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42)); - border-radius: 5px; - border-bottom: 1px solid #000; - box-shadow: 0px 0px 5px #000, inset 0px 1px 0px rgba(255,255,255,.2), inset 1px 0px 0px rgba(255,255,255,.05), inset -1px 0px 0px rgba(255,255,255,.05); - - /* Animation */ - -webkit-animation-name: bounceInDown; - -webkit-animation-duration: 1s; - -webkit-animation-timing-function: ease-out; - -webkit-animation-fill-mode: forwards; - -moz-animation-name: bounceInDown; - -moz-animation-duration: 1s; - -moz-animation-timing-function: ease-out; - -moz-animation-fill-mode: forwards; - -o-animation-name: bounceInDown; - -o-animation-duration: 1s; - -o-animation-timing-function: ease-out; - -o-animation-fill-mode: forwards; - animation-name: bounceInDown; - animation-duration: 1s; - animation-timing-function: ease-out; - animation-fill-mode: forwards; - } - .message h1 { - float: left; - width: 100%; - padding: 12px 0px; - color: #fff; - font-size: 16px; - font-weight: bold; - text-shadow: 0px -1px 0px #000; - text-align: center; - } - .message .close { - position: absolute; - top: 0px; - right: 0px; - padding: 12px 14px 6px 7px; - color: #aaa; - font-size: 20px; - text-shadow: 0px -1px 0px #111; - cursor: pointer; - } - .message .close:hover { - color: #fff; - } - .message p { - float: left; - width: 90%; - margin-top: 1px; - padding: 12px 5% 15px 5%; - color: #eee; - font-size: 14px; - text-shadow: 0px -1px 0px #222; - line-height: 20px; - } - .message p b { - font-weight: bold; - } - .message .button { - float: right; - margin: 15px 15px 15px 0px; - padding: 6px 10px 8px 10px; - background-color: #4e4e4e; - background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(78, 78, 78)), to(rgb(45, 45, 45))); - background-image: -webkit-linear-gradient(top, rgb(78, 78, 78), rgb(45, 45, 45)); - background-image: -moz-linear-gradient(top, rgb(78, 78, 78), rgb(45, 45, 45)); - background-image: -o-linear-gradient(top, rgb(78, 78, 78), rgb(45, 45, 45)); - background-image: -ms-linear-gradient(top, rgb(78, 78, 78), rgb(45, 45, 45)); - background-image: linear-gradient(top, rgb(78, 78, 78), rgb(45, 45, 45)); - - color: #ccc; - font-size: 14px; - font-weight: bold; - text-align: center; - text-shadow: 0px -1px 0px #000; - border-radius: 5px; - border: 1px solid #111; - box-shadow: inset 0px 1px 0px rgba(255,255,255,.2), 0px 1px 0px rgba(255,255,255,.1); - cursor: pointer; - } - .message .button:first-of-type { - margin: 15px 5% 18px 0px !important; - } - .message .button.active { - color: #fff; - box-shadow: inset 0px 1px 0px rgba(255,255,255,.2), 0px 1px 0px rgba(255,255,255,.1), 0px 0px 5px #005ecc; - } - .message .button:hover { - background-color: #565757; - background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(86, 87, 87)), to(rgb(57, 57, 57))); - background-image: -webkit-linear-gradient(top, rgb(86, 87, 87), rgb(57, 57, 57)); - background-image: -moz-linear-gradient(top, rgb(86, 87, 87), rgb(57, 57, 57)); - background-image: -o-linear-gradient(top, rgb(86, 87, 87), rgb(57, 57, 57)); - background-image: -ms-linear-gradient(top, rgb(86, 87, 87), rgb(57, 57, 57)); - background-image: linear-gradient(top, rgb(86, 87, 87), rgb(57, 57, 57)); - } - .message .button:active, .message .button.pressed { - background-color: #393939; - background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(57, 57, 57)), to(rgb(75, 76, 76))); - background-image: -webkit-linear-gradient(top, rgb(57, 57, 57), rgb(75, 76, 76)); - background-image: -moz-linear-gradient(top, rgb(57, 57, 57), rgb(75, 76, 76)); - background-image: -o-linear-gradient(top, rgb(57, 57, 57), rgb(75, 76, 76)); - background-image: -ms-linear-gradient(top, rgb(57, 57, 57), rgb(75, 76, 76)); - background-image: linear-gradient(top, rgb(57, 57, 57), rgb(75, 76, 76)); - } - - /* Add Album ------------------------------------------------*/ - .message.add { - width: 588px; - margin-top: -152px; - margin-left: -294px; - } - .add_album { - float: left; - display: inline-block; - width: 150px; - height: 200px; - margin: 30px 0px 30px 30px; - border-radius: 3px; - border: 3px dashed #777; - cursor: pointer; - text-align: center; - -webkit-transition: border .3s; - -moz-transition: border .3s; - -o-transition: border .3s; - transition: border .3s; - } - .add_album:hover { - border: 3px dashed #fff; - } - .add_album .icon { - margin-top: 55px; - color: #777; - font-family: 'FontAwesome'; - font-size: 80px; - text-shadow: 0px 1px 2px #000; - } - .add_album:hover .icon { - color: #fff; - } - .add_album a { - float: left; - width: 100%; - color: #777; - font-size: 14px; - font-weight: bold; - text-shadow: 0px 1px 0px #000; - } - .add_album:hover a { - color: #fff; - } - - /* Sign in ------------------------------------------------*/ - .sign_in { - float: left; - width: 100%; - margin-top: 1px; - padding: 5px 0px; - color: #eee; - font-size: 14px; - text-shadow: 0px -1px 0px #222; - line-height: 20px; - } - .sign_in input { - float: left; - width: 86%; - padding: 7px 2% 9px 2%; - margin: 0px 5%; - background-color: #444; - color: #fff; - text-shadow: 0px 1px 0px #222; - border: none; - border: 1px solid #111; - box-shadow: 0px 1px 0px #555; - outline: none; - border-radius: 5px; - } - .sign_in input:first-of-type { - margin-bottom: 10px; - } - .sign_in input:focus { - box-shadow: 0px 1px 0px #666, inset 0px 0px 3px #333, 0px 0px 5px #005ecc; - } - .sign_in input.error:focus { - box-shadow: 0px 1px 0px #666, inset 0px 0px 3px #333, 0px 0px 5px #cc0007; - } - .message #version { - display: inline-block; - margin-top: 23px; - margin-left: 5%; - color: #888; - text-shadow: 0px -1px 0px #111; - } - .message #version span { - display: none; - } - .message #version span a { - color: #888; - } - - /* Copy Link, Password ------------------------------------------------*/ - .message .copylink, .message .password { - float: left; - width: 95%; - padding: 7px 10px 9px 10px; - margin-top: 20px; - background-color: #444; - color: #fff; - text-shadow: 0px 1px 0px #222; - border: none; - border: 1px solid #111; - box-shadow: 0px 1px 0px #666, inset 0px 0px 3px #333, 0px 0px 5px #005ecc; - outline: none; - border-radius: 5px; - } - .message .copylink { - margin-bottom: 20px; - } - -/* Image View ------------------------------------------------*/ -#imageview { - position: fixed; - display: none; - width: 100%; - min-height: 100%; - background-color: rgba(30,30,30,.99); - box-shadow: 0px 2px 4px #000; - -webkit-transition: background-color .3s; -} -#imageview.full { - background-color: #111; -} - -#imageview #image { - position: absolute; - top: 70px; - right: 30px; - bottom: 30px; - left: 30px; - background-repeat: no-repeat; - background-position: 50% 50%; - background-size: contain; - -webkit-transition: top .3s, bottom .3s, margin-top .3s; - - -webkit-animation-name: zoomIn; - -webkit-animation-duration: .3s; - -webkit-animation-fill-mode: forwards; - -moz-animation-name: zoomIn; - -moz-animation-duration: .3s; - -moz-animation-fill-mode: forwards; - -o-animation-name: zoomIn; - -o-animation-duration: .3s; - -o-animation-fill-mode: forwards; - animation-name: zoomIn; - animation-duration: .3s; - animation-fill-mode: forwards; -} -#imageview #image.small { - top: 50%; - right: auto; - bottom: auto; - left: 50%; -} - - /* Previous/Next Buttons ------------------------------------------------*/ - #imageview a { - position: fixed; - top: 50%; - margin-top: -10px; - color: #fff; - font-size: 50px; - text-shadow: 0px 1px 2px #000; - cursor: pointer; - opacity: .1; - z-index: 1; - } - #imageview a:hover { - opacity: .9; - } - #imageview a#previous { - left: 20px; - -webkit-transition: left .3s; - } - #imageview.full a#previous { - left: -50px; - } - #imageview a#next { - right: 20px; - -webkit-transition: right .3s - } - #imageview.full a#next { - right: -50px; - } - - /* InfoBox ------------------------------------------------*/ - #infobox_overlay { - z-index: 2; - position: fixed; - width: 100%; - height: 100%; - top: 0px; - left: 0px; - background-color: rgba(0,0,0,.7); - -webkit-animation-name: fadeIn; - -webkit-animation-duration: .5s; - -webkit-animation-fill-mode: forwards; - -moz-animation-name: fadeIn; - -moz-animation-duration: .5s; - -moz-animation-fill-mode: forwards; - -o-animation-name: fadeIn; - -o-animation-duration: .5s; - -o-animation-fill-mode: forwards; - animation-name: fadeIn; - animation-duration: .5s; - animation-fill-mode: forwards; - } - #infobox { - z-index: 3; - position: fixed; - right: -320px; - width: 300px; - height: 100%; - background-color: rgba(20,20,20,0.98); - box-shadow: -1px 0px 2px #000; - display: none; - - -webkit-user-select: text; - -moz-user-select: text; - -o-user-select: text; - user-select: text; - - -webkit-transition: right .5s ease-out; - -moz-transition: right .5s; - -o-transition: right .5s; - transition: right .5s; - } - #infobox .wrapper { - float: left; - height: 100%; - overflow: scroll; - } - #infobox .header { - float: left; - height: 41px; - width: 100%; - - background-color: #1d1d1d; - background-image: -webkit-gradient(linear, left top, left bottom, from(#1d1d1d), to(#050505)); - background-image: -webkit-linear-gradient(top, #1d1d1d, #050505); - background-image: -moz-linear-gradient(top, #1d1d1d, #050505); - background-image: -o-linear-gradient(top, #1d1d1d, #050505); - background-image: -ms-linear-gradient(top, #1d1d1d, #050505); - background-image: linear-gradient(top, #1d1d1d, #050505); - - box-shadow: inset 0px 1px 0px #111, inset 0px -1px 0px #000; - border-top: 1px solid #000; - } - #infobox .header h1 { - position: absolute; - margin: 0px 30%; - width: 40%; - margin-top: 11px; - color: #fff; - font-size: 16px; - font-weight: bold; - text-align: center; - text-shadow: 0px -1px 0px #000; - } - #infobox .header a { - float: right; - padding: 10px 15px; - color: #fff; - font-size: 21px; - font-weight: bold; - text-shadow: 0px -1px 0px #000; - opacity: .5; - cursor: pointer; - } - #infobox .header a:hover { - opacity: 1; - } - #infobox .separater { - float: left; - width: 100%; - height: 27px; - - background-color: #2b2b2b; - background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(43, 43, 43)), to(rgb(35, 35, 35))); - background-image: -webkit-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35)); - background-image: -moz-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35)); - background-image: -o-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35)); - background-image: -ms-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35)); - background-image: linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35)); - - box-shadow: 0px 1px 0px #000, inset 0px 1px 0px rgba(255, 255, 255, .1); - } - #infobox .separater h1 { - margin: 5px 0px 0px 15px; - color: #fff; - font-size: 14px; - font-weight: bold; - text-shadow: 0px -1px 0px #000; - } - #infobox table { - float: left; - margin: 10px 0px 15px 15px; - } - #infobox table tr td { - padding: 5px 0px; - color: #fff; - font-size: 14px; - line-height: 19px; - } - #infobox table tr td:first-child { - width: 110px; - } - #infobox table tr td:last-child { - padding-right: 10px; - } - #infobox .bumper { - float: left; - width: 100%; - height: 35px; - } - #infobox #edit_title, - #infobox #edit_description { - display: inline; - margin-left: 3px; - width: 20px; - height: 5px; - cursor: pointer; - } - -/* ContextMenu ------------------------------------------------*/ -.contextmenu_bg { - position: fixed; - height: 100%; - width: 100%; - z-index: 1000; -} -.contextmenu { - position: fixed; - top: 110%; - left: 110%; - padding: 5px 0px; - background-color: #393939; - background-image: -webkit-gradient(linear, left top, left bottom, from(#393939), to(#2d2d2d)); - background-image: -webkit-linear-gradient(top, #444, #2d2d2d); - background-image: -moz-linear-gradient(top, #393939, #2d2d2d); - background-image: -o-linear-gradient(top, #393939, #2d2d2d); - background-image: -ms-linear-gradient(top, #393939, #2d2d2d); - background-image: linear-gradient(top, #393939, #2d2d2d); - border: 1px solid rgba(0,0,0,0.7); - border-bottom: 1px solid rgba(0,0,0,.9); - border-radius: 5px; - box-shadow: 0px 3px 5px rgba(0,0,0,0.4), inset 0px 1px 0px rgba(255,255,255,0.2), inset 1px 0px 0px rgba(255,255,255,0.05), inset -1px 0px 0px rgba(255,255,255,0.05); - opacity: .98; - z-index: 1001; -} - - /* Items ------------------------------------------------*/ - .contextmenu tr { - font-size: 14px; - color: #eee; - text-shadow: 0px -1px 0px rgba(0,0,0,.7); - cursor: pointer; - } - .contextmenu tr:hover { - background-color: #6a84f2; - background-image: -webkit-gradient(linear, left top, left bottom, from(#6a84f2), to(#3959ef)); - background-image: -webkit-linear-gradient(top, #6a84f2, #3959ef); - background-image: -moz-linear-gradient(top, #6a84f2, #3959ef); - background-image: -o-linear-gradient(top, #6a84f2, #3959ef); - background-image: -ms-linear-gradient(top, #6a84f2, #3959ef); - background-image: linear-gradient(top, #6a84f2, #3959ef); - } - .contextmenu tr.no_hover:hover { - cursor: inherit; - background-color: inherit; - background-image: none; - } - .contextmenu tr.separator { - float: left; - height: 1px; - width: 100%; - background-color: #222; - box-shadow: 0px 1px 0px #555; - margin: 4px 0px 5px 0px; - cursor: inherit; - } - .contextmenu tr.separator:hover { - background-color: #222; - background-image: none; - } - .contextmenu tr td { - padding: 5px 20px 5px 10px; - -webkit-transition: none; - -moz-transition: none; - -o-transition: none; - transition: none; - } - .contextmenu tr:hover td { - color: #fff; - box-shadow: inset 0px 1px 0px rgba(255,255,255,.1); - text-shadow: 0px -1px 0px rgba(0,0,0,.7); - } - .contextmenu tr.no_hover:hover td { - box-shadow: none; - } - .contextmenu tr a { - float: left; - width: 10px; - margin-right: 10px; - text-align: center; - } - - /* Direct Link Input ------------------------------------------------*/ - .contextmenu #link { - float: right; - width: 140px; - margin: 0px -10px -1px 0px; - padding: 4px 6px 5px 6px; - background-color: #444; - color: #fff; - border: none; - border: 1px solid #111; - box-shadow: 0px 1px 0px rgba(255,255,255,.1); - outline: none; - border-radius: 5px; - } - .contextmenu tr a#link_icon { - padding-top: 4px; - } - -/* Upload ------------------------------------------------*/ -#upload { - display: none; -} -.upload_overlay { - position: fixed; - width: 100%; - height: 100%; - background-color: rgba(0,0,0,.3); - background-image: -webkit-gradient(radial, 50% 50%,0,50% 50%,200, from(rgba(0, 0, 0, 0.85)), to(rgba(0, 0, 0, 0.50))); - background-image: -webkit-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85)); - background-image: -moz-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85)); - background-image: -o-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85)); - background-image: -ms-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85)); - background-image: radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85)); - z-index: 1000; -} -.upload_message { - position: absolute; - display: inline-block; - width: 200px; - margin-left: -100px; - margin-top: -85px; - background-color: #505050; - background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(80, 80, 80)), to(rgb(43, 42, 42))); - background-image: -webkit-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42)); - background-image: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42)); - background-image: -o-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42)); - background-image: -ms-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42)); - background-image: linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42)); - border-radius: 5px; - border-bottom: 1px solid #000; - box-shadow: 0px 0px 5px #000, inset 0px 1px 0px rgba(255,255,255,.2), inset 1px 0px 0px rgba(255,255,255,.05), inset -1px 0px 0px rgba(255,255,255,.05); - - /* Animation */ - -webkit-animation-name: bounceInDown; - -webkit-animation-duration: 1s; - -webkit-animation-timing-function: ease-out; - -webkit-animation-fill-mode: forwards; - -moz-animation-name: bounceInDown; - -moz-animation-duration: 1s; - -moz-animation-timing-function: ease-out; - -moz-animation-fill-mode: forwards; - -o-animation-name: bounceInDown; - -o-animation-duration: 1s; - -o-animation-timing-function: ease-out; - -o-animation-fill-mode: forwards; - animation-name: bounceInDown; - animation-duration: 1s; - animation-timing-function: ease-out; - animation-fill-mode: forwards; -} -.upload_message a { - float: left; - margin: 35px 69px 5px 69px; - color: #fff; - font-size: 80px; - text-shadow: 0px 1px 2px #000; - z-index: 2; - - /* Animation */ - -webkit-animation-name: pulse; - -webkit-animation-duration: 2s; - -webkit-animation-timing-function: ease-in-out; - -webkit-animation-iteration-count: infinite; - -moz-animation-name: pulse; - -moz-animation-duration: 2s; - -moz-animation-timing-function: ease-in-out; - -moz-animation-iteration-count: infinite; - -o-animation-name: pulse; - -o-animation-duration: 2s; - -o-animation-timing-function: ease-in-out; - -o-animation-iteration-count: infinite; - animation-name: pulse; - animation-duration: 2s; - animation-timing-function: ease-in-out; - animation-iteration-count: infinite; -} -.upload_message p { - float: left; - width: 200px; - margin: 10px 0px; - color: #fff; - font-size: 14px; - text-align: center; - text-shadow: 0px -1px 0px #000; -} -.upload_message .progressbar { - float: left; - width: 170px; - height: 25px; - margin: 15px; - background-image: url(data:image/png;base64,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bj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNTwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxMi0wOS0yOFQxNDowOTozMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAyLjEuMTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KhsXwcAAAABJQTFRFAAAA////////////////////PlKtOgAAAAZ0Uk5TAAECAwQF749peAAAAF1JREFUGNNjYIAA11AICIDyGZigAqEGMBFWmAhMgMEUKhAEFwlFN4YZJqIAExGFCoTgNoYRpskBJsICExHAbQzMC4EYxhjgNkYVKhCM2xhiQgLTGCJCgpWckMAwBgAeZ0aFTqsxyQAAAABJRU5ErkJggg==), #101010; - background-image: url(data:image/png;base64,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bj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNTwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxMi0wOS0yOFQxNDowOTozMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAyLjEuMTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KhsXwcAAAABJQTFRFAAAA////////////////////PlKtOgAAAAZ0Uk5TAAECAwQF749peAAAAF1JREFUGNNjYIAA11AICIDyGZigAqEGMBFWmAhMgMEUKhAEFwlFN4YZJqIAExGFCoTgNoYRpskBJsICExHAbQzMC4EYxhjgNkYVKhCM2xhiQgLTGCJCgpWckMAwBgAeZ0aFTqsxyQAAAABJRU5ErkJggg==), -webkit-linear-gradient(top, #101010, #1f1f1f); - background-image: url(data:image/png;base64,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bj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNTwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxMi0wOS0yOFQxNDowOTozMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAyLjEuMTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KhsXwcAAAABJQTFRFAAAA////////////////////PlKtOgAAAAZ0Uk5TAAECAwQF749peAAAAF1JREFUGNNjYIAA11AICIDyGZigAqEGMBFWmAhMgMEUKhAEFwlFN4YZJqIAExGFCoTgNoYRpskBJsICExHAbQzMC4EYxhjgNkYVKhCM2xhiQgLTGCJCgpWckMAwBgAeZ0aFTqsxyQAAAABJRU5ErkJggg==), -moz-linear-gradient(top, #101010, #1f1f1f); - background-image: url(data:image/png;base64,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bj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNTwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxMi0wOS0yOFQxNDowOTozMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAyLjEuMTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KhsXwcAAAABJQTFRFAAAA////////////////////PlKtOgAAAAZ0Uk5TAAECAwQF749peAAAAF1JREFUGNNjYIAA11AICIDyGZigAqEGMBFWmAhMgMEUKhAEFwlFN4YZJqIAExGFCoTgNoYRpskBJsICExHAbQzMC4EYxhjgNkYVKhCM2xhiQgLTGCJCgpWckMAwBgAeZ0aFTqsxyQAAAABJRU5ErkJggg==), -o-linear-gradient(top, #101010, #1f1f1f); - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAZBAMAAABN41qcAAAEJGlDQ1BJQ0MgUHJvZmlsZQAAOBGFVd9v21QUPolvUqQWPyBYR4eKxa9VU1u5GxqtxgZJk6XtShal6dgqJOQ6N4mpGwfb6baqT3uBNwb8AUDZAw9IPCENBmJ72fbAtElThyqqSUh76MQPISbtBVXhu3ZiJ1PEXPX6yznfOec7517bRD1fabWaGVWIlquunc8klZOnFpSeTYrSs9RLA9Sr6U4tkcvNEi7BFffO6+EdigjL7ZHu/k72I796i9zRiSJPwG4VHX0Z+AxRzNRrtksUvwf7+Gm3BtzzHPDTNgQCqwKXfZwSeNHHJz1OIT8JjtAq6xWtCLwGPLzYZi+3YV8DGMiT4VVuG7oiZpGzrZJhcs/hL49xtzH/Dy6bdfTsXYNY+5yluWO4D4neK/ZUvok/17X0HPBLsF+vuUlhfwX4j/rSfAJ4H1H0qZJ9dN7nR19frRTeBt4Fe9FwpwtN+2p1MXscGLHR9SXrmMgjONd1ZxKzpBeA71b4tNhj6JGoyFNp4GHgwUp9qplfmnFW5oTdy7NamcwCI49kv6fN5IAHgD+0rbyoBc3SOjczohbyS1drbq6pQdqumllRC/0ymTtej8gpbbuVwpQfyw66dqEZyxZKxtHpJn+tZnpnEdrYBbueF9qQn93S7HQGGHnYP7w6L+YGHNtd1FJitqPAR+hERCNOFi1i1alKO6RQnjKUxL1GNjwlMsiEhcPLYTEiT9ISbN15OY/jx4SMshe9LaJRpTvHr3C/ybFYP1PZAfwfYrPsMBtnE6SwN9ib7AhLwTrBDgUKcm06FSrTfSj187xPdVQWOk5Q8vxAfSiIUc7Z7xr6zY/+hpqwSyv0I0/QMTRb7RMgBxNodTfSPqdraz/sDjzKBrv4zu2+a2t0/HHzjd2Lbcc2sG7GtsL42K+xLfxtUgI7YHqKlqHK8HbCCXgjHT1cAdMlDetv4FnQ2lLasaOl6vmB0CMmwT/IPszSueHQqv6i/qluqF+oF9TfO2qEGTumJH0qfSv9KH0nfS/9TIp0Wboi/SRdlb6RLgU5u++9nyXYe69fYRPdil1o1WufNSdTTsp75BfllPy8/LI8G7AUuV8ek6fkvfDsCfbNDP0dvRh0CrNqTbV7LfEEGDQPJQadBtfGVMWEq3QWWdufk6ZSNsjG2PQjp3ZcnOWWing6noonSInvi0/Ex+IzAreevPhe+CawpgP1/pMTMDo64G0sTCXIM+KdOnFWRfQKdJvQzV1+Bt8OokmrdtY2yhVX2a+qrykJfMq4Ml3VR4cVzTQVz+UoNne4vcKLoyS+gyKO6EHe+75Fdt0Mbe5bRIf/wjvrVmhbqBN97RD1vxrahvBOfOYzoosH9bq94uejSOQGkVM6sN/7HelL4t10t9F4gPdVzydEOx83Gv+uNxo7XyL/FtFl8z9ZAHF4bBsrEwAAAAlwSFlzAAAuIwAALiMBeKU/dgAABOBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuMS4yIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpSZXNvbHV0aW9uVW5pdD4xPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAgICAgICA8dGlmZjpDb21wcmVzc2lvbj41PC90aWZmOkNvbXByZXNzaW9uPgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj4zMDA8L3RpZmY6WFJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjMwMDwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIj4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjMzPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNTwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxMi0wOS0yOFQxNDowOTozMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAyLjEuMTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KhsXwcAAAABJQTFRFAAAA////////////////////PlKtOgAAAAZ0Uk5TAAECAwQF749peAAAAF1JREFUGNNjYIAA11AICIDyGZigAqEGMBFWmAhMgMEUKhAEFwlFN4YZJqIAExGFCoTgNoYRpskBJsICExHAbQzMC4EYxhjgNkYVKhCM2xhiQgLTGCJCgpWckMAwBgAeZ0aFTqsxyQAAAABJRU5ErkJggg==), -ms-linear-gradient(top, #101010, #1f1f1f); - background-image: url(data:image/png;base64,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bj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNTwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxMi0wOS0yOFQxNDowOTozMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAyLjEuMTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KhsXwcAAAABJQTFRFAAAA////////////////////PlKtOgAAAAZ0Uk5TAAECAwQF749peAAAAF1JREFUGNNjYIAA11AICIDyGZigAqEGMBFWmAhMgMEUKhAEFwlFN4YZJqIAExGFCoTgNoYRpskBJsICExHAbQzMC4EYxhjgNkYVKhCM2xhiQgLTGCJCgpWckMAwBgAeZ0aFTqsxyQAAAABJRU5ErkJggg==), linear-gradient(top, #101010, #1f1f1f); - border: 1px solid #000; - box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0px 0px 2px #111; - border-radius: 5px; - - /* Animation */ - -webkit-animation-name: moveBackground; - -webkit-animation-duration: .6s; - -webkit-animation-timing-function: linear; - -webkit-animation-iteration-count: infinite; - -moz-animation-name: moveBackground; - -moz-animation-duration: .6s; - -moz-animation-timing-function: linear; - -moz-animation-iteration-count: infinite; - -o-animation-name: moveBackground; - -o-animation-duration: .6s; - -o-animation-timing-function: linear; - -o-animation-iteration-count: infinite; - animation-name: moveBackground; - animation-duration: .6s; - animation-timing-function: linear; - animation-iteration-count: infinite; -} -.upload_message .progressbar div { - float: left; - width: 0%; - height: 100%; - box-shadow: 0 1px 0 #000, 1px 0px 2px #000; - background-color: #f5f2f7; - background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f2f7), to(#c7c6c8)); - background-image: -webkit-linear-gradient(top, #f5f2f7, #c7c6c8); - background-image: -moz-linear-gradient(top, #f5f2f7, #c7c6c8); - background-image: -o-linear-gradient(top, #f5f2f7, #c7c6c8); - background-image: -ms-linear-gradient(top, #f5f2f7, #c7c6c8); - background-image: linear-gradient(top, #f5f2f7, #c7c6c8); - border-radius: 5px; - -webkit-transition: width .2s, opacity .5; - -moz-transition: width .2s, opacity .5; - -o-transition: width .2s, opacity .5; - transition: width .2s, opacity .5; -} - -/* Screen behavior -------------------------------------------------*/ -@media only screen and (max-width: 900px) { - - #title { margin: 0px 20%; width: 40%; } - #title.view { margin: 11px 20% 0px 20%; width: 60%; } - #title span { display: none; } - -} -@media only screen and (max-width: 640px) { - - #title { display: none; } - #title.view { display: block; margin: 11px 20% 0px 15%; width: 65%; } - #button_move { display: none; } - #button_archive { display: none; } - - .center { top: 0px; left: 0px; } - - .album { margin: 40px 0px 0px 50px; } - .photo { margin: 40px 0px 0px 50px; } - - .message { - position: fixed; - width: 100%; - height: 100%; - margin: 1px 0px 0px 0px !important; - border-radius: 0px; - - /* Animation */ - -webkit-animation-name: moveUp; - -webkit-animation-duration: .3s; - -moz-animation-name: moveUp; - -moz-animation-duration: .3s; - -o-animation-name: moveUp; - -o-animation-duration: .3s; - animation-name: moveUp; - animation-duration: .3s; - } - - .message.add { - width: 100%; - margin-top: 0px; - } - - .add_album { - width: 88%; - height: 100px; - margin: 30px 5% -10px 5%; - } - - .add_album .icon { - margin-top: 18px; - font-size: 50px; - } - -} \ No newline at end of file diff --git a/docs/assets/favicon.sketch/Data b/docs/assets/favicon.sketch/Data new file mode 100644 index 0000000..781092e Binary files /dev/null and b/docs/assets/favicon.sketch/Data differ diff --git a/docs/assets/favicon.sketch/QuickLook/Preview.png b/docs/assets/favicon.sketch/QuickLook/Preview.png new file mode 100644 index 0000000..8a59406 Binary files /dev/null and b/docs/assets/favicon.sketch/QuickLook/Preview.png differ diff --git a/docs/assets/favicon.sketch/QuickLook/Thumbnail.png b/docs/assets/favicon.sketch/QuickLook/Thumbnail.png new file mode 100644 index 0000000..bc37a48 Binary files /dev/null and b/docs/assets/favicon.sketch/QuickLook/Thumbnail.png differ diff --git a/docs/assets/favicon.sketch/fonts b/docs/assets/favicon.sketch/fonts new file mode 100644 index 0000000..2114530 --- /dev/null +++ b/docs/assets/favicon.sketch/fonts @@ -0,0 +1 @@ +Entypo \ No newline at end of file diff --git a/docs/assets/favicon.sketch/metadata b/docs/assets/favicon.sketch/metadata new file mode 100644 index 0000000..1491bff --- /dev/null +++ b/docs/assets/favicon.sketch/metadata @@ -0,0 +1,14 @@ + + +