Styling

src/display/css_html_js.py

@@ -221,18 +221,20 @@ custom_css = """
     font-size: 20px;
 }
 
-/* Change the background color of the selected tab */
-.tab-item.selected {
-    background-color: #4caf50 !important; /* Replace with your desired color */
-    color: white !important; /* Adjust text color for contrast */
-    border-radius: 8px; /* Optional: rounded corners */
+.selected.svelte-1tcem6n.svelte-1tcem6n {
+    background-color: #4caf50 !important; /* Desired background color */
+    color: white !important; /* Desired text color */
+    border-radius: 8px; /* Optional: Rounded corners */
+    border: 2px solid #388e3c; /* Optional: Border for emphasis */
 }
 
-/* Change hover effect for better UX */
-.tab-item:hover {
+/* Optional: Hover effect for tabs */
+.svelte-1tcem6n:hover {
     background-color: #a5d6a7 !important; /* Lighter green for hover */
+    color: #fff !important;
 }
 
+
 """