|
|
|
|
|
"""CSS chunk: variables, base layout, title, typography, controls (no tab overrides).""" |
|
|
|
|
|
CSS_BASE_LAYOUT = """ |
|
|
:root{ |
|
|
/* Slightly lighter dark palette + softer white text */ |
|
|
--bg:#141a22; |
|
|
--panel:#1a2333; |
|
|
--panel-soft:#171f2b; |
|
|
--line:#273142; |
|
|
--text:#edf2f7; |
|
|
--muted:#cbd5e1; |
|
|
--acc:#7dd3fc; |
|
|
--acc2:#60a5fa; |
|
|
--shadow:0 8px 24px rgba(0,0,0,.25); |
|
|
} |
|
|
|
|
|
/* Lock appearance regardless of OS/browser light/dark */ |
|
|
html{ color-scheme: dark !important; } |
|
|
html[data-theme="light"], |
|
|
body[data-theme="light"], |
|
|
.gradio-container[data-theme="light"], |
|
|
html[data-theme="dark"], |
|
|
body[data-theme="dark"], |
|
|
.gradio-container[data-theme="dark"]{ |
|
|
--bg:#141a22; --panel:#1a2333; --panel-soft:#171f2b; --line:#273142; |
|
|
--text:#edf2f7; --muted:#cbd5e1; --acc:#7dd3fc; --acc2:#60a5fa; |
|
|
} |
|
|
|
|
|
/* Base layout */ |
|
|
html,body{ background:var(--bg)!important; margin:0!important; padding:0!important; } |
|
|
.gradio-container{ |
|
|
background:var(--bg)!important; color:var(--text)!important; |
|
|
padding:0 8px!important; margin:0 auto!important; max-width:100%!important; |
|
|
width:100%!important; box-sizing:border-box!important; |
|
|
} |
|
|
.gradio-container, html, body{ height:auto!important; min-height:0!important; overflow-y:auto!important; } |
|
|
.gradio-container .tabitem, .gradio-container .block, .gradio-container .panel, .gradio-container .tabs{ min-height:0!important; } |
|
|
.gradio-container .block,.gradio-container .panel,.gradio-container .tabs,.gradio-container .tabitem, |
|
|
.gradio-container .tab-container,.gradio-container .wrap,.gradio-container .container{ |
|
|
background:var(--bg)!important; padding:0!important; margin:0 auto!important; |
|
|
} |
|
|
.gradio-container > *:first-child{ margin-top:0!important; padding-top:0!important; } |
|
|
|
|
|
/* Title */ |
|
|
#main-title{ margin:0!important; padding:2px 0!important; } |
|
|
#main-title h1{ |
|
|
font-size:30px!important; font-weight:800!important; margin:0!important; |
|
|
color:var(--text)!important; letter-spacing:.2px; line-height:1.1!important; |
|
|
} |
|
|
|
|
|
/* Grid gaps */ |
|
|
.gradio-container .gr-row,.gradio-container .grid{ gap:4px!important; } |
|
|
|
|
|
/* Typography and links */ |
|
|
.gradio-container, |
|
|
.gradio-container *:not(i.fa):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands){ |
|
|
font-family:inherit!important; |
|
|
} |
|
|
.gradio-container a{ |
|
|
color:var(--acc2)!important; text-decoration:underline; text-underline-offset:2px; |
|
|
} |
|
|
.gradio-container a:hover{ color:var(--acc)!important; text-decoration-thickness:2px; } |
|
|
|
|
|
/* Prose containers */ |
|
|
.gradio-container .prose, .gradio-container .markdown, .gradio-container .md{ |
|
|
background:var(--bg)!important; color:var(--text)!important; |
|
|
} |
|
|
|
|
|
/* Form controls */ |
|
|
.gradio-container input, .gradio-container textarea, .gradio-container select{ |
|
|
background:var(--panel)!important; color:var(--text)!important; |
|
|
border:1px solid var(--line)!important; border-radius:10px!important; |
|
|
} |
|
|
.gradio-container input::placeholder, .gradio-container textarea::placeholder{ |
|
|
color:rgba(237,242,247,.7)!important; |
|
|
} |
|
|
.gradio-container select option{ background:var(--panel)!important; color:var(--text)!important; } |
|
|
""" |
|
|
|
