Spaces:
Build error
Build error
| # monolith_theme.py | |
| import gradio as gr | |
| class MonolithTheme(gr.Theme): | |
| base = "dark" | |
| primary_color = "#150535" # Dark purple used in .hero background | |
| secondary_color = "#414141" # Light metallic gray | |
| accent_color = "#7b2ff7" # Purple accent color from .button background | |
| text_color = "#FFFFFF" # Bright white for high readability | |
| background_color = "#000000" # Deep space black | |
| input_background_color = "#2A2A2A" | |
| output_background_color = "#2A2A2A" | |
| button_color = "#7b2ff7" # Purple button color from .button background | |
| button_hover_color = "#9b4dff" # Lighter purple on hover from .ctaButton:hover | |
| button_text_color = "#FFFFFF" | |
| font = "'Inter', sans-serif" # Font from the body style in Hero.module.css | |
| font_size = "16px" | |
| border_radius = "30px" # Rounded edges for buttons from .button | |
| transition = "transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease" | |
| text_box_shadow = "0 2px 4px rgba(0, 0, 0, 0.5)" # Text shadow from .subtitle | |
| button_box_shadow = "0 4px 14px 0 rgba(0, 0, 0, 0.11)" # Shadow from .button | |
| container_box_shadow = "0 4px 10px rgba(0, 0, 0, 0.5)" # Shadow from .dramaticSection | |
| custom_css = """ | |
| :root { | |
| --color-background: var(--primary-color); | |
| --color-text: var(--text-color); | |
| --color-hover: var(--accent-color); | |
| --button-background-color: var(--button-color); | |
| --button-text-color: var(--button-text-color); | |
| --button-hover-background-color: var(--button-hover-color); | |
| --button-hover-text-color: var(--primary-color); | |
| --border-radius: var(--border-radius); | |
| } | |
| body { | |
| font-family: var(--font); | |
| background-image: url('starfield.png'); /* A starfield background image */ | |
| background-size: cover; | |
| } | |
| .gr-button, .gr-button:active, .gr-button:hover, .gr-button:focus { | |
| background-color: var(--button-background-color); | |
| color: var(--button-text-color); | |
| border: 1px solid var(--accent-color); | |
| box-shadow: var(--button-box-shadow); | |
| transition: var(--transition); | |
| } | |
| .gr-button:hover { | |
| background-color: var(--button-hover-background-color); | |
| color: var(--button-hover-text-color); | |
| box-shadow: none; | |
| } | |
| .gr-textbox, .gr-textbox:focus { | |
| border: 1px solid var(--secondary-color); | |
| box-shadow: var(--text-box-shadow); | |
| } | |
| .gr-output-container { | |
| border: 1px solid var(--secondary-color); | |
| box-shadow: var(--container-box-shadow); | |
| } | |
| .gr-example-container { | |
| border-top: 1px solid var(--secondary-color); | |
| } | |
| """ | |
| # Instantiate your custom theme | |
| # theme = MonolithTheme() | |
| # Use the custom theme in a Gradio app |