Add custom CSS to resolve whiteout effect when hovering on tabs

app.py

@@ -186,7 +186,17 @@ custom_theme = gr.themes.Default(
     button_primary_background_fill_hover_dark="#9370db"
 )
 
-with gr.Blocks(title="ReLiveStream - Interactive Replay", theme=custom_theme) as demo:
+custom_css = """
+.tab-container button:hover, 
+button[role="tab"]:hover,
+.tab-wrapper button:hover,
+.tabs button:hover {
+    background-color: rgba(255, 255, 255, 0.08) !important;
+    color: #fffffe !important;
+}
+"""
+
+with gr.Blocks(title="ReLiveStream - Interactive Replay", theme=custom_theme, css=custom_css) as demo:
     gr.HTML(
         """
         <div style="text-align: center; margin-bottom: 20px; padding-top: 10px;">
@@ -284,4 +294,4 @@ with gr.Blocks(title="ReLiveStream - Interactive Replay", theme=custom_theme) as
             )
 
 if __name__ == "__main__":
-    demo.launch(theme=custom_theme)
+    demo.launch(theme=custom_theme, css=custom_css)