p4r5kpftnp-cmd commited on
Commit
6e69422
ยท
1 Parent(s): 16fb4fc

Minimalist UI pass: remove emojis and decorative chrome

Browse files

Strips the visual ornamentation in favor of a flat, restrained look:

- Header: removed the gradient diamond app-mark and the three badge
chips (Lean 4 / Mathlib RAG / LangGraph); now a plain title with a
single muted subtitle line.
- Removed the radial warm glow behind the header โ€” flat cream bg.
- Removed every box-shadow (panels, controls bar, buttons, logs
accordion, status bar, dropdown popover) and the focus-glow rings on
inputs/dropdown โ€” surfaces now read by hairline border alone.
- Removed the colored dot + halo before panel titles, and muted the
filename titles.
- Removed the pulsing dot animation on the "Solving" status pill;
status pills are now flat rounded-rect chips.
- Tightened radii (14/12px -> 10px), narrowed max width (1400 -> 1280),
more top padding for breathing room, lighter font weights.

The single accent colour (Claude orange) now appears only on the
primary Solve button, the slider, and the small status pills โ€” nowhere
decorative. No functional/markup changes; app builds and lint passes.

Files changed (1) hide show
  1. app.py +44 -109
app.py CHANGED
@@ -145,79 +145,50 @@ CUSTOM_CSS = """
145
  --accent-soft: #FBE9DF;
146
  --ok: #2E7D55;
147
  --err: #B85450;
148
- --shadow-sm: 0 1px 2px rgba(26,26,26,0.04), 0 2px 8px rgba(26,26,26,0.04);
149
- --shadow-md: 0 2px 4px rgba(26,26,26,0.05), 0 8px 24px rgba(26,26,26,0.07);
150
  }
151
 
152
  /* โ”€โ”€โ”€ Container โ”€โ”€โ”€ */
153
  .gradio-container {
154
- background-color: var(--bg) !important;
155
- /* soft warm glow behind the header, fading into the cream base */
156
- background-image: radial-gradient(900px 360px at 50% -120px, #F8E8DD 0%, rgba(248,232,221,0) 70%) !important;
157
- background-repeat: no-repeat !important;
158
  color: var(--text) !important;
159
  color-scheme: light;
160
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
161
- max-width: 1400px !important;
162
  margin: 0 auto !important;
163
- padding: 36px 28px 28px !important;
164
  }
165
  footer, .show-api { display: none !important; }
166
 
167
  /* โ”€โ”€โ”€ Header โ”€โ”€โ”€ */
168
  #header {
169
  display: flex;
170
- align-items: center;
171
- justify-content: space-between;
172
- flex-wrap: wrap;
173
- gap: 12px;
174
- margin-bottom: 28px;
175
- padding: 0 4px;
176
  }
177
  #header .title {
178
- font-size: 22px;
179
- font-weight: 650;
180
- letter-spacing: -0.02em;
181
  color: var(--text);
182
- display: flex;
183
- align-items: center;
184
- gap: 11px;
185
  }
186
- #header .title .mark {
187
- display: inline-flex;
188
- align-items: center;
189
- justify-content: center;
190
- width: 34px;
191
- height: 34px;
192
- border-radius: 9px;
193
- background: linear-gradient(135deg, var(--accent) 0%, #E8946F 100%);
194
- color: #fff;
195
- font-size: 16px;
196
- box-shadow: 0 2px 6px rgba(217,119,87,0.35);
197
- }
198
- #header .chips { display: flex; gap: 6px; }
199
- #header .chip {
200
- font-size: 11px;
201
- font-weight: 600;
202
- letter-spacing: 0.02em;
203
  color: var(--text-muted);
204
- background: var(--panel);
205
- border: 1px solid var(--border);
206
- border-radius: 999px;
207
- padding: 4px 11px;
208
  }
209
 
210
  /* โ”€โ”€โ”€ Controls bar โ”€โ”€โ”€ */
211
  #controls {
212
  display: flex;
213
  align-items: flex-end;
214
- gap: 20px;
215
- margin-bottom: 18px;
216
- padding: 14px 18px;
217
  background: var(--panel);
218
  border: 1px solid var(--border);
219
- border-radius: 12px;
220
- box-shadow: var(--shadow-sm);
221
  }
222
  /* strip Gradio's inner block chrome so controls sit flat in the bar */
223
  #controls .block, #controls .form {
@@ -243,43 +214,29 @@ footer, .show-api { display: none !important; }
243
  .panel {
244
  background: var(--panel);
245
  border: 1px solid var(--border);
246
- border-radius: 14px;
247
  overflow: hidden;
248
- box-shadow: var(--shadow-sm);
249
- transition: box-shadow 0.2s ease, border-color 0.2s ease;
250
  max-height: 580px;
251
  }
252
  .panel:focus-within {
253
- box-shadow: var(--shadow-md);
254
- border-color: #DCD8CC;
255
  }
256
  .panel-header {
257
  display: flex !important;
258
  align-items: center !important;
259
  justify-content: space-between !important;
260
- padding: 10px 14px !important;
261
  background: var(--panel-tint) !important;
262
  border-bottom: 1px solid var(--border-soft) !important;
263
  gap: 8px !important;
264
- min-height: 46px;
265
  }
266
  .panel-title {
267
  font-family: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace;
268
  font-size: 12px;
269
- color: var(--text);
270
  font-weight: 500;
271
- display: flex;
272
- align-items: center;
273
- gap: 8px;
274
- }
275
- .panel-title::before {
276
- content: "";
277
- width: 8px;
278
- height: 8px;
279
- border-radius: 50%;
280
- background: var(--accent);
281
- box-shadow: 0 0 0 3px var(--accent-soft);
282
- display: inline-block;
283
  }
284
  .panel-header .panel-actions {
285
  display: flex;
@@ -290,35 +247,35 @@ footer, .show-api { display: none !important; }
290
  /* โ”€โ”€โ”€ Buttons โ”€โ”€โ”€ */
291
  .btn button {
292
  background: var(--panel) !important;
293
- color: var(--text) !important;
294
  border: 1px solid var(--border) !important;
295
- border-radius: 7px !important;
296
  padding: 5px 13px !important;
297
  font-size: 12px !important;
298
- font-weight: 550 !important;
299
  min-width: 0 !important;
300
- box-shadow: 0 1px 2px rgba(26,26,26,0.04) !important;
301
- transition: all 0.15s ease !important;
302
  cursor: pointer;
303
  }
304
  .btn button:hover {
305
- background: var(--panel-tint) !important;
306
  border-color: #CFCBBE !important;
307
  }
308
- .btn button:active { transform: translateY(1px); }
309
  .btn button:focus-visible {
310
- outline: 2px solid var(--accent) !important;
311
- outline-offset: 2px !important;
312
  }
313
  .btn-primary button {
314
  background: var(--accent) !important;
315
  color: white !important;
316
  border: 1px solid var(--accent) !important;
317
- box-shadow: 0 1px 3px rgba(217,119,87,0.4) !important;
318
  }
319
  .btn-primary button:hover {
320
  background: var(--accent-hover) !important;
321
  border-color: var(--accent-hover) !important;
 
322
  }
323
 
324
  /* โ”€โ”€โ”€ Code editors โ”€โ”€โ”€ */
@@ -378,16 +335,15 @@ footer, .show-api { display: none !important; }
378
  .gradio-accordion {
379
  background: var(--panel) !important;
380
  border: 1px solid var(--border) !important;
381
- border-radius: 12px !important;
382
  margin-top: 16px !important;
383
  overflow: hidden;
384
- box-shadow: var(--shadow-sm);
385
  }
386
  .gradio-accordion > button {
387
  background: var(--panel-tint) !important;
388
  color: var(--text-muted) !important;
389
  font-size: 12px !important;
390
- font-weight: 550 !important;
391
  padding: 10px 14px !important;
392
  border: none !important;
393
  text-align: left !important;
@@ -413,39 +369,25 @@ footer, .show-api { display: none !important; }
413
  padding: 11px 16px;
414
  background: var(--panel);
415
  border: 1px solid var(--border);
416
- border-radius: 12px;
417
  font-size: 13px;
418
  color: var(--text);
419
- box-shadow: var(--shadow-sm);
420
  }
421
  #status-bar .pill {
422
  display: inline-flex;
423
  align-items: center;
424
- gap: 6px;
425
- padding: 3px 11px;
426
  font-size: 11px;
427
- font-weight: 650;
428
  letter-spacing: 0.04em;
429
  text-transform: uppercase;
430
- border-radius: 999px;
431
  white-space: nowrap;
432
  }
433
  #status-bar .pill.ok { background: #E8F3EC; color: var(--ok); }
434
  #status-bar .pill.err { background: #FBE9E7; color: var(--err); }
435
  #status-bar .pill.idle { background: var(--panel-tint); color: var(--text-muted); }
436
  #status-bar .pill.run { background: var(--accent-soft); color: var(--accent-hover); }
437
- #status-bar .pill.run::before {
438
- content: "";
439
- width: 6px;
440
- height: 6px;
441
- border-radius: 50%;
442
- background: var(--accent);
443
- animation: statpulse 1.2s ease-in-out infinite;
444
- }
445
- @keyframes statpulse {
446
- 0%, 100% { opacity: 0.35; transform: scale(0.8); }
447
- 50% { opacity: 1; transform: scale(1.15); }
448
- }
449
 
450
  /* โ”€โ”€โ”€ Form chrome (dropdown, slider, key field) โ”€โ”€โ”€ */
451
  .gradio-dropdown input,
@@ -453,13 +395,12 @@ footer, .show-api { display: none !important; }
453
  background: var(--panel) !important;
454
  color: var(--text) !important;
455
  border: 1px solid var(--border) !important;
456
- border-radius: 7px !important;
457
  font-size: 13px !important;
458
  }
459
  .gradio-dropdown input:focus,
460
  .gradio-dropdown .wrap:focus-within {
461
  border-color: var(--accent) !important;
462
- box-shadow: 0 0 0 3px var(--accent-soft) !important;
463
  outline: none !important;
464
  }
465
  input[type="range"] { accent-color: var(--accent) !important; }
@@ -470,11 +411,10 @@ input[type="range"] { accent-color: var(--accent) !important; }
470
  font-variant-numeric: tabular-nums;
471
  }
472
  input[type="password"], input[type="text"] {
473
- border-radius: 7px !important;
474
  }
475
  input[type="password"]:focus, input[type="text"]:focus {
476
  border-color: var(--accent) !important;
477
- box-shadow: 0 0 0 3px var(--accent-soft) !important;
478
  }
479
 
480
  /* inputs / textareas โ€” never white on white */
@@ -491,8 +431,7 @@ ul[role="listbox"],
491
  .gradio-dropdown [role="listbox"] {
492
  background: #FFFFFF !important;
493
  border: 1px solid var(--border) !important;
494
- border-radius: 9px !important;
495
- box-shadow: var(--shadow-md) !important;
496
  color: #1A1A1A !important;
497
  }
498
  ul[role="listbox"] li,
@@ -600,12 +539,8 @@ with gr.Blocks(
600
  gr.HTML(
601
  """
602
  <div id="header">
603
- <div class="title"><span class="mark">โ—†</span> Lean 4 Proof Assistant</div>
604
- <div class="chips">
605
- <span class="chip">Lean 4</span>
606
- <span class="chip">Mathlib RAG</span>
607
- <span class="chip">LangGraph</span>
608
- </div>
609
  </div>
610
  """
611
  )
 
145
  --accent-soft: #FBE9DF;
146
  --ok: #2E7D55;
147
  --err: #B85450;
 
 
148
  }
149
 
150
  /* โ”€โ”€โ”€ Container โ”€โ”€โ”€ */
151
  .gradio-container {
152
+ background: var(--bg) !important;
 
 
 
153
  color: var(--text) !important;
154
  color-scheme: light;
155
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
156
+ max-width: 1280px !important;
157
  margin: 0 auto !important;
158
+ padding: 44px 28px 28px !important;
159
  }
160
  footer, .show-api { display: none !important; }
161
 
162
  /* โ”€โ”€โ”€ Header โ”€โ”€โ”€ */
163
  #header {
164
  display: flex;
165
+ align-items: baseline;
166
+ gap: 14px;
167
+ margin-bottom: 32px;
168
+ padding: 0 2px;
 
 
169
  }
170
  #header .title {
171
+ font-size: 21px;
172
+ font-weight: 600;
173
+ letter-spacing: -0.01em;
174
  color: var(--text);
 
 
 
175
  }
176
+ #header .sub {
177
+ font-size: 13px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
178
  color: var(--text-muted);
179
+ letter-spacing: 0.01em;
 
 
 
180
  }
181
 
182
  /* โ”€โ”€โ”€ Controls bar โ”€โ”€โ”€ */
183
  #controls {
184
  display: flex;
185
  align-items: flex-end;
186
+ gap: 22px;
187
+ margin-bottom: 16px;
188
+ padding: 14px 16px;
189
  background: var(--panel);
190
  border: 1px solid var(--border);
191
+ border-radius: 10px;
 
192
  }
193
  /* strip Gradio's inner block chrome so controls sit flat in the bar */
194
  #controls .block, #controls .form {
 
214
  .panel {
215
  background: var(--panel);
216
  border: 1px solid var(--border);
217
+ border-radius: 10px;
218
  overflow: hidden;
219
+ transition: border-color 0.15s ease;
 
220
  max-height: 580px;
221
  }
222
  .panel:focus-within {
223
+ border-color: #D2CEC1;
 
224
  }
225
  .panel-header {
226
  display: flex !important;
227
  align-items: center !important;
228
  justify-content: space-between !important;
229
+ padding: 9px 14px !important;
230
  background: var(--panel-tint) !important;
231
  border-bottom: 1px solid var(--border-soft) !important;
232
  gap: 8px !important;
233
+ min-height: 44px;
234
  }
235
  .panel-title {
236
  font-family: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace;
237
  font-size: 12px;
238
+ color: var(--text-muted);
239
  font-weight: 500;
 
 
 
 
 
 
 
 
 
 
 
 
240
  }
241
  .panel-header .panel-actions {
242
  display: flex;
 
247
  /* โ”€โ”€โ”€ Buttons โ”€โ”€โ”€ */
248
  .btn button {
249
  background: var(--panel) !important;
250
+ color: var(--text-muted) !important;
251
  border: 1px solid var(--border) !important;
252
+ border-radius: 6px !important;
253
  padding: 5px 13px !important;
254
  font-size: 12px !important;
255
+ font-weight: 500 !important;
256
  min-width: 0 !important;
257
+ box-shadow: none !important;
258
+ transition: color 0.15s ease, border-color 0.15s ease !important;
259
  cursor: pointer;
260
  }
261
  .btn button:hover {
262
+ color: var(--text) !important;
263
  border-color: #CFCBBE !important;
264
  }
 
265
  .btn button:focus-visible {
266
+ outline: 1px solid var(--accent) !important;
267
+ outline-offset: 1px !important;
268
  }
269
  .btn-primary button {
270
  background: var(--accent) !important;
271
  color: white !important;
272
  border: 1px solid var(--accent) !important;
273
+ box-shadow: none !important;
274
  }
275
  .btn-primary button:hover {
276
  background: var(--accent-hover) !important;
277
  border-color: var(--accent-hover) !important;
278
+ color: white !important;
279
  }
280
 
281
  /* โ”€โ”€โ”€ Code editors โ”€โ”€โ”€ */
 
335
  .gradio-accordion {
336
  background: var(--panel) !important;
337
  border: 1px solid var(--border) !important;
338
+ border-radius: 10px !important;
339
  margin-top: 16px !important;
340
  overflow: hidden;
 
341
  }
342
  .gradio-accordion > button {
343
  background: var(--panel-tint) !important;
344
  color: var(--text-muted) !important;
345
  font-size: 12px !important;
346
+ font-weight: 500 !important;
347
  padding: 10px 14px !important;
348
  border: none !important;
349
  text-align: left !important;
 
369
  padding: 11px 16px;
370
  background: var(--panel);
371
  border: 1px solid var(--border);
372
+ border-radius: 10px;
373
  font-size: 13px;
374
  color: var(--text);
 
375
  }
376
  #status-bar .pill {
377
  display: inline-flex;
378
  align-items: center;
379
+ padding: 2px 10px;
 
380
  font-size: 11px;
381
+ font-weight: 600;
382
  letter-spacing: 0.04em;
383
  text-transform: uppercase;
384
+ border-radius: 5px;
385
  white-space: nowrap;
386
  }
387
  #status-bar .pill.ok { background: #E8F3EC; color: var(--ok); }
388
  #status-bar .pill.err { background: #FBE9E7; color: var(--err); }
389
  #status-bar .pill.idle { background: var(--panel-tint); color: var(--text-muted); }
390
  #status-bar .pill.run { background: var(--accent-soft); color: var(--accent-hover); }
 
 
 
 
 
 
 
 
 
 
 
 
391
 
392
  /* โ”€โ”€โ”€ Form chrome (dropdown, slider, key field) โ”€โ”€โ”€ */
393
  .gradio-dropdown input,
 
395
  background: var(--panel) !important;
396
  color: var(--text) !important;
397
  border: 1px solid var(--border) !important;
398
+ border-radius: 6px !important;
399
  font-size: 13px !important;
400
  }
401
  .gradio-dropdown input:focus,
402
  .gradio-dropdown .wrap:focus-within {
403
  border-color: var(--accent) !important;
 
404
  outline: none !important;
405
  }
406
  input[type="range"] { accent-color: var(--accent) !important; }
 
411
  font-variant-numeric: tabular-nums;
412
  }
413
  input[type="password"], input[type="text"] {
414
+ border-radius: 6px !important;
415
  }
416
  input[type="password"]:focus, input[type="text"]:focus {
417
  border-color: var(--accent) !important;
 
418
  }
419
 
420
  /* inputs / textareas โ€” never white on white */
 
431
  .gradio-dropdown [role="listbox"] {
432
  background: #FFFFFF !important;
433
  border: 1px solid var(--border) !important;
434
+ border-radius: 7px !important;
 
435
  color: #1A1A1A !important;
436
  }
437
  ul[role="listbox"] li,
 
539
  gr.HTML(
540
  """
541
  <div id="header">
542
+ <div class="title">Lean 4 Proof Assistant</div>
543
+ <div class="sub">Mathlib RAG ยท LangGraph ยท formally verified</div>
 
 
 
 
544
  </div>
545
  """
546
  )