Spaces:
Build error
Build error
File size: 2,783 Bytes
bf1f92e 4996c38 bf1f92e 4996c38 bf1f92e 4996c38 bf1f92e 4996c38 bf1f92e 4996c38 bf1f92e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
# 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 |