diff --git a/livechroma.php b/livechroma.php
index 5bdae9fbc..4ed396d97 100644
--- a/livechroma.php
+++ b/livechroma.php
@@ -66,11 +66,11 @@
diff --git a/src/js/livechroma.js b/src/js/livechroma.js
index 1da544452..eedf196b3 100644
--- a/src/js/livechroma.js
+++ b/src/js/livechroma.js
@@ -323,14 +323,14 @@ $('.reloadPage').on('click', function (e) {
});
// Open Gallery Button
-$('.gallerybtn').on('click', function (e) {
+$('.livechroma-gallery-btn').on('click', function (e) {
e.preventDefault();
photoBooth.openGallery($(this));
});
// Close Button
-$('.closebtn').on('click', function () {
+$('.livechroma-close-btn').on('click', function () {
location.assign('./index.php');
});
diff --git a/src/sass/classic_live_chromakeying.scss b/src/sass/classic_live_chromakeying.scss
index 261fdc7b6..ddfb24be3 100644
--- a/src/sass/classic_live_chromakeying.scss
+++ b/src/sass/classic_live_chromakeying.scss
@@ -8,32 +8,6 @@
@import 'partials/shutter_animation';
@import 'vendor/photoswipe';
-.home {
- position: fixed;
- top: 1em;
- right: 0;
- z-index: 10;
-}
-
-.deletebtn {
- display: inline-block;
- visibility: hidden;
-}
-
-.gallerybtn {
- position: fixed;
- top: 1em;
- left: 0;
- z-index: 10;
-}
-
-.closebtn {
- position: fixed;
- top: 1em;
- right: 0;
- z-index: 10;
-}
-
.top-bar {
display: inline-block;
width: 100%;
@@ -104,21 +78,6 @@
}
}
- .takeChroma,
- .reloadPage,
- .deletebtn {
- margin: 0.5em;
- display: block;
- }
-
- .home,
- .gallerybtn,
- .closebtn {
- position: relative;
- top: 0;
- max-width: 150px;
- }
-
.top-bar {
display: block;
position: relative;
diff --git a/src/sass/modern_live_chromakeying.scss b/src/sass/modern_live_chromakeying.scss
index 072fa8998..180c3d922 100644
--- a/src/sass/modern_live_chromakeying.scss
+++ b/src/sass/modern_live_chromakeying.scss
@@ -4,44 +4,6 @@
border-radius: 4%;
}
-.round-btn {
- width: 4em;
- height: 4em;
-}
-
-.gallerybtn {
- position: fixed;
- top: 1em;
- left: 0;
- z-index: 10;
- margin: 10px;
-}
-
-.closebtn {
- position: fixed;
- top: 1em;
- right: 0;
- z-index: 10;
- margin: 10px;
-}
-
-@media (max-width: 1280px) and (orientation: landscape) {
- .takeChroma,
- .reloadPage,
- .deletebtn {
- margin: auto;
- display: inline-block;
- }
-
- .home,
- .gallerybtn,
- .closebtn {
- position: relative;
- top: 0;
- max-width: 150px;
- }
-}
-
@media (max-height: 740px) and (orientation: landscape) {
.backgrounds {
&.shrinked {
diff --git a/src/sass/modern_squared_live_chromakeying.scss b/src/sass/modern_squared_live_chromakeying.scss
index 57d262694..9bfa2b7a6 100644
--- a/src/sass/modern_squared_live_chromakeying.scss
+++ b/src/sass/modern_squared_live_chromakeying.scss
@@ -1,39 +1,2 @@
@import 'modern_live_chromakeying';
@import 'partials/squared_gallery';
-
-.round-btn {
- border: none;
- 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%;
- }
-}
-
-.closebtn {
- margin: auto;
- text-align: center;
- span {
- display: none;
- bottom: unset;
- }
- .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/_button.scss b/src/sass/partials/_button.scss
index 71cbfc4c2..e635e9322 100644
--- a/src/sass/partials/_button.scss
+++ b/src/sass/partials/_button.scss
@@ -164,6 +164,97 @@
}
}
+.livechroma-gallery-btn {
+ position: fixed;
+ top: 1em;
+ left: 0;
+
+ &.btn--classic {
+ width: auto;
+ padding: 12px 40px;
+ }
+
+ &.btn--modern,
+ &.btn--modern_squared {
+ margin: 10px;
+ }
+ @media (max-width: 1280px) and (orientation: landscape) {
+ position: relative;
+ top: 0;
+ max-width: 150px;
+ }
+}
+
+.livechroma-close-btn {
+ position: fixed;
+ top: 1em;
+ right: 0;
+
+ &.btn--classic {
+ width: auto;
+ padding: 12px 40px;
+ }
+
+ &.btn--modern {
+ margin: 10px;
+ }
+
+ &.btn--modern_squared {
+ margin: auto;
+ text-align: center;
+ span {
+ display: none;
+ bottom: unset;
+ }
+ .fa {
+ font-size: 2em;
+ margin: 0;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -ms-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ }
+ }
+}
+
+.livechroma {
+ &.deletebtn {
+ display: inline-block;
+ visibility: hidden;
+ }
+
+ @media (max-width: 1280px) and (orientation: landscape) {
+ &.btn--classic {
+ &.takeChroma,
+ &.reloadPage,
+ &.deletebtn {
+ margin: 0.5em;
+ display: block;
+ }
+ }
+ &.btn--modern,
+ &.btn--modern_squared {
+ &.takeChroma,
+ &.reloadPage,
+ &.deletebtn {
+ margin: auto;
+ display: inline-block;
+ }
+ }
+ }
+}
+
+.chroma-control-bar {
+ .btn--classic {
+ save-chroma-btn,
+ print-btn,
+ close-btn {
+ width: auto;
+ }
+ }
+}
+
.homebtn {
&.btn--modern,
&.btn--modern_squared {
@@ -272,7 +363,7 @@
width: 4em;
height: 4em;
}
- .btn--modrn_squared {
+ .btn--modern_squared {
span {
font-size: 1em;
}
diff --git a/src/sass/partials/_modern_gallery.scss b/src/sass/partials/_modern_gallery.scss
index 6262f9937..23a9e17a6 100644
--- a/src/sass/partials/_modern_gallery.scss
+++ b/src/sass/partials/_modern_gallery.scss
@@ -40,13 +40,13 @@ a.gallery__close {
border-radius: 50%;
}
-.gallerybtn {
+.livechroma-gallery-btn {
border-radius: 50%;
left: 1em;
margin: auto;
}
-.closebtn {
+.livechroma-close-btn {
border-radius: 50%;
right: 1em;
margin: auto;
diff --git a/src/sass/partials/_squared_gallery.scss b/src/sass/partials/_squared_gallery.scss
index e35d2d596..266fa635a 100644
--- a/src/sass/partials/_squared_gallery.scss
+++ b/src/sass/partials/_squared_gallery.scss
@@ -33,12 +33,12 @@
border-radius: 15%;
}
-.gallerybtn {
+.livechroma-gallery-btn {
left: 1em;
margin: auto;
}
-.closebtn {
+.livechroma-close-btn {
right: 1em;
margin: auto;
}