PromptMeister commited on
Commit
319ab75
Β·
verified Β·
1 Parent(s): 0708f1d

Update app.py

Browse files

this 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

Files changed (1) hide show
  1. app.py +35 -12
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: var(--text-secondary) !important;
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: var(--text-primary) !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: var(--text-primary) !important;
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: var(--text-secondary) !important;
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: var(--text-primary) !important;
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: var(--text-secondary) !important;
231
  font-size: 14px !important;
232
  }
233
 
234
  /* Force emoji rendering for specific tabs */
235
- button[aria-controls*="tab-token"] { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important; }
236
- button[aria-controls*="tab-analysis"] { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important; }
237
- button[aria-controls*="tab-evolution"] { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important; }
238
- button[aria-controls*="tab-serp"] { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important; }
239
- button[aria-controls*="tab-ranking"] { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important; }
240
- button[aria-controls*="tab-data"] { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 {