redbasic: make use of css variables and implement link_hover_colour

5 files changed, 43 insertions, 28 deletions

diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index d395ae78b..0a45f18f3 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -6,12 +6,33 @@
  */
 
 
-/* generals */
+/* bootstrap variable */
 
 :root {
 	--bs-border-radius: $radius;
+	--bs-link-color: $link_colour;
+	--bs-link-hover-color: $link_hover_colour;
+}
+
+.nav-tabs {
+	--bs-nav-tabs-border-radius: $radius;
+}
+
+.nav-pills {
+	--bs-nav-pills-border-radius: $radius;
 }
 
+.btn {
+	--bs-btn-border-radius: $radius;
+}
+
+.card {
+	--bs-card-border-radius: $radius;
+}
+
+
+/* generals */
+
 html {
 	font-size: $font_size;
 }
@@ -109,7 +130,7 @@ abbr {
 
 a,
 .fakelink {
-  color: $link_colour;
+	color: var(--bs-link-color);
 }
 
 
@@ -117,7 +138,7 @@ a:hover,
 a:focus,
 .fakelink:hover,
 .fakelink:focus {
-  color: $link_colour;
+	color: var(--bs-link-hover-color);
 }
 
 .fakelink,
@@ -1410,22 +1431,6 @@ main.fullscreen .section-content-wrapper-np {
 
 /* bootstrap overrides */
 
-.nav-tabs {
-	--bs-nav-tabs-border-radius: $radius;
-}
-
-.nav-pills {
-	--bs-nav-pills-border-radius: $radius;
-}
-
-.btn {
-	--bs-btn-border-radius: $radius;
-}
-
-.card {
-	--bs-card-border-radius: $radius;
-}
-
 .form-control {
 	border-radius: $radius;
 }
@@ -1617,11 +1622,11 @@ dl.bb-dl > dd > li {
 }
 
 .onoffswitch.checkbox:hover label {
-	color: $link_colour;
+	color: var(--bs-link-color);
 }
 
 .onoffswitch.checkbox:hover > div label {
-	border-color: $link_colour;
+	border-color: var(--bs-link-color);
 }
 
 .onoffswitch-inner {
@@ -1665,7 +1670,7 @@ dl.bb-dl > dd > li {
 
 .onoffswitch.checkbox > div > input:checked + label .onoffswitch-switch {
     right: 0px;
-    background-color: $link_colour;
+    background-color: var(--bs-link-color);
 }
 
 
diff --git a/view/theme/redbasic/php/config.php b/view/theme/redbasic/php/config.php
index 0de475fe5..9d242fab0 100644
--- a/view/theme/redbasic/php/config.php
+++ b/view/theme/redbasic/php/config.php
@@ -42,6 +42,7 @@ class RedbasicConfig {
 		$arr['nav_icon_colour'] = get_pconfig(local_channel(),'redbasic', 'nav_icon_colour' );
 		$arr['nav_active_icon_colour'] = get_pconfig(local_channel(),'redbasic', 'nav_active_icon_colour' );
 		$arr['link_colour'] = get_pconfig(local_channel(),'redbasic', 'link_colour' );
+		$arr['link_hover_colour'] = get_pconfig(local_channel(),'redbasic', 'link_hover_colour' );
 		$arr['banner_colour'] = get_pconfig(local_channel(),'redbasic', 'banner_colour' );
 		$arr['bgcolour'] = get_pconfig(local_channel(),'redbasic', 'background_colour' );
 		$arr['background_image'] = get_pconfig(local_channel(),'redbasic', 'background_image' );
@@ -69,6 +70,7 @@ class RedbasicConfig {
 			set_pconfig(local_channel(), 'redbasic', 'nav_icon_colour', $_POST['redbasic_nav_icon_colour']);
 			set_pconfig(local_channel(), 'redbasic', 'nav_active_icon_colour', $_POST['redbasic_nav_active_icon_colour']);
 			set_pconfig(local_channel(), 'redbasic', 'link_colour', $_POST['redbasic_link_colour']);
+			set_pconfig(local_channel(), 'redbasic', 'link_hover_colour', $_POST['redbasic_link_hover_colour']);
 			set_pconfig(local_channel(), 'redbasic', 'background_colour', $_POST['redbasic_background_colour']);
 			set_pconfig(local_channel(), 'redbasic', 'banner_colour', $_POST['redbasic_banner_colour']);
 			set_pconfig(local_channel(), 'redbasic', 'background_image', $_POST['redbasic_background_image']);
@@ -100,7 +102,8 @@ class RedbasicConfig {
 			'$nav_bg' => array('redbasic_nav_bg', t('Navigation bar background color'), $arr['nav_bg']),
 			'$nav_icon_colour' => array('redbasic_nav_icon_colour', t('Navigation bar icon color '), $arr['nav_icon_colour']),
 			'$nav_active_icon_colour' => array('redbasic_nav_active_icon_colour', t('Navigation bar active icon color '), $arr['nav_active_icon_colour']),
-			'$link_colour' => array('redbasic_link_colour', t('Link color'), $arr['link_colour'], '', $link_colours),
+			'$link_colour' => array('redbasic_link_colour', t('Link color'), $arr['link_colour'], '', $link_colour),
+			'$link_hover_colour' => array('redbasic_link_hover_colour', t('Link hover color'), $arr['link_hover_colour'], '', $link_hover_colour),
 			'$banner_colour' => array('redbasic_banner_colour', t('Set font-color for banner'), $arr['banner_colour']),
 			'$bgcolour' => array('redbasic_background_colour', t('Set the background color'), $arr['bgcolour']),
 			'$background_image' => array('redbasic_background_image', t('Set the background image'), $arr['background_image']),
diff --git a/view/theme/redbasic/php/style.php b/view/theme/redbasic/php/style.php
index 38e71be34..45790ae37 100644
--- a/view/theme/redbasic/php/style.php
+++ b/view/theme/redbasic/php/style.php
@@ -16,6 +16,7 @@ if(! App::$install) {
 	$banner_colour = get_pconfig($uid,'redbasic','banner_colour');
 	$narrow_navbar = get_pconfig($uid,'redbasic','narrow_navbar');
 	$link_colour = get_pconfig($uid, 'redbasic', 'link_colour');
+	$link_hover_colour = get_pconfig($uid, 'redbasic', 'link_hover_colour');
 	$schema = get_pconfig($uid,'redbasic','schema');
 	$bgcolour = get_pconfig($uid, 'redbasic', 'background_colour');
 	$background_image = get_pconfig($uid, 'redbasic', 'background_image');
@@ -79,6 +80,8 @@ if (! $nav_active_icon_colour)
 	$nav_active_icon_colour = 'rgba(255, 255, 255, 0.75)';
 if (! $link_colour)
 	$link_colour = '#0d6efd';
+if (! $link_hover_colour)
+	$link_hover_colour = '#0a58ca;';
 if (! $banner_colour)
 	$banner_colour = '#efefef';
 if (! $bgcolour)
@@ -111,9 +114,9 @@ if(file_exists('view/theme/redbasic/css/style.css')) {
 
 	$x = file_get_contents('view/theme/redbasic/css/style.css');
 
-  if($schema === 'dark' && file_exists('view/theme/redbasic/schema/bootstrap-nightfall.css')) {
-    $x .= file_get_contents('view/theme/redbasic/schema/bootstrap-nightfall.css');
-  }
+	if($schema === 'dark' && file_exists('view/theme/redbasic/schema/bootstrap-nightfall.css')) {
+		$x .= file_get_contents('view/theme/redbasic/schema/bootstrap-nightfall.css');
+	}
 
 	if($narrow_navbar && file_exists('view/theme/redbasic/css/narrow_navbar.css')) {
 		$x .= file_get_contents('view/theme/redbasic/css/narrow_navbar.css');
@@ -136,6 +139,7 @@ if(file_exists('view/theme/redbasic/css/style.css')) {
 		'$nav_icon_colour' => $nav_icon_colour,
 		'$nav_active_icon_colour' => $nav_active_icon_colour,
 		'$link_colour' => $link_colour,
+		'$link_hover_colour' => $link_hover_colour,
 		'$banner_colour' => $banner_colour,
 		'$bgcolour' => $bgcolour,
 		'$background_image' => $background_image,
diff --git a/view/theme/redbasic/schema/dark.php b/view/theme/redbasic/schema/dark.php
index 18e92ac93..cd9653a23 100644
--- a/view/theme/redbasic/schema/dark.php
+++ b/view/theme/redbasic/schema/dark.php
@@ -17,7 +17,9 @@
 	if (! $nav_active_icon_colour)
 		$nav_active_icon_colour = "#fff";
 	if (! $link_colour)
-		$link_colour = "#fff";
+		$link_colour = "#5f7b99;";
+	if (! $link_hover_colour)
+		$link_hover_colour = "#4b6b8c";
 	if (! $banner_colour)
 		$banner_colour = "#999";
 	if (! $bgcolour)
diff --git a/view/theme/redbasic/tpl/theme_settings.tpl b/view/theme/redbasic/tpl/theme_settings.tpl
index cc403f0a7..65b3a7883 100644
--- a/view/theme/redbasic/tpl/theme_settings.tpl
+++ b/view/theme/redbasic/tpl/theme_settings.tpl
@@ -15,6 +15,7 @@
 	{{*include file="field_input.tpl" field=$comment_indent*}}
 	{{include file="field_colorinput.tpl" field=$font_colour}}
 	{{include file="field_colorinput.tpl" field=$link_colour}}
+	{{include file="field_colorinput.tpl" field=$link_hover_colour}}
 	{{include file="field_input.tpl" field=$radius}}
 	{{include file="field_input.tpl" field=$shadow}}
 	{{include file="field_input.tpl" field=$top_photo}}
@@ -23,7 +24,7 @@
 <script>
 	$(function(){
 		$('#id_redbasic_nav_bg, #id_redbasic_nav_icon_colour, #id_redbasic_nav_active_icon_colour, #id_redbasic_banner_colour').colorpicker({format: 'rgba'});
-		$('#id_redbasic_link_colour,#id_redbasic_background_colour').colorpicker();
+		$('#id_redbasic_link_colour,#id_redbasic_link_hover_colour,#id_redbasic_background_colour').colorpicker();
 		$('#id_redbasic_toolicon_colour,#id_redbasic_toolicon_activecolour,#id_redbasic_font_colour').colorpicker();
 		$('#id_redbasic_item_colour,#id_redbasic_comment_item_colour,#id_redbasic_comment_border_colour').colorpicker({format: 'rgba'});
 	});