Mbs 10425 add border color for active tab (#2)

Author: TobiGa

classes/header.php

@@ -309,6 +309,7 @@ private function get_tabs(course_modinfo $modinfo, \renderer_base $output): \for
                         $cssparentid = '[data-tabid="' . $thissection->id . '"]';
                         $cssid = '#onetabid-' . $thissection->id . '';
                         $withunits = ['font-size', 'line-height', 'margin', 'padding', 'border-width', 'border-radius'];
+                        $childsbackgroundcolor = null;
                         foreach ($orderedtabs as $type => $styles) {
                             $important = false;
                             switch ($type) {
@@ -362,6 +363,8 @@ 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])) {
@@ -371,6 +374,15 @@ 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;
+                                    // Also capture child background color for parent tab border rules.
+                                    if ($type === 'childs') {
+                                        $childsbackgroundcolor = $value;
+                                    }
+                                }
+
                                 if ($key == 'others') {
                                     $onecss .= $value . ';';
                                 } else {
@@ -379,6 +391,58 @@ 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')) {
+                                // Add border bottom for horizontal tabs.
+                                $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 { ';
+                                $onecss .= 'border-color: ' . $activebackgroundcolor . '; } ';
+                                // Deny border for parent tab.
+                                $onecss .= '#tabs-tree-start .tabs-wrapper .format_onetopic-tabs:has(';
+                                $onecss .= '#onetabid-' . $thissection->id . '.haschilds a.nav-link.active) ';
+                                $onecss .= '{ ';
+                                $onecss .= 'border-bottom: 2px solid lightgray !important; ';
+                                $onecss .= '} ';
+                                // Add border left for vertical tabs.
+                                $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 .= '}';
+
+                                // If this is a child tab (level 1) with its own background, override parent's child color.
+                                if (isset($formatoptions['level']) && $formatoptions['level'] == 1) {
+                                    // Override parent's child background color rule with this child's specific color.
+                                    $onecss .= '#tabs-tree-start#tabs-tree-start#tabs-tree-start:has(';
+                                    $onecss .= '#onetabid-' . $thissection->id . ' a.nav-link.active) ';
+                                    $onecss .= '.onetopic-tab-body > ul.format_onetopic-tabs { ';
+                                    $onecss .= 'border-bottom: 2px solid ' . $activebackgroundcolor . ' !important; ';
+                                    $onecss .= 'padding-bottom: 1px !important; ';
+                                    $onecss .= '} ';
+                                }
+                            }
+                        }
+
+                        // Add border for child tabs if parent defines childs background color.
+                        // Generate this CSS after processing all style types for this section.
+                        if (!empty($childsbackgroundcolor)) {
+                            // Target the second row tabs when a child is active.
+                            // Use multiple IDs and very specific path to maximize specificity beyond parent rule.
+                            $childrule = '#tabs-tree-start#tabs-tree-start:has(.onetopic-tab-body';
+                            $childrule .= $cssparentid . ' .nav-item.subtopic a.nav-link.active) ';
+                            $childrule .= '.onetopic-tab-body' . $cssparentid . ' > ul.format_onetopic-tabs { ';
+                            $childrule .= 'border-bottom: 2px solid ' . $childsbackgroundcolor . ' !important; ';
+                            $childrule .= 'padding-bottom: 1px !important; ';
+                            $childrule .= '} ';
+
+                            $onecss .= $childrule;
                         }
 
                         // Clean the CSS for html tags.