From 97af1d9b1adfa5701a46b25e7d77796c5fcbbd30 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Sat, 12 Jul 2025 11:37:22 -0400
Subject: [PATCH] change tab colors from green to blue/gray to reduce visual
 competition

- tabs now use neutral gray (inactive) and blue (active) instead of green
- prevents distraction from green translate button (call-to-action)
- inactive tabs: light gray background with dark gray text
- active tab: blue background with white text
- hover: slightly darker gray
- updated both builtin and pico CSS versions
---
 src/uncloseai-modal-builtin.css | 16 +++++++++++-----
 src/uncloseai-modal-pico.css    | 16 +++++++++++-----
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/uncloseai-modal-builtin.css b/src/uncloseai-modal-builtin.css
index f12c24a..323cebb 100644
--- a/src/uncloseai-modal-builtin.css
+++ b/src/uncloseai-modal-builtin.css
@@ -404,10 +404,9 @@ dialog#translate-modal {
   display: block;
   padding: 12px 16px;
   text-decoration: none;
-  color: #4CAF50;
-  background: #4CAF50;
-  color: white;
-  border: 2px solid #4CAF50;
+  color: #6c757d;
+  background: #f8f9fa;
+  border: 2px solid #dee2e6;
   border-bottom: none;
   border-radius: 6px 6px 0 0;
   text-align: center;
@@ -417,7 +416,14 @@ dialog#translate-modal {
 }
 
 .translate-tab-nav a:hover {
-  background: #45a049;
+  background: #e9ecef;
+  color: #495057;
+}
+
+.translate-tab-nav a[aria-selected="true"] {
+  background: #007bff;
+  color: white;
+  border-color: #007bff;
 }
 
 /* Form elements */
diff --git a/src/uncloseai-modal-pico.css b/src/uncloseai-modal-pico.css
index 3cc595c..56d3cd9 100644
--- a/src/uncloseai-modal-pico.css
+++ b/src/uncloseai-modal-pico.css
@@ -447,10 +447,9 @@ dialog#translate-modal {
   display: block;
   padding: 12px 16px;
   text-decoration: none;
-  color: #4CAF50;
-  background: #4CAF50;
-  color: white;
-  border: 2px solid #4CAF50;
+  color: #6c757d;
+  background: #f8f9fa;
+  border: 2px solid #dee2e6;
   border-bottom: none;
   border-radius: 6px 6px 0 0;
   text-align: center;
@@ -460,7 +459,14 @@ dialog#translate-modal {
 }
 
 .translate-tab-nav a:hover {
-  background: #45a049;
+  background: #e9ecef;
+  color: #495057;
+}
+
+.translate-tab-nav a[aria-selected="true"] {
+  background: #007bff;
+  color: white;
+  border-color: #007bff;
 }
 
 /* Form elements */