MBS-10425: Add border coloring for active tab

Author: TobiGa

classes/header.php

@@ -346,8 +346,9 @@ private function get_tabs(course_modinfo $modinfo, \renderer_base $output): \for
                                 }
                             }
 
+                            // Store background-color for active tabs to use in border CSS.
+                            $activebackgroundcolor = null;
                             foreach ($styles as $key => $value) {
-
                                 // If exist a unit for the rule, apply it.
                                 if (isset($units[$key])) {
                                     $value = $value . $units[$key];
@@ -356,6 +357,11 @@ private function get_tabs(course_modinfo $modinfo, \renderer_base $output): \for
                                     $value = $value . 'px';
                                 }
 
+                                // Capture background-color from any type that has it.
+                                if ($key === 'background-color') {
+                                    $activebackgroundcolor = $value;
+                                }
+
                                 if ($key == 'others') {
                                     $onecss .= $value . ';';
                                 } else {
@@ -364,6 +370,23 @@ private function get_tabs(course_modinfo $modinfo, \renderer_base $output): \for
                             }
 
                             $onecss .= '} ';
+
+                            // Add border CSS for .format_onetopic-tabs when this tab is active.
+                            // Apply the border to the tabs container when this specific tab is active.
+                            // Only generate CSS if a background color is defined.
+                            if (!empty($activebackgroundcolor) && ($type === 'active' || $type === 'default')) {
+                                $onecss .= '#tabs-tree-start:has(#onetabid-' . $thissection->id . ' a.nav-link.active) ';
+                                $onecss .= '.format_onetopic-tabs { ';
+                                $onecss .= 'border-bottom: 2px solid ' . $activebackgroundcolor . ' !important; ';
+                                $onecss .= 'padding-bottom: 1px; ';
+                                $onecss .= '} ';
+                                $onecss .= '#onetabid-' . $thissection->id . ' .nav-link.active { border-color: ' . $activebackgroundcolor . '; }';
+                                $onecss .= '#tabs-tree-start.verticaltabs .tabs-wrapper';
+                                $onecss .= ':has(#onetabid-' . $thissection->id . ' a.nav-link.active) ';
+                                $onecss .= '.format_onetopic-tabs { ';
+                                $onecss .= 'border-bottom: none !important; ';
+                                $onecss .= '}';
+                            }
                         }
 
                         // Clean the CSS for html tags.

styles.php

@@ -112,8 +112,9 @@
                 }
             }
 
+            // Store background-color for active tabs to use in border CSS.
+            $activebackgroundcolor = null;
             foreach ($styles as $key => $value) {
-
                 // If exist a unit for the rule, apply it.
                 if (isset($units[$key])) {
                     $value = $value . $units[$key];
@@ -122,6 +123,11 @@
                     $value = $value . 'px';
                 }
 
+                // Capture background-color for active tabs.
+                if ($type === 'active' && $key === 'background-color') {
+                    $activebackgroundcolor = $value;
+                }
+
                 if ($key == 'others') {
                     $csscontent .= $value . ';';
                 } else {
@@ -130,6 +136,14 @@
             }
 
             $csscontent .= '} ';
+
+            // Add border CSS for .format_onetopic-tabs when processing active tab with background-color.
+            if ($type === 'active' && !empty($activebackgroundcolor)) {
+                $csscontent .= '#tabs-tree-start .format_onetopic-tabs { ';
+                $csscontent .= 'border-bottom: 2px solid ' . $activebackgroundcolor . ' !important; ';
+                $csscontent .= 'padding-bottom: 1px; ';
+                $csscontent .= '} ';
+            }
         }
 
         // Clean the CSS for html tags.