';
+ echo '
';
echo '
-+'.$panel.'
';
echo '';
- echo '
';
+ echo '
';
foreach($fields as $key => $field) {
if ($key == 'platform' || $key == 'view') {
@@ -130,9 +132,11 @@
}
?>
-
+
-
diff --git a/resources/lang/de.json b/resources/lang/de.json
index 4fc60f427..df94f1288 100644
--- a/resources/lang/de.json
+++ b/resources/lang/de.json
@@ -449,7 +449,6 @@
"manual:userinterface:ui_decore_lines": "Wenn aktiviert, werden Linien auf der Startseite angezeigt.",
"manual:userinterface:ui_font_size": "Geben Sie die Standardschriftgröße für die Photobooth-Oberfläche ein.",
"manual:userinterface:ui_result_buttons": "Wenn aktiviert, werden die Nachbearbeitungs-Schaltflächen auf dem Ergebnisbildschirm sichtbar. Wenn deaktiviert, wird die gesamte Schaltflächenleiste ausgeblendet.",
- "manual:userinterface:ui_rounded_corners": "Wenn diese Option aktiviert ist, verwendet die Photobooth-Benutzeroberfläche abgerundete Kanten.",
"manual:userinterface:ui_shutter_animation": "Wenn aktiviert, wird während der Aufnahme eines Fotos eine Verschlussanimation angezeigt.",
"manual:userinterface:ui_style": "Wählen Sie einen Startseitenstil. Um einen eigenen Startseitenstil zu verwenden, erstellen und verwenden Sie \"/template/custom.template.php\" und \"/resources/css/custom_style.css\", falls eine dieser Dateien nicht lesbar ist, wird auf den Standard-Startseitenstil zurückgegriffen.",
"manual:version:check_version": "Dies prüft online über das Github Projektarchiv auf die neueste Photobooth-Version.",
@@ -638,7 +637,6 @@
"userinterface:ui_decore_lines": "Dekorationslinien anzeigen",
"userinterface:ui_font_size": "Standardschriftgröße",
"userinterface:ui_result_buttons": "Schaltflächenleiste auf Ergebnisbildschirm anzeigen",
- "userinterface:ui_rounded_corners": "Abgerundete Ecken",
"userinterface:ui_shutter_animation": "Verschlussanimation",
"userinterface:ui_style": "Stil",
"using_latest_version": "Photobooth ist auf dem aktuellen Stand.",
diff --git a/resources/lang/en.json b/resources/lang/en.json
index 44b331e8f..d02e809c5 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -467,7 +467,6 @@
"manual:userinterface:ui_decore_lines": "If enabled, decorate lines will be visible on start page.",
"manual:userinterface:ui_font_size": "Enter the default font size used for the Photobooth interface.",
"manual:userinterface:ui_result_buttons": "If enabled, post-processing buttons will be visible on the on result screen. If disabled the whole button bar will be hidden.",
- "manual:userinterface:ui_rounded_corners": "If enabled, the Photobooth UI uses smooth rounded edges.",
"manual:userinterface:ui_shutter_animation": "If enabled, a shutter animation will be visible while taking a picture.",
"manual:userinterface:ui_style": "Choose a start page styling. To use custom styling please create and use \"/template/custom.template.php\" and \"/resources/css/custom_style.css\", if one of these files is not readable we will fallback to default theme.",
"manual:version:check_version": "This will check online against the Github repository for the latest Photobooth version.",
@@ -663,7 +662,6 @@
"userinterface:ui_decore_lines": "Show decorate lines",
"userinterface:ui_font_size": "Default font size",
"userinterface:ui_result_buttons": "Show button bar on result screen",
- "userinterface:ui_rounded_corners": "Rounded corners",
"userinterface:ui_shutter_animation": "Shutter animation",
"userinterface:ui_style": "Styling",
"using_latest_version": "You are using the latest version of photobooth.",
diff --git a/resources/lang/es.json b/resources/lang/es.json
index b7a32aee6..f53cbd6b6 100644
--- a/resources/lang/es.json
+++ b/resources/lang/es.json
@@ -270,7 +270,6 @@
"manual:userinterface:background_defaults": "Estilo CSS para fondo en páginas de inicio, inicio de sesión y presentación de diapositivas.",
"manual:userinterface:button_show_fs": "Si está activado, se agregará un botón para alternar el modo de pantalla completa a la pantalla de inicio.",
"manual:userinterface:ui_font_size": "Introduzca el tamaño de fuente predeterminado utilizado para la interfaz Photobooth.",
- "manual:userinterface:ui_rounded_corners": "Si está habilitada, la interfaz de usuario de Photobooth utiliza bordes redondeados suaves.",
"milliseconds": "milisegundos",
"newCollage": "Un collage más",
"newPhoto": "Una foto más",
@@ -380,6 +379,5 @@
"userinterface:colors_secondary": "Color secundario",
"userinterface:colors_start_font": "Color de fuente de la pantalla de inicio",
"userinterface:ui_font_size": "Tamaño de fuente predeterminado",
- "userinterface:ui_rounded_corners": "Esquinas redondeadas",
"using_latest_version": "Estás utilizando la última versión de photobooth"
}
diff --git a/resources/lang/fr.json b/resources/lang/fr.json
index 676d248f4..a0e17fa03 100644
--- a/resources/lang/fr.json
+++ b/resources/lang/fr.json
@@ -451,7 +451,6 @@
"manual:userinterface:ui_decore_lines": "Si activé, les lignes de décoration seront visibles sur la page de démarrage.",
"manual:userinterface:ui_font_size": "Entrez la taille de police par défaut utilisée pour l'interface Photobooth.",
"manual:userinterface:ui_result_buttons": "Si activé, les boutons de post-traitement seront visibles sur l'écran de résultat. Si désactivé, la barre de boutons entière sera masquée.",
- "manual:userinterface:ui_rounded_corners": "Si activé, l'interface utilisateur du Photobooth utilise des bords arrondis lisses.",
"manual:userinterface:ui_shutter_animation": "Si activé, une animation d'obturateur sera visible lors de la prise d'une photo.",
"manual:userinterface:ui_style": "Choisissez un style de page de démarrage. Pour utiliser un style personnalisé, veuillez créer et utiliser \"/template/custom.template. hp\" et \"/resources/css/custom_style.css\", si l'un de ces fichiers n'est pas lisible, nous utiliserons le thème par défaut.",
"manual:version:check_version": "Ceci vérifiera en ligne le répertoire GitHub pour la dernière version de Photobooth.",
@@ -642,7 +641,6 @@
"userinterface:ui_decore_lines": "Afficher les lignes décoratives",
"userinterface:ui_font_size": "Taille de police par défaut",
"userinterface:ui_result_buttons": "Afficher la barre de boutons sur l'écran de résultat",
- "userinterface:ui_rounded_corners": "Angles arrondis",
"userinterface:ui_shutter_animation": "Animation d'obturation",
"userinterface:ui_style": "Stylisation",
"using_latest_version": "Vous utilisez la dernière version du Photobooth.",
diff --git a/resources/lang/it.json b/resources/lang/it.json
index bb1c89805..3c2104105 100644
--- a/resources/lang/it.json
+++ b/resources/lang/it.json
@@ -392,7 +392,6 @@
"manual:userinterface:button_show_fs": "Se abilitata, verrà aggiunto alla schermata iniziale un pulsante per attivare o disattivare la modalità schermo intero.",
"manual:userinterface:ui_decore_lines": "Se abilitata, le linee decorate saranno visibili alla pagina iniziale.",
"manual:userinterface:ui_font_size": "Inserisci la dimensione predefinita del carattere usata per l'interfaccia Photobooth.",
- "manual:userinterface:ui_rounded_corners": "Se abilitata, l'interfaccia utente di Photobooth utilizza bordi arrotondati lisci.",
"manual:userinterface:ui_style": "Scegli uno stile di pagina iniziale. Per usare lo stile personalizzato, crea e usa \"/template/custom.template.php\" e \"/resources/css/custom_style.css\", se uno di questi file non è leggibile, sarà utilizzato il tema predefinito.",
"milliseconds": "millisecondi",
"newCollage": "Nuovo Collage",
@@ -518,7 +517,6 @@
"userinterface:colors_start_font": "Colore carattere schermata iniziale",
"userinterface:ui_decore_lines": "Mostra linee decorative",
"userinterface:ui_font_size": "Grandezza carattere di default",
- "userinterface:ui_rounded_corners": "Spigoli arrotondati",
"userinterface:ui_style": "Stile",
"using_latest_version": "Stai usando l'ultima versione di photobooth."
}
diff --git a/resources/lang/pl.json b/resources/lang/pl.json
index cbcf8cd04..d0b3ab4dc 100644
--- a/resources/lang/pl.json
+++ b/resources/lang/pl.json
@@ -282,6 +282,5 @@
"userinterface:colors_secondary": "Kolor Dodatkowy",
"userinterface:colors_start_font": "Kolor czcionki ekranu startowego",
"userinterface:ui_font_size": "Domyślny rozmiar czcionki",
- "userinterface:ui_rounded_corners": "Zaokrąglone narożniki",
"using_latest_version": "Używasz najnowszej dostępnej wersji Fotobudki."
}
diff --git a/slideshow/index.php b/slideshow/index.php
index 633665fd9..9cc878347 100644
--- a/slideshow/index.php
+++ b/slideshow/index.php
@@ -11,6 +11,7 @@
}
$imagelist = array_reverse($images);
+$uiShape = 'shape--' . $config['ui']['style'];
?>
@@ -84,9 +85,9 @@
?>
- 
+
-
+
diff --git a/src/js/gallery.js b/src/js/gallery.js
index 2209f7cff..6ee984695 100644
--- a/src/js/gallery.js
+++ b/src/js/gallery.js
@@ -1,6 +1,6 @@
/* globals photoBooth photoboothTools */
$(function () {
- const reloadElement = $('
');
+ const reloadElement = $('');
reloadElement.append('');
reloadElement.attr('href', '#');
reloadElement.on('click', () => photoboothTools.reloadPage());
diff --git a/src/sass/classic_admin.scss b/src/sass/classic_admin.scss
index f9e33ddde..9499809e1 100644
--- a/src/sass/classic_admin.scss
+++ b/src/sass/classic_admin.scss
@@ -1,6 +1,7 @@
@import 'modules/theme';
@import 'partials/basic';
@import 'partials/button_animated';
+@import 'partials/shape';
body {
display: block;
@@ -282,7 +283,6 @@ div.setting_element {
width: 2.9em;
height: 1.4em;
background-color: rgba(195, 46, 4, 0.6);
- border-radius: 1em;
transition: all 0.3s ease-in-out;
}
@@ -295,9 +295,9 @@ div.setting_element {
left: 0.1em;
bottom: 0.1em;
background-color: white;
- border-radius: 50%;
transition: all 0.3s ease-in-out;
}
+
.toggle input:checked + .slider {
background-color: rgba(90, 153, 00, 0.8); /* green */
}
@@ -320,6 +320,26 @@ div.setting_element {
left: 4.5em;
}
+.shape--classic_rounded,
+.shape--modern,
+.shape--modern_squared {
+ &.slider,
+ &.toggle {
+ border-radius: 5px;
+ }
+
+ &.slider::-webkit-slider-thumb,
+ &.slider::-moz-range-thumb {
+ width: 20px;
+ height: 20px;
+ border-radius: 1em;
+ }
+
+ &.slider:before,
+ &.toggle:before {
+ border-radius: 50%;
+ }
+}
/********************************************
* Adjust style of selectize lib for our needs - multiselects only
********************************************/
diff --git a/src/sass/classic_chromakeying.scss b/src/sass/classic_chromakeying.scss
index 634ba7622..2cfc656fd 100644
--- a/src/sass/classic_chromakeying.scss
+++ b/src/sass/classic_chromakeying.scss
@@ -3,6 +3,7 @@
@import 'partials/button';
@import 'partials/fonts';
@import 'partials/modal';
+@import 'partials/shape';
.chromawrapper {
display: block;
@@ -24,7 +25,6 @@
display: inline-block;
max-width: 100%;
background-color: green;
- border: 4px solid $borderColor;
&.initial {
width: 1000px;
}
diff --git a/src/sass/classic_live_chromakeying.scss b/src/sass/classic_live_chromakeying.scss
index ddfb24be3..44f76f8eb 100644
--- a/src/sass/classic_live_chromakeying.scss
+++ b/src/sass/classic_live_chromakeying.scss
@@ -7,6 +7,7 @@
@import 'partials/scrollbar';
@import 'partials/shutter_animation';
@import 'vendor/photoswipe';
+@import 'partials/shape';
.top-bar {
display: inline-block;
@@ -18,7 +19,7 @@
color: #ff0000;
padding-bottom: 10px;
background-color: $mainColor;
- border: 4px solid $borderColor;
+ border: 2px solid $borderColor;
width: 1000px;
text-align: center;
display: inline-block;
@@ -70,12 +71,9 @@
position: absolute;
top: 40px;
right: 0;
+ width: 80%;
max-width: 950px;
max-height: 100%;
- border: 4px solid $borderColor;
- &.initial {
- width: 950px;
- }
}
.top-bar {
@@ -103,7 +101,6 @@
width: 250px;
height: 400px;
overflow-y: auto;
- border: 2px solid $borderColor;
img {
display: block;
margin-left: auto;
diff --git a/src/sass/classic_rounded_admin.scss b/src/sass/classic_rounded_admin.scss
new file mode 100644
index 000000000..a0e3c9a95
--- /dev/null
+++ b/src/sass/classic_rounded_admin.scss
@@ -0,0 +1 @@
+@import 'classic_admin';
diff --git a/src/sass/classic_rounded_chromakeying.scss b/src/sass/classic_rounded_chromakeying.scss
new file mode 100644
index 000000000..447f1e2b3
--- /dev/null
+++ b/src/sass/classic_rounded_chromakeying.scss
@@ -0,0 +1 @@
+@import 'classic_chromakeying';
diff --git a/src/sass/classic_rounded_live_chromakeying.scss b/src/sass/classic_rounded_live_chromakeying.scss
new file mode 100644
index 000000000..67a7f2438
--- /dev/null
+++ b/src/sass/classic_rounded_live_chromakeying.scss
@@ -0,0 +1 @@
+@import 'classic_live_chromakeying';
diff --git a/src/sass/classic_rounded_style.scss b/src/sass/classic_rounded_style.scss
new file mode 100644
index 000000000..a988e5803
--- /dev/null
+++ b/src/sass/classic_rounded_style.scss
@@ -0,0 +1 @@
+@import 'classic_style';
diff --git a/src/sass/classic_style.scss b/src/sass/classic_style.scss
index 189bce31b..158f5f418 100644
--- a/src/sass/classic_style.scss
+++ b/src/sass/classic_style.scss
@@ -4,6 +4,7 @@
@import 'partials/button';
@import 'partials/countdown';
@import 'partials/email';
+@import 'vendor/photoswipe';
@import 'partials/gallery';
@import 'partials/sidenav';
@import 'partials/scrollbar';
@@ -11,7 +12,7 @@
@import 'partials/modal';
@import 'partials/ribbon';
@import 'partials/video_preview';
-@import 'vendor/photoswipe';
+@import 'partials/shape';
#wrapper {
display: none;
@@ -117,6 +118,11 @@
text-align: center;
padding: 3rem;
+ &.shape--classic_rounded {
+ border: 0 none;
+ border-radius: 10px;
+ }
+
.names {
margin-top: 2rem;
margin-bottom: 5rem;
@@ -162,10 +168,15 @@
}
}
}
+
.fs-button {
position: fixed;
top: 5.5rem;
left: 5px;
+ &.btn--classic_rounded {
+ margin-top: auto;
+ margin-left: auto;
+ }
}
.cups-button {
@@ -179,6 +190,10 @@
position: fixed;
top: 5px;
left: 5px;
+ &.btn--classic_rounded {
+ margin-top: auto;
+ margin-left: auto;
+ }
}
.homebtn {
@@ -187,14 +202,27 @@
right: 5px;
}
+.btn,
+.gal-action-btn {
+ &.btn--classic_rounded {
+ border-radius: 10px;
+ }
+}
+
.resultInner {
.homebtn,
.gallery-button {
- &.btn--classic {
+ &.btn--classic,
+ &.btn--classic_rounded {
font-size: 0.875em;
width: 130px;
}
}
+ .btn {
+ &.btn--classic_rounded {
+ margin-left: 2px;
+ }
+ }
}
.sliderImages {
@@ -261,3 +289,14 @@
.pswp-rotary-focus {
background: $mainColor !important;
}
+
+button {
+ &.btn--classic {
+ border: 1px solid $borderColor;
+ }
+
+ &.btn--classic_rounded {
+ border: 2px solid $borderColor;
+ border-radius: 10px;
+ }
+}
diff --git a/src/sass/login.scss b/src/sass/login.scss
index 7322c6838..10c129bb4 100644
--- a/src/sass/login.scss
+++ b/src/sass/login.scss
@@ -3,6 +3,7 @@
@import 'partials/basic';
@import 'partials/button';
@import 'partials/modal';
+@import 'partials/shape';
.loginbody {
display: block;
diff --git a/src/sass/manual.scss b/src/sass/manual.scss
index 4514d77e8..88a862f08 100644
--- a/src/sass/manual.scss
+++ b/src/sass/manual.scss
@@ -3,6 +3,7 @@
@import 'partials/button';
@import 'partials/fonts';
@import 'partials/toggle';
+@import 'partials/shape';
$error: #e74c3c;
$success: #2ecc71;
@@ -30,13 +31,17 @@ $success: #2ecc71;
position: relative;
max-width: 100%;
color: $fontColor;
+ &.shape--classic_rounded {
+ border: 0 none;
+ border-radius: 10px;
+ }
}
.panel {
.panel-heading {
padding: 10px;
cursor: pointer;
- border: 1px solid $borderColor;
+
.plus {
display: inline-block;
}
@@ -47,11 +52,31 @@ $success: #2ecc71;
&:hover {
background: $hoverPanelColor;
}
+
+ &.shape--classic,
+ &.shape--classic_rounded {
+ border: 1px solid $borderColor;
+ }
+
+ &.shape--classic_rounded,
+ &.shape--modern,
+ &.shape--modern_squared {
+ margin: 5px;
+ }
}
.panel-body {
display: none;
padding: 20px;
- border: 1px solid $borderColor;
+
+ &.shape--classic {
+ border: 1px solid $borderColor;
+ }
+
+ &.shape--classic_rounded,
+ &.shape--modern,
+ &.shape--modern_squared {
+ margin: 5px;
+ }
}
&.open {
@@ -70,6 +95,12 @@ $success: #2ecc71;
display: block;
}
}
+
+ &.shape--modern,
+ &.shape--modern_squared {
+ border: unset;
+ border-radius: unset;
+ }
}
.form-row {
@@ -86,21 +117,11 @@ $success: #2ecc71;
}
}
-.faq-btn {
- padding-top: 10px;
- width: 100%;
-}
-
+.faq-btn,
.wiki-btn {
- cursor: pointer;
- background: $mainColor;
- color: $buttonFontColor;
+ padding: 20px 20px;
+ margin: 5px;
width: 100%;
- position: absolute;
- padding: 20px;
- bottom: 0;
- left: 0;
- right: 0;
transition: background 0.7s ease;
&:hover {
diff --git a/src/sass/modern_admin.scss b/src/sass/modern_admin.scss
index fc869513a..a0e3c9a95 100644
--- a/src/sass/modern_admin.scss
+++ b/src/sass/modern_admin.scss
@@ -1,21 +1 @@
@import 'classic_admin';
-
-a.adminnavlistelement,
-div.setting_section,
-.setting_section_heading,
-.save-admin-btn,
-.adminpanel-setting-btn,
-.selectize-control.multi .selectize-input {
- border-radius: 10px;
-}
-
-.settinginput {
- width: 100%;
- border-radius: 5px;
-}
-
-.settinginput.color {
- width: 30%;
- display: block;
- border-radius: 5px;
-}
diff --git a/src/sass/modern_live_chromakeying.scss b/src/sass/modern_live_chromakeying.scss
index 180c3d922..2ae241692 100644
--- a/src/sass/modern_live_chromakeying.scss
+++ b/src/sass/modern_live_chromakeying.scss
@@ -1,7 +1,7 @@
@import 'classic_live_chromakeying';
.backgrounds {
- border-radius: 4%;
+ margin-top: 5px;
}
@media (max-height: 740px) and (orientation: landscape) {
diff --git a/src/sass/modern_squared_live_chromakeying.scss b/src/sass/modern_squared_live_chromakeying.scss
index 9bfa2b7a6..9cb0d8019 100644
--- a/src/sass/modern_squared_live_chromakeying.scss
+++ b/src/sass/modern_squared_live_chromakeying.scss
@@ -1,2 +1 @@
@import 'modern_live_chromakeying';
-@import 'partials/squared_gallery';
diff --git a/src/sass/modern_squared_style.scss b/src/sass/modern_squared_style.scss
index 7d95b12e2..3bc5977ed 100644
--- a/src/sass/modern_squared_style.scss
+++ b/src/sass/modern_squared_style.scss
@@ -1,7 +1,20 @@
@import 'modern_style';
-@import 'partials/squared_gallery';
+
.divinnen2 {
left: 0;
margin-left: auto;
margin-right: auto;
}
+
+.gallery {
+ &__body {
+ figure {
+ &.shape--modern_squared {
+ background-color: unset;
+ border: none;
+ border-radius: 8px;
+ box-shadow: 0 0 7px rgb(27, 27, 27);
+ }
+ }
+ }
+}
diff --git a/src/sass/modern_style.scss b/src/sass/modern_style.scss
index 40299cdc1..71be5511d 100644
--- a/src/sass/modern_style.scss
+++ b/src/sass/modern_style.scss
@@ -1,5 +1,4 @@
@import 'classic_style';
-@import 'partials/modern_gallery';
html,
body {
@@ -25,8 +24,8 @@ body {
.cups-button {
position: fixed;
- left: 0;
- top: 0;
+ left: 5px;
+ top: 5px;
bottom: auto;
}
}
@@ -34,7 +33,7 @@ body {
.gallery-button {
position: relative;
top: auto;
- bottom: 0px;
+ bottom: 0;
left: auto;
}
@@ -81,10 +80,6 @@ body {
padding: 10px;
}
-.send-mail {
- border-radius: 10px;
-}
-
@media (orientation: portrait) {
.divinnen2 {
margin-left: auto;
diff --git a/src/sass/partials/_button.scss b/src/sass/partials/_button.scss
index f617a717a..328792f00 100644
--- a/src/sass/partials/_button.scss
+++ b/src/sass/partials/_button.scss
@@ -9,7 +9,8 @@
width: 12.5em;
z-index: 10;
- &--classic {
+ &--classic,
+ &--classic_rounded {
padding: 20px 40px;
border: 0 none;
}
@@ -70,11 +71,6 @@
width: 50%;
}
- &--submit {
- font-size: 0.75em;
- white-space: normal;
- }
-
&:active,
&:focus,
&:hover,
@@ -83,7 +79,8 @@
}
}
-.btn--classic {
+.btn--classic,
+.btn--classic_rounded {
&.btn--small {
padding: 12px 40px;
}
@@ -102,14 +99,16 @@
.btn {
margin-top: 3px;
}
- .btn--classic {
+ .btn--classic,
+ .btn--classic_rounded {
width: auto;
margin-top: 3px;
}
@media (max-width: 1024px) {
.btn {
- &.btn--classic {
+ &.btn--classic,
+ &.btn--classic_rounded {
font-size: 0.8em;
margin-top: 1px;
width: 80%;
@@ -124,20 +123,35 @@
z-index: 100;
}
+.fs-button,
+.takeChroma,
+.reloadPage {
+ &.btn--modern_squared {
+ span {
+ font-size: 0.6em;
+ }
+ }
+}
+
.livechroma-gallery-btn {
position: fixed;
top: 1em;
- left: 0;
+ left: 1em;
- &.btn--classic {
+ &.btn--classic,
+ &.btn--classic_rounded {
width: auto;
padding: 12px 40px;
}
- &.btn--modern,
- &.btn--modern_squared {
+ &.btn--modern {
margin: 10px;
}
+
+ &.btn--modern_squared {
+ margin: auto;
+ }
+
@media (max-width: 1280px) and (orientation: landscape) {
position: relative;
top: 0;
@@ -148,9 +162,10 @@
.livechroma-close-btn {
position: fixed;
top: 1em;
- right: 0;
+ right: 1em;
- &.btn--classic {
+ &.btn--classic,
+ &.btn--classic_rounded {
width: auto;
padding: 12px 40px;
}
@@ -159,6 +174,12 @@
margin: 10px;
}
+ @media (max-width: 1280px) and (orientation: landscape) {
+ position: relative;
+ top: 0;
+ max-width: 150px;
+ }
+
&.btn--modern_squared {
margin: auto;
text-align: center;
@@ -185,7 +206,8 @@
}
@media (max-width: 1280px) and (orientation: landscape) {
- &.btn--classic {
+ &.btn--classic,
+ &.btn--classic_rounded {
&.takeChroma,
&.reloadPage,
&.deletebtn {
@@ -206,7 +228,8 @@
}
.chroma-control-bar {
- .btn--classic {
+ .btn--classic,
+ .btn--classic_rounded {
&#save-chroma-btn,
&#print-btn,
&#close-btn {
@@ -220,7 +243,8 @@
.btn--modern_squared {
display: inline-block;
}
- .btn--classic {
+ .btn--classic,
+ .btn--classic_rounded {
width: auto;
padding: 20px 0;
text-align: center;
@@ -261,7 +285,8 @@
}
}
-.btn--classic.gal-action-btn {
+.btn--classic.gal-action-btn,
+.btn--classic_rounded.gal-action-btn {
background: $hoverColor;
}
@@ -311,7 +336,8 @@
@media (max-width: 1024px) {
.takePic,
.takeCollage {
- &.btn--classic {
+ &.btn--classic,
+ &.btn--classic_rounded {
padding: 10px 10px;
}
}
diff --git a/src/sass/partials/_gallery.scss b/src/sass/partials/_gallery.scss
index 1363e7ea6..9c23f978d 100644
--- a/src/sass/partials/_gallery.scss
+++ b/src/sass/partials/_gallery.scss
@@ -29,14 +29,15 @@
}
&__header {
- height: 100px;
+ height: auto;
+ max-height: 100px;
width: 100%;
background: $mainColor;
> a {
position: absolute;
right: 30px;
- top: 24px;
+ top: 13px;
color: $galleryButtonColor;
font-size: 1.875em;
width: 50px;
@@ -49,7 +50,8 @@
&__footer {
width: 100%;
- height: 100px;
+ height: auto;
+ max-height: 100px;
align-self: flex-end;
bottom: 0;
margin-top: auto;
@@ -76,22 +78,47 @@
img {
max-width: 100%;
list-style: none;
- border: 1px solid $borderColor;
display: block;
}
figure {
margin: 0;
+ border: 1px solid $borderColor;
+ background-color: $hoverColor;
}
}
+ img {
+ border: none;
+ }
+
figcaption {
- background-color: $hoverColor;
+ border: none;
text-align: center;
color: $fontColor;
}
}
+.gallery__reload,
+.gallery__close,
+.pswp__button--close {
+ width: 2em;
+ height: 2em;
+ line-height: 1em;
+ span {
+ display: none;
+ }
+ .fa {
+ font-size: 1em;
+ margin: 0;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -ms-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ }
+}
+
.gallery__img:active > figure,
.gallery__img:focus > figure,
.gallery__img:hover > figure,
diff --git a/src/sass/partials/_modern_gallery.scss b/src/sass/partials/_modern_gallery.scss
deleted file mode 100644
index 23a9e17a6..000000000
--- a/src/sass/partials/_modern_gallery.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-.gallery {
- &__header {
- background: none;
- > a {
- top: 13px;
- border-radius: 10%;
- border: 2px solid $galleryButtonColor;
- background: none;
- > .fa {
- position: absolute;
- top: 50%;
- left: 50%;
- -ms-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
- }
- }
- }
- &__body {
- img {
- border: 2px solid $galleryButtonColor;
- border-radius: 8px;
- }
- figcaption {
- background-color: unset;
- border: 2px solid $galleryButtonColor;
- border-radius: 8px;
- margin-top: 6px;
- }
- }
-}
-
-a.gallery__reload,
-a.gallery__close {
- border: 2px solid $galleryButtonColor;
- border-radius: 50%;
- background: radial-gradient(grey, $mainColor, $hoverColor);
-}
-
-.pswp__button--close {
- border-radius: 50%;
-}
-
-.livechroma-gallery-btn {
- border-radius: 50%;
- left: 1em;
- margin: auto;
-}
-
-.livechroma-close-btn {
- border-radius: 50%;
- right: 1em;
- margin: auto;
-}
diff --git a/src/sass/partials/_shape.scss b/src/sass/partials/_shape.scss
new file mode 100644
index 000000000..39a94ff9c
--- /dev/null
+++ b/src/sass/partials/_shape.scss
@@ -0,0 +1,25 @@
+.shape--classic_rounded {
+ border: 0 none;
+ border-radius: 10px;
+}
+
+.shape--modern {
+ border: 1px solid $borderColor;
+ border-radius: 10px;
+}
+
+.shape--modern_squared {
+ border: 2px solid $borderColor;
+ border-radius: 10px;
+}
+
+.shape--modern,
+.shape--modern_squared {
+ &.noborder {
+ border: 0 none;
+ }
+
+ &-s {
+ border-radius: 5px;
+ }
+}
diff --git a/src/sass/partials/_sidenav.scss b/src/sass/partials/_sidenav.scss
index 712f9954f..c8bca00b8 100644
--- a/src/sass/partials/_sidenav.scss
+++ b/src/sass/partials/_sidenav.scss
@@ -49,6 +49,10 @@
&:hover {
background: $hoverColor;
}
+
+ &.btn--classic_rounded {
+ border-radius: 5px;
+ }
}
.activeSidenavBtn {
diff --git a/src/sass/partials/_squared_gallery.scss b/src/sass/partials/_squared_gallery.scss
deleted file mode 100644
index 266fa635a..000000000
--- a/src/sass/partials/_squared_gallery.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.gallery {
- &__header {
- background: none;
- > a {
- top: 13px;
- border-radius: 15%;
- border: 2px solid $galleryButtonColor;
- background: none;
- > .fa {
- position: absolute;
- top: 50%;
- left: 50%;
- -ms-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
- }
- }
- }
- &__body {
- img {
- border: none;
- border-radius: 8px;
- box-shadow: 0 0 7px rgb(27, 27, 27);
- }
- figcaption {
- background-color: unset;
- border: none;
- border-radius: 8px;
- box-shadow: 0 0 7px rgb(27, 27, 27);
- }
- }
-}
-.pswp__button--close {
- border-radius: 15%;
-}
-
-.livechroma-gallery-btn {
- left: 1em;
- margin: auto;
-}
-
-.livechroma-close-btn {
- right: 1em;
- margin: auto;
-}
diff --git a/src/sass/photoswipe-bottom.scss b/src/sass/photoswipe-bottom.scss
index e57e08928..6d710a994 100644
--- a/src/sass/photoswipe-bottom.scss
+++ b/src/sass/photoswipe-bottom.scss
@@ -15,14 +15,10 @@
}
.pswp__button--close {
- top: 24px;
+ top: 13px;
right: 30px;
left: auto;
position: fixed;
- width: calc(2 * 1em);
- height: calc(2 * 1em);
- line-height: calc(1 * 1em);
- border: 2px solid $galleryButtonColor;
}
.pswp__top-bar {
diff --git a/src/sass/rounded.scss b/src/sass/rounded.scss
deleted file mode 100644
index 5ba78bf60..000000000
--- a/src/sass/rounded.scss
+++ /dev/null
@@ -1,85 +0,0 @@
-@import 'modules/theme';
-
-#start {
- .startInner {
- border: 0 none;
- border-radius: 10px;
- }
-}
-
-.resultInner {
- .btn {
- margin-left: 2px;
- }
-}
-
-.sidenav {
- .closebtn {
- border-radius: 5px;
- }
-}
-
-.btn,
-.gal-action-btn {
- border-radius: 10px;
-}
-
-.gallery {
- &__close,
- &__reload {
- border-radius: 5px;
- }
-}
-
-.gallery-button,
-.fs-button {
- &.round-btn {
- margin-top: auto;
- margin-left: auto;
- }
-}
-
-.admin-panel,
-.manual-panel,
-.login-panel {
- border: 0 none;
- border-radius: 10px;
-}
-
-.panel {
- .panel-heading,
- .panel-body {
- margin-top: 2px;
- border-radius: 5px;
- }
-
-button {
- border: 2px solid $borderColor;
- border-radius: 10px;
-}
-
-.faq-btn,
-.wiki-btn {
- border: 2px solid $borderColor;
- border-radius: 10px;
-}
-
-.slider {
- height: 15px;
- border-radius: 5px;
-}
-
-.slider::-webkit-slider-thumb,
-.slider::-moz-range-thumb {
- width: 20px;
- height: 20px;
- border-radius: 50%;
-}
-
-.toggle {
- border-radius: 0.5em;
-}
-
-.toggle:before {
- border-radius: 50%;
-}
diff --git a/src/sass/slideshow.scss b/src/sass/slideshow.scss
index e28c25185..5bde989a6 100644
--- a/src/sass/slideshow.scss
+++ b/src/sass/slideshow.scss
@@ -2,6 +2,7 @@
@import 'partials/fonts';
@import 'partials/basic';
@import 'partials/button';
+@import 'partials/shape';
.images {
h1 {
diff --git a/src/sass/update.scss b/src/sass/update.scss
index 1f058f966..49f44aa3e 100644
--- a/src/sass/update.scss
+++ b/src/sass/update.scss
@@ -3,6 +3,7 @@
@import 'partials/button';
@import 'partials/fonts';
@import 'partials/modal';
+@import 'partials/shape';
.updatewrapper {
display: block;
diff --git a/src/sass/welcome.scss b/src/sass/welcome.scss
index 82c46d301..757cd9417 100644
--- a/src/sass/welcome.scss
+++ b/src/sass/welcome.scss
@@ -2,6 +2,7 @@
@import 'partials/fonts';
@import 'partials/basic';
@import 'partials/button';
+@import 'partials/shape';
@import 'partials/scrollbar';
html,
@@ -36,6 +37,4 @@ body {
.security-advice {
color: #000000;
background-color: #ffff00;
- border: 3px #000000;
- border-radius: 25px;
}
diff --git a/template/classic.template.php b/template/classic.template.php
index 05402bf2b..6a9b62ecb 100644
--- a/template/classic.template.php
+++ b/template/classic.template.php
@@ -1,10 +1,10 @@
-
+
-
+
diff --git a/template/classic_rounded.template.php b/template/classic_rounded.template.php
new file mode 100644
index 000000000..6c23c96d1
--- /dev/null
+++ b/template/classic_rounded.template.php
@@ -0,0 +1 @@
+
diff --git a/template/gallery.template.php b/template/gallery.template.php
index fe087aa08..aba7439b2 100644
--- a/template/gallery.template.php
+++ b/template/gallery.template.php
@@ -2,7 +2,7 @@
@@ -37,10 +37,10 @@
-
- 
+
+
-
+
diff --git a/template/modern.template.php b/template/modern.template.php
index a853b5bb0..72a28220b 100644
--- a/template/modern.template.php
+++ b/template/modern.template.php
@@ -1,6 +1,6 @@
-
-
+
+
diff --git a/template/pswp.template.php b/template/pswp.template.php
index 7341395b6..5b2c5da0a 100644
--- a/template/pswp.template.php
+++ b/template/pswp.template.php
@@ -23,7 +23,7 @@
-
+
@@ -41,9 +41,9 @@
-
-
-
+
+
+
@@ -84,7 +84,5 @@
-
-
-
+
diff --git a/template/send-mail.template.php b/template/send-mail.template.php
index 682c7fae8..de60aeff3 100644
--- a/template/send-mail.template.php
+++ b/template/send-mail.template.php
@@ -1,4 +1,4 @@
-
+
@@ -6,17 +6,16 @@
diff --git a/update.php b/update.php
index 52dfd3375..e84b6022b 100644
--- a/update.php
+++ b/update.php
@@ -17,6 +17,9 @@
exit();
}
+$uiShape = 'shape--' . $config['ui']['style'];
+$btnShape = 'shape--' . $config['ui']['button'];
+$btnClass = 'btn ' . $btnShape;
?>
@@ -44,9 +47,6 @@
-
-
-
@@ -54,21 +54,21 @@
-
+
-
+
-
+
-
+
diff --git a/welcome.php b/welcome.php
index efd9fa6ff..9664f640d 100644
--- a/welcome.php
+++ b/welcome.php
@@ -10,7 +10,9 @@
$URL = getPhotoboothUrl();
$PHOTOBOOTH_HOME = getcwd();
-
+$uiShape = 'shape--' . $config['ui']['style'];
+$btnShape = 'shape--' . $config['ui']['button'];
+$btnClass = 'btn ' . $btnShape;
?>
@@ -69,14 +71,14 @@
You are missing some translation or your language isn't supported yet? Don't worry! You can request new language support at GitHub,
you can translate Photobooth at Crowdin.
-
Security advice
+
Security advice
Photobooth is not hardened against any kind of targeted attacks.
It uses user defined commands for tasks like taking photos and is allowed to replace its own files for easy updating.
Because of this it's not advised to operate Photobooth in an untrusted network and
you should absolutely not make Photobooth accessible through the internet without heavy modifications!
Thanks for the reading! Enjoy your Photobooth!
-
Start Photobooth
+
Start Photobooth