diff --git a/admin/index.php b/admin/index.php index 2d26d1def..47285378a 100644 --- a/admin/index.php +++ b/admin/index.php @@ -142,7 +142,7 @@ function isElementHidden($element_class, $setting)
-
- + - + - +

- +
diff --git a/dependencies.php b/dependencies.php index 6417aab53..e6601ceb9 100644 --- a/dependencies.php +++ b/dependencies.php @@ -59,9 +59,9 @@
- + - +
diff --git a/index.php b/index.php index 9d7cb8c6b..17858f7f0 100644 --- a/index.php +++ b/index.php @@ -32,14 +32,11 @@ $imagelist = $config['gallery']['newest_first'] === true ? array_reverse($images) : $images; if ($config['ui']['style'] === 'classic') { - $btnClass1 = 'btn'; - $btnClass2 = ''; $galleryIcon = 'fa-th'; } else { - $btnClass1 = 'round-btn'; - $btnClass2 = 'round-btn'; $galleryIcon = 'fa-picture-o'; } + $btnClass = 'btn btn--' . $config['ui']['style']; $GALLERY_FOOTER = true; } else { header('location: ' . $config['protect']['index_redirect']); @@ -94,7 +91,7 @@
- + $name): ?> @@ -130,43 +127,43 @@
- + diff --git a/livechroma.php b/livechroma.php index 29bef4eee..5bdae9fbc 100644 --- a/livechroma.php +++ b/livechroma.php @@ -18,13 +18,7 @@ } $imagelist = $config['gallery']['newest_first'] === true ? array_reverse($images) : $images; - if ($config['ui']['style'] === 'classic') { - $btnClass1 = 'btn btn--small btn--flex'; - $btnClass2 = 'btn'; - } else { - $btnClass1 = 'round-btn'; - $btnClass2 = 'round-btn'; - } + $btnClass = 'btn btn--' . $config['ui']['style'] . ' livechroma-btn'; $GALLERY_FOOTER = false; } else { header('location: ' . $config['protect']['index_redirect']); @@ -72,11 +66,11 @@
- + - +
@@ -123,11 +117,11 @@
- + - + - +
diff --git a/src/js/admin.js b/src/js/admin.js index ddfc2032f..e6f68aa07 100644 --- a/src/js/admin.js +++ b/src/js/admin.js @@ -46,7 +46,7 @@ $(function () { } }); - $('#save-btn').on('click', function (e) { + $('#save-admin-btn').on('click', function (e) { e.preventDefault(); const elem = $(this); elem.addClass('saving'); diff --git a/src/js/chromakeying.js b/src/js/chromakeying.js index 027ab27d5..260c1605e 100644 --- a/src/js/chromakeying.js +++ b/src/js/chromakeying.js @@ -287,7 +287,7 @@ function saveImageHandler(ev) { saveImage(() => { setTimeout(function () { photoboothTools.modal.close('#save_mesg'); - $('#save-btn').blur(); + $('#save-chroma-btn').blur(); }, 2000); }); }, 1000); @@ -314,7 +314,7 @@ $(document).on('keyup', function (ev) { }); $(document).ready(function () { - $('#save-btn').on('click', saveImageHandler); + $('#save-chroma-btn').on('click', saveImageHandler); $('#print-btn').on('click', printImageHandler); $('#close-btn').on('click', closeHandler); diff --git a/src/sass/classic_admin.scss b/src/sass/classic_admin.scss index a666886cd..106b8823a 100644 --- a/src/sass/classic_admin.scss +++ b/src/sass/classic_admin.scss @@ -1,8 +1,6 @@ @import 'modules/theme'; @import 'partials/basic'; - -$error: #e74c3c; -$success: #2ecc71; +@import 'partials/button_animated'; body { display: block; @@ -269,136 +267,6 @@ div.setting_element { visibility: visible; } -/*************** -* SAVE button -***************/ - -.save-btn { - width: 15%; - max-width: 15em; - min-width: 6em; - height: 3em; - position: fixed; - right: 10px; - top: 0.5em; - z-index: 300; - background: $mainColor; - color: $buttonFontColor; - cursor: pointer; - transition: background 0.7s ease; - - &:hover { - background: $hoverColor; - } - - .saving, - .success, - .error { - display: none; - } - - &.saving { - .saving { - display: inline-block; - } - - .save, - .success, - .error { - display: none; - } - } - - &.success { - background: $success; - .success { - display: inline-block; - } - - .save, - .saving, - .error { - display: none; - } - } - - &.error { - background: $error; - .error { - display: inline-block; - } - - .save, - .saving, - .success { - display: none; - } - } -} - -/***************************** -* Embedded ADMIN PANEL button -*****************************/ - -.adminpanel-setting-btn { - cursor: pointer; - width: 10em; - height: 2.5em; - background: $mainColor; - color: $buttonFontColor; - transition: background 0.7s ease; - z-index: 300; - float: left; - - &:hover { - background: $hoverColor; - } - - .saving, - .success, - .error { - display: none; - } - - &.saving { - .saving { - display: inline-block; - } - - .save, - .success, - .error { - display: none; - } - } - - &.success { - background: $success; - .success { - display: inline-block; - } - - .save, - .saving, - .error { - display: none; - } - } - - &.error { - background: $error; - .error { - display: inline-block; - } - - .save, - .saving, - .success { - display: none; - } - } -} - /***************** * Toggle Button *****************/ diff --git a/src/sass/classic_style.scss b/src/sass/classic_style.scss index 26263dbfe..a80ca7bcc 100644 --- a/src/sass/classic_style.scss +++ b/src/sass/classic_style.scss @@ -45,28 +45,6 @@ &.show { bottom: 0; } - - .btn { - width: auto; - padding: 20px 0; - text-align: center; - flex-grow: 1; - max-width: 250px; - margin: initial; - } - @media (max-width: 576px) { - span { - display: none; - } - } -} - -.homebtn { - position: absolute; - right: 0; - top: 0; - font-size: 0.875em; - width: 130px; } .qr { @@ -133,24 +111,6 @@ justify-content: center; } - .fs-button { - position: fixed; - top: 5rem; - left: 0; - } - - .gallery-button { - position: fixed; - top: 0; - left: 0; - } - - .cups-button { - position: absolute; - left: 0; - bottom: 0; - } - .startInner { background: rgba(0, 0, 0, 0.5); color: $startFontColor; @@ -162,11 +122,6 @@ margin-bottom: 5rem; } - .btn { - margin-top: 3px; - width: 80%; - } - @media (max-width: 1024px) { padding: 1rem; @@ -175,12 +130,6 @@ margin-bottom: 2rem; } - .btn { - font-size: 0.8em; - margin-top: 1px; - width: 80%; - } - p, h1, h2, @@ -262,53 +211,16 @@ } } -.triggerPic, -.triggerCollage, -.closeGallery { - padding: 0; - margin: 0; - width: 1px; - height: 1px; -} - #useBuzzer { font-size: 1.75em; margin-top: 1em; margin-bottom: 0.5em; -} -@media (max-width: 1024px) { - #useBuzzer { + @media (max-width: 1024px) { font-size: 1.25em; } } -@media (max-width: 767px) { - .takePic { - bottom: auto; - } -} - -.buttongroup { - display: flex; - justify-content: center; - gap: 50px; - padding-top: 10px; - padding-bottom: 5px; -} - -.gallery__close:active, -.gallery__close:hover, -.gallery__close:focus, -.gallery__close.focused, -.gallery__img:active > figure, -.gallery__img:focus > figure, -.gallery__img:hover > figure, -.gallery__img.focused > figure, -.gallery__img:active > img, -.gallery__img:focus > img, -.gallery__img:hover > img, -.gallery__img.focused > img, .rotaryfocus.focused { opacity: 0.6; } diff --git a/src/sass/modern_admin.scss b/src/sass/modern_admin.scss index b32c8a87f..8d8fc349a 100644 --- a/src/sass/modern_admin.scss +++ b/src/sass/modern_admin.scss @@ -24,6 +24,6 @@ div.setting_section, * SAVE button ***************/ -.save-btn { +.save-admin-btn { border-radius: 10px; } diff --git a/src/sass/modern_chromakeying.scss b/src/sass/modern_chromakeying.scss index e23a9983f..447f1e2b3 100644 --- a/src/sass/modern_chromakeying.scss +++ b/src/sass/modern_chromakeying.scss @@ -1,2 +1 @@ @import 'classic_chromakeying'; -@import 'partials/modern_button'; diff --git a/src/sass/modern_live_chromakeying.scss b/src/sass/modern_live_chromakeying.scss index 3cc68017d..072fa8998 100644 --- a/src/sass/modern_live_chromakeying.scss +++ b/src/sass/modern_live_chromakeying.scss @@ -1,5 +1,4 @@ @import 'classic_live_chromakeying'; -@import 'partials/modern_button'; .backgrounds { border-radius: 4%; diff --git a/src/sass/modern_style.scss b/src/sass/modern_style.scss index d2adc2500..655d05ee8 100644 --- a/src/sass/modern_style.scss +++ b/src/sass/modern_style.scss @@ -1,5 +1,4 @@ @import 'classic_style'; -@import 'partials/modern_button'; @import 'partials/modern_gallery'; html, @@ -15,44 +14,6 @@ body { width: 100%; position: relative; background: none; - .btn { - margin-top: 3px; - width: auto; - } - } - - .fs-button { - position: relative; - top: auto; - bottom: 0px; - left: 0px; - } - - .gallery-button { - position: relative; - top: auto; - bottom: 0px; - left: auto; - } - - .cups-button { - &.round-btn { - position: fixed; - left: 0; - top: 0; - bottom: auto; - margin: 20px; - } - } -} - -.homebtn { - &.round-btn { - position: fixed; - left: 0; - top: 0; - bottom: auto; - margin: 20px; } } @@ -69,47 +30,12 @@ body { transition: bottom 0.5s; z-index: 100; margin: 20px; - .round-btn { - display: inline-block; - } &.show { position: fixed; bottom: 0; } } -.sidenav { - .closebtn { - width: 1.625em; - height: 1.625em; - margin: 0.3em; - background: radial-gradient(grey, $mainColor, $hoverColor); - color: $buttonFontColor; - .fa { - font-size: 0.8em; - } - } -} - -.round-btn:active, -.round-btn:focus, -.round-btn:hover, -.round-btn.focused, -.gallery__close:active, -.gallery__close:hover, -.gallery__close:focus, -.gallery__close.focused, -.gallery__img:active > figure, -.gallery__img:focus > figure, -.gallery__img:hover > figure, -.gallery__img.focused > figure, -.gallery__img:active > img, -.gallery__img:focus > img, -.gallery__img:hover > img, -.gallery__img.focused > img { - opacity: 0.6 !important; -} - .divaussen { height: 100%; position: relative; @@ -126,15 +52,15 @@ body { padding: 10px; } +.send-mail { + border-radius: 10px; +} + @media (orientation: portrait) { .divinnen2 { margin-left: auto; margin-right: auto; } - .round-btn { - width: 4em; - height: 4em; - } } .transparenz { diff --git a/src/sass/partials/_button.scss b/src/sass/partials/_button.scss index 8e9379c30..71cbfc4c2 100644 --- a/src/sass/partials/_button.scss +++ b/src/sass/partials/_button.scss @@ -1,15 +1,69 @@ -.gal-action-btn, .btn { - padding: 20px 40px; - border: 0 none; + font-size: 1em; + text-decoration: none; + text-align: center; + color: $buttonFontColor; background: $mainColor; display: inline-block; - color: $buttonFontColor; - text-decoration: none; margin: auto; width: 12.5em; - text-align: center; - font-size: 1em; + z-index: 10; + + &--classic { + padding: 20px 40px; + border: 0 none; + } + + &--modern { + width: 5em; + height: 5em; + border: 2px solid $borderColor; + border-radius: 50%; + background: radial-gradient($highlightColor, $mainColor, $hoverColor); + position: relative; + + span { + display: none; + } + .fa { + font-size: 2em; + margin: 0; + position: absolute; + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + } + } + + &--modern_squared { + width: 5em; + height: 5em; + border: 2px solid $fontColor; + border-radius: 15%; + background: radial-gradient($highlightColor, $mainColor, $hoverColor); + position: relative; + margin: unset; + flex: none; + span { + display: block; + position: absolute; + bottom: 10%; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + } + .fa { + font-size: 2em; + margin: 0; + position: absolute; + top: 35%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + } + } &--small { padding: 12px 40px; @@ -41,75 +95,204 @@ } } -.gal-action-btn { - background: $hoverColor; - &:active, - &:focus, - &:hover { - opacity: 0.6; +#start { + .startInner { + .btn { + margin-top: 3px; + } + .btn--classic { + width: auto; + margin-top: 3px; + width: 80%; + } + + @media (max-width: 1024px) { + .btn { + &.btn--classic { + font-size: 0.8em; + margin-top: 1px; + width: 80%; + } + } + } + } + .fs-button { + &.btn--modern, + &.btn--modern_squared { + position: relative; + top: auto; + bottom: 0px; + left: 0px; + } + &.btn--classic { + position: fixed; + top: 5rem; + left: 0; + } + } + + .cups-button { + &.btn--modern, + &.btn--modern_squared { + position: fixed; + left: 0; + top: 0; + bottom: auto; + margin: 20px; + } + &.btn--classic { + position: absolute; + left: 0; + bottom: 0; + } } } -.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; +.gallery-button { + z-index: 100; + &.btn--modern, + &.btn--modern_squared { + position: relative; + top: auto; + bottom: 0px; + left: auto; + } + &.btn--classic { + position: fixed; + top: 0; + left: 0; + } +} - i { - display: none; +.homebtn { + &.btn--modern, + &.btn--modern_squared { + position: fixed; + left: 0; + top: 0; + bottom: auto; + margin: 20px; + } + &.btn--classic { + position: absolute; + right: 0; + top: 0; + font-size: 0.875em; + width: 130px; } +} - &:active, - &:focus { - outline: none; +.resultInner { + .btn--modern, + .btn--modern_squared { + display: inline-block; } + .btn--classic { + width: auto; + padding: 20px 0; + text-align: center; + flex-grow: 1; + max-width: 250px; + margin: initial; + &.gallery-button { + position: fixed; + left: 0; + top: 0; + font-size: 0.875em; + width: 130px; + } + } +} - span { - display: none; +.loading { + .btn { + font-size: 0.4em; + } +} - &.sv { - display: inline; +.sidenav { + .closebtn { + width: 1.625em; + height: 1.625em; + margin: 0.3em; + background: radial-gradient(grey, $mainColor, $hoverColor); + color: $buttonFontColor; + .fa { + font-size: 0.8em; } } +} - &.error span.sv, - &.success span.sv, - &.saving span.sv { - display: none; +.btn--modern, +.btn--modern_squared, +.gallery__close, +.gal-action-btn { + &:active, + &:focus, + &:hover, + &.focused { + opacity: 0.6 !important; } +} - &.saving i { - display: inline-block; - } +.btn--classic.gal-action-btn { + background: $hoverColor; +} - &.error { - background-color: #d93939 !important; +.triggerPic, +.triggerCollage, +.closeGallery { + padding: 0; + margin: 0; + width: 1px; + height: 1px; +} - span.er { - display: inline; - } - } +.buttongroup { + display: flex; + justify-content: center; + gap: 50px; + padding-top: 10px; + padding-bottom: 5px; +} - &.success { - background-color: #81d939 !important; +.mail-form-input.btn--modern, +.mail-form-input.btn--modern_squared, +.dependencies-btn.btn--modern, +.dependencies-btn.btn--modern_squared { + border: 2px solid $fontColor; + border-radius: 10px; + color: $buttonFontColor; + background: $mainColor; +} - span.su { - display: inline; +@media (orientation: portrait) { + .btn--modern, + .btn--modern_squared { + width: 4em; + height: 4em; + } + .btn--modrn_squared { + span { + font-size: 1em; + } + .fa { + font-size: 1.5em; } } } -@media screen and (max-width: 1024px) { +@media (max-width: 1024px) { .takePic, .takeCollage { - padding: 10px 10px; + &.btn--classic { + padding: 10px 10px; + } + } +} + +@media (max-width: 767px) { + .takePic { + bottom: auto; } } diff --git a/src/sass/partials/_button_animated.scss b/src/sass/partials/_button_animated.scss new file mode 100644 index 000000000..195642df8 --- /dev/null +++ b/src/sass/partials/_button_animated.scss @@ -0,0 +1,132 @@ +$error: #e74c3c; +$success: #2ecc71; + +/*************** +* SAVE button +***************/ + +.save-admin-btn { + width: 15%; + max-width: 15em; + min-width: 6em; + height: 3em; + position: fixed; + right: 10px; + top: 0.5em; + z-index: 300; + background: $mainColor; + color: $buttonFontColor; + cursor: pointer; + transition: background 0.7s ease; + + &:hover { + background: $hoverColor; + } + + .saving, + .success, + .error { + display: none; + } + + &.saving { + .saving { + display: inline-block; + } + + .save, + .success, + .error { + display: none; + } + } + + &.success { + background: $success; + .success { + display: inline-block; + } + + .save, + .saving, + .error { + display: none; + } + } + + &.error { + background: $error; + .error { + display: inline-block; + } + + .save, + .saving, + .success { + display: none; + } + } +} + +/***************************** +* Embedded ADMIN PANEL button +*****************************/ + +.adminpanel-setting-btn { + cursor: pointer; + width: 10em; + height: 2.5em; + background: $mainColor; + color: $buttonFontColor; + transition: background 0.7s ease; + z-index: 300; + float: left; + + &:hover { + background: $hoverColor; + } + + .saving, + .success, + .error { + display: none; + } + + &.saving { + .saving { + display: inline-block; + } + + .save, + .success, + .error { + display: none; + } + } + + &.success { + background: $success; + .success { + display: inline-block; + } + + .save, + .saving, + .error { + display: none; + } + } + + &.error { + background: $error; + .error { + display: inline-block; + } + + .save, + .saving, + .success { + display: none; + } + } +} diff --git a/src/sass/partials/_countdown.scss b/src/sass/partials/_countdown.scss index 69939e228..152d163b8 100644 --- a/src/sass/partials/_countdown.scss +++ b/src/sass/partials/_countdown.scss @@ -80,10 +80,6 @@ margin: 0 0 0.2em; } - .btn { - font-size: 0.4em; - } - @media (max-width: 767px) { bottom: 0.5em; } diff --git a/src/sass/partials/_gallery.scss b/src/sass/partials/_gallery.scss index 72dbf62a0..1363e7ea6 100644 --- a/src/sass/partials/_gallery.scss +++ b/src/sass/partials/_gallery.scss @@ -92,6 +92,17 @@ } } +.gallery__img:active > figure, +.gallery__img:focus > figure, +.gallery__img:hover > figure, +.gallery__img.focused > figure, +.gallery__img:active > img, +.gallery__img:focus > img, +.gallery__img:hover > img, +.gallery__img.focused > img { + opacity: 0.6 !important; +} + @media (max-width: 800px) { .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { @@ -105,8 +116,3 @@ right: 5%; } } - -.gallery-button { - position: relative; - z-index: 100; -} diff --git a/src/sass/partials/_modern_button.scss b/src/sass/partials/_modern_button.scss deleted file mode 100644 index 644209def..000000000 --- a/src/sass/partials/_modern_button.scss +++ /dev/null @@ -1,33 +0,0 @@ -.gal-action-btn, -.round-btn { - width: 5em; - height: 5em; - border-radius: 50%; - border: 2px solid $borderColor; - background: radial-gradient($highlightColor, $mainColor, $hoverColor); - display: inline-block; - color: $buttonFontColor; - text-decoration: none; - margin: auto; - text-align: center; - font-size: 1em; - position: relative; - z-index: 10; - span { - display: none; - } - &:active, - &:focus, - &:hover { - background: $hoverColor; - } - .fa { - font-size: 2em; - margin: 0; - position: absolute; - top: 50%; - left: 50%; - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - } -} diff --git a/src/sass/partials/_squared_gallery.scss b/src/sass/partials/_squared_gallery.scss index dd5f7777a..e35d2d596 100644 --- a/src/sass/partials/_squared_gallery.scss +++ b/src/sass/partials/_squared_gallery.scss @@ -33,26 +33,6 @@ border-radius: 15%; } -.gal-action-btn, -.round-btn { - border: 2px solid $fontColor; - border-radius: 15%; - margin: unset; - flex: none; - span { - display: block; - position: absolute; - bottom: 10%; - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; - } - .fa { - top: 35%; - } -} - .gallerybtn { left: 1em; margin: auto; diff --git a/template/classic.template.php b/template/classic.template.php index 2f1807471..2e80585c1 100644 --- a/template/classic.template.php +++ b/template/classic.template.php @@ -1,7 +1,7 @@
- +
@@ -56,12 +56,12 @@
- - + @@ -74,9 +74,9 @@ - CUPS + CUPS - +
diff --git a/template/gallery.template.php b/template/gallery.template.php index 92c2dec80..64228f8ad 100644 --- a/template/gallery.template.php +++ b/template/gallery.template.php @@ -57,15 +57,15 @@
- + - + - +
diff --git a/template/modern.template.php b/template/modern.template.php index 495a6fb9e..a853b5bb0 100644 --- a/template/modern.template.php +++ b/template/modern.template.php @@ -51,7 +51,7 @@
- CUPS + CUPS @@ -60,19 +60,19 @@
- + - + - + - + diff --git a/template/modern_squared.template.php b/template/modern_squared.template.php index 495a6fb9e..a853b5bb0 100644 --- a/template/modern_squared.template.php +++ b/template/modern_squared.template.php @@ -51,7 +51,7 @@
- CUPS + CUPS @@ -60,19 +60,19 @@
- + - + - + - +