From ce7a5fa0a776ecc03b9e3fd3890285c15d2b315e Mon Sep 17 00:00:00 2001
From: Andreas Blaesius <andi@unlegacy-android.org>
Date: Mon, 20 Jun 2022 21:21:04 +0200
Subject: [PATCH] ui: rework UI style handling, make UI and button style
 independent

Change-Id: I6a12c936f2fdea4d0571778fa5e9fb7a0fbc3587
---
 admin/debugpanel.php                          | 20 +++--
 admin/diskusage.php                           | 11 ++-
 admin/index.php                               | 27 +++---
 chromakeying.php                              | 14 +--
 dependencies.php                              | 13 +--
 gallery.php                                   |  7 +-
 index.php                                     |  7 +-
 lib/configsetup.inc.php                       |  8 +-
 livechroma.php                                | 18 ++--
 login/index.php                               | 32 ++++---
 manual/index.php                              | 22 +++--
 resources/lang/de.json                        |  2 -
 resources/lang/en.json                        |  2 -
 resources/lang/es.json                        |  2 -
 resources/lang/fr.json                        |  2 -
 resources/lang/it.json                        |  2 -
 resources/lang/pl.json                        |  1 -
 slideshow/index.php                           |  5 +-
 src/js/gallery.js                             |  2 +-
 src/sass/classic_admin.scss                   | 24 +++++-
 src/sass/classic_chromakeying.scss            |  2 +-
 src/sass/classic_live_chromakeying.scss       |  9 +-
 src/sass/classic_rounded_admin.scss           |  1 +
 src/sass/classic_rounded_chromakeying.scss    |  1 +
 .../classic_rounded_live_chromakeying.scss    |  1 +
 src/sass/classic_rounded_style.scss           |  1 +
 src/sass/classic_style.scss                   | 43 +++++++++-
 src/sass/login.scss                           |  1 +
 src/sass/manual.scss                          | 51 +++++++----
 src/sass/modern_admin.scss                    | 20 -----
 src/sass/modern_live_chromakeying.scss        |  2 +-
 .../modern_squared_live_chromakeying.scss     |  1 -
 src/sass/modern_squared_style.scss            | 15 +++-
 src/sass/modern_style.scss                    | 11 +--
 src/sass/partials/_button.scss                | 66 +++++++++-----
 src/sass/partials/_gallery.scss               | 37 ++++++--
 src/sass/partials/_modern_gallery.scss        | 53 ------------
 src/sass/partials/_shape.scss                 | 25 ++++++
 src/sass/partials/_sidenav.scss               |  4 +
 src/sass/partials/_squared_gallery.scss       | 44 ----------
 src/sass/photoswipe-bottom.scss               |  6 +-
 src/sass/rounded.scss                         | 85 -------------------
 src/sass/slideshow.scss                       |  1 +
 src/sass/update.scss                          |  1 +
 src/sass/welcome.scss                         |  3 +-
 template/classic.template.php                 |  4 +-
 template/classic_rounded.template.php         |  1 +
 template/gallery.template.php                 |  8 +-
 template/modern.template.php                  |  4 +-
 template/pswp.template.php                    | 12 ++-
 template/send-mail.template.php               |  9 +-
 update.php                                    | 18 ++--
 welcome.php                                   |  8 +-
 53 files changed, 365 insertions(+), 404 deletions(-)
 create mode 100644 src/sass/classic_rounded_admin.scss
 create mode 100644 src/sass/classic_rounded_chromakeying.scss
 create mode 100644 src/sass/classic_rounded_live_chromakeying.scss
 create mode 100644 src/sass/classic_rounded_style.scss
 delete mode 100644 src/sass/partials/_modern_gallery.scss
 create mode 100644 src/sass/partials/_shape.scss
 delete mode 100644 src/sass/partials/_squared_gallery.scss
 delete mode 100644 src/sass/rounded.scss
 create mode 100644 template/classic_rounded.template.php

diff --git a/admin/debugpanel.php b/admin/debugpanel.php
index a840c18c8..277ad37e3 100644
--- a/admin/debugpanel.php
+++ b/admin/debugpanel.php
@@ -14,6 +14,10 @@
     header('location: ../login');
     exit();
 }
+
+$uiShape = 'shape--' . $config['ui']['style'];
+$btnShape = 'shape--' . $config['ui']['button'];
+$btnClass = 'adminnavlistelement ' . $btnShape . ' noborder';
 ?>
 <!DOCTYPE html>
 <html>
@@ -89,13 +93,13 @@ function html_src_indent($num)
                 echo '<ul class="adminnavlist" id="navlist">';
                 html_src_indent(++$indent);
 
-                echo '<li><a class="adminnavlistelement" href="#myconfig" id="nav-myconfig"><div><span data-i18n="myconfig">myconfig</span></div></a></li>';
-                echo '<li><a class="adminnavlistelement" href="#remotebuzzerlog" id="nav-remotebuzzerlog"><div><span data-i18n="remotebuzzer">remotebuzzer</span></div></a></li>';
-                echo '<li><a class="adminnavlistelement" href="#synctodrivelog" id="nav-synctodrivelog"><div><span data-i18n="synctodrive">synctodrive</span></div></a></li>';
-                echo '<li><a class="adminnavlistelement" href="#devlog" id="nav-devlog"><div><span data-i18n="devlog">devlog</span></div></a></li>';
-                echo '<li><a class="adminnavlistelement" href="#serverprocesses" id="nav-serverprocesses"><div><span data-i18n="serverprocesses">serverprocesses</span></div></a></li>';
-                echo '<li><a class="adminnavlistelement" href="#bootconfig" id="nav-bootconfig"><div><span data-i18n="bootconfig">bootconfig</span></div></a></li>';
-                echo '<li><a class="adminnavlistelement" href="#githead" id="nav-githead"><div><span data-i18n="githead">githead</span></div></a></li>';
+                echo '<li><a class="'. $btnClass .'" href="#myconfig" id="nav-myconfig"><div><span data-i18n="myconfig">myconfig</span></div></a></li>';
+                echo '<li><a class="'. $btnClass .'" href="#remotebuzzerlog" id="nav-remotebuzzerlog"><div><span data-i18n="remotebuzzer">remotebuzzer</span></div></a></li>';
+                echo '<li><a class="'. $btnClass .'" href="#synctodrivelog" id="nav-synctodrivelog"><div><span data-i18n="synctodrive">synctodrive</span></div></a></li>';
+                echo '<li><a class="'. $btnClass .'" href="#devlog" id="nav-devlog"><div><span data-i18n="devlog">devlog</span></div></a></li>';
+                echo '<li><a class="'. $btnClass .'" href="#serverprocesses" id="nav-serverprocesses"><div><span data-i18n="serverprocesses">serverprocesses</span></div></a></li>';
+                echo '<li><a class="'. $btnClass .'" href="#bootconfig" id="nav-bootconfig"><div><span data-i18n="bootconfig">bootconfig</span></div></a></li>';
+                echo '<li><a class="'. $btnClass .'" href="#githead" id="nav-githead"><div><span data-i18n="githead">githead</span></div></a></li>';
         
                 html_src_indent(--$indent);
                 echo '</ul>';
@@ -104,7 +108,7 @@ function html_src_indent($num)
 <!-- Settings page content -->
 <form  autocomplete="off">
 <div class="admincontent" id="admincontentpage">
-	<div class="debugcontent"> 
+	<div class="debugcontent <?php echo $uiShape; ?>"> 
 	</div>
 </div>
         <script src="../node_modules/whatwg-fetch/dist/fetch.umd.js"></script>
diff --git a/admin/diskusage.php b/admin/diskusage.php
index bd10f7d59..ff81c89d6 100644
--- a/admin/diskusage.php
+++ b/admin/diskusage.php
@@ -16,6 +16,8 @@
     exit();
 }
 
+$btnShape = 'shape--' . $config['ui']['button'];
+$uiShape = 'shape--' . $config['ui']['style'];
 ?>
 
 <!DOCTYPE html>
@@ -43,19 +45,16 @@
 	<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="../resources/css/login.css" />
-	<?php if ($config['ui']['rounded_corners']): ?>
-	<link rel="stylesheet" href="../resources/css/rounded.css" />
-	<?php endif; ?>
 	<?php if (is_file("../private/overrides.css")): ?>
 	<link rel="stylesheet" href="../private/overrides.css" />
 	<?php endif; ?>
 </head>
 
 <body class="loginbody">
-	<div class="login-panel">
+	<div class="login-panel <?php echo $uiShape; ?>">
 		<h2><?=$config['ui']['branding']?> <span data-i18n="disk_usage"></span></h2>
-		<a class="btn btn--tiny btn--flex back-to-admin" href="./"><i class="fa fa-arrow-left"></i></a>
-		<button class="download-zip-btn btn btn--tiny btn--flex">
+		<a class="btn btn--tiny btn--flex <?php echo $btnShape; ?> back-to-admin" href="./"><i class="fa fa-arrow-left"></i></a>
+		<button class="btn btn--tiny btn--flex <?php echo $btnShape; ?> download-zip-btn ">
 			<span data-i18n="download_zip"></span>
 		</button>
 		<hr>
diff --git a/admin/index.php b/admin/index.php
index 47285378a..7c33adb2f 100644
--- a/admin/index.php
+++ b/admin/index.php
@@ -14,6 +14,9 @@
     header('location: ../login');
     exit();
 }
+
+$btnShape = 'shape--' . $config['ui']['button'];
+$uiShape = 'shape--' . $config['ui']['style'];
 ?>
 <!DOCTYPE html>
 <html>
@@ -34,9 +37,9 @@
         <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/<?php echo $config['ui']['style']; ?>_admin.css">
-	<?php if (is_file("../private/overrides.css")): ?>
-	<link rel="stylesheet" href="../private/overrides.css" />
-	<?php endif; ?>
+        <?php if (is_file("../private/overrides.css")): ?>
+        <link rel="stylesheet" href="../private/overrides.css" />
+        <?php endif; ?>
 </head>
 <body>
 <!-- NavBar content -->
@@ -130,7 +133,7 @@ function isElementHidden($element_class, $setting)
                         */
                         
         
-                        echo '<li><a class="'.isElementHidden('adminnavlistelement',$fields).'" href="#'.$section.'" id="nav-'.$section.'"><div><span data-i18n="'.$section.'">'.$section.'</span></div></a></li>';
+                        echo '<li><a class="'.isElementHidden('adminnavlistelement ',$fields). $btnShape . ' noborder" href="#'.$section.'" id="nav-'.$section.'"><div><span data-i18n="'.$section.'">'.$section.'</span></div></a></li>';
         
                 }
         
@@ -142,7 +145,7 @@ function isElementHidden($element_class, $setting)
 <form  autocomplete="off">
 
         <div class="admincontent" id="admincontentpage">
-                    <button class="save-admin-btn" id="save-admin-btn">
+                    <button class="save-admin-btn <?php echo $btnShape; ?>" id="save-admin-btn">
                      <span class="save"><span data-i18n="save"></span></span>
                      <span class="saving"><i class="fa fa-circle-o-notch fa-spin fa-fw"></i><span data-i18n="saving"></span></span>
                      <span class="success"><i class="fa fa-check"></i><span data-i18n="success"></span></span>
@@ -160,10 +163,10 @@ function isElementHidden($element_class, $setting)
                         html_src_indent($indent++);
         
                         echo '<!-- SECTION '.$section.'-->';
-                        echo '<div class="'.isElementHidden('setting_section',$fields).'" id="'.$section.'">';
+                        echo '<div class="'.isElementHidden('setting_section ',$fields). $uiShape . ' noborder" id="'.$section.'">';
         
                         html_src_indent($indent);
-                        echo '<h1 class="setting_section_heading"> <span data-i18n="'.$section.'">'.$section.'</span></h1>';
+                        echo '<h1 class="setting_section_heading '. $uiShape . ' noborder"> <span data-i18n="'.$section.'">'.$section.'</span></h1>';
         
                         $col = 0;
                         foreach($fields as $key => $setting)
@@ -189,7 +192,7 @@ function isElementHidden($element_class, $setting)
                                                 echo '<div class="tooltip">';
                                                 echo '<label class="settinglabel" data-i18n="'.$i18ntag.'">'.$i18ntag.'</label>';
                                                 echo '<span class="tooltiptext" data-i18n="manual:'.$i18ntag.'">manual:'.$i18ntag.'</span></div>';
-                                                echo '<input class="settinginput" type="'.($setting['type'] === 'number' ? 'number' : 'text').'" name="'.$setting['name'].'" value="'.$setting['value'].'" placeholder="'.$setting['placeholder'].'"/>';
+                                                echo '<input class="settinginput ' . $uiShape . '-s noborder" type="'.($setting['type'] === 'number' ? 'number' : 'text').'" name="'.$setting['name'].'" value="'.$setting['value'].'" placeholder="'.$setting['placeholder'].'"/>';
                                                 break;
                                         case 'range':
                                                 echo '<div class="tooltip">';
@@ -201,7 +204,7 @@ function isElementHidden($element_class, $setting)
                                                 break;
                                         case 'color':
                                                 echo '<label class="settinglabel" data-i18n="'.$i18ntag.'"> '.$i18ntag.'</label>';
-                                                echo '<input class="settinginput color" type="color" name="'.$setting['name'].'" value="'.$setting['value'].'" placeholder="'.$setting['placeholder'].'"/>';
+                                                echo '<input class="settinginput color ' . $uiShape . '-s noborder" type="color" name="'.$setting['name'].'" value="'.$setting['value'].'" placeholder="'.$setting['placeholder'].'"/>';
                                                 break;
                                         case 'hidden':
                                                 echo '<input type="hidden" name="'.$setting['name'].'" value="'.$setting['value'].'"/>';
@@ -210,7 +213,7 @@ function isElementHidden($element_class, $setting)
                                                 echo '<div class="tooltip"><label class="settinglabel"><span data-i18n="'.$i18ntag.'">'.$i18ntag.'</span></label>';
                                                 echo '<span class="tooltiptext" data-i18n="manual:'.$i18ntag.'">manual:'.$i18ntag.'</span></div>';                                      
                                                 echo '<label class="toggle settinginput"> <input type="checkbox" '.(($setting['value'] == 'true')?' checked="checked"':'').' name="'.$setting['name'].'" value="true"/>';
-                                                echo '<span class="slider">';
+                                                echo '<span class="slider ' . $btnShape . ' noborder">';
                                                 if ($setting['value'] == 'true')
                                                 {
                                                         echo '<label class="toggleTextON" data-i18n="adminpanel_toggletextON"></label><label class="toggleTextOFF hidden" data-i18n="adminpanel_toggletextOFF"></label>';
@@ -225,7 +228,7 @@ function isElementHidden($element_class, $setting)
                                                 echo '<div class="tooltip">';
                                                 echo '<label class="settinglabel" data-i18n="'.$i18ntag.'">'.$i18ntag.'</label>';
                                                 echo '<span class="tooltiptext" data-i18n="manual:'.$i18ntag.'">manual:'.$i18ntag.'</span></div>';                                      
-                                                echo '<select class="settinginput'.($setting['type'] === 'multi-select' ? ' multi-select' : '');
+                                                echo '<select class="settinginput ' . $uiShape . '-s noborder ' .($setting['type'] === 'multi-select' ? ' multi-select' : '');
                                                 echo '" name="'.$setting['name'] . ($setting['type'] === 'multi-select' ? '[]' : '');
                                                 echo '"' . ($setting['type'] === 'multi-select' ? ' multiple="multiple"' : '') . '>';
                                                         foreach($setting['options'] as $val => $option) {
@@ -241,7 +244,7 @@ function isElementHidden($element_class, $setting)
                                              echo '<div class="tooltip">';
                                              echo '<label class="settinglabel" data-i18n="'.$i18ntag.'">'.$i18ntag.'</label>';
                                              echo '<span class="tooltiptext" data-i18n="manual:'.$i18ntag.'">manual:'.$i18ntag.'</span></div>';
-                                             echo '<div><button class="adminpanel-setting-btn" id="'.$setting['value'].'">';
+                                             echo '<div><button class="adminpanel-setting-btn '. $btnShape .'" id="'.$setting['value'].'">';
                                              switch ($key) {
                                                     case 'reset_button':
                                                          echo '<span class="save"><span data-i18n="reset"></span></span>';
diff --git a/chromakeying.php b/chromakeying.php
index 16e2f894b..44930ca77 100644
--- a/chromakeying.php
+++ b/chromakeying.php
@@ -5,7 +5,6 @@
     die('No or invalid file provided');
 }
 
-$btnClass = 'btn btn--' . $config['ui']['button'];
 $filename = $_GET['filename'];
 $keyingimage = $config['foldersRoot']['keying'] . DIRECTORY_SEPARATOR . $filename;
 
@@ -24,6 +23,10 @@
     $keying_possible = false;
     $mainimage = 'resources/img/bg.jpg';
 }
+
+$btnClass = 'btn btn--' . $config['ui']['button'];
+$btnShape = 'shape--' . $config['ui']['button'];
+$uiShape = 'shape--' . $config['ui']['style'];
 ?>
 <!doctype html>
 <html>
@@ -47,9 +50,6 @@
 		<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="resources/css/<?php echo $config['ui']['style']; ?>_chromakeying.css" />
-		<?php if ($config['ui']['rounded_corners']): ?>
-		<link rel="stylesheet" href="resources/css/rounded.css" />
-		<?php endif; ?>
 		<?php if (is_file("private/overrides.css")): ?>
 		<link rel="stylesheet" href="private/overrides.css" />
 		<?php endif; ?>
@@ -57,8 +57,8 @@
 <body data-main-image="<?=$mainimage?>">
 	<div class="chromawrapper rotarygroup">
 	<?php if ($keying_possible): ?>
-		<div class="canvasWrapper initial">
-			<canvas id="mainCanvas"></canvas>
+		<div class="canvasWrapper <?php echo $uiShape; ?> noborder initial">
+			<canvas class="<?php echo $uiShape; ?>" id="mainCanvas"></canvas>
 		</div>
 
 		<div style="padding-top:10px;text-align:center;">
@@ -67,7 +67,7 @@
 				$cdir = scandir($dir);
 				foreach ($cdir as $key => $value) {
 					if (!in_array($value, array(".","..")) && !is_dir($dir.$value)) {
-						echo '<img src="'.$dir.$value.'" class="backgroundPreview rotaryfocus" onclick="setBackgroundImage(this.src)">';
+						echo '<img src="'.$dir.$value.'" class="backgroundPreview '. $uiShape .' rotaryfocus" onclick="setBackgroundImage(this.src)">';
 					}
 				}
 			?>
diff --git a/dependencies.php b/dependencies.php
index 75ff5cc1e..2af0fd75f 100644
--- a/dependencies.php
+++ b/dependencies.php
@@ -16,6 +16,10 @@
     header('location: login');
     exit();
 }
+
+$btnClass = 'btn btn--' . $config['ui']['button'] . ' dependencies-btn';
+$btnShape = 'shape--' . $config['ui']['button'];
+$uiShape = 'shape--' . $config['ui']['style'];
 ?>
 <!DOCTYPE html>
 <html>
@@ -43,9 +47,6 @@
 	<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css" />
 	<link rel="stylesheet" href="resources/css/<?php echo $config['ui']['style']; ?>_style.css" />
 	<link rel="stylesheet" href="resources/css/update.css" />
-	<?php if ($config['ui']['rounded_corners'] && $config['ui']['style'] === 'classic'): ?>
-	<link rel="stylesheet" href="resources/css/rounded.css" />
-	<?php endif; ?>
 	<?php if (is_file("private/overrides.css")): ?>
 	<link rel="stylesheet" href="private/overrides.css" />
 	<?php endif; ?>
@@ -53,15 +54,15 @@
 
 <body class="updatewrapper">
 
-	<div class="white-box" id="white-box">
+	<div class="white-box <?php echo $uiShape; ?>" id="white-box">
 		<h2><?=$config['ui']['branding']?> dependencies check</h2>
 		<p><span data-i18n="os_check"></span></p>
 	</div>
 
 	<div>
-		<a href="./" class="btn btn--<?php echo $config['ui']['button']; ?> dependencies-btn"><i class="fa fa-home"></i> <span data-i18n="home"></span></a>
+		<a href="./" class="<?php echo $btnClass; ?>"><i class="fa fa-home"></i> <span data-i18n="home"></span></a>
 
-		<a href="admin" class="btn btn--<?php echo $config['ui']['button']; ?> dependencies-btn"><i class="fa fa-cog"></i> <span data-i18n="admin_panel"></span></a>
+		<a href="admin" class="<?php echo $btnClass; ?>"><i class="fa fa-cog"></i> <span data-i18n="admin_panel"></span></a>
 	</div>
 
 	<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
diff --git a/gallery.php b/gallery.php
index 347cf9a54..e448b87fd 100644
--- a/gallery.php
+++ b/gallery.php
@@ -20,6 +20,10 @@
 
 $imagelist = ($config['gallery']['newest_first'] === true) ? array_reverse($images) : $images;
 
+$btnShape = 'shape--' . $config['ui']['button'];
+$uiShape = 'shape--' . $config['ui']['style'];
+$btnClass = 'btn btn--' . $config['ui']['button'];
+
 $GALLERY_FOOTER = false;
 ?>
 <!DOCTYPE html>
@@ -52,9 +56,6 @@
 	<?php if ($config['gallery']['bottom_bar']): ?>
 	<link rel="stylesheet" href="resources/css/photoswipe-bottom.css" />
 	<?php endif; ?>
-	<?php if ($config['ui']['rounded_corners']): ?>
-	<link rel="stylesheet" href="resources/css/rounded.css" />
-	<?php endif; ?>
 	<?php if (is_file("private/overrides.css")): ?>
 	<link rel="stylesheet" href="private/overrides.css" />
 	<?php endif; ?>
diff --git a/index.php b/index.php
index f609d1fbb..b806fb81b 100644
--- a/index.php
+++ b/index.php
@@ -37,6 +37,8 @@
         $galleryIcon = 'fa-picture-o';
     }
     $btnClass = 'btn btn--' . $config['ui']['button'];
+    $btnShape = 'shape--' . $config['ui']['button'];
+    $uiShape = 'shape--' . $config['ui']['style'];
     $GALLERY_FOOTER = true;
 } else {
     header('location: ' . $config['protect']['index_redirect']);
@@ -73,9 +75,6 @@
 	<?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'): ?>
-	<link rel="stylesheet" href="resources/css/rounded.css" />
-	<?php endif; ?>
 	<?php if (is_file("private/overrides.css")): ?>
 	<link rel="stylesheet" href="private/overrides.css" />
 	<?php endif; ?>
@@ -91,7 +90,7 @@
 		<!-- image Filter Pane -->
 		<?php if ($config['filters']['enabled']): ?>
 		<div id="mySidenav" class="dragscroll sidenav rotarygroup">
-			<a href="#" class="closebtn <?php echo $btnClass; ?> rotaryfocus"><i class="fa fa-times"></i></a>
+			<a href="#" class="<?php echo $btnClass; ?> closebtn rotaryfocus"><i class="fa fa-times"></i></a>
 
 			<?php foreach(AVAILABLE_FILTERS as $filter => $name): ?>
 				<?php if (!in_array($filter, $config['filters']['disabled'])): ?>
diff --git a/lib/configsetup.inc.php b/lib/configsetup.inc.php
index fe5b2fc03..919c69274 100644
--- a/lib/configsetup.inc.php
+++ b/lib/configsetup.inc.php
@@ -1840,6 +1840,7 @@
             'placeholder' => $defaultConfig['ui']['style'],
             'options' => [
                 'classic' => 'classic',
+                'classic_rounded' => 'classic rounded',
                 'modern' => 'modern',
                 'modern_squared' => 'squared',
                 'custom' => 'custom',
@@ -1853,6 +1854,7 @@
             'placeholder' => $defaultConfig['ui']['button'],
             'options' => [
                 'classic' => 'classic',
+                'classic_rounded' => 'classic_rounded',
                 'modern' => 'modern',
                 'modern_squared' => 'squared',
                 'custom' => 'custom',
@@ -1938,12 +1940,6 @@
             'name' => 'ui[decore_lines]',
             'value' => $config['ui']['decore_lines'],
         ],
-        'ui_rounded_corners' => [
-            'view' => 'expert',
-            'type' => 'checkbox',
-            'name' => 'ui[rounded_corners]',
-            'value' => $config['ui']['rounded_corners'],
-        ],
         'colors_primary' => [
             'view' => 'expert',
             'type' => 'color',
diff --git a/livechroma.php b/livechroma.php
index 624f018e5..7ddd1d14b 100644
--- a/livechroma.php
+++ b/livechroma.php
@@ -19,6 +19,9 @@
     $imagelist = $config['gallery']['newest_first'] === true ? array_reverse($images) : $images;
 
     $btnClass = 'btn btn--' . $config['ui']['button'] . ' livechroma-btn';
+    $btnShape = 'shape--' . $config['ui']['button'];
+    $uiShape = 'shape--' . $config['ui']['style'];
+
     $GALLERY_FOOTER = false;
 } else {
     header('location: ' . $config['protect']['index_redirect']);
@@ -52,9 +55,6 @@
 		<?php if ($config['gallery']['bottom_bar']): ?>
 		<link rel="stylesheet" href="resources/css/photoswipe-bottom.css" />
 		<?php endif; ?>
-		<?php if ($config['ui']['rounded_corners']): ?>
-		<link rel="stylesheet" href="resources/css/rounded.css" />
-		<?php endif; ?>
 		<?php if (is_file("private/overrides.css")): ?>
 		<link rel="stylesheet" href="private/overrides.css" />
 		<?php endif; ?>
@@ -75,11 +75,11 @@
 
 		</div>
 
-		<div class="canvasWrapper initial">
-			<canvas id="mainCanvas"></canvas>
+		<div class="canvasWrapper <?php echo $uiShape; ?> noborder initial">
+			<canvas class="<?php echo $uiShape; ?> noborder" id="mainCanvas"></canvas>
 		</div>
 
-		<div class="chromaNote">
+		<div class="chromaNote <?php echo $uiShape ?>">
 			<span data-i18n="chromaInfoBefore"></span>
 		</div>
 
@@ -104,13 +104,13 @@
 		<!-- Result Page -->
 		<div class="stages" id="result"></div>
 
-		<div class="backgrounds"> 
+		<div class="backgrounds <?php echo $uiShape ?>">
 			<?php
 				$dir = $config['keying']['background_path'] . DIRECTORY_SEPARATOR;
 				$cdir = scandir($dir);
 				foreach ($cdir as $key => $value) {
 					if (!in_array($value, array(".","..")) && !is_dir($dir.$value)) {
-						echo '<img src="'.$dir.$value.'" class="backgroundPreview rotaryfocus" onclick="setBackgroundImage(this.src)">';
+						echo '<img src="'.$dir.$value.'" class="' . $uiShape . ' backgroundPreview rotaryfocus" onclick="setBackgroundImage(this.src)">';
 					}
 				}
 			?>
@@ -121,7 +121,7 @@
 			<?php if ($config['picture']['allow_delete']): ?>
 			<a href="#" class="<?php echo $btnClass; ?> deletebtn livechroma"><i class="fa fa-trash"></i> <span data-i18n="delete"></span></a>
 			<?php endif; ?>
-			<a href="#" class="reloadPage <?php echo $btnClass; ?> livechroma rotaryfocus"><i class="fa fa-refresh"></i> <span data-i18n="reload"></span></a>
+			<a href="#" class="<?php echo $btnClass; ?> reloadPage livechroma rotaryfocus"><i class="fa fa-refresh"></i> <span data-i18n="reload"></span></a>
 		</div>
 	</div>
 	<div class="rotarygroup">
diff --git a/login/index.php b/login/index.php
index 41626b4a7..31b69e32b 100644
--- a/login/index.php
+++ b/login/index.php
@@ -19,7 +19,8 @@
 }
 // END LOGIN
 
-
+$btnClass = 'btn btn--login shape--' . $config['ui']['button'];
+$uiShape = 'shape--' . $config['ui']['style'];
 ?>
 <!DOCTYPE html>
 <html>
@@ -46,16 +47,13 @@
 	<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="../resources/css/login.css" />
-	<?php if ($config['ui']['rounded_corners']): ?>
-	<link rel="stylesheet" href="../resources/css/rounded.css" />
-	<?php endif; ?>
 	<?php if (is_file("../private/overrides.css")): ?>
 	<link rel="stylesheet" href="../private/overrides.css" />
 	<?php endif; ?>
 </head>
 
 <body class="loginbody">
-	<div class="login-panel">
+	<div class="login-panel <?php echo $uiShape; ?>">
 		<h2><?=$config['ui']['branding']?> Login</h2>
 		<hr>
 		<?php if($config['login']['enabled'] && !(isset($_SESSION['auth']) && $_SESSION['auth'] === true)): ?>
@@ -74,28 +72,28 @@
 		<hr>
 		<?php endif; ?>
 		<?php if(!$config['protect']['admin'] || (!$config['protect']['localhost_admin'] && $_SERVER['REMOTE_ADDR'] === $_SERVER['SERVER_ADDR']) || !$config['login']['enabled'] || (isset($_SESSION['auth']) && $_SESSION['auth'] === true)): ?>
-		<p><a href="../admin" class="btn btn--login"><i class="fa fa-cog"></i> <span data-i18n="admin_panel"></span></a></p>
-		<p><a href="../dependencies.php" class="btn btn--login"><i class="fa fa-list-ul"></i> <span data-i18n="dependencies_check"></span></a></p>
+		<p><a href="../admin" class="<?php echo $btnClass; ?>"><i class="fa fa-cog"></i> <span data-i18n="admin_panel"></span></a></p>
+		<p><a href="../dependencies.php" class="<?php echo $btnClass; ?>"><i class="fa fa-list-ul"></i> <span data-i18n="dependencies_check"></span></a></p>
 		<?php endif; ?>
 		<?php if(!$config['protect']['update'] || (!$config['protect']['localhost_update'] && $_SERVER['REMOTE_ADDR'] === $_SERVER['SERVER_ADDR']) || !$config['login']['enabled'] || (isset($_SESSION['auth']) && $_SESSION['auth'] === true)): ?>
-		<p><a href="../update.php" class="btn btn--login"><i class="fa fa-tasks"></i> <span data-i18n="updater"></span></a></p>
+		<p><a href="../update.php" class="<?php echo $btnClass; ?>"><i class="fa fa-tasks"></i> <span data-i18n="updater"></span></a></p>
 		<?php endif; ?>
-		<p><a href="../gallery.php" class="btn btn--login"><i class="fa fa-th"></i> <span data-i18n="gallery"></span></a></p>
-		<p><a href="../slideshow" class="btn btn--login"><i class="fa fa-play"></i> <span data-i18n="slideshow"></span></a></p>
+		<p><a href="../gallery.php" class="<?php echo $btnClass; ?>"><i class="fa fa-th"></i> <span data-i18n="gallery"></span></a></p>
+		<p><a href="../slideshow" class="<?php echo $btnClass; ?>"><i class="fa fa-play"></i> <span data-i18n="slideshow"></span></a></p>
 		<?php if(!$config['protect']['index'] || (!$config['protect']['localhost_index'] && $_SERVER['REMOTE_ADDR'] === $_SERVER['SERVER_ADDR']) || !$config['login']['enabled'] || (isset($_SESSION['auth']) && $_SESSION['auth'] === true)): ?>
-		<p><a href="../livechroma.php" class="btn btn--login"><i class="fa fa-paint-brush"></i> <span data-i18n="livechroma"></span></a></p>
+		<p><a href="../livechroma.php" class="<?php echo $btnClass; ?>"><i class="fa fa-paint-brush"></i> <span data-i18n="livechroma"></span></a></p>
 		<?php endif; ?>
 		<?php if(!$config['protect']['manual'] || (!$config['protect']['localhost_manual'] && $_SERVER['REMOTE_ADDR'] === $_SERVER['SERVER_ADDR']) || !$config['login']['enabled'] || (isset($_SESSION['auth']) && $_SESSION['auth'] === true)): ?>
-		<p><a href="../manual/faq.php" class="btn btn--login" title="FAQ" target="newwin"><i class="fa fa-question-circle" aria-hidden="true"></i> <span data-i18n="show_faq"></span></a></p>
-		<p><a href="../manual" class="btn btn--login" title="Manual" target="newwin"><i class="fa fa-info-circle" aria-hidden="true"></i> <span data-i18n="show_manual"></span></a></p>
-		<p><a href="https://t.me/PhotoboothGroup" class="btn btn--login" title="Telegram" target="newwin"><i class="fa fa-telegram" aria-hidden="true"></i> <span data-i18n="telegram"></span></a></p>
+		<p><a href="../manual/faq.php" class="<?php echo $btnClass; ?>" title="FAQ" target="newwin"><i class="fa fa-question-circle" aria-hidden="true"></i> <span data-i18n="show_faq"></span></a></p>
+		<p><a href="../manual" class="<?php echo $btnClass; ?>" title="Manual" target="newwin"><i class="fa fa-info-circle" aria-hidden="true"></i> <span data-i18n="show_manual"></span></a></p>
+		<p><a href="https://t.me/PhotoboothGroup" class="<?php echo $btnClass; ?>" title="Telegram" target="newwin"><i class="fa fa-telegram" aria-hidden="true"></i> <span data-i18n="telegram"></span></a></p>
 		<?php endif; ?>
-		<p><a href="./" class="btn btn--login"><i class="fa fa-refresh"></i> <span data-i18n="reload"></span></a></p>
+		<p><a href="./" class="<?php echo $btnClass; ?>"><i class="fa fa-refresh"></i> <span data-i18n="reload"></span></a></p>
 		<?php if(!$config['protect']['index'] || (!$config['protect']['localhost_index'] && $_SERVER['REMOTE_ADDR'] === $_SERVER['SERVER_ADDR']) || !$config['login']['enabled'] || (isset($_SESSION['auth']) && $_SESSION['auth'] === true)): ?>
-		<p><a href="../" class="btn btn--login" ><i class="fa fa-times"></i> <span data-i18n="close"></span></a></p>
+		<p><a href="../" class="<?php echo $btnClass; ?>" ><i class="fa fa-times"></i> <span data-i18n="close"></span></a></p>
 		<?php endif; ?>
 		<?php if(isset($_SESSION['auth']) && $_SESSION['auth'] === true): ?>
-		<p><a href="logout.php" class="btn btn--login"><i class="fa fa-sign-out"></i> <span data-i18n="logout"></span></a></p>
+		<p><a href="logout.php" class="<?php echo $btnClass; ?>"><i class="fa fa-sign-out"></i> <span data-i18n="logout"></span></a></p>
 		<?php endif; ?>
 	</div>
 
diff --git a/manual/index.php b/manual/index.php
index 82f5e63a2..24f91d9eb 100644
--- a/manual/index.php
+++ b/manual/index.php
@@ -15,6 +15,11 @@
     exit();
 }
 
+
+$btnShape = 'shape--' . $config['ui']['button'];
+$uiShape = 'shape--' . $config['ui']['style'];
+$btnClass = 'btn ' . $btnShape;
+
 ?>
 <!DOCTYPE html>
 <html>
@@ -36,15 +41,12 @@
 	<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="../resources/css/manual.css" />
-	<?php if ($config['ui']['rounded_corners']): ?>
-	<link rel="stylesheet" type="text/css" href="../resources/css/rounded.css" />
-	<?php endif; ?>
 	<?php if (is_file("../private/overrides.css")): ?>
 	<link rel="stylesheet" href="../private/overrides.css" />
 	<?php endif; ?>
 </head>
 <body class="manualwrapper">
-	<div class="manual-panel">
+	<div class="manual-panel <?php echo $uiShape; ?>">
 		<h2><?=$config['ui']['branding']?> Manual</h2>
 		<h3><a class="back-to-pb" href="../">Photobooth</a></h3>
 
@@ -61,7 +63,7 @@
 						if($i == 0){
 							$open = ' open init';
 						}
-						echo '<div class="panel'.$open.'"';
+						echo '<div class="panel'.$open. ' ' .$uiShape.'"';
 						switch ($fields['view'])
 						{
 							case 'expert':
@@ -76,10 +78,10 @@
 							     break;
 						};
 						echo '>';
-								echo '<div class="panel-heading">';
+								echo '<div class="panel-heading '.$uiShape.'">';
 									echo '<h3><span class="minus">-</span><span class="plus">+</span><span data-i18n="'.$panel.'">'.$panel.'</span></h3>';
 								echo '</div>';
-								echo '<div class="panel-body">';
+								echo '<div class="panel-body '.$uiShape.'">';
 
 								foreach($fields as $key => $field) {
 									if ($key == 'platform' || $key == 'view') {
@@ -130,9 +132,11 @@
 					}
 				?>
 			</br>
-			<a href="faq.php" class="btn faq-btn" title="FAQ" target="newwin"><span data-i18n="show_faq"></span> <i class="fa fa-question-circle" aria-hidden="true"></i></a></br>
+			<div>
+				<a href="faq.php" class="<?php echo $btnClass; ?> faq-btn" title="FAQ" target="newwin"><span data-i18n="show_faq"></span> <i class="fa fa-question-circle" aria-hidden="true"></i></a></br>
+				<a href="https://github.com/<?=$config['ui']['github']?>/photobooth/wiki" class="<?php echo $btnClass; ?> wiki-btn"><span data-i18n="show_wiki"></span></a>
+			</div>
 			</form>
-			<a href="https://github.com/<?=$config['ui']['github']?>/photobooth/wiki" class="btn wiki-btn"><span data-i18n="show_wiki"></span></a>
 		</div>
 	</div>
 
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'];
 ?>
 <!DOCTYPE html>
 <html>
@@ -84,9 +85,9 @@
 		?>
 		<div class="center">
 			<figure>
-				<img src="<?=$filename_photo?>" alt="<?=$image?>" />
+				<img class="<?php echo $uiShape; ?>" src="<?=$filename_photo?>" alt="<?=$image?>" />
                 <?php if ($config['gallery']['figcaption']): ?>
-                <figcaption><?=$date?></figcaption>
+                <figcaption class="<?php echo $uiShape; ?>"><?=$date?></figcaption>
                 <?php endif; ?>
 			</figure>
 		</div>
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 = $('<a class="gallery__reload rotaryfocus">');
+    const reloadElement = $('<a class="btn btn--' + config.ui.button + ' gallery__reload rotaryfocus">');
     reloadElement.append('<i class="fa fa-refresh"></i>');
     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 @@
 		<!-- Start Page -->
-		<div class="stages rotarygroup" id="start">
+		<div class="stages <?php echo $uiShape; ?> rotarygroup noborder" id="start">
 			<?php if ($config['gallery']['enabled']): ?>
 			<a class="<?php echo $btnClass; ?> gallery-button rotaryfocus" href="#"><i class="fa fa-th"></i> <span data-i18n="gallery"></span></a>
 			<?php endif; ?>
 
-			<div class="startInner">
+			<div class="startInner <?php echo $uiShape; ?> noborder">
 				<?php if ($config['event']['enabled']): ?>
 				<div class="names">
 					<?php if ($config['ui']['decore_lines']): ?>
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 @@
+<?php include('classic.template.php'); ?>
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 @@
 	<div class="gallery__inner">
 		<div class="gallery__header">
 			<h1><span data-i18n="gallery"></span></h1>
-			<a href="#" class="gallery__close close_gal rotaryfocus"><i class="fa fa-times"></i></a>
+			<a href="#" class="<?php echo $btnClass; ?> gallery__close close_gal rotaryfocus"><i class="fa fa-times"></i></a>
 		</div>
 		<div class="gallery__body" id="galimages">
 			<?php if (empty($imagelist)): ?>
@@ -37,10 +37,10 @@
 
 			<a href="<?=$filename_photo?>" class="gallery__img rotaryfocus" data-size="<?=$imageinfo[0]?>x<?=$imageinfo[1]?>"
 				data-med="<?=$filename_thumb?>" data-med-size="<?=$imageinfoThumb[0]?>x<?=$imageinfoThumb[1]?>">
-				<figure>
-					<img src="<?=$filename_thumb?>" alt="<?=$image?>" />
+				<figure class="<?php echo $uiShape; ?>">
+					<img class="<?php echo $uiShape; ?>" src="<?=$filename_thumb?>" alt="<?=$image?>" />
                     <?php if ($config['gallery']['figcaption']): ?>
-                    <figcaption><?=$date?></figcaption>
+                    <figcaption class="<?php echo $uiShape; ?>"><?=$date?></figcaption>
                     <?php endif; ?>
 				</figure>
 			</a>
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 @@
 		<!-- Start Page -->
-		<div class="stages" id="start">
-			<div class="startInner">
+		<div class="stages <?php echo $uiShape; ?> noborder" id="start">
+			<div class="startInner <?php echo $uiShape; ?> noborder">
 				<div class="divaussen">
 					<div class="divinnen">
             					<div class="divinnen2">
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 @@
                 <!--  Controls are self-explanatory. Order can be changed. -->
 
                 <div class="pswp__counter"></div>
-                <button class="pswp__button pswp__button--close rotaryfocus" title="Close (Esc)"><i class="fa fa-times"></i></button>
+                <button class="<?php echo $btnClass; ?> pswp__button pswp__button--close rotaryfocus" title="Close (Esc)"><i class="fa fa-times"></i></button>
                 <button class="pswp__button pswp__button--share rotaryfocus" title="Share"><i class="fa fa-share-alt" aria-hidden="true"></i></button>
                 <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"><i class="fa fa-arrows-alt" aria-hidden="true"></i></button>
                 <button class="pswp__button pswp__button--zoom rotaryfocus" title="Zoom in/out"><i class="fa fa-search-plus" aria-hidden="true"></i></button>
@@ -41,9 +41,9 @@
                 <button type="button" class="pswp__button pswp__button--qrcode rotaryfocus" title="QR Code"><i class="fa fa-qrcode"></i></button>
                 <?php endif; ?>
 
-		<?php if ($config['download']['enabled'] && ($_SERVER['REMOTE_ADDR'] !== $_SERVER['SERVER_ADDR'] || $config['dev']['enabled'])): ?>
-		<!-- <button type="button" class="pswp__button pswp__button--download" title="Download"><i class="fa fa-download"></i></button> -->
-		<a href="" download="" class="pswp__button pswp__button--custom-download rotaryfocus" title="Download"><i class="fa fa-download"></i></a>
+                <?php if ($config['download']['enabled'] && ($_SERVER['REMOTE_ADDR'] !== $_SERVER['SERVER_ADDR'] || $config['dev']['enabled'])): ?>
+                <!-- <button type="button" class="pswp__button pswp__button--download" title="Download"><i class="fa fa-download"></i></button> -->
+                <a href="" download="" class="pswp__button pswp__button--custom-download rotaryfocus" title="Download"><i class="fa fa-download"></i></a>
                 <?php endif; ?>
 
                 <?php if ($config['keying']['enabled']): ?>
@@ -84,7 +84,5 @@
             </div>
         </div>
     </div>
-    <div class="pswp__qr">
-
-    </div>
+    <div class="pswp__qr <?php echo $uiShape; ?>"></div>
 </div>
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 @@
-	<div class="send-mail">
+	<div class="<?php echo $uiShape; ?> send-mail">
 		<i class="fa fa-times" id="send-mail-close"></i>
 		<?php if ($config['mail']['send_all_later']): ?>
 		    <p data-i18n="insertMailToDB"></p>
@@ -6,17 +6,16 @@
 		    <p data-i18n="insertMail"></p>
 		<?php endif; ?>
 		<form id="send-mail-form" style="margin: 0;">
-			<input class="mail-form-input" size="35" type="email" name="sendTo">
+			<input class="<?php echo $btnShape; ?> mail-form-input" size="35" type="email" name="sendTo">
 			<input id="mail-form-image" type="hidden" name="image" value="">
 
 			<?php if ($config['mail']['send_all_later']): ?>
 				<input type="checkbox" id="mail-form-send-link" name="send-link" checked="checked" value="yes" style="opacity: 0">
 				<label data-i18n="sendAllMail" for="mail-form-send-link" style="opacity: 0"></label>
-				<button class="mail-form-input btn rotaryfocus" name="submit" type="submit" value="Send"><span data-i18n="add"></span></button>
+				<button class="btn <?php echo $btnShape; ?> mail-form-input rotaryfocus" name="submit" type="submit" value="Send"><span data-i18n="add"></span></button>
 			<?php else: ?>
-				<button class="mail-form-input btn rotaryfocus" name="submit" type="submit" value="Send"><span data-i18n="send"></span></button>
+				<button class="btn <?php echo $btnShape; ?> mail-form-input rotaryfocus" name="submit" type="submit" value="Send"><span data-i18n="send"></span></button>
 			<?php endif; ?>
-
 		</form>
 
 		<div id="mail-form-message" style="max-width: 75%"></div>
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;
 ?>
 <!DOCTYPE html>
 <html>
@@ -44,9 +47,6 @@
 	<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css" />
 	<link rel="stylesheet" href="resources/css/<?php echo $config['ui']['style']; ?>_style.css" />
 	<link rel="stylesheet" href="resources/css/update.css" />
-	<?php if ($config['ui']['rounded_corners'] && $config['ui']['style'] === 'classic'): ?>
-	<link rel="stylesheet" href="resources/css/rounded.css" />
-	<?php endif; ?>
 	<?php if (is_file("private/overrides.css")): ?>
 	<link rel="stylesheet" href="private/overrides.css" />
 	<?php endif; ?>
@@ -54,21 +54,21 @@
 
 <body class="updatewrapper">
 
-	<div class="white-box" id="white-box">
+	<div class="white-box <?php echo $uiShape; ?>" id="white-box">
 		<h2><?=$config['ui']['branding']?> Updater (experimental)</h2>
 		<p><span data-i18n="os_check"></span></p>
 	</div>
 
-	<a href="#" class="gitCommit btn btn--submit"><i class="fa fa-play-circle"></i> <span data-i18n="update_git_commit"></span></a>
+	<a href="#" class="gitCommit <?php echo $btnClass; ?>"><i class="fa fa-play-circle"></i> <span data-i18n="update_git_commit"></span></a>
 
-	<a href="#" class="updateDev btn btn--submit"><i class="fa fa-play-circle"></i> <span data-i18n="update_to_dev"></span></a>
+	<a href="#" class="updateDev <?php echo $btnClass; ?>"><i class="fa fa-play-circle"></i> <span data-i18n="update_to_dev"></span></a>
 
-	<a href="#" class="updateStable btn btn--submit"><i class="fa fa-play-circle"></i> <span data-i18n="update_to_stable"></span></a>
+	<a href="#" class="updateStable <?php echo $btnClass; ?>"><i class="fa fa-play-circle"></i> <span data-i18n="update_to_stable"></span></a>
 
 	<div>
-		<a href="./" class="btn"><i class="fa fa-home"></i> <span data-i18n="home"></span></a>
+		<a href="./" class="btn <?php echo $btnShape; ?>"><i class="fa fa-home"></i> <span data-i18n="home"></span></a>
 
-		<a href="admin" class="btn"><i class="fa fa-cog"></i> <span data-i18n="admin_panel"></span></a>
+		<a href="admin" class="btn <?php echo $btnShape; ?>"><i class="fa fa-cog"></i> <span data-i18n="admin_panel"></span></a>
 	</div>
 
 	<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
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;
 ?>
 <!DOCTYPE html>
 <html>
@@ -69,14 +71,14 @@
 		<p>You are missing some translation or your language isn't supported yet? Don't worry! You can request new language support at <a href="https://github.com/andi34/photobooth/issues" target="_blank" rel="noopener noreferrer">GitHub</a>,
 		you can translate Photobooth at <a href="https://crowdin.com/project/photobooth" target="_blank" rel="noopener noreferrer">Crowdin</a>.</p>
 		<p></p>
-		<p class="security-advice"><b>Security advice</b><br><br>
+		<p class="security-advice <?php echo $uiShape; ?>"><b>Security advice</b><br><br>
 		Photobooth is not hardened against any kind of <i>targeted</i> attacks.<br>
 		It uses user defined commands for tasks like taking photos and is allowed to replace its own files for easy updating.<br>
 		Because of this it's not advised to operate Photobooth in an untrusted network and<br>
 		<b>you should absolutely not make Photobooth accessible through the internet without heavy modifications!</b></p>
 		<p></p>
 		<p>Thanks for the reading! Enjoy your Photobooth!</p>
-		<p><a href="<?=$URL;?>" class="btn btn--flex">Start Photobooth</a></p>
+		<p><a href="<?=$URL;?>" class="btn btn--flex <?php echo $btnShape; ?>">Start Photobooth</a></p>
 	</div>
 
 	<script src="node_modules/whatwg-fetch/dist/fetch.umd.js"></script>