saitejatirunagari Claude Opus 4.8 commited on
Commit
fc261b9
Β·
1 Parent(s): fcc8f76

fix(ui): white text on download + link buttons (was black-on-black)

Browse files

The 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>

Files changed (1) hide show
  1. ui.py +20 -6
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: white !important; border: none !important; border-radius: 10px !important;
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
- .stButton > button:hover {
 
 
 
 
 
 
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;