Spaces:
Sleeping
Sleeping
| # ========================= | |
| # CSS & UI | |
| # ========================= | |
| custom_css = """ | |
| body, .gradio-container { font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif; } | |
| .app-header { text-align: center; max-width: 800px; margin: 0 auto 8px !important; } | |
| .gradio-container { padding: 4px 0 !important; max-width: 1200px !important; margin: 0 auto !important; } | |
| .gradio-container [data-testid="tabs"], .gradio-container .tabs { margin-top: 0 !important; } | |
| .gradio-container [data-testid="tabitem"], .gradio-container .tabitem { padding-top: 4px !important; } | |
| .gradio-container .wrap { gap: 0 !important; } | |
| .quick-links { text-align: center; padding: 8px 0; border: 1px solid #e5e7eb; border-radius: 8px; margin: 8px auto; max-width: 800px; } | |
| .quick-links a { margin: 0 12px; font-size: 14px; font-weight: 600; color: #3b82f6; text-decoration: none; } | |
| .quick-links a:hover { text-decoration: underline; } | |
| .prompt-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } | |
| .prompt-grid button { height: 40px !important; padding: 0 12px !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: 0.2px; } | |
| #image_preview_vl, #image_preview_doc { height: 400px !important; overflow: auto; } | |
| #image_preview_vl img, #image_preview_doc img, #vis_image_doc img { width: 100% !important; height: auto !important; object-fit: contain !important; display: block; } | |
| #md_preview_vl, #md_preview_doc { max-height: 540px; min-height: 180px; overflow: auto; scrollbar-gutter: stable both-edges; } | |
| #md_preview_vl .prose, #md_preview_doc .prose { line-height: 1.7 !important; } | |
| #md_preview_vl .prose img, #md_preview_doc .prose img { display: block; margin: 0 auto; max-width: 100%; height: auto; } | |
| .notice { margin: 8px auto 0; max-width: 800px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f8fafc; font-size: 14px; line-height: 1.6; } | |
| .notice strong { font-weight: 700; } | |
| .notice a { color: #3b82f6; text-decoration: none; } | |
| .notice a:hover { text-decoration: underline; } | |
| /* Dark mode styles */ | |
| @media (prefers-color-scheme: dark) { | |
| body, .gradio-container { | |
| background-color: #0f1117 !important; | |
| color: #f5f5f5 !important; | |
| } | |
| .notice { | |
| background: #1e293b !important; | |
| color: #f5f5f5 !important; | |
| border: 1px solid #334155 !important; | |
| } | |
| .notice a { | |
| color: #60a5fa !important; | |
| } | |
| .quick-links { | |
| border-color: #334155 !important; | |
| } | |
| .quick-links a { | |
| color: #93c5fd !important; | |
| } | |
| } | |
| /* Hide empty Gradio auto-scroll/anchor button or padding container near Markdown blocks */ | |
| button.svelte-vuh1yp, | |
| div.svelte-vuh1yp:has(button), | |
| div#component-3 > div.wrap.center.full, | |
| div[id^="component-"][class*="hide-container"] .wrap.center.full { | |
| display: none !important; | |
| } | |
| /* Prevent extra padding on Markdown containers */ | |
| div[class*="block"].hide-container { | |
| padding: 0 !important; | |
| margin: 0 !important; | |
| border: none !important; | |
| overflow: visible !important; | |
| } | |
| """ | |