Spaces:
Sleeping
Sleeping
Commit Β·
fc261b9
1
Parent(s): fcc8f76
fix(ui): white text on download + link buttons (was black-on-black)
Browse filesThe button CSS only styled .stButton β download buttons (.stDownloadButton)
and link buttons (.stLinkButton) rendered with dark default text on dark
background, invisible. Added them to the gradient-button rule and forced
white text on all nested label elements (Streamlit wraps labels in p/span
that inherit dark color). Kept secondary/ghost buttons blue-on-white by
overriding the white-children rule for .secondary-btn.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
ui.py
CHANGED
|
@@ -59,32 +59,46 @@ p, span, label, .stMarkdown { color: #0F172A; }
|
|
| 59 |
color: #334155 !important; font-weight: 500 !important;
|
| 60 |
}
|
| 61 |
|
| 62 |
-
/* ββ Buttons ββ */
|
| 63 |
-
.stButton > button[kind="primary"], .stButton > button
|
|
|
|
|
|
|
| 64 |
background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%) !important;
|
| 65 |
-
color:
|
| 66 |
padding: 10px 24px !important; font-weight: 600 !important;
|
| 67 |
font-family: 'Inter', sans-serif !important;
|
| 68 |
transition: all 0.2s ease !important;
|
| 69 |
box-shadow: 0 2px 8px rgba(37,99,235,0.25) !important;
|
|
|
|
| 70 |
}
|
| 71 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 72 |
transform: translateY(-1px) !important;
|
| 73 |
box-shadow: 0 4px 16px rgba(37,99,235,0.35) !important;
|
|
|
|
| 74 |
}
|
| 75 |
-
.stButton > button:disabled {
|
| 76 |
opacity: 0.5 !important;
|
| 77 |
transform: none !important;
|
| 78 |
box-shadow: none !important;
|
| 79 |
}
|
| 80 |
|
| 81 |
-
/* Secondary / ghost buttons */
|
| 82 |
.secondary-btn .stButton > button {
|
| 83 |
background: white !important;
|
| 84 |
color: #2563EB !important;
|
| 85 |
border: 1.5px solid #E2E8F0 !important;
|
| 86 |
box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
|
| 87 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
| 88 |
.secondary-btn .stButton > button:hover {
|
| 89 |
border-color: #2563EB !important;
|
| 90 |
background: #F0F4FF !important;
|
|
|
|
| 59 |
color: #334155 !important; font-weight: 500 !important;
|
| 60 |
}
|
| 61 |
|
| 62 |
+
/* ββ Buttons (regular + download + link) ββ */
|
| 63 |
+
.stButton > button[kind="primary"], .stButton > button,
|
| 64 |
+
.stDownloadButton > button,
|
| 65 |
+
.stLinkButton > a, .stLinkButton > a[data-testid] {
|
| 66 |
background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%) !important;
|
| 67 |
+
color: #ffffff !important; border: none !important; border-radius: 10px !important;
|
| 68 |
padding: 10px 24px !important; font-weight: 600 !important;
|
| 69 |
font-family: 'Inter', sans-serif !important;
|
| 70 |
transition: all 0.2s ease !important;
|
| 71 |
box-shadow: 0 2px 8px rgba(37,99,235,0.25) !important;
|
| 72 |
+
text-decoration: none !important;
|
| 73 |
}
|
| 74 |
+
/* Force white text on every nested element inside these buttons
|
| 75 |
+
(Streamlit wraps the label in <p>/<span>/<div> that inherit dark text) */
|
| 76 |
+
.stButton > button *, .stDownloadButton > button *, .stLinkButton > a * {
|
| 77 |
+
color: #ffffff !important;
|
| 78 |
+
fill: #ffffff !important;
|
| 79 |
+
}
|
| 80 |
+
.stButton > button:hover, .stDownloadButton > button:hover, .stLinkButton > a:hover {
|
| 81 |
transform: translateY(-1px) !important;
|
| 82 |
box-shadow: 0 4px 16px rgba(37,99,235,0.35) !important;
|
| 83 |
+
color: #ffffff !important;
|
| 84 |
}
|
| 85 |
+
.stButton > button:disabled, .stDownloadButton > button:disabled {
|
| 86 |
opacity: 0.5 !important;
|
| 87 |
transform: none !important;
|
| 88 |
box-shadow: none !important;
|
| 89 |
}
|
| 90 |
|
| 91 |
+
/* Secondary / ghost buttons β white bg, blue text (override the white-children rule) */
|
| 92 |
.secondary-btn .stButton > button {
|
| 93 |
background: white !important;
|
| 94 |
color: #2563EB !important;
|
| 95 |
border: 1.5px solid #E2E8F0 !important;
|
| 96 |
box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
|
| 97 |
}
|
| 98 |
+
.secondary-btn .stButton > button *,
|
| 99 |
+
.secondary-btn .stButton > button:hover * {
|
| 100 |
+
color: #2563EB !important;
|
| 101 |
+
}
|
| 102 |
.secondary-btn .stButton > button:hover {
|
| 103 |
border-color: #2563EB !important;
|
| 104 |
background: #F0F4FF !important;
|