Hugging Face's logo

Spaces:
asemxin2000
/
SBTI
Sleeping

App Files Community
asemxin2000 commited on
Commit
6bf30e3
·
verified ·
1 Parent(s): e927852

Force high-contrast answer styles

Browse files

Override Gradio radio chip styles with stronger selectors so option text stays readable in both selected and unselected states.

Files changed (1) hide show
  1. app.py +33 -14
app.py CHANGED
@@ -238,36 +238,55 @@ body, .gradio-container {
238
  gap: 8px;
239
  }
240
 
 
 
241
  .question-radio fieldset label {
242
- padding: 8px 14px !important;
 
243
  border-radius: 12px !important;
244
- border: 1px solid rgba(111, 47, 18, 0.16) !important;
245
- background: #fffaf5 !important;
246
- box-shadow: 0 4px 12px rgba(108, 69, 36, 0.05);
247
  }
248
 
249
- .question-radio fieldset label span {
250
- color: #4e2b1c !important;
251
- font-weight: 600 !important;
 
 
 
 
 
 
 
 
 
 
252
  opacity: 1 !important;
253
  }
254
 
 
255
  .question-radio fieldset label input[type="radio"] {
256
- accent-color: #9b4620;
257
  }
258
 
 
259
  .question-radio fieldset label:has(input:checked) {
260
- background: linear-gradient(135deg, #8a401b, #b25826) !important;
261
- border-color: #8a401b !important;
262
- box-shadow: 0 8px 18px rgba(138, 64, 27, 0.22);
263
  }
264
 
265
- .question-radio fieldset label:has(input:checked) span {
266
- color: #fffaf6 !important;
 
 
 
 
 
267
  }
268
 
 
269
  .question-radio fieldset label:has(input:checked) input[type="radio"] {
270
- accent-color: #fff4eb;
271
  }
272
 
273
  .primary-btn button,
 
238
  gap: 8px;
239
  }
240
 
241
+ .question-radio .wrap,
242
+ .question-radio .wrap label,
243
  .question-radio fieldset label {
244
+ background: #fffaf3 !important;
245
+ border: 1px solid #b98a6b !important;
246
  border-radius: 12px !important;
247
+ box-shadow: 0 4px 12px rgba(108, 69, 36, 0.06) !important;
 
 
248
  }
249
 
250
+ .question-radio .wrap label,
251
+ .question-radio fieldset label {
252
+ padding: 8px 14px !important;
253
+ }
254
+
255
+ .question-radio .wrap label span,
256
+ .question-radio .wrap label p,
257
+ .question-radio .wrap label div,
258
+ .question-radio fieldset label span,
259
+ .question-radio fieldset label p,
260
+ .question-radio fieldset label div {
261
+ color: #2f190f !important;
262
+ font-weight: 700 !important;
263
  opacity: 1 !important;
264
  }
265
 
266
+ .question-radio .wrap label input[type="radio"],
267
  .question-radio fieldset label input[type="radio"] {
268
+ accent-color: #8a401b !important;
269
  }
270
 
271
+ .question-radio .wrap label:has(input:checked),
272
  .question-radio fieldset label:has(input:checked) {
273
+ background: #7a3416 !important;
274
+ border: 1px solid #7a3416 !important;
275
+ box-shadow: 0 8px 18px rgba(122, 52, 22, 0.28) !important;
276
  }
277
 
278
+ .question-radio .wrap label:has(input:checked) span,
279
+ .question-radio .wrap label:has(input:checked) p,
280
+ .question-radio .wrap label:has(input:checked) div,
281
+ .question-radio fieldset label:has(input:checked) span,
282
+ .question-radio fieldset label:has(input:checked) p,
283
+ .question-radio fieldset label:has(input:checked) div {
284
+ color: #ffffff !important;
285
  }
286
 
287
+ .question-radio .wrap label:has(input:checked) input[type="radio"],
288
  .question-radio fieldset label:has(input:checked) input[type="radio"] {
289
+ accent-color: #ffffff !important;
290
  }
291
 
292
  .primary-btn button,