Update app.py

app.py

@@ -180,27 +180,36 @@ def bridge_predict_frame(frame, st):
 # 4. Gradio 介面建構
 # ==========================================
 
-# 定義強制黑色文字的 CSS (包含標題與 Tab)
+# 定義強制黑色文字與 Tab 修復的 CSS
 force_black_css = """
-/* 1. 強制 Tab 分頁按鈕文字為黑色 */
+/* 1. 針對 Tab 區域的背景容器：設為淺灰，確保黑字能被看見 */
+.tab-nav {
+    background-color: #e2e8f0 !important;
+    border-radius: 8px 8px 0 0 !important;
+}
+
+/* 2. 【關鍵修正】針對「未選中」的 Tab 按鈕 */
 .tab-nav button {
-    color: #000000 !important;
-    text-shadow: none !important; /* 移除可能存在的陰影讓黑色更實 */
+    color: #000000 !important;       /* 強制文字黑色 */
+    background-color: transparent !important; /* 背景透明，透出下方的淺灰 */
+    opacity: 1 !important;           /* 防止透明度造成看不清 */
+    text-shadow: none !important;    /* 移除陰影 */
 }
 
-/* 2. 強制 Tab 被選中時的文字也為黑色 */
+/* 3. 針對「已選中」的 Tab 按鈕 (圖片中左邊那個) */
 .tab-nav button.selected {
-    color: #000000 !important;
-    font-weight: bold !important; /* 選中時加粗 */
+    color: #000000 !important;       /* 文字黑色 (如果你想保留橘色，改成 #ff7f00) */
+    background-color: #ffffff !important; /* 背景純白，做出區隔 */
+    font-weight: bold !important;    /* 加粗 */
+    border-bottom: 2px solid #ff7f00 !important; /* 底部橘線 */
 }
 
-/* 3. (選用) 為了怕深色模式下背景太深導致黑色字看不到，
-      可以強制 Tab 背景色為淺色 (若原本顯示沒問題可拿掉這行) */
-.tab-nav {
-    background-color: #f8fafc !important; 
+/* 4. 強制 Tab 內的 Icon/Emoji 也變色 */
+.tab-nav button span {
+    color: inherit !important;
 }
 
-/* 4. 同時確保內容的大標題也是黑色 (承接上一個需求) */
+/* 5. 確保內容的大標題也是黑色 (H1-H3) */
 h1, h2, h3, h4, h5, h6, .prose h1, .prose h2, .prose h3 {
     color: #000000 !important;
 }