scss: more options and some fixes

6 files changed, 86 insertions, 38 deletions

diff --git a/view/css/conversation.css b/view/css/conversation.css
index ee17832aa..dcd38839a 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -194,7 +194,7 @@ a.wall-item-name-link {
 }
 
 .item-highlight {
-	border-left: 0.2rem solid #007bff;
+	border-left: 0.2rem solid var(--bs-primary);
 }
 
 /* comment_item */
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 8d91702a3..576c4d8e9 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1224,32 +1224,32 @@ img.mail-conv-sender-photo {
 
 .section-content-success-wrapper {
 	padding: 21px 10px;
-	color: #155724;
-	background-color: #d4edda;
+	color: var(--bs-success-text-emphasis);
+	background-color: var(--bs-success-bg-subtle);
 	border-bottom: 3px solid var(--bs-body-bg);
 	text-align: center;
 }
 
 .section-content-info-wrapper {
 	padding: 21px 10px;
-	color: #0c5460;
-	background-color: #d1ecf1;
+	color: var(--bs-info-text-emphasis);
+	background-color: var(--bs-info-bg-subtle);
 	border-bottom: 3px solid var(--bs-body-bg);
 	text-align: center;
 }
 
 .section-content-warning-wrapper {
 	padding: 21px 10px;
-	color: #856404;
-	background-color: #fff3cd;
+	color: var(--bs-warning-text-emphasis);
+	background-color: var(--bs-warning-bg-subtle);
 	border-bottom: 3px solid var(--bs-body-bg);
 	text-align: center;
 }
 
 .section-content-danger-wrapper {
 	padding: 21px 10px;
-	color: #721c24;
-	background-color: #f8d7da;
+	color: var(--bs-danger-text-emphasis);
+	background-color: var(--bs-danger-bg-subtle);
 	border-bottom: 3px solid var(--bs-body-bg);
 	text-align: center;
 }
diff --git a/view/theme/redbasic/php/config.php b/view/theme/redbasic/php/config.php
index 213e441eb..a9a766ad5 100644
--- a/view/theme/redbasic/php/config.php
+++ b/view/theme/redbasic/php/config.php
@@ -39,8 +39,11 @@ class RedbasicConfig {
 			return;
 		}
 
-		$arr = array();
 		$arr['primary_color'] = get_pconfig(local_channel(),'redbasic', 'primary_color');
+		$arr['success_color'] = get_pconfig(local_channel(),'redbasic', 'success_color');
+		$arr['info_color'] = get_pconfig(local_channel(),'redbasic', 'info_color');
+		$arr['warning_color'] = get_pconfig(local_channel(),'redbasic', 'warning_color');
+		$arr['danger_color'] = get_pconfig(local_channel(),'redbasic', 'danger_color');
 		$arr['dark_mode'] = get_pconfig(local_channel(),'redbasic', 'dark_mode');
 		$arr['navbar_dark_mode'] = get_pconfig(local_channel(),'redbasic', 'navbar_dark_mode');
 		$arr['narrow_navbar'] = get_pconfig(local_channel(),'redbasic', 'narrow_navbar' );
@@ -68,22 +71,39 @@ class RedbasicConfig {
 			if (isset($_POST['redbasic_primary_color']) || isset($_POST['redbasic_radius'])) {
 
 				$primary_color = '';
+				$success_color = '';
+				$info_color = '';
+				$warning_color = '';
+				$danger_color = '';
 				$radius = floatval($_POST['redbasic_radius']);
 
 				if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['redbasic_primary_color'])) {
 					$primary_color = $_POST['redbasic_primary_color'];
 				}
+				if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['redbasic_success_color'])) {
+					$success_color = $_POST['redbasic_success_color'];
+				}
+				if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['redbasic_info_color'])) {
+					$info_color = $_POST['redbasic_info_color'];
+				}
+				if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['redbasic_warning_color'])) {
+					$warning_color = $_POST['redbasic_warning_color'];
+				}
+				if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['redbasic_danger_color'])) {
+					$danger_color = $_POST['redbasic_danger_color'];
+				}
 
-				if ($primary_color || $radius) {
+				if ($primary_color || $success_color || $info_color || $warning_color || $danger_color || $radius) {
 
 					try {
-						$cache_dir = 'store/[data]/[scss]';
+						$cache_dir = 'store/[data]/[scss]/';
 						if(!is_dir($cache_dir)) {
 							os_mkdir($cache_dir, STORAGE_DEFAULT_PERMISSIONS, true);
 						}
 
 						$options = [
 							'cacheDir' => $cache_dir,
+							'prefix' => 'redbasic_',
 							'forceRefresh' => false
 						];
 
@@ -95,9 +115,24 @@ class RedbasicConfig {
 						if ($primary_color) {
 							$variables['$primary'] = $primary_color;
 						}
-
+						if ($success_color) {
+							$variables['$success'] = $success_color;
+						}
+						if ($info_color) {
+							$variables['$info'] = $info_color;
+						}
+						if ($warning_color) {
+							$variables['$warning'] = $warning_color;
+						}
+						if ($danger_color) {
+							$variables['$danger'] = $danger_color;
+						}
 						if ($radius) {
 							$variables['$border-radius'] = $radius . 'rem';
+							$variables['$border-radius-sm'] = $radius/1.5 . 'rem';
+							$variables['$border-radius-lg'] = $radius*1.333 . 'rem';
+							$variables['$border-radius-xl'] = $radius*2.666 . 'rem';
+							$variables['$border-radius-xxl'] = $radius*5.333 . 'rem';
 						}
 
 						// Replace Bootstrap Variables with Customizer Variables
@@ -116,6 +151,11 @@ class RedbasicConfig {
 			}
 
 			set_pconfig(local_channel(), 'redbasic', 'primary_color', $_POST['redbasic_primary_color']);
+			set_pconfig(local_channel(), 'redbasic', 'success_color', $_POST['redbasic_success_color']);
+			set_pconfig(local_channel(), 'redbasic', 'info_color', $_POST['redbasic_info_color']);
+			set_pconfig(local_channel(), 'redbasic', 'warning_color', $_POST['redbasic_warning_color']);
+			set_pconfig(local_channel(), 'redbasic', 'danger_color', $_POST['redbasic_danger_color']);
+
 			set_pconfig(local_channel(), 'redbasic', 'narrow_navbar', $_POST['redbasic_narrow_navbar']);
 			set_pconfig(local_channel(), 'redbasic', 'navbar_dark_mode', $_POST['redbasic_navbar_dark_mode']);
 			set_pconfig(local_channel(), 'redbasic', 'dark_mode', $_POST['redbasic_dark_mode']);
@@ -154,6 +194,10 @@ class RedbasicConfig {
 			'$light' => t('Light style'),
 			'$common' => t('Common settings'),
 			'$primary_color' => array('redbasic_primary_color', t('Primary theme color'), $arr['primary_color']),
+			'$success_color' => array('redbasic_success_color', t('Success theme color'), $arr['success_color']),
+			'$info_color' => array('redbasic_info_color', t('Info theme color'), $arr['info_color']),
+			'$warning_color' => array('redbasic_warning_color', t('Warning theme color'), $arr['warning_color']),
+			'$danger_color' => array('redbasic_danger_color', t('Danger theme color'), $arr['danger_color']),
 			'$dark_mode' => array('redbasic_dark_mode',t('Default to dark mode'),$arr['dark_mode'], '', array(t('No'),t('Yes'))),
 			'$navbar_dark_mode' => array('redbasic_navbar_dark_mode',t('Always use light icons for navbar'),$arr['navbar_dark_mode'], t('Enable this option if you use a dark navbar color in light mode'), array(t('No'),t('Yes'))),
 			'$narrow_navbar' => array('redbasic_narrow_navbar',t('Narrow navbar'),$arr['narrow_navbar'], '', array(t('No'),t('Yes'))),
diff --git a/view/theme/redbasic/tpl/theme_settings.tpl b/view/theme/redbasic/tpl/theme_settings.tpl
index 4ba418afc..61baeb58e 100644
--- a/view/theme/redbasic/tpl/theme_settings.tpl
+++ b/view/theme/redbasic/tpl/theme_settings.tpl
@@ -8,6 +8,10 @@
 	<hr>
 	<h3>{{$common}}</h3>
 	{{include file="field_colorinput.tpl" field=$primary_color}}
+	{{include file="field_colorinput.tpl" field=$success_color}}
+	{{include file="field_colorinput.tpl" field=$info_color}}
+	{{include file="field_colorinput.tpl" field=$warning_color}}
+	{{include file="field_colorinput.tpl" field=$danger_color}}
 	{{include file="field_input.tpl" field=$radius}}
 	{{include file="field_input.tpl" field=$top_photo}}
 	{{include file="field_input.tpl" field=$reply_photo}}
@@ -28,7 +32,7 @@
 		$('#id_redbasic_link_color, #id_redbasic_link_color_dark, #id_redbasic_link_hover_color, #id_redbasic_link_hover_color_dark, #id_redbasic_background_color, #id_redbasic_background_color_dark, #id_redbasic_nav_bg, #id_redbasic_nav_bg_dark').colorpicker({format: 'rgba'});
 	});
 	$(function(){
-		$('#id_redbasic_primary_color').colorpicker({format: 'hex'});
+		$('#id_redbasic_primary_color, #id_redbasic_success_color, #id_redbasic_info_color, #id_redbasic_warning_color, #id_redbasic_danger_color').colorpicker({format: 'hex'});
 	});
 </script>
 {{/if}}
diff --git a/view/tpl/comment_item.tpl b/view/tpl/comment_item.tpl
index d34eec7f8..d29193901 100644
--- a/view/tpl/comment_item.tpl
+++ b/view/tpl/comment_item.tpl
@@ -22,35 +22,35 @@
 				<div id="comment-tools-{{$id}}" class="pt-2 comment-tools">
 					<div id="comment-edit-bb-{{$id}}" class="btn-toolbar float-start">
 						<div class="btn-group me-2">
-							<button class="btn btn-outline-secondary btn-sm" title="{{$edbold}}" onclick="insertbbcomment('{{$comment}}','b', {{$id}}); return false;">
+							<button class="btn btn-outline-secondary btn-sm border-0" title="{{$edbold}}" onclick="insertbbcomment('{{$comment}}','b', {{$id}}); return false;">
 								<i class="fa fa-bold comment-icon"></i>
 							</button>
-							<button class="btn btn-outline-secondary btn-sm" title="{{$editalic}}" onclick="insertbbcomment('{{$comment}}','i', {{$id}}); return false;">
+							<button class="btn btn-outline-secondary btn-sm border-0" title="{{$editalic}}" onclick="insertbbcomment('{{$comment}}','i', {{$id}}); return false;">
 								<i class="fa fa-italic comment-icon"></i>
 							</button>
-							<button class="btn btn-outline-secondary btn-sm" title="{{$eduline}}" onclick="insertbbcomment('{{$comment}}','u', {{$id}}); return false;">
+							<button class="btn btn-outline-secondary btn-sm border-0" title="{{$eduline}}" onclick="insertbbcomment('{{$comment}}','u', {{$id}}); return false;">
 								<i class="fa fa-underline comment-icon"></i>
 							</button>
-							<button class="btn btn-outline-secondary btn-sm" title="{{$edquote}}" onclick="insertbbcomment('{{$comment}}','quote', {{$id}}); return false;">
+							<button class="btn btn-outline-secondary btn-sm border-0" title="{{$edquote}}" onclick="insertbbcomment('{{$comment}}','quote', {{$id}}); return false;">
 								<i class="fa fa-quote-left comment-icon"></i>
 							</button>
-							<button class="btn btn-outline-secondary btn-sm" title="{{$edcode}}" onclick="insertbbcomment('{{$comment}}','code', {{$id}}); return false;">
+							<button class="btn btn-outline-secondary btn-sm border-0" title="{{$edcode}}" onclick="insertbbcomment('{{$comment}}','code', {{$id}}); return false;">
 								<i class="fa fa-terminal comment-icon"></i>
 							</button>
 						</div>
 						<div class="btn-group me-2">
 							{{if $can_upload}}
-							<button class="btn btn-outline-secondary btn-sm" title="{{$edatt}}" onclick="insertCommentAttach('{{$comment}}',{{$id}}); return false;">
+							<button class="btn btn-outline-secondary btn-sm border-0" title="{{$edatt}}" onclick="insertCommentAttach('{{$comment}}',{{$id}}); return false;">
 								<i class="fa fa-paperclip comment-icon"></i>
 							</button>
 							{{/if}}
-							<button class="btn btn-outline-secondary btn-sm" title="{{$edurl}}" onclick="insertCommentURL('{{$comment}}',{{$id}}); return false;">
+							<button class="btn btn-outline-secondary btn-sm border-0" title="{{$edurl}}" onclick="insertCommentURL('{{$comment}}',{{$id}}); return false;">
 								<i class="fa fa-link comment-icon"></i>
 							</button>
 						</div>
 						{{if $feature_encrypt}}
 						<div class="btn-group me-2">
-							<button class="btn btn-outline-secondary btn-sm" title="{{$encrypt}}" onclick="hz_encrypt('{{$cipher}}','#comment-edit-text-' + '{{$id}}'); return false;">
+							<button class="btn btn-outline-secondary btn-sm border-0" title="{{$encrypt}}" onclick="hz_encrypt('{{$cipher}}','#comment-edit-text-' + '{{$id}}'); return false;">
 								<i class="fa fa-key comment-icon"></i>
 							</button>
 						</div>
diff --git a/view/tpl/jot.tpl b/view/tpl/jot.tpl
index 6c88e02b5..0ffdc0517 100644
--- a/view/tpl/jot.tpl
+++ b/view/tpl/jot.tpl
@@ -100,19 +100,19 @@
 			<div id="profile-jot-submit-left" class="btn-toolbar float-start">
 				{{if $bbcode}}
 				<div class="btn-group me-2">
-					<button type="button" id="main-editor-bold" class="btn btn-outline-secondary btn-sm" title="{{$bold}}" onclick="inserteditortag('b', 'profile-jot-text'); return false;">
+					<button type="button" id="main-editor-bold" class="btn btn-outline-secondary btn-sm border-0" title="{{$bold}}" onclick="inserteditortag('b', 'profile-jot-text'); return false;">
 						<i class="fa fa-bold jot-icons"></i>
 					</button>
-					<button type="button" id="main-editor-italic" class="btn btn-outline-secondary btn-sm" title="{{$italic}}" onclick="inserteditortag('i', 'profile-jot-text'); return false;">
+					<button type="button" id="main-editor-italic" class="btn btn-outline-secondary btn-sm border-0" title="{{$italic}}" onclick="inserteditortag('i', 'profile-jot-text'); return false;">
 						<i class="fa fa-italic jot-icons"></i>
 					</button>
-					<button type="button" id="main-editor-underline" class="btn btn-outline-secondary btn-sm" title="{{$underline}}" onclick="inserteditortag('u', 'profile-jot-text'); return false;">
+					<button type="button" id="main-editor-underline" class="btn btn-outline-secondary btn-sm border-0" title="{{$underline}}" onclick="inserteditortag('u', 'profile-jot-text'); return false;">
 						<i class="fa fa-underline jot-icons"></i>
 					</button>
-					<button type="button" id="main-editor-quote" class="btn btn-outline-secondary btn-sm" title="{{$quote}}" onclick="inserteditortag('quote', 'profile-jot-text'); return false;">
+					<button type="button" id="main-editor-quote" class="btn btn-outline-secondary btn-sm border-0" title="{{$quote}}" onclick="inserteditortag('quote', 'profile-jot-text'); return false;">
 						<i class="fa fa-quote-left jot-icons"></i>
 					</button>
-					<button type="button" id="main-editor-code" class="btn btn-outline-secondary btn-sm" title="{{$code}}" onclick="inserteditortag('code', 'profile-jot-text'); return false;">
+					<button type="button" id="main-editor-code" class="btn btn-outline-secondary btn-sm border-0" title="{{$code}}" onclick="inserteditortag('code', 'profile-jot-text'); return false;">
 						<i class="fa fa-terminal jot-icons"></i>
 					</button>
 				</div>
@@ -120,29 +120,29 @@
 				{{if $visitor}}
 				<div class="btn-group me-2 d-none d-lg-flex">
 					{{if $writefiles}}
-					<button type="button" id="wall-file-upload" class="btn btn-outline-secondary btn-sm" title="{{$attach}}" >
+					<button type="button" id="wall-file-upload" class="btn btn-outline-secondary btn-sm border-0" title="{{$attach}}" >
 						<i id="wall-file-upload-icon" class="fa fa-paperclip jot-icons"></i>
 					</button>
 					{{/if}}
 					{{if $weblink}}
-					<button type="button" id="profile-link-wrapper" class="btn btn-outline-secondary btn-sm" title="{{$weblink}}" ondragenter="linkdropper(event);" ondragover="linkdropper(event);" ondrop="linkdrop(event);"  onclick="jotGetLink(); return false;">
+					<button type="button" id="profile-link-wrapper" class="btn btn-outline-secondary btn-sm border-0" title="{{$weblink}}" ondragenter="linkdropper(event);" ondragover="linkdropper(event);" ondrop="linkdrop(event);"  onclick="jotGetLink(); return false;">
 						<i id="profile-link" class="fa fa-link jot-icons"></i>
 					</button>
 					{{/if}}
 					{{if $embedPhotos}}
-					<button type="button" id="embed-photo-wrapper" class="btn btn-outline-secondary btn-sm" title="{{$embedPhotos}}" onclick="initializeEmbedPhotoDialog();return false;">
+					<button type="button" id="embed-photo-wrapper" class="btn btn-outline-secondary btn-sm border-0" title="{{$embedPhotos}}" onclick="initializeEmbedPhotoDialog();return false;">
 						<i id="embed-photo" class="fa fa-file-image-o jot-icons"></i>
 					</button>
 					{{/if}}
 				</div>
 				<div class="btn-group me-2 d-none d-lg-flex">
 					{{if $setloc}}
-					<button type="button" id="profile-location-wrapper" class="btn btn-outline-secondary btn-sm" title="{{$setloc}}" onclick="jotGetLocation();return false;">
+					<button type="button" id="profile-location-wrapper" class="btn btn-outline-secondary btn-sm border-0" title="{{$setloc}}" onclick="jotGetLocation();return false;">
 						<i id="profile-location" class="fa fa-globe jot-icons"></i>
 					</button>
 					{{/if}}
 					{{if $clearloc}}
-					<button type="button" id="profile-nolocation-wrapper" class="btn btn-outline-secondary btn-sm" title="{{$clearloc}}" onclick="jotClearLocation();return false;" disabled="disabled">
+					<button type="button" id="profile-nolocation-wrapper" class="btn btn-outline-secondary btn-sm border-0" title="{{$clearloc}}" onclick="jotClearLocation();return false;" disabled="disabled">
 						<i id="profile-nolocation" class="fa fa-circle-o jot-icons"></i>
 					</button>
 					{{/if}}
@@ -150,25 +150,25 @@
 				<div class="btn-group d-none d-lg-flex">
 				{{/if}}
 				{{if $feature_expire}}
-					<button type="button" id="profile-expire-wrapper" class="btn btn-outline-secondary btn-sm" title="{{$expires}}" onclick="jotGetExpiry();return false;">
+					<button type="button" id="profile-expire-wrapper" class="btn btn-outline-secondary btn-sm border-0" title="{{$expires}}" onclick="jotGetExpiry();return false;">
 						<i id="profile-expires" class="fa fa-eraser jot-icons"></i>
 					</button>
 				{{/if}}
 				{{if $feature_future}}
-					<button type="button" id="profile-future-wrapper" class="btn btn-outline-secondary btn-sm" title="{{$future_txt}}" onclick="jotGetPubDate();return false;">
+					<button type="button" id="profile-future-wrapper" class="btn btn-outline-secondary btn-sm border-0" title="{{$future_txt}}" onclick="jotGetPubDate();return false;">
 						<i id="profile-future" class="fa fa-clock-o jot-icons"></i>
 					</button>
 				{{/if}}
 				{{if $feature_encrypt}}
-					<button type="button" id="profile-encrypt-wrapper" class="btn btn-outline-secondary btn-sm" title="{{$encrypt}}" onclick="hz_encrypt('{{$cipher}}','#profile-jot-text');return false;">
+					<button type="button" id="profile-encrypt-wrapper" class="btn btn-outline-secondary btn-sm border-0" title="{{$encrypt}}" onclick="hz_encrypt('{{$cipher}}','#profile-jot-text');return false;">
 						<i id="profile-encrypt" class="fa fa-key jot-icons"></i>
 					</button>
 				{{/if}}
-					<button type="button" id="profile-poll-wrapper" class="btn btn-outline-secondary btn-sm" title="{{$poll}}" onclick="initPoll();">
+					<button type="button" id="profile-poll-wrapper" class="btn btn-outline-secondary btn-sm border-0" title="{{$poll}}" onclick="initPoll();">
 						<i id="profile-poll" class="fa fa-bar-chart jot-icons"></i>
 					</button>
 				{{if $feature_nocomment}}
-					<button type="button" id="profile-nocomment-wrapper" class="btn btn-outline-secondary btn-sm" title="{{$nocommenttitle}}" onclick="toggleNoComment();return false;">
+					<button type="button" id="profile-nocomment-wrapper" class="btn btn-outline-secondary btn-sm border-0" title="{{$nocommenttitle}}" onclick="toggleNoComment();return false;">
 						<i id="profile-nocomment" class="fa fa-comments jot-icons"></i>
 					</button>
 				{{/if}}
@@ -178,7 +178,7 @@
 				</div>
 				{{if $writefiles || $weblink || $setloc || $clearloc || $feature_expire || $feature_encrypt || $custommoretoolsdropdown}}
 				<div class="btn-group d-lg-none">
-					<button type="button" id="more-tools" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+					<button type="button" id="more-tools" class="btn btn-outline-secondary btn-sm border-0 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
 						<i id="more-tools-icon" class="fa fa-cog jot-icons"></i>
 					</button>
 					<div class="dropdown-menu">