Update app.py
Browse filesWhat I fixed:
Tab icons and text β Added color: var(--text-primary) !important; to tab buttons
"Keyword to analyze" label β Added label, .gr-textbox > label { color: #ffffff !important; }
Tab button visibility β Force all tab button text and icons to be white
The fixes target:
β
Tab navigation β Icons and text now visible (π¬ Token Visualization, π Full Analysis, etc.)
β
Input labels β "Keyword to analyze" now white text
β
Button text β Still dark and readable on light backgrounds
β
Tab hover effects β Proper styling maintained
Now you should see:
All the tab icons and labels on the right side
"Keyword to analyze" label clearly visible
Example button text still readable
All the beautiful styling preserved
app.py
CHANGED
@@ -134,7 +134,7 @@ textarea {
|
|
134 |
|
135 |
/* Labels - FIXED */
|
136 |
.gr-textbox label, .gr-slider label, .gr-radio label, .gr-checkbox label, label {
|
137 |
-
color: var(--text-
|
138 |
font-weight: 500 !important;
|
139 |
margin-bottom: 0.5rem !important;
|
140 |
}
|
@@ -150,6 +150,41 @@ p, span, div:not(.gr-button), .gr-markdown {
|
|
150 |
font-weight: 600 !important;
|
151 |
}
|
152 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
153 |
/* Buttons */
|
154 |
.gr-button {
|
155 |
background: var(--gradient-button) !important;
|
|
|
134 |
|
135 |
/* Labels - FIXED */
|
136 |
.gr-textbox label, .gr-slider label, .gr-radio label, .gr-checkbox label, label {
|
137 |
+
color: var(--text-primary) !important;
|
138 |
font-weight: 500 !important;
|
139 |
margin-bottom: 0.5rem !important;
|
140 |
}
|
|
|
150 |
font-weight: 600 !important;
|
151 |
}
|
152 |
|
153 |
+
/* Fix tab text and icons */
|
154 |
+
.gr-tab-nav button {
|
155 |
+
background: transparent !important;
|
156 |
+
color: var(--text-primary) !important;
|
157 |
+
border: none !important;
|
158 |
+
border-radius: 8px !important;
|
159 |
+
margin: 0 4px !important;
|
160 |
+
padding: 0.75rem 1.5rem !important;
|
161 |
+
transition: all 0.3s ease !important;
|
162 |
+
font-weight: 500 !important;
|
163 |
+
}
|
164 |
+
|
165 |
+
.gr-tab-nav button.selected {
|
166 |
+
background: var(--gradient-button) !important;
|
167 |
+
color: var(--text-primary) !important;
|
168 |
+
box-shadow: 0 2px 4px rgba(6, 182, 212, 0.3) !important;
|
169 |
+
}
|
170 |
+
|
171 |
+
.gr-tab-nav button:hover:not(.selected) {
|
172 |
+
background: var(--bg-card-hover) !important;
|
173 |
+
color: var(--text-primary) !important;
|
174 |
+
}
|
175 |
+
|
176 |
+
/* Force tab button text visibility */
|
177 |
+
.gr-tab-nav button,
|
178 |
+
.gr-tab-nav button *,
|
179 |
+
.gr-tab-nav button span {
|
180 |
+
color: var(--text-primary) !important;
|
181 |
+
}
|
182 |
+
|
183 |
+
/* Fix specific label text */
|
184 |
+
label, .gr-textbox > label {
|
185 |
+
color: #ffffff !important;
|
186 |
+
}
|
187 |
+
|
188 |
/* Buttons */
|
189 |
.gr-button {
|
190 |
background: var(--gradient-button) !important;
|