andi34 · andi34 · Jul 4, 2022 · Jun 4, 2022 · Jun 8, 2022 · Jun 8, 2022
diff --git a/README.md b/README.md
@@ -182,3 +182,4 @@ If you like my work and like to keep me motivated you can buy me a coconut water
 - [mhellmeier](https://github.com/mhellmeier)
 - [Uwe Pieper](https://github.com/up-87)
 - [s-dinda](https://github.com/s-dinda)
+- [Moarqi](https://github.com/Moarqi)
diff --git a/admin/debugpanel.php b/admin/debugpanel.php
@@ -38,10 +38,10 @@
         <link rel="stylesheet" type="text/css" href="../node_modules/normalize.css/normalize.css">
         <link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.css">
         <link rel="stylesheet" type="text/css" href="../node_modules/selectize/dist/css/selectize.css">
-        <link rel="stylesheet" type="text/css" href="../resources/css/admin.css">
-	<?php if (is_file("../private/overrides.css")): ?>
-	<link rel="stylesheet" href="../private/overrides.css" />
-	<?php endif; ?>
+        <link rel="stylesheet" type="text/css" href="../resources/css/<?php echo $config['ui']['style']; ?>_admin.css">
+        <?php if (is_file("../private/overrides.css")): ?>
+        <link rel="stylesheet" href="../private/overrides.css" />
+        <?php endif; ?>
 </head>
 <body>
 <!-- NavBar content -->

diff --git a/admin/index.php b/admin/index.php
@@ -33,7 +33,7 @@
         <link rel="stylesheet" type="text/css" href="../node_modules/normalize.css/normalize.css">
         <link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.css">
         <link rel="stylesheet" type="text/css" href="../node_modules/selectize/dist/css/selectize.css">
-        <link rel="stylesheet" type="text/css" href="../resources/css/admin.css">
+        <link rel="stylesheet" type="text/css" href="../resources/css/<?php echo $config['ui']['style']; ?>_admin.css">
 	<?php if (is_file("../private/overrides.css")): ?>
 	<link rel="stylesheet" href="../private/overrides.css" />
 	<?php endif; ?>

diff --git a/api/admin.php b/api/admin.php
@@ -120,6 +120,9 @@
             if (!file_exists('../resources/css/custom_style.css')) {
                 copy('../resources/css/modern_style.css', '../resources/css/custom_style.css');
             }
+            if (!file_exists('../resources/css/custom_admin.css')) {
+                copy('../resources/css/modern_admin.css', '../resources/css/custom_admin.css');
+            }
             if (!file_exists('../resources/css/custom_chromakeying.css')) {
                 copy('../resources/css/modern_chromakeying.css', '../resources/css/custom_chromakeying.css');
             }

diff --git a/chromakeying.php b/chromakeying.php
@@ -5,12 +5,12 @@
     die('No or invalid file provided');
 }
 
-if ($config['ui']['style'] === 'modern') {
-	$btnClass1 = 'round-btn';
-	$btnClass2 = 'round-btn';
-} else {
+if ($config['ui']['style'] === 'classic') {
 	$btnClass1 = 'btn btn--flex';
 	$btnClass2 = 'btn';
+} else {
+	$btnClass1 = 'round-btn';
+	$btnClass2 = 'round-btn';
 }
 
 $filename = $_GET['filename'];

diff --git a/gallery.php b/gallery.php
@@ -19,6 +19,8 @@
 }
 
 $imagelist = ($config['gallery']['newest_first'] === true) ? array_reverse($images) : $images;
+
+$GALLERY_FOOTER = false;
 ?>
 <!DOCTYPE html>
 <html>
@@ -46,7 +48,7 @@
 	<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="resources/css/classic_style.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; ?>

diff --git a/index.php b/index.php
@@ -31,15 +31,16 @@
 
     $imagelist = $config['gallery']['newest_first'] === true ? array_reverse($images) : $images;
 
-    if ($config['ui']['style'] === 'modern') {
-        $btnClass1 = 'round-btn';
-        $btnClass2 = 'round-btn';
-        $galleryIcon = 'fa-picture-o';
-    } else {
+    if ($config['ui']['style'] === 'classic') {
         $btnClass1 = 'btn';
         $btnClass2 = '';
         $galleryIcon = 'fa-th';
+    } else {
+        $btnClass1 = 'round-btn';
+        $btnClass2 = 'round-btn';
+        $galleryIcon = 'fa-picture-o';
     }
+    $GALLERY_FOOTER = true;
 } else {
     header('location: ' . $config['protect']['index_redirect']);
     exit();

diff --git a/lib/configsetup.inc.php b/lib/configsetup.inc.php
@@ -1841,6 +1841,7 @@
             'options' => [
                 'classic' => 'classic',
                 'modern' => 'modern',
+                'modern_squared' => 'squared',
                 'custom' => 'custom',
             ],
             'value' => $config['ui']['style'],

diff --git a/livechroma.php b/livechroma.php
@@ -18,13 +18,14 @@
     }
     $imagelist = $config['gallery']['newest_first'] === true ? array_reverse($images) : $images;
 
-    if ($config['ui']['style'] === 'modern') {
-        $btnClass1 = 'round-btn';
-        $btnClass2 = 'round-btn';
-    } else {
+    if ($config['ui']['style'] === 'classic') {
         $btnClass1 = 'btn btn--small btn--flex';
         $btnClass2 = 'btn';
+    } else {
+        $btnClass1 = 'round-btn';
+        $btnClass2 = 'round-btn';
     }
+    $GALLERY_FOOTER = false;
 } else {
     header('location: ' . $config['protect']['index_redirect']);
     exit();

diff --git a/resources/lang/en.json b/resources/lang/en.json
@@ -569,7 +569,7 @@
   "really_delete": "Really reset according to your settings? This cannot be undone!",
   "really_delete_image": "will be deleted! This cannot be undone! Really delete picture?",
   "reboot_button": "Reboot",
-  "reload": "Reload Page",
+  "reload": "Reload",
   "remotebuzzer": "Hardware Button",
   "remotebuzzer:remotebuzzer_collagebutton": "Collage Button",
   "remotebuzzer:remotebuzzer_collagetime": "Seconds to trigger collage",

diff --git a/src/sass/admin.scss → src/sass/classic_admin.scss b/src/sass/admin.scss → src/sass/classic_admin.scss
diff --git a/src/sass/classic_style.scss b/src/sass/classic_style.scss
@@ -463,6 +463,14 @@ hr.small {
   }
 }
 
+.buttongroup {
+  display: flex;
+  justify-content: center;
+  gap: 50px;
+  padding-top: 10px;
+  padding-bottom: 5px;
+}
+
 .gallery__close:active,
 .gallery__close:hover,
 .gallery__close:focus,

diff --git a/src/sass/modern_admin.scss b/src/sass/modern_admin.scss
@@ -0,0 +1,21 @@
+@import 'classic_admin';
+
+a.adminnavlistelement,
+div.setting_section,
+.setting_section_heading,
+.save-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_squared_admin.scss b/src/sass/modern_squared_admin.scss
@@ -0,0 +1 @@
+@import 'modern_admin';
diff --git a/src/sass/modern_squared_chromakeying.scss b/src/sass/modern_squared_chromakeying.scss
@@ -0,0 +1 @@
+@import 'modern_chromakeying';
diff --git a/src/sass/modern_squared_live_chromakeying.scss b/src/sass/modern_squared_live_chromakeying.scss
@@ -0,0 +1,39 @@
+@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/modern_squared_style.scss b/src/sass/modern_squared_style.scss
@@ -0,0 +1,11 @@
+@import 'modern_style';
+@import 'partials/squared_gallery';
+.divinnen2 {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  padding: 10px;
+  margin-left: auto;
+  margin-right: auto;
+}
diff --git a/src/sass/modern_style.scss b/src/sass/modern_style.scss
@@ -1,5 +1,6 @@
 @import 'classic_style';
 @import 'partials/modern_button';
+@import 'partials/modern_gallery';
 
 html,
 body {

diff --git a/src/sass/partials/_button.scss b/src/sass/partials/_button.scss
@@ -1,3 +1,4 @@
+.gal-action-btn,
 .btn {
   padding: 20px 40px;
   border: 0 none;
@@ -40,6 +41,15 @@
   }
 }
 
+.gal-action-btn {
+  background: $hoverColor;
+  &:active,
+  &:focus,
+  &:hover {
+    opacity: 0.6;
+  }
+}
+
 .btn.save-btn,
 .btn.install-btn {
   position: absolute;

diff --git 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 {
@@ -47,10 +47,22 @@
     }
   }
 
+  &__footer {
+    width: 100%;
+    height: 100px;
+    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 {
     display: flex;
     flex-wrap: wrap;
-    overflow-y: auto;
+    overflow-y: scroll;
     justify-content: center;
 
     a {

diff --git a/src/sass/partials/_modern_button.scss b/src/sass/partials/_modern_button.scss
@@ -1,3 +1,4 @@
+.gal-action-btn,
 .round-btn {
   width: 5em;
   height: 5em;

diff --git a/src/sass/partials/_modern_gallery.scss b/src/sass/partials/_modern_gallery.scss
@@ -0,0 +1,53 @@
+.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%;
+}
+
+.gallerybtn {
+  border-radius: 50%;
+  left: 1em;
+  margin: auto;
+}
+
+.closebtn {
+  border-radius: 50%;
+  right: 1em;
+  margin: auto;
+}