From 6f5c5c8eb239e3386c1c76202376810d020f70f6 Mon Sep 17 00:00:00 2001 From: markus rothgaenger Date: Tue, 31 May 2022 01:25:01 +0200 Subject: [PATCH] adapt style --- config/config.inc.php | 2 +- index.php | 7 ++++--- resources/lang/de.json | 4 ++-- src/js/core.js | 4 ++-- src/sass/custom_style.scss | 8 ++++++++ src/sass/partials/_gallery.scss | 29 +++++++++++++++++++++------ src/sass/partials/_modern_button.scss | 19 ++++++++++++------ template/custom.template.php | 2 +- template/gallery.template.php | 2 +- 9 files changed, 55 insertions(+), 22 deletions(-) diff --git a/config/config.inc.php b/config/config.inc.php index 9ea44e713..8334c5bd1 100644 --- a/config/config.inc.php +++ b/config/config.inc.php @@ -320,7 +320,7 @@ $config['ui']['rounded_corners'] = false; $config['colors']['primary'] = '#2e2e2e'; $config['colors']['secondary'] = '#0a6071'; -$config['colors']['font'] = '#79bad9'; +$config['colors']['font'] = '#c9c9c9'; $config['colors']['button_font'] = '#ffffff'; $config['colors']['start_font'] = '#ffffff'; $config['colors']['panel'] = '#2d4157'; diff --git a/index.php b/index.php index 41e78e74c..eb6f0a8e4 100644 --- a/index.php +++ b/index.php @@ -67,17 +67,18 @@ - + + - + diff --git a/resources/lang/de.json b/resources/lang/de.json index e4dc9a043..6d4a7ce6f 100644 --- a/resources/lang/de.json +++ b/resources/lang/de.json @@ -589,8 +589,8 @@ "synctodrive:synctodrive_enabled": "Aktivieren", "synctodrive:synctodrive_interval": "Synchronisierungs-Intervall", "synctodrive:synctodrive_target": "USB Gerät", - "takeCollage": "Collage erstellen!", - "takePhoto": "Foto erstellen!", + "takeCollage": "Collage", + "takePhoto": "Foto", "telegram": "Community @ Telegram", "test_update_available": "Es ist ein Test-Update verfügbar.", "toggleFullscreen": "Vollbildmodus umschalten", diff --git a/src/js/core.js b/src/js/core.js index 8a021a377..8d6ecc364 100644 --- a/src/js/core.js +++ b/src/js/core.js @@ -1151,7 +1151,7 @@ const photoBooth = (function () { } else { api.thrill(PhotoStyle.PHOTO); } - $('.newpic').trigger("blur"); + $('.newpic').trigger('blur'); }); $('.takeCollage, .newcollage').on('click', function (e) { @@ -1163,7 +1163,7 @@ const photoBooth = (function () { api.thrill(PhotoStyle.COLLAGE); } - $('.newcollage').trigger("blur"); + $('.newcollage').trigger('blur'); }); $('#mySidenav .closebtn').on('click', function (e) { diff --git a/src/sass/custom_style.scss b/src/sass/custom_style.scss index 77d375717..e851a8e75 100644 --- a/src/sass/custom_style.scss +++ b/src/sass/custom_style.scss @@ -152,3 +152,11 @@ hr.small { .pswp-rotary-focus { background: radial-gradient(grey, $mainColor, $hoverColor) !important; } + +.buttongroup { + display: flex; + justify-content: center; + gap: 50px; + padding-top: 10px; + padding-bottom: 5px; +} diff --git a/src/sass/partials/_gallery.scss b/src/sass/partials/_gallery.scss index 48f4be04f..5d1b4fd7f 100644 --- a/src/sass/partials/_gallery.scss +++ b/src/sass/partials/_gallery.scss @@ -11,8 +11,8 @@ z-index: 1000; h1 { - margin-top: 10px; - margin-left: 30px; + margin: auto; + text-align: center; } &--open { @@ -31,24 +31,34 @@ &__header { height: 100px; width: 100%; - background: $mainColor; + // background: $mainColor; > a { position: absolute; right: 30px; - top: 24px; + top: 13px; color: $galleryButtonColor; font-size: 1.875em; + border-radius: 15%; + border: 2px solid var(--gallery-button-color); width: 50px; height: 50px; - background: $hoverColor; + // background: $hoverColor; text-align: center; line-height: 50px; + > .fa { + position: absolute; + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + } } } &__footer { width: 100%; + height: 100px; // position: absolute; align-self: flex-end; bottom: 0; @@ -56,6 +66,7 @@ display: flex; justify-content: center; background: $mainColor; + box-shadow: 0 0 15px rgb(40, 40, 40); } &__body { @@ -75,7 +86,9 @@ img { max-width: 100%; list-style: none; - border: 1px solid $borderColor; + // border: 1px solid $borderColor; + border-radius: 8px; + box-shadow: 0 0 7px rgb(27, 27, 27); display: block; } @@ -105,6 +118,10 @@ } } +.pswp__button--close { + border-radius: 15%; +} + .gallery-button { position: relative; z-index: 100; diff --git a/src/sass/partials/_modern_button.scss b/src/sass/partials/_modern_button.scss index 38081857a..675439f0c 100644 --- a/src/sass/partials/_modern_button.scss +++ b/src/sass/partials/_modern_button.scss @@ -1,19 +1,26 @@ .round-btn { width: 5em; height: 5em; - border-radius: 50%; - border: 2px solid $borderColor; - background: radial-gradient(grey, $mainColor, $hoverColor); + border-radius: 15%; + // border: 2px solid $borderColor; + background: #1d1d1d; display: inline-block; color: $buttonFontColor; text-decoration: none; - margin: auto; + // margin: auto; text-align: center; font-size: 1em; + flex: none; position: relative; z-index: 10; span { - display: none; + display: block; + position: absolute; + bottom: 10%; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; } &:active, &:focus, @@ -24,7 +31,7 @@ font-size: 1.5em; margin: 0; position: absolute; - top: 50%; + top: 35%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); diff --git a/template/custom.template.php b/template/custom.template.php index 8f7057b6f..f9c63ebb5 100644 --- a/template/custom.template.php +++ b/template/custom.template.php @@ -49,7 +49,7 @@ -
+
CUPS diff --git a/template/gallery.template.php b/template/gallery.template.php index 25b712ecc..d1be10a59 100644 --- a/template/gallery.template.php +++ b/template/gallery.template.php @@ -49,7 +49,7 @@
-
+
CUPS