-
+
-
').html(L10N.qrHelp).appendTo($('.qr')); + var body = qrCodeModal.find('.modal__body'); + + $(this).appendTo(body); + $('
').html(L10N.qrHelp).appendTo(body); }); // Add Print Link $(document).off('click touchstart', '.printbtn'); $(document).on('click', '.printbtn', function (e) { e.preventDefault(); - document.getElementById("print_mesg").style.display = "block"; + e.stopPropagation(); + $('#print_mesg').addClass('modal--show'); setTimeout(function () { $.ajax({ url: 'print.php?filename=' + encodeURI(result.img), @@ -189,7 +224,7 @@ var photoBooth = (function () { console.log(data) } setTimeout(function () { - document.getElementById("print_mesg").style.display = "none"; + $('#print_mesg').removeClass('modal--show'); public.reloadPage(); },5000); }) @@ -208,12 +243,10 @@ var photoBooth = (function () { resultPage.fadeIn(400, function () { setTimeout(function () { processing = false; - loader.slideUp('fast'); + loader.removeClass('open'); }, 400); setTimeout(function () { - $('.resultInner').stop().animate({ - 'bottom': '50px' - }, 400).removeClass('hidden'); + $('.resultInner').addClass('show'); }, 400); clearTimeout(timeOut); public.resetTimeOut(); @@ -256,47 +289,22 @@ var photoBooth = (function () { // Open Gallery Overview public.openGallery = function (elem) { - var pos = elem.offset(); if(showScrollbarsInGallery) { - $('.galHeader').css({ - 'right': '20px', - 'width': 'auto' - }); + gallery.addClass('scrollbar'); } - gallery.css({ - 'left': pos.left, - 'top': pos.top - }) - .data('left', pos.left) - .data('top', pos.top) - .addClass('open') - .animate({ - 'width': showScrollbarsInGallery ? '100%' : '102%', - 'height': '100%', - 'top': 0, - 'left': 0 - }, 300, function () { - $('.galInner').show(); - gallery.css({ - 'overflow-y': 'scroll' - }); - }); - } - $(window).on('resize', public.handleResize); + gallery.addClass('gallery--open'); + + setTimeout(() => gallery.find('.gallery__inner').show(), 300); + } //Filter $('.imageFilter').on('click', function (e) { - //e.preventDefault(); - if($('#mySidenav').width() > 0){ - public.closeNav(); - } else { - public.openNav(); - } + public.toggleNav(); }); - $('.sidenav').children().on('click', function (e) { - $('.sidenav').children().removeAttr("class"); + $('.sidenav > div').on('click', function (e) { + $('.sidenav > div').removeAttr("class"); $(this).addClass("activeSidenavBtn"); imgFilter = $(this).attr("id"); if (isdev) { @@ -304,120 +312,55 @@ var photoBooth = (function () { } }); - // Open QR Code in Gallery + function takePictureHandler(photoStyle) { + if (!processing) { + public.closeNav(); + public.reset(); + if (useVideo) { + public.startVideo(); + } + loader.addClass('open'); + public.countdown(countDown, $('#counter'),photoStyle); + } + } // Take Picture Button $('.takePic, .newpic').on('click', function (e) { e.preventDefault(); - var target = $(e.target); - var photoStyle = 'photo'; - if (target.hasClass('gallery')) { - public.openGallery(target); - } else { - if (!processing) { - if($('#mySidenav').width() > 0){ - public.closeNav(); - } - public.reset(); - if(useVideo && navigator.mediaDevices){ - navigator.getMedia = (navigator.mediaDevices.getUserMedia || navigator.mediaDevices.webkitGetUserMedia || navigator.mediaDevices.mozGetUserMedia || false); - if(navigator.getMedia) { - navigator.mediaDevices.getUserMedia(webcamConstraints) - .then(function(stream) { - $('video').show(); - var video = document.getElementById('video'); - video.srcObject = stream; - public.stream = stream; - }) - .catch(function (error) { - }); - } - } - loader.slideDown('slow', 'easeOutBounce', function () { - public.countdown(countDown, $('#counter'),photoStyle); - }); - } - } + + takePictureHandler('photo'); }); // Take Collage Button $('.takeCollage, .newcollage').on('click', function (e) { e.preventDefault(); - var target = $(e.target); - var photoStyle = 'collage'; - if (isdev) { - console.log("collage"); - } - if (target.hasClass('gallery')) { - public.openGallery(target); - } else { - if (!processing) { - if($('#mySidenav').width() > 0){ - public.closeNav(); - } - public.reset(); - if(useVideo && navigator.mediaDevices){ - navigator.getMedia = (navigator.mediaDevices.getUserMedia || navigator.mediaDevices.webkitGetUserMedia || navigator.mediaDevices.mozGetUserMedia || false); - if(navigator.getMedia) { - navigator.mediaDevices.getUserMedia(webcamConstraints) - .then(function(stream) { - $('video').show(); - var video = document.getElementById('video'); - video.srcObject = stream; - public.stream = stream; - }) - .catch(function (error) { - }); - } - } - loader.slideDown('slow', 'easeOutBounce', function () { - if (isdev) { - console.log(photoStyle); - } - public.countdown(countDown, $('#counter'),photoStyle); - }); - } - } + + takePictureHandler('collage'); + }); + + $('#mySidenav .closebtn').on('click', function (e) { + e.preventDefault(); + + public.closeNav(); }); // Open Gallery Button - $('#result .gallery, #start .gallery').on('click', function (e) { + $('.gallery-button').on('click', function (e) { e.preventDefault(); - if($('#mySidenav').width() > 0){ - public.closeNav(); - } + + public.closeNav(); public.openGallery($(this)); }); // Close Gallery Overview - $('.close_gal').on('click', function (e) { + $('.gallery__close').on('click', function (e) { e.preventDefault(); - $('.galInner').hide(); - gallery.css({ - 'overflow-y': 'visible' - }); - $('#gallery').animate({ - 'width': '200px', - 'height': '70px', - 'left': $('#gallery').data('left'), - 'top': $('#gallery').data('top') - }, 300, function () { - $('#gallery').removeClass('open'); - }); + gallery.find('.gallery__inner').hide(); + gallery.removeClass('gallery--open'); }); - $('.tabbox ul li').on('click', function () { - var elem = $(this), - target = $('.' + elem.data('target')); - if (!elem.hasClass('active')) { - $('.tabbox ul li').removeClass('active'); - $('.tab').removeClass('active'); - elem.addClass('active'); - target.addClass('active'); - } - }); // QR in gallery - $(document).on('click touchstart', '.gal-qr-code', function (e) { + $('.gal-qr-code').on('click', function (e) { e.preventDefault(); var pswpQR = $('.pswp__qr'); @@ -433,12 +376,13 @@ var photoBooth = (function () { pswpQR.addClass('qr-active').fadeIn('fast'); } }); + // print in gallery - $(document).on('click touchstart', '.gal-print', function (e) { + $('.gal-print').on('click', function (e) { e.preventDefault(); var img = pswp.currItem.src; - img = img.replace(imgFolder+'/', ''); - document.getElementById("print_mesg").style.display = "block"; + img = img.split('/').pop(); + modal.open('#print_mesg'); setTimeout(function () { $.ajax({ url: 'print.php?filename=' + encodeURI(img), @@ -447,7 +391,7 @@ var photoBooth = (function () { console.log(data) } setTimeout(function () { - document.getElementById("print_mesg").style.display = "none"; + modal.close('#print_mesg'); pswp.close(); },5000); }); @@ -458,7 +402,7 @@ var photoBooth = (function () { $(document).on('click touchstart', '.gal-print-chroma_keying', function (e) { e.preventDefault(); var img = pswp.currItem.src; - img = img.replace(imgFolder+'/', ''); + img = img.split('/').pop(); $.post( "chromakeying_info.php", function( info ) { if (info.chroma_keying == true) { var currentHref = $(location).attr('href').split('#')[0];; @@ -469,20 +413,10 @@ var photoBooth = (function () { }, "json"); }); - // Send Mail gallery - $('.gal-mail').on('click touchstart', function (e) { - //e.preventDefault(); - - var mail = $('.send-mail'); - if (mail.hasClass('mail-active')) { - public.resetMailForm(); - mail.removeClass('mail-active').fadeOut('fast'); - } else { - mail.addClass('mail-active').fadeIn('fast'); - } - }); + $('.gal-mail, .mailbtn').on('click touchstart', function (e) { + e.preventDefault(); + e.stopPropagation(); - $('.mailbtn').on('click', function (e) { var mail = $('.send-mail'); if (mail.hasClass('mail-active')) { public.resetMailForm(); @@ -501,8 +435,7 @@ var photoBooth = (function () { img = resultPage.css("background-image").replace('url(','').replace(')','').replace(/\"/gi, "").split('/'+imgFolder+'/')[1]; } - img = img.replace(imgFolder+'/', ''); - img = img.replace(thumbFolder+'/', ''); + img = img.split('/').pop(); $('#mail-form-image').val(img); var message = $('#mail-form-message'); @@ -544,95 +477,24 @@ var photoBooth = (function () { }; $('#result').on('click', function (e) { - var target = $(e.target); - - // Menü in and out - if (!target.hasClass('qrbtn') && target.closest('.qrbtn').length == 0 && !target.hasClass('newpic') && !target.hasClass('printbtn') && target.closest('.printbtn').length == 0 && !target.hasClass('resetBtn') && !target.hasClass('gallery') && qr != true && !target.hasClass('homebtn') && target.closest('.homebtn').length == 0 && !target.hasClass('mailbtn')) { - if ($('.resultInner').hasClass('hidden')) { - $('.resultInner').stop().animate({ - 'bottom': '50px' - }, 400).removeClass('hidden'); - } else { - $('.resultInner').stop().animate({ - 'bottom': '-100px' - }, 400).addClass('hidden'); - } - } - - if (qr && !target.hasClass('qrbtn')) { - var qrpos = $('.qrbtn').offset(), - qrbtnwidth = $('.qrbtn').outerWidth(), - qrbtnheight = $('.qrbtn').outerHeight() - $('.qr').removeClass('active'); - $('.qr').animate({ - 'width': qrbtnwidth, - 'height': qrbtnheight, - 'left': qrpos.left, - 'top': qrpos.top, - 'margin-left': 0, - }, 250, function(){ - $('.qr').hide(); - }); - qr = false; - } - - // Go to Home - if (target.hasClass('homebtn') || target.closest('.homebtn').length > 0) { - public.reloadPage(); - } - - // Qr in and out - if (target.hasClass('qrbtn') || target.closest('.qrbtn').length > 0) { - - var qrpos = $('.qrbtn').offset(), - qrbtnwidth = $('.qrbtn').outerWidth(), - qrbtnheight = $('.qrbtn').outerHeight() - - if (qr) { - $('.qr').removeClass('active'); - $('.qr').animate({ - 'width': qrbtnwidth, - 'height': qrbtnheight, - 'left': qrpos.left, - 'top': qrpos.top, - 'margin-left': 0, - }, 250, function(){ - $('.qr').hide(); - }); - qr = false; - } else { - qr = true; - $('.qr').css({ - 'width': qrbtnwidth, - 'height': qrbtnheight, - 'left': qrpos.left, - 'top': qrpos.top - }); - $('.qr').show(); - $('.qr').animate({ - 'width': 500, - 'height': 600, - 'left': '50%', - 'margin-left': -265, - 'top': 50 - }, 250, function(){ - $('.qr').addClass('active'); - }); - } + if (!modal.close('#qrCode')) { + $('.resultInner').toggleClass('show'); } }); // Show QR Code $('.qrbtn').on('click', function (e) { e.preventDefault(); - }); + e.stopPropagation(); - $('.printbtn').on('click', function (e) { - e.preventDefault(); + modal.toggle('#qrCode'); }); $('.homebtn').on('click', function (e) { e.preventDefault(); + e.stopPropagation(); + + public.reloadPage(); }); // Countdown Function @@ -645,16 +507,11 @@ var photoBooth = (function () { var timerFunction = function () { element.text(current); current--; - TweenLite.to(element, 0.0, { - scale: 8, - opacity: 0.2 - }); - TweenLite.to(element, 0.75, { - scale: 1, - opacity: 1 - }); + + element.removeClass('tick'); if (count < calls) { + window.setTimeout(() => element.addClass('tick'), 50); window.setTimeout(timerFunction, 1000); } else { if (isdev) { diff --git a/resources/js/theme.js b/resources/js/theme.js new file mode 100644 index 000000000..9913928a8 --- /dev/null +++ b/resources/js/theme.js @@ -0,0 +1,13 @@ +if (theme === 'bluegray') { + var style = document.documentElement.style; + + style.setProperty('--primary-color', '#669db3'); + style.setProperty('--secondary-color', '#2e535e'); + style.setProperty('--font-color', '#f0f6f7'); + + $('#wrapper').addClass('bluegray-bg'); +} + +$(function() { + $('#wrapper').show(); +}); \ No newline at end of file diff --git a/resources/sass/admin.scss b/resources/sass/admin.scss index 55aea9698..20286c29f 100644 --- a/resources/sass/admin.scss +++ b/resources/sass/admin.scss @@ -1,5 +1,4 @@ -$mainColor: #e67e22; -$hoverColor: #d35400; +@import "modules/colors"; $error: #e74c3c; $success: #2ecc71; @@ -7,13 +6,6 @@ $success: #2ecc71; display: block; } -body { - overflow: auto; - background: url(../img/bg.jpg) center center no-repeat; - background-size: cover; - background-attachment: fixed; -} - button { border: 0 none; color: #fff; @@ -43,6 +35,7 @@ input[type="checkbox"] { margin: 50px auto; background: #fff; position: relative; + max-width: 100%; } .panel { diff --git a/resources/sass/modules/_colors.scss b/resources/sass/modules/_colors.scss new file mode 100644 index 000000000..373ee7b89 --- /dev/null +++ b/resources/sass/modules/_colors.scss @@ -0,0 +1,9 @@ +:root { + --primary-color: #e67e22; + --secondary-color: #d35400; + --font-color: #ffffff; +} + +$mainColor: var(--primary-color); +$hoverColor: var(--secondary-color); +$fontColor: var(--font-color); \ No newline at end of file diff --git a/resources/sass/partials/_basic.scss b/resources/sass/partials/_basic.scss new file mode 100644 index 000000000..a9340b1ac --- /dev/null +++ b/resources/sass/partials/_basic.scss @@ -0,0 +1,52 @@ +* { + -ms-content-zooming: none; + box-sizing: border-box; + } + + html, body { + width: 100%; + height: 100%; + } + + h1,h2 { + font-weight: 300; + } + + h1 { + font-size: 50px; + margin: 33px 0; + } + + h3 { + font-weight: normal; + } + + .deselect ::selection { + background: transparent; + color: inherit; + } + .deselect ::-moz-selection { + background: transparent; + color: inherit; + } + .deselect { + -ms-user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + } + + body { + padding:0; + margin:0; + font-family: 'Dosis', sans-serif; + font-weight: 300; + color: #2b2127; + font-size: 1em; + line-height: 1.5; + -webkit-perspective: 1000; + -moz-perspective: 1000; + -ms-perspective: 1000; + perspective: 1000; + overflow: hidden; + } \ No newline at end of file diff --git a/resources/sass/partials/_button.scss b/resources/sass/partials/_button.scss new file mode 100644 index 000000000..831a87d93 --- /dev/null +++ b/resources/sass/partials/_button.scss @@ -0,0 +1,84 @@ +.btn { + padding: 20px 40px; + border: 0 none; + background: $mainColor; + display: inline-block; + color: $fontColor; + text-decoration: none; + margin: auto; + width: 200px; + text-align: center; + font-size: 16px; + + &--small { + padding: 12px 40px; + } + + &--flex { + width: auto; + } + + &:active, + &:focus, + &:hover { + background: $hoverColor; + } +} + +.btn.save-btn, +.btn.install-btn { + position: absolute; + bottom: 0; + left: 0; + right: 0; + width: 100%; + -webkit-transition: background-color 0.2s linear; + -moz-transition: background-color 0.2s linear; + -o-transition: background-color 0.2s linear; + -ms-transition: background-color 0.2s linear; + transition: background-color 0.2s linear; + + i { + display: none; + } + + &:active, + &:focus { + outline: none; + } + + span { + display: none; + + &.sv { + display: inline; + } + } + + &.error span.sv, + &.success span.sv, + &.saving span.sv { + display: none; + } + + &.saving i { + display: inline-block; + ; + } + + &.error { + background-color: #d93939 !important; + + span.er { + display: inline; + } + } + + &.success { + background-color: #81d939 !important; + + span.su { + display: inline; + } + } +} \ No newline at end of file diff --git a/resources/sass/partials/_fonts.scss b/resources/sass/partials/_fonts.scss new file mode 100644 index 000000000..07532fa27 --- /dev/null +++ b/resources/sass/partials/_fonts.scss @@ -0,0 +1,42 @@ +@font-face { + font-family: 'Dosis'; + font-style: normal; + font-weight: 200; + src: local('Dosis ExtraLight'), local('Dosis-ExtraLight'), url(../fonts/dosis/ExtraLight.woff) format('woff'); + } + @font-face { + font-family: 'Dosis'; + font-style: normal; + font-weight: 300; + src: local('Dosis Light'), local('Dosis-Light'), url(../fonts/dosis/Light.woff) format('woff'); + } + @font-face { + font-family: 'Dosis'; + font-style: normal; + font-weight: 400; + src: local('Dosis Regular'), local('Dosis-Regular'), url(../fonts/dosis/Regular.woff) format('woff'); + } + @font-face { + font-family: 'Dosis'; + font-style: normal; + font-weight: 500; + src: local('Dosis Medium'), local('Dosis-Medium'), url(../fonts/dosis/Medium.woff) format('woff'); + } + @font-face { + font-family: 'Dosis'; + font-style: normal; + font-weight: 600; + src: local('Dosis SemiBold'), local('Dosis-SemiBold'), url(../fonts/dosis/SemiBold.woff) format('woff'); + } + @font-face { + font-family: 'Dosis'; + font-style: normal; + font-weight: 700; + src: local('Dosis Bold'), local('Dosis-Bold'), url(../fonts/dosis/Bold.woff) format('woff'); + } + @font-face { + font-family: 'Dosis'; + font-style: normal; + font-weight: 800; + src: local('Dosis ExtraBold'), local('Dosis-ExtraBold'), url(../fonts/dosis/ExtraBold.woff) format('woff'); + } diff --git a/resources/sass/partials/_gallery.scss b/resources/sass/partials/_gallery.scss new file mode 100644 index 000000000..05f736d28 --- /dev/null +++ b/resources/sass/partials/_gallery.scss @@ -0,0 +1,79 @@ +.gallery { + position: fixed; + width: 0px; + height: 0px; + left: 0; + top: 0; + background: $mainColor; + overflow: hidden; + color: $fontColor; + transition: width 0.3s, height 0.3s; + z-index: 1000; + + h1 { + margin-top: 10px; + margin-left: 30px; + } + + &--open { + width: 100%; + height: 100%; + padding: 0; + } + + &__close { + position: absolute; + right: 30px; + top: 24px; + color: #fff; + font-size: 30px; + width: 50px; + height: 50px; + background: $hoverColor; + text-align: center; + line-height: 50px; + } + + &__inner { + position: relative; + display: flex; + height: 100%; + flex-direction: column; + } + + &__header { + height: 100px; + width: 100%; + background: $mainColor; + } + + &__body { + display: flex; + flex-wrap: wrap; + overflow-y: auto; + justify-content: center; + + a { + display: block; + width: 33.333333333333%; + padding: 3px; + max-width: 500px; + } + + img { + max-width: 100%; + list-style: none; + border: 1px solid #fff; + display: block; + } + + figure { + display: none; + } + } +} + +.gallery-button { + position: relative; + z-index: 100; +} \ No newline at end of file diff --git a/resources/sass/partials/_modal.scss b/resources/sass/partials/_modal.scss new file mode 100644 index 000000000..6ad9ab5b9 --- /dev/null +++ b/resources/sass/partials/_modal.scss @@ -0,0 +1,37 @@ +.modal { + display: none; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: rgba(0,0,0,0.5); + z-index: 9999; + justify-content: center; + align-items: center; + + &--show { + display: flex; + } + + &__body { + color: #ffffff; + font-size: 2em; + text-align: center; + max-width: 100%; + padding: 6px; + + * { + max-width: 100%; + } + + #qrCode & { + background-color: #ffffff; + color: #252525; + + p { + margin: 0; + } + } + } +} \ No newline at end of file diff --git a/resources/sass/partials/_scrollbar.scss b/resources/sass/partials/_scrollbar.scss new file mode 100644 index 000000000..acfcfe973 --- /dev/null +++ b/resources/sass/partials/_scrollbar.scss @@ -0,0 +1,16 @@ +::-webkit-scrollbar { + width: 6px; +} + +/* Track */ +::-webkit-scrollbar-track { + -webkit-border-radius: 0px; + border-radius: 0px; + background-color: transparent; +} + +/* Handle */ +::-webkit-scrollbar-thumb { + -webkit-border-radius: 0px; + background: $hoverColor; +} diff --git a/resources/sass/partials/_sidenav.scss b/resources/sass/partials/_sidenav.scss new file mode 100644 index 000000000..2c3e1a8fb --- /dev/null +++ b/resources/sass/partials/_sidenav.scss @@ -0,0 +1,60 @@ +.sidenav { + width: 100%; + position: fixed; + z-index: 1005; + top: 0; + bottom: 0; + right: -100%; + background: rgba(0, 0, 0, 0.5); + overflow-x: hidden; + overflow-y: auto; + padding: 60px 30px; + transition: right 0.5s; + + @media (min-width: 576px) { + width: 250px; + right: -250px; + } + + &--open { + right: 0; + } + + a { + text-transform: uppercase; + margin-bottom: 3px; + background-color: $mainColor; + + &:hover { + background-color: $hoverColor; + } + } + + .btn { + width: 100%; + } + + .closebtn { + position: absolute; + right: 30px; + top: 0; + color: $fontColor; + font-size: 30px; + width: 50px; + height: 50px; + background: $mainColor; + text-align: center; + line-height: 50px; + + &:hover { + background: $hoverColor; + } + } + + .activeSidenavBtn { + a { + background-color: $hoverColor; + } + } + +} \ No newline at end of file diff --git a/resources/sass/style.scss b/resources/sass/style.scss index 0a61bc53e..39ffbfad7 100644 --- a/resources/sass/style.scss +++ b/resources/sass/style.scss @@ -1,108 +1,27 @@ -@font-face { - font-family: 'Dosis'; - font-style: normal; - font-weight: 200; - src: local('Dosis ExtraLight'), local('Dosis-ExtraLight'), url(../fonts/dosis/ExtraLight.woff) format('woff'); -} -@font-face { - font-family: 'Dosis'; - font-style: normal; - font-weight: 300; - src: local('Dosis Light'), local('Dosis-Light'), url(../fonts/dosis/Light.woff) format('woff'); -} -@font-face { - font-family: 'Dosis'; - font-style: normal; - font-weight: 400; - src: local('Dosis Regular'), local('Dosis-Regular'), url(../fonts/dosis/Regular.woff) format('woff'); -} -@font-face { - font-family: 'Dosis'; - font-style: normal; - font-weight: 500; - src: local('Dosis Medium'), local('Dosis-Medium'), url(../fonts/dosis/Medium.woff) format('woff'); -} -@font-face { - font-family: 'Dosis'; - font-style: normal; - font-weight: 600; - src: local('Dosis SemiBold'), local('Dosis-SemiBold'), url(../fonts/dosis/SemiBold.woff) format('woff'); -} -@font-face { - font-family: 'Dosis'; - font-style: normal; - font-weight: 700; - src: local('Dosis Bold'), local('Dosis-Bold'), url(../fonts/dosis/Bold.woff) format('woff'); -} -@font-face { - font-family: 'Dosis'; - font-style: normal; - font-weight: 800; - src: local('Dosis ExtraBold'), local('Dosis-ExtraBold'), url(../fonts/dosis/ExtraBold.woff) format('woff'); -} - -$mainColor: #e67e22; -$hoverColor: #d35400; - - -* { --ms-content-zooming: none; -} - -h1,h2 { - font-weight: 300; -} - -.deselect ::selection { - background: transparent; - color: inherit; -} -.deselect ::-moz-selection { - background: transparent; - color: inherit; -} -.deselect { - -ms-user-select: none; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} - -body { - background-color: #fff; - padding:0; - margin:0; - font-family: 'Dosis', sans-serif; - font-weight: 300; - color: #2b2127; - font-size: 1em; - line-height: 1.5; - -webkit-perspective: 1000; - -moz-perspective: 1000; - -ms-perspective: 1000; - perspective: 1000; -} - -* { - box-sizing: border-box; -} - -body { - overflow: hidden; -} - -h1 { - font-size: 50px; - margin: 33px 0; -} - -h3 { - font-weight: normal; -} +@import "modules/colors"; +@import "partials/fonts"; +@import "partials/basic"; +@import "partials/button"; +@import "partials/gallery"; +@import "partials/sidenav"; +@import "partials/scrollbar"; +@import "partials/modal"; +@import "vendor/photoswipe"; #wrapper { + display: none; position: relative; overflow: hidden; + width: 100%; + height: 100%; + background-color: $mainColor; + background-image: url(../img/bg.jpg); + background-position: center center; + background-size: cover; + + &.bluegray-bg { + background-image: url(../img/bg_bluegray.jpg); + } } .adminpanel { @@ -112,129 +31,10 @@ h3 { margin: 100px auto 0; padding: 15px 15px 70px; position: relative; -} - -.formrow { - margin: 10px 0; - - label { - width: 120px; - float: left; - } - - input { - border: 0 none; - background: #f1f1f1; - padding: 5px; - width: 250px; - } -} -.tabbox { - ul { - margin: 0; - padding: 0; - width: 100%; - height: 46px; - - &:after { - clear: both; - } - - li { - margin: 0; - padding: 0; - list-style: none; - width: 33.3333333333333%; - float: left; - text-align: center; - padding: 10px; - cursor: pointer; - border: 1px solid #bbb; - border-left: 0 none; - - &:first-child { - border: 1px solid #bbb; - } - - &.active, - &:hover { - background: #f1f1f1; - } - } - } - - .tab { - display: none; - &.active { - display: block; - } - } -} - -.btn.save-btn, .btn.install-btn { - position: absolute; - bottom: 0; - left: 0; - right: 0; - width: 100%; - -webkit-transition: background-color 0.2s linear; - -moz-transition: background-color 0.2s linear; - -o-transition: background-color 0.2s linear; - -ms-transition: background-color 0.2s linear; - transition: background-color 0.2s linear; - - i { - display: none; - } - - &:active, - &:focus { - outline: none; - } - - span { - display: none; - - &.sv { - display: inline; - } - } - - &.error span.sv, - &.success span.sv, - &.saving span.sv { - display: none; - } - &.saving i{ - display: inline-block;; + h2 { + text-align: center; } - - &.error { - background-color: #d93939 !important; - - span.er { - display: inline; - } - } - - &.success { - background-color: #81d939 !important; - - span.su { - display: inline; - } - } -} - -.adminpanel h2 { - text-align: center; -} - -#start, #admin, #install { - width: 100%; - background: url(../img/bg.jpg) center center no-repeat; - background-size: cover; } .names { @@ -250,65 +50,64 @@ h3 { } .resultInner { + display: flex; position: absolute; - bottom: 50px; - width: 100%; - height: 70px; + bottom: -64px; left: 0; right: 0; - text-align: center; - .btn { - display: inline-block; - } -} + justify-content: center; + transition: bottom 0.5s; + z-index: 100; -.spinner { - font-size: 80px; - color: $mainColor; -} + &.show { + bottom: 0; + } -.btn { - padding: 20px 40px; - border: 0 none; - background: $mainColor; - display: inline-block; - color: #fff; - text-decoration: none; - margin: auto; - width: 200px; - text-align: center; - font-size: 16px; + .btn { + width: auto; + padding: 20px 0; + text-align: center; + flex-grow: 1; + max-width: 250px; + margin: initial; + } + @media (max-width: 576px) { + span { + display: none; + } + } } -.btn:active, -.btn:focus, -.btn:hover { - background: $hoverColor; +#counter { + backface-visibility: hidden; + font-size: 12em; + opacity: 0.2; +} +#counter.tick { + font-size: 1em; + opacity: 1; + transition: font-size 0.75s, opacity 0.75s; } #loader { - width: 100%; - height: 100%; - position: absolute; - top: 0; - right: 0; - left: 0; - bottom: 0; - background: rgba(255,255,255,0.9); display: none; + align-items: center; + justify-content: center; + background: rgba(255,255,255,0.9); + color: #252525; z-index: 100; - font-size: 50px; text-align: center; -} - -.loaderInner { position: absolute; - left: 50%; - margin-left: -250px; - height: 200px; - width: 500px; - top: 50%; - margin-top: -100px; + top: 0; + left: 0; + + &.open { + display: flex; + } + + .spinner { + font-size: 80px; + } } .homebtn { @@ -326,46 +125,25 @@ h3 { left: 0; top: 0; background: #fff; -} -.qr p { - margin: 0; - padding: 0 15px; - font-size: 25px; -} - -.qr { - > * { + > * { display: none; - } + } + &.active > *{ display: block; } -} -.qrbtn { - background: #fff; - color: #000; -} - -.qrbtn:hover { - background: #f1f1f1; - color: #000; -} - -.qrbtn.active { - background: #fff !important; - color: #000; - padding: 0; -} - -.qrbtn.active span.qrbtnlabel { - display: none; -} + p { + margin: 0; + padding: 0 15px; + font-size: 25px; + } -.qr img { - width: 100%; - height: auto; + img { + width: 100%; + height: auto; + } } .send-mail { @@ -408,35 +186,8 @@ h3 { .stages { display: none; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; -} - -.takePic { - text-align: center; - display: block; - width: 250px; - position: absolute; - bottom: 50px; - left: 50%; - margin-left: -125px; -} - -.linebetween { + height: 100%; width: 100%; - border: 0 none; - -} - -.middeline { - color: #fff; - text-align: center; - font-size: 20px; - font-weight: 300; } hr.small { @@ -475,67 +226,11 @@ hr.small { text-transform: uppercase; left: 50%; margin-left: -225px; -} - -#gallery { - position: fixed; - width: 200px; - height: 70px; - left: 0; - top: 0; - display: none; - background: $mainColor; - overflow: hidden; - color: #fff; - margin-left: -1px; -} - -#gallery.open { - /*width: 100%; - height: 100%;*/ - display: block; - z-index: 1000; - padding: 0; -} - -.galleryInner { - position: absolute; - top:0; - z-index: 10000; -} - -.galleryInner div { - float: left; -} - -.galHeader { - position: fixed; - top: 0; - left: 0; - height: 100px; - width: 100%; - background: $mainColor; -} - -#gallery h1 { - margin-top: 10px; - margin-left: 30px; -} - -#gallery div.images { - margin: 100px 0 0; - padding: 0; -} -#gallery .images img { - float: left; - width: 33.333333333333%; - list-style: none; - border: 1px solid #fff; - display: block; -} -#gallery .images figure { - display: none; + .btn { + margin-top: 3px; + width: 80%; + } } .sliderImages { @@ -546,20 +241,6 @@ hr.small { background: #000; } -.close_gal { - position: absolute; - right: 30px; - top: 24px; - color: #fff; - font-size: 30px; - width: 50px; - height: 50px; - background:$hoverColor; - text-align:center; - line-height: 50px; - padding-top: 9px; -} - .owl-carousel.owl-loaded { display: none; } @@ -577,50 +258,6 @@ hr.small { bottom: 0; } -.gallerybox { - position: fixed; - z-index: 1011; - display: none; -} - -.gallerybox img { - width: 100%; -} - -.gallerybox .original { - display: none; -} - -.owl-nav { - position: fixed; - z-index: 10000000; - text-shadow: 0 2px 0 #000; - font-size: 50px; - top: 0; -} - -.owl-nav .owl-prev { - position: fixed; - left: 30px; - top: 50%; - font-size: 50px !important; - margin-top: -25px; - background: transparent !important; -} - -.owl-nav .owl-prev:hover, -.owl-nav .owl-next:hover { - cursor: pointer; -} - -.owl-nav .owl-next { - position: fixed; - right: 30px; - top: 50%; - font-size: 50px !important; - margin-top: -25px; - background: transparent !important; -} #gallery .controls a.close_opengal { display: none; @@ -633,40 +270,6 @@ hr.small { color: #fff; } -/* Photoswipe Overrides */ -.pswp__caption { - display: none; -} - -.pswp__button--close { - width: 50px; - height: 50px; - background: transparent; - line-height: 50px; - text-align: center; - margin-right: 30px; -} - -.pswp__button--close:before { - content: "\f00d"; - color: #fff; - font-size: 30px; - font: normal normal normal 30px/1 FontAwesome; -} - -.pswp__qr { - width: 500px; - height: 500px; - position: absolute; - left: 50%; - margin-left: -250px; - top: 50%; - margin-top: -250px; - z-index: 10000; - img { - width: 100%; - } -} .gal-qr-code,.gal-print, .gal-print-chroma_keying, .gal-mail { color: #fff; @@ -684,6 +287,10 @@ hr.small { margin: 0; float: right; opacity: 0.75; + + &:hover { + opacity: 1; + } } #video { @@ -694,6 +301,17 @@ hr.small { left: 50%; } +.chroma-control-bar { + margin-top: 12px; + text-align: center; + + @media (max-width: 576px) { + span { + display: none; + } + } +} + @media (max-width: 767px){ .takePic { bottom: auto; diff --git a/resources/sass/vendor/_photoswipe.scss b/resources/sass/vendor/_photoswipe.scss new file mode 100644 index 000000000..8a6d25c6a --- /dev/null +++ b/resources/sass/vendor/_photoswipe.scss @@ -0,0 +1,27 @@ +.pswp__button--close { + color: #ffffff; + width: 50px; + height: 50px; + font-size: 26px; + opacity: 0.75; + background-image: none; + + > i { + position: relative; + z-index: -1; + } +} + +.pswp__qr { + width: 500px; + position: absolute; + left: 50%; + top: 50%; + z-index: 10000; + transform: translate(-50%, -50%); + max-width: 100%; + + img { + width: 100%; + } +} \ No newline at end of file