Spaces:
Sleeping
Sleeping
Update app.py
Browse filesthis is v19 - What I changed:
β
Tab button text β Now uses #e2e8f0 (light grey) instead of CSS variables
β
Selected tab text β Uses #ffffff (white) for better contrast
β
Hover state β White text on hover for better visibility
β
All targeting methods β Each CSS selector now has explicit colors
The fixed colors:
Unselected tabs: #e2e8f0 (light grey) - clearly visible
Selected tab: #ffffff (white) - maximum contrast
Hover state: #ffffff (white) - good feedback
Now you should see:
π¬ Token Visualization - with visible text
π Full Analysis - with visible text
π Evolution Chart - with visible text
π SERP Results - with visible text
π Ranking History - with visible text
πΎ Raw Data - with visible text
app.py
CHANGED
@@ -159,7 +159,7 @@ p, span, div:not(.gr-button), .gr-markdown {
|
|
159 |
|
160 |
.gr-tab-nav button {
|
161 |
background: transparent !important;
|
162 |
-
color:
|
163 |
border: none !important;
|
164 |
border-radius: 8px !important;
|
165 |
margin: 0 4px !important;
|
@@ -175,13 +175,13 @@ p, span, div:not(.gr-button), .gr-markdown {
|
|
175 |
|
176 |
.gr-tab-nav button.selected {
|
177 |
background: var(--gradient-button) !important;
|
178 |
-
color:
|
179 |
box-shadow: 0 2px 4px rgba(6, 182, 212, 0.3) !important;
|
180 |
}
|
181 |
|
182 |
.gr-tab-nav button:hover:not(.selected) {
|
183 |
background: var(--bg-card-hover) !important;
|
184 |
-
color:
|
185 |
}
|
186 |
|
187 |
/* Force tab button text visibility with multiple selectors */
|
@@ -206,6 +206,11 @@ button[role="tab"] span {
|
|
206 |
.gr-tabs .gr-tab-nav button {
|
207 |
font-size: 14px !important;
|
208 |
line-height: 1.5 !important;
|
|
|
|
|
|
|
|
|
|
|
209 |
}
|
210 |
|
211 |
/* Ensure tab content is visible */
|
@@ -215,29 +220,47 @@ button[role="tab"] span {
|
|
215 |
|
216 |
/* Additional fallback for stubborn elements */
|
217 |
[class*="tab"] button {
|
218 |
-
color:
|
219 |
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', system-ui, sans-serif !important;
|
220 |
}
|
221 |
|
222 |
[class*="tab"] button.selected {
|
223 |
-
color:
|
224 |
}
|
225 |
|
226 |
/* Specific tab targeting with elem_ids */
|
227 |
#tab-token button, #tab-analysis button, #tab-evolution button,
|
228 |
#tab-serp button, #tab-ranking button, #tab-data button {
|
229 |
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', system-ui, sans-serif !important;
|
230 |
-
color:
|
231 |
font-size: 14px !important;
|
232 |
}
|
233 |
|
234 |
/* Force emoji rendering for specific tabs */
|
235 |
-
button[aria-controls*="tab-token"] {
|
236 |
-
|
237 |
-
|
238 |
-
|
239 |
-
button[aria-controls*="tab-
|
240 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
241 |
|
242 |
/* Buttons */
|
243 |
.gr-button {
|
|
|
159 |
|
160 |
.gr-tab-nav button {
|
161 |
background: transparent !important;
|
162 |
+
color: #e2e8f0 !important;
|
163 |
border: none !important;
|
164 |
border-radius: 8px !important;
|
165 |
margin: 0 4px !important;
|
|
|
175 |
|
176 |
.gr-tab-nav button.selected {
|
177 |
background: var(--gradient-button) !important;
|
178 |
+
color: #ffffff !important;
|
179 |
box-shadow: 0 2px 4px rgba(6, 182, 212, 0.3) !important;
|
180 |
}
|
181 |
|
182 |
.gr-tab-nav button:hover:not(.selected) {
|
183 |
background: var(--bg-card-hover) !important;
|
184 |
+
color: #ffffff !important;
|
185 |
}
|
186 |
|
187 |
/* Force tab button text visibility with multiple selectors */
|
|
|
206 |
.gr-tabs .gr-tab-nav button {
|
207 |
font-size: 14px !important;
|
208 |
line-height: 1.5 !important;
|
209 |
+
color: #e2e8f0 !important;
|
210 |
+
}
|
211 |
+
|
212 |
+
.gr-tabs .gr-tab-nav button.selected {
|
213 |
+
color: #ffffff !important;
|
214 |
}
|
215 |
|
216 |
/* Ensure tab content is visible */
|
|
|
220 |
|
221 |
/* Additional fallback for stubborn elements */
|
222 |
[class*="tab"] button {
|
223 |
+
color: #e2e8f0 !important;
|
224 |
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', system-ui, sans-serif !important;
|
225 |
}
|
226 |
|
227 |
[class*="tab"] button.selected {
|
228 |
+
color: #ffffff !important;
|
229 |
}
|
230 |
|
231 |
/* Specific tab targeting with elem_ids */
|
232 |
#tab-token button, #tab-analysis button, #tab-evolution button,
|
233 |
#tab-serp button, #tab-ranking button, #tab-data button {
|
234 |
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', system-ui, sans-serif !important;
|
235 |
+
color: #e2e8f0 !important;
|
236 |
font-size: 14px !important;
|
237 |
}
|
238 |
|
239 |
/* Force emoji rendering for specific tabs */
|
240 |
+
button[aria-controls*="tab-token"] {
|
241 |
+
font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important;
|
242 |
+
color: #e2e8f0 !important;
|
243 |
+
}
|
244 |
+
button[aria-controls*="tab-analysis"] {
|
245 |
+
font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important;
|
246 |
+
color: #e2e8f0 !important;
|
247 |
+
}
|
248 |
+
button[aria-controls*="tab-evolution"] {
|
249 |
+
font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important;
|
250 |
+
color: #e2e8f0 !important;
|
251 |
+
}
|
252 |
+
button[aria-controls*="tab-serp"] {
|
253 |
+
font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important;
|
254 |
+
color: #e2e8f0 !important;
|
255 |
+
}
|
256 |
+
button[aria-controls*="tab-ranking"] {
|
257 |
+
font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important;
|
258 |
+
color: #e2e8f0 !important;
|
259 |
+
}
|
260 |
+
button[aria-controls*="tab-data"] {
|
261 |
+
font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important;
|
262 |
+
color: #e2e8f0 !important;
|
263 |
+
}
|
264 |
|
265 |
/* Buttons */
|
266 |
.gr-button {
|