Add subcontent for shadow and background color

Add css options for background color

core/authentication/resources/views/email.htm

@@ -63,6 +63,8 @@
 			<source src="{$background_video}" type="video/mp4">
 		</video>
 		{/if}
+		<div id='background-image'></div>
+		<div id='background-color'></div>
 		<div id='page' align='center'>
 			<div id='message_container'></div>
 			<div id='default_login'>

core/authentication/resources/views/login.htm

@@ -63,6 +63,8 @@
 			<source src="{$background_video}" type="video/mp4">
 		</video>
 		{/if}
+		<div id='background-image'></div>
+		<div id='background-color'></div>
 		<div id='page' align='center'>
 			<div id='message_container'></div>
 			<div id='default_login'>

core/authentication/resources/views/totp.htm

@@ -63,6 +63,8 @@
 			<source src="{$background_video}" type="video/mp4">
 		</video>
 		{/if}
+		<div id='background-image'></div>
+		<div id='background-color'></div>
 		<div id='page' align='center'>
 			<div id='message_container'></div>
 			<div id='default_login'>

core/authentication/resources/views/totp_secret.htm

@@ -15,6 +15,8 @@
 			<source src="{$background_video}" type="video/mp4">
 		</video>
 		{/if}
+		<div id='background-image'></div>
+		<div id='background-color'></div>
 		<div id='page' align='center'>
 			<div id='default_login' style='max-width: 400px;'>
 				<a href='{$project_path}/'><img id='login_logo' style='width: {$login_logo_width}; height: {$login_logo_height};' src='{$login_logo_source}' /></a><br />

core/authentication/resources/views/username.htm

@@ -63,6 +63,8 @@
 			<source src="{$background_video}" type="video/mp4">
 		</video>
 		{/if}
+		<div id='background-image'></div>
+		<div id='background-color'></div>
 		<div id='page' align='center'>
 			<div id='message_container'></div>
 			<div id='default_login'>

themes/default/app_config.php

@@ -880,6 +880,22 @@
 		$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "false";
 		$apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the bottom border (dividing line) color (and opacity) of table data rows.";
 		$y++;
+		$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "c909eb3f-3ecf-48c6-aad1-aafbaf421a5d";
+		$apps[$x]['default_settings'][$y]['default_setting_category'] = "theme";
+		$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "subcontent_shadow_color";
+		$apps[$x]['default_settings'][$y]['default_setting_name'] = "text";
+		$apps[$x]['default_settings'][$y]['default_setting_value'] = "#737983";
+		$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "false";
+		$apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the color (and opacity) of the subcontent boxes.";
+		$y++;
+		$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "66d54130-db92-4b82-926c-96ddfcf72659";
+		$apps[$x]['default_settings'][$y]['default_setting_category'] = "theme";
+		$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "subcontent_background_color";
+		$apps[$x]['default_settings'][$y]['default_setting_name'] = "text";
+		$apps[$x]['default_settings'][$y]['default_setting_value'] = "#ffffff";
+		$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "false";
+		$apps[$x]['default_settings'][$y]['default_setting_description'] = "background color of the subcontent box.";
+		$y++;
 		$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "3b46602c-c736-43ec-a4b5-c733110dbe57";
 		$apps[$x]['default_settings'][$y]['default_setting_category'] = "theme";
 		$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "dashboard_border_color";

themes/default/css.php

@@ -242,6 +242,8 @@ $dashboard_footer_background_color = $_SESSION['theme']['dashboard_footer_backgr
 $dashboard_footer_background_color_hover = $_SESSION['theme']['dashboard_footer_background_color_hover']['text'] ?? color_adjust($dashboard_footer_background_color, 0.02);
 $dashboard_footer_dots_color = $_SESSION['theme']['dashboard_footer_dots_color']['text'] ?? '#a4aebf';
 $dashboard_footer_dots_color_hover = $_SESSION['theme']['dashboard_footer_dots_color_hover']['text'] ?? $dashboard_footer_dots_color;
+$subcontent_shadow_color = $_SESSION['theme']['subcontent_shadow_color']['text'] ?? $dashboard_shadow_color;
+$subcontent_background_color = $_SESSION['theme']['subcontent_background_color']['text'] ?? '';
 $action_bar_border_top = $_SESSION['theme']['action_bar_border_top']['text'] ?? 0;
 $action_bar_border_right = $_SESSION['theme']['action_bar_border_right']['text'] ?? 0;
 $action_bar_border_bottom = $_SESSION['theme']['action_bar_border_bottom']['text'] ?? 0;
@@ -312,36 +314,42 @@ if (!empty($_SESSION['theme'])) {
 //determine which background image/color settings to use (login or standard)
 $background_images_enabled = false;
 if (!empty($_SESSION['username'])) {
-	//logged in - use standard background images/colors
+	//logged in - use standard background images
 	if (!empty($_SESSION['theme']['background_image_enabled']) && $_SESSION['theme']['background_image_enabled']['boolean'] == 'true' && is_array($_SESSION['theme']['background_image'])) {
 		$background_images_enabled = true;
 		$background_images = $_SESSION['theme']['background_image'];
 	}
-	else {
-		$background_colors[0] = $_SESSION['theme']['background_color'][0] ?? null;
-		$background_colors[1] = $_SESSION['theme']['background_color'][1] ?? null;
+
+	//logged in - use standard background colors
+	if (!empty($_SESSION['theme']['background_image_enabled']) && !empty($_SESSION['theme']['background_color'][0]) && !empty($_SESSION['theme']['background_color'][1])) {
+		$background_colors[0] = $_SESSION['theme']['background_color'][0];
+		$background_colors[1] = $_SESSION['theme']['background_color'][1];
 	}
+	elseif (!empty($_SESSION['theme']['background_image_enabled']) && !empty($_SESSION['theme']['background_color'][0])) {
+		$background_colors[0] = $_SESSION['theme']['background_color'][0];
+	}
+
 }
 else {
-	//not logged in - try using login background images/colors
+	//not logged in - try using login background images
 	if (isset($_SESSION['theme']['login_background_image_enabled']['boolean']) && $_SESSION['theme']['login_background_image_enabled']['boolean'] == 'true' && is_array($_SESSION['theme']['login_background_image'])) {
 		$background_images_enabled = true;
 		$background_images = $_SESSION['theme']['login_background_image'];
 	}
-	else if (!empty($_SESSION['theme']['login_background_color'][0]) || !empty($_SESSION['theme']['login_background_color'][1])) {
-		$background_colors[0] = $_SESSION['theme']['login_background_color'][0] ?? null;
-		$background_colors[1] = $_SESSION['theme']['login_background_color'][1] ?? null;
+
+	//otherwise, use standard background images
+	if (!empty($_SESSION['theme']['background_image_enabled']['boolean']) && $_SESSION['theme']['background_image_enabled']['boolean'] == 'true' && is_array($_SESSION['theme']['background_image'])) {
+		$background_images_enabled = true;
+		$background_images = $_SESSION['theme']['background_image'];
 	}
-	else {
-		//otherwise, use standard background images/colors
-		if (!empty($_SESSION['theme']['background_image_enabled']['boolean']) && $_SESSION['theme']['background_image_enabled']['boolean'] == 'true' && is_array($_SESSION['theme']['background_image'])) {
-			$background_images_enabled = true;
-			$background_images = $_SESSION['theme']['background_image'];
-		}
-		else {
-			$background_colors[0] = $_SESSION['theme']['background_color'][0] ?? null;
-			$background_colors[1] = $_SESSION['theme']['background_color'][1] ?? null;
-		}
+
+	//use standard background colors
+	if (!empty($_SESSION['theme']['background_color']) && !empty($_SESSION['theme']['background_color'][0]) && !empty($_SESSION['theme']['background_color'][1])) {
+		$background_colors[0] = $_SESSION['theme']['login_background_color'][0];
+		$background_colors[1] = $_SESSION['theme']['login_background_color'][1];
+	}
+	elseif (!empty($_SESSION['theme']['background_image_enabled']) && !empty($_SESSION['theme']['background_color'][0])) {
+		$background_colors[0] = $_SESSION['theme']['background_color'][0];
 	}
 }
 
@@ -417,8 +425,7 @@ if ($background_images_enabled) {
 }
 
 //check for background color
-else if (!empty($background_colors[0]) || !empty($background_colors[1])) { //background color 1 or 2 is enabled
-
+if (!empty($background_colors[0]) || !empty($background_colors[1])) { //background color 1 or 2 is enabled
 	if (!empty($background_colors[0]) && empty($background_colors[1])) { // use color 1
 		$background_color = "background: ".$background_colors[0].";";
 	}
@@ -427,22 +434,25 @@ else if (!empty($background_colors[0]) || !empty($background_colors[1])) { //bac
 	}
 	else if (!empty($background_colors[0]) && !empty($background_colors[1]) && isset($_SESSION['theme']['background_radial_gradient']['text'])) { // radial gradient
 		$background_color = "background: ".$background_colors[0].";\n";
-		$background_color .= "background: -ms-radial-gradient(center, circle, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
-		$background_color .= "background: radial-gradient(circle at center, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
+		$background_color .= "		background: -ms-radial-gradient(center, circle, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
+		$background_color .= "		background: radial-gradient(circle at center, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
 	}
 	else if (!empty($background_colors[0]) && !empty($background_colors[1])) { // vertical gradient
 		$background_color = "background: ".$background_colors[0].";\n";
-		$background_color .= "background: -ms-linear-gradient(top, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
-		$background_color .= "background: -moz-linear-gradient(top, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
-		$background_color .= "background: -o-linear-gradient(top, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
-		$background_color .= "background: -webkit-gradient(linear, left top, left bottom, color-stop(0, ".$background_colors[0]."), color-stop(1, ".$background_colors[1]."));\n";
-		$background_color .= "background: -webkit-linear-gradient(top, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
-		$background_color .= "background: linear-gradient(to bottom, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
+		$background_color .= "		background: -ms-linear-gradient(top, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
+		$background_color .= "		background: -moz-linear-gradient(top, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
+		$background_color .= "		background: -o-linear-gradient(top, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
+		$background_color .= "		background: -webkit-gradient(linear, left top, left bottom, color-stop(0, ".$background_colors[0]."), color-stop(1, ".$background_colors[1]."));\n";
+		$background_color .= "		background: -webkit-linear-gradient(top, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
+		$background_color .= "		background: linear-gradient(to bottom, ".$background_colors[0]." 0%, ".$background_colors[1]." 100%);\n";
 	}
 }
 else { //default: white
-	$background_color = "background: #ffffff;\n";
+	$background_color = "";
 }
+
+
+
 ?>
 
 	html {
@@ -462,14 +472,30 @@ else { //default: white
 		bottom: 0;
 		left: 0;
 		text-align: center;
+		}
+
+	#background-video {
+		width: 100vw;
+		height: 100vh;
+		object-fit: cover;
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		z-index: -7;
+		}
+
+	#background-image {
+		width: 100vw;
+		height: 100vh;
+		object-fit: cover;
+		position: fixed;
 		<?php
 		if (!empty($_SESSION['background_image'])) {
 			echo "background-image: url('".$_SESSION['background_image']."');\n";
-			echo "background-size: 100% 100%;\n";
-			echo "background-position: top;\n";
-		}
-		else {
-			echo $background_color;
+			echo "		background-size: 100% 100%;\n";
+			echo "		background-position: top;\n";
 		}
 		?>
 		background-repeat: no-repeat;
@@ -478,18 +504,32 @@ else { //default: white
 		-moz-background-size:cover;
 		-o-background-size:cover;
 		background-size:cover;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		z-index: -5;
 		}
 
-	#background-video {
+	#background-color {
 		width: 100vw;
 		height: 100vh;
 		object-fit: cover;
 		position: fixed;
+		<?php
+		if (!empty($background_color)) {
+			echo $background_color;
+		}
+		if (isset($_SESSION['theme']['background_filter']['text'])) {
+			echo "		backdrop-filter: ".$_SESSION['theme']['background_filter']['text'].";\n";
+			echo "		-webkit-backdrop-filter: ".$_SESSION['theme']['background_filter']['text'].";\n";
+		}
+		?>
 		left: 0;
 		right: 0;
 		top: 0;
 		bottom: 0;
-		z-index: -2;
+		z-index: -3;
 		}
 
 	pre {
@@ -2537,6 +2577,28 @@ else { //default: white
 		border: 1px solid #5d5f5a;
 		}
 
+/* SUBCONTENT **********************************************************************/
+	div.subcontent {
+		/*border: 1px solid #bae0ba;*/
+		<?php
+		if (!empty($subcontent_background_color)) {
+			echo "background-color: " .$subcontent_background_color.";\n";
+		}
+		?>
+		-webkit-border-radius: 3px;
+		-moz-border-radius: 3px;
+		border-radius: 3px;
+		padding: 20px;
+		margin-bottom: 15px;
+		<?php
+		if (!empty($subcontent_shadow_color)) {
+			echo "-webkit-box-shadow: 0 px 7px ".$subcontent_shadow_color.";\n";
+			echo "-moz-box-shadow: 0 2px 7px ".$subcontent_shadow_color.";\n";
+			echo "box-shadow: 0 2px 7px ".$subcontent_shadow_color.";\n";
+		}
+		?>
+		}
+
 /* DASHBOARD **********************************************************************/
 
 	/* login message */
@@ -2550,12 +2612,12 @@ else { //default: white
 		margin-bottom: 15px;
 		}
 
-	.widget {
+	div.widget {
 		<?php
 		if (!empty($dashboard_shadow_color)) {
-			echo "-webkit-box-shadow: 0 3px 5px ".$dashboard_shadow_color.";\n";
-			echo "-moz-box-shadow: 0 3px 5px ".$dashboard_shadow_color.";\n";
-			echo "box-shadow: 0 3px 5px ".$dashboard_shadow_color.";\n";
+			echo "-webkit-box-shadow: 0 px 7px ".$dashboard_shadow_color.";\n";
+			echo "-moz-box-shadow: 0 2px 7px ".$dashboard_shadow_color.";\n";
+			echo "box-shadow: 0 2px 7px ".$dashboard_shadow_color.";\n";
 		}
 		?>
 		}

themes/default/template.php

@@ -1182,64 +1182,70 @@
 		</video>
 	{/if}
 
+	{*//image background *}
+	<div id='background-image'></div>
+
+	{*//color background *}
+	<div id='background-color'></div>
+
 	{*//message container *}
-		<div id='message_container'></div>
+	<div id='message_container'></div>
 
 	{*//domain selector *}
-		{if $authenticated && $domain_selector_enabled}
-
-			<div id='domains_container'>
-				<input type='hidden' id='domains_visible' value='0'>
-				<div id='domains_block'>
-					<div id='domains_header'>
-						<input id='domains_hide' type='button' class='btn' style='float: right' value="{$text.theme_button_close}">
-						<a id='domains_title' href='{$domains_app_path}'>{$text.theme_title_domains} <span id='domain_count' style='font-size: 80%;'></span></a>
-						<br><br>
-						<input type='text' id='domains_search' class='formfld' style='margin-left: 0; min-width: 100%; width: 100%;' placeholder="{$text.theme_label_search}" onkeyup="search_domains('domains_list');">
-					</div>
-					<div id='domains_list'></div>
+	{if $authenticated && $domain_selector_enabled}
+
+		<div id='domains_container'>
+			<input type='hidden' id='domains_visible' value='0'>
+			<div id='domains_block'>
+				<div id='domains_header'>
+					<input id='domains_hide' type='button' class='btn' style='float: right' value="{$text.theme_button_close}">
+					<a id='domains_title' href='{$domains_app_path}'>{$text.theme_title_domains} <span id='domain_count' style='font-size: 80%;'></span></a>
+					<br><br>
+					<input type='text' id='domains_search' class='formfld' style='margin-left: 0; min-width: 100%; width: 100%;' placeholder="{$text.theme_label_search}" onkeyup="search_domains('domains_list');">
 				</div>
+				<div id='domains_list'></div>
 			</div>
+		</div>
 
-		{/if}
+	{/if}
 
 	{*//qr code container for contacts *}
-		<div id='qr_code_container' style='display: none;' onclick='$(this).fadeOut(400);'>
-			<table cellpadding='0' cellspacing='0' border='0' width='100%' height='100%'><tr><td align='center' valign='middle'>
-				<span id='qr_code' onclick="$('#qr_code_container').fadeOut(400);"></span>
-			</td></tr></table>
-		</div>
+	<div id='qr_code_container' style='display: none;' onclick='$(this).fadeOut(400);'>
+		<table cellpadding='0' cellspacing='0' border='0' width='100%' height='100%'><tr><td align='center' valign='middle'>
+			<span id='qr_code' onclick="$('#qr_code_container').fadeOut(400);"></span>
+		</td></tr></table>
+	</div>
 
 	{*//login page *}
-		{if !empty($login_page)}
-			<div id='default_login'>
-				<a href='{$project_path}/'><img id='login_logo' style='width: {$login_logo_width}; height: {$login_logo_height};' src='{$login_logo_source}'></a><br />
-				{$document_body}
-			</div>
-			<div id='footer_login'>
-				<span class='footer'>{$settings.theme.footer}</span>
-			</div>
+	{if !empty($login_page)}
+		<div id='default_login'>
+			<a href='{$project_path}/'><img id='login_logo' style='width: {$login_logo_width}; height: {$login_logo_height};' src='{$login_logo_source}'></a><br />
+			{$document_body}
+		</div>
+		<div id='footer_login'>
+			<span class='footer'>{$settings.theme.footer}</span>
+		</div>
 
 	{*//other pages *}
-		{else}
-			{if $settings.theme.menu_style == 'side' || $settings.theme.menu_style == 'inline' || $settings.theme.menu_style == 'static'}
-				{$container_open}
-				{if $settings.theme.menu_style == 'inline'}{$logo}{/if}
-				{$menu}
-				{if $settings.theme.menu_style == 'inline' || $settings.theme.menu_style == 'static'}<br />{/if}
-				{if $settings.theme.menu_style == 'side'}<input type='hidden' id='menu_side_state_current' value='{if $menu_side_state == 'hidden'}expanded{else}{$menu_side_state}{/if}'>{/if}
-			{else} {*//default: fixed *}
-				{$menu}
-				{$container_open}
-			{/if}
-			<div id='main_content'>
-				{$document_body}
-			</div>
-			<div id='footer'>
-				<span class='footer'>{$settings.theme.footer}</span>
-			</div>
-			{$container_close}
+	{else}
+		{if $settings.theme.menu_style == 'side' || $settings.theme.menu_style == 'inline' || $settings.theme.menu_style == 'static'}
+			{$container_open}
+			{if $settings.theme.menu_style == 'inline'}{$logo}{/if}
+			{$menu}
+			{if $settings.theme.menu_style == 'inline' || $settings.theme.menu_style == 'static'}<br />{/if}
+			{if $settings.theme.menu_style == 'side'}<input type='hidden' id='menu_side_state_current' value='{if $menu_side_state == 'hidden'}expanded{else}{$menu_side_state}{/if}'>{/if}
+		{else} {*//default: fixed *}
+			{$menu}
+			{$container_open}
 		{/if}
+		<div id='main_content'>
+			{$document_body}
+		</div>
+		<div id='footer'>
+			<span class='footer'>{$settings.theme.footer}</span>
+		</div>
+		{$container_close}
+	{/if}
 
 </body>
 </html>