Spaces:
Sleeping
Minimalist UI pass: remove emojis and decorative chrome
Browse filesStrips 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.
|
@@ -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
|
| 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:
|
| 162 |
margin: 0 auto !important;
|
| 163 |
-
padding:
|
| 164 |
}
|
| 165 |
footer, .show-api { display: none !important; }
|
| 166 |
|
| 167 |
/* โโโ Header โโโ */
|
| 168 |
#header {
|
| 169 |
display: flex;
|
| 170 |
-
align-items:
|
| 171 |
-
|
| 172 |
-
|
| 173 |
-
|
| 174 |
-
margin-bottom: 28px;
|
| 175 |
-
padding: 0 4px;
|
| 176 |
}
|
| 177 |
#header .title {
|
| 178 |
-
font-size:
|
| 179 |
-
font-weight:
|
| 180 |
-
letter-spacing: -0.
|
| 181 |
color: var(--text);
|
| 182 |
-
display: flex;
|
| 183 |
-
align-items: center;
|
| 184 |
-
gap: 11px;
|
| 185 |
}
|
| 186 |
-
#header .
|
| 187 |
-
|
| 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 |
-
|
| 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:
|
| 215 |
-
margin-bottom:
|
| 216 |
-
padding: 14px
|
| 217 |
background: var(--panel);
|
| 218 |
border: 1px solid var(--border);
|
| 219 |
-
border-radius:
|
| 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:
|
| 247 |
overflow: hidden;
|
| 248 |
-
|
| 249 |
-
transition: box-shadow 0.2s ease, border-color 0.2s ease;
|
| 250 |
max-height: 580px;
|
| 251 |
}
|
| 252 |
.panel:focus-within {
|
| 253 |
-
|
| 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:
|
| 261 |
background: var(--panel-tint) !important;
|
| 262 |
border-bottom: 1px solid var(--border-soft) !important;
|
| 263 |
gap: 8px !important;
|
| 264 |
-
min-height:
|
| 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:
|
| 296 |
padding: 5px 13px !important;
|
| 297 |
font-size: 12px !important;
|
| 298 |
-
font-weight:
|
| 299 |
min-width: 0 !important;
|
| 300 |
-
box-shadow:
|
| 301 |
-
transition:
|
| 302 |
cursor: pointer;
|
| 303 |
}
|
| 304 |
.btn button:hover {
|
| 305 |
-
|
| 306 |
border-color: #CFCBBE !important;
|
| 307 |
}
|
| 308 |
-
.btn button:active { transform: translateY(1px); }
|
| 309 |
.btn button:focus-visible {
|
| 310 |
-
outline:
|
| 311 |
-
outline-offset:
|
| 312 |
}
|
| 313 |
.btn-primary button {
|
| 314 |
background: var(--accent) !important;
|
| 315 |
color: white !important;
|
| 316 |
border: 1px solid var(--accent) !important;
|
| 317 |
-
box-shadow:
|
| 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:
|
| 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:
|
| 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:
|
| 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 |
-
|
| 425 |
-
padding: 3px 11px;
|
| 426 |
font-size: 11px;
|
| 427 |
-
font-weight:
|
| 428 |
letter-spacing: 0.04em;
|
| 429 |
text-transform: uppercase;
|
| 430 |
-
border-radius:
|
| 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:
|
| 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:
|
| 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:
|
| 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">
|
| 604 |
-
<div class="
|
| 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 |
)
|