adapt style

Author: mmrrqq

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';

index.php

@@ -67,17 +67,18 @@
 	<meta name="apple-mobile-web-app-capable" content="yes" />
 	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
 
-	<link rel="stylesheet" href="node_modules/normalize.css/normalize.css" />
+	<!-- <link rel="stylesheet" href="node_modules/normalize.css/normalize.css" /> -->
 	<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css" />
 	<link rel="stylesheet" href="vendor/PhotoSwipe/dist/photoswipe.css" />
 	<link rel="stylesheet" href="vendor/PhotoSwipe/dist/default-skin/default-skin.css" />
+	<!-- <link rel="stylesheet" href="vencor/pico/pico.min.css" /> -->
 	<link rel="stylesheet" href="resources/css/<?php echo $config['ui']['style']; ?>_style.css" />
 	<?php if ($config['gallery']['bottom_bar']): ?>
 	<link rel="stylesheet" href="resources/css/photoswipe-bottom.css" />
 	<?php endif; ?>
-	<?php if ($config['ui']['rounded_corners'] && $config['ui']['style'] === 'classic'): ?>
+	<!-- <?php if ($config['ui']['rounded_corners'] && $config['ui']['style'] === 'classic'): ?>
 	<link rel="stylesheet" href="resources/css/rounded.css" />
-	<?php endif; ?>
+	<?php endif; ?> -->
 	<?php if (is_file("private/overrides.css")): ?>
 	<link rel="stylesheet" href="private/overrides.css" />
 	<?php endif; ?>

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",

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) {

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;
+}

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,31 +31,42 @@
   &__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;
     margin-top: auto;
     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;

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%);

template/custom.template.php

@@ -49,7 +49,7 @@
 								<?php endif; ?>
 							</div>
 							<?php endif; ?>
-							<div class="rotarygroup">
+							<div class="buttongroup">
 							<?php if($config['button']['show_cups']): ?>
 							<a id="cups-button" class="round-btn cups-button rotaryfocus" href="#" target="newwin"><i class="fa fa-print" aria-hidden="true"></i> <span>CUPS</span></a>
 							<?php endif; ?>

template/gallery.template.php

@@ -49,7 +49,7 @@
 				<?php endif; ?>
 		</div>
         <div class="gallery__footer">
-            <div class="rotarygroup">
+            <div class="buttongroup">
                 <?php if($config['button']['show_cups']): ?>
                 <a id="cups-button" class="round-btn cups-button rotaryfocus" href="#" target="newwin"><i class="fa fa-print" aria-hidden="true"></i> <span>CUPS</span></a>
                 <?php endif; ?>