/* ── Form / accordion / label tweaks ────────────────────────────────────── * * Previously these rules targeted Svelte hash classes (e.g. .svelte-d5xbca, * .svelte-xzq5jh, .svelte-e5lyqv, .svelte-jdcl7l) which Gradio re-generates on * every release. We drop the hashes and use stable class/role selectors so a * Gradio bump doesn't silently break our styling. */ /* hide the rectangular border Gradio puts around forms */ .gradio-container .form { border: none !important; } /* small "Validate & Format" style accordion buttons inside forms */ .gradio-container .form button.sm, .gradio-container .accordion button.sm { background: rgb(229, 231, 235); } .dark .gradio-container .form button.sm, .dark .gradio-container .accordion button.sm { background: #2a2a2a !important; color: #c0c0c0 !important; } /* accordion / dropdown / slider label colors */ .gradio-container .label-wrap, .gradio-container .label-wrap > span { color: #000; } .dark .gradio-container .label-wrap, .dark .gradio-container .label-wrap > span { color: #c0c0c0 !important; } /* bot paragraph color (kept here because it's adjacent to label color logic) */ #hy-chat .bot p { color: #000; } .dark #hy-chat .bot p { color: #e8e8e8 !important; } /* prose inside the Gradio container (markdown rendering); use attribute * selector that matches any container-version class instead of a pinned one */ [class*="gradio-container"] .prose * { color: #000; } .dark [class*="gradio-container"] .prose * { color: #e8e8e8 !important; }