CSS Color

app.py

@@ -244,20 +244,55 @@ css = """
 body {
     background-color: #1b1b1b;
     font-family: 'Cinzel', serif;
-    color: #f4a261;
+    color: #f4a261; /* Updated font color */
     background-image: url('https://www.transparenttextures.com/patterns/dark-matter.png');
 }
 #col-container {
     margin: 0 auto;
     max-width: 550px;
     padding: 15px;
-    border: 4px solid #8b4513;
-    background: linear-gradient(145deg, #2e2b2a, #3a3433);
+    border: 4px solid #8b4513; /* A deep brown border for a medieval feel */
+    background: linear-gradient(145deg, #2e2b2a, #3a3433); /* Subtle texture effect */
     border-radius: 15px;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
 }
-"""
 
+h1, h2, h3 {
+    color: #f4a261; /* Ensure headers also use this color */
+    text-align: center;
+    font-family: 'Cinzel', serif;
+}
+
+button, .gr-button {
+    background-color: #3a3433;
+    color: #f4a261; /* Matches the overall theme */
+    border: 2px solid #8b4513;
+    border-radius: 10px;
+    padding: 10px;
+    font-family: 'Cinzel', serif;
+    font-weight: bold;
+    box-shadow: 0 4px 15px rgba(139, 69, 19, 0.5);
+}
+
+button:hover, .gr-button:hover {
+    background-color: #8b4513; /* Deep brown hover effect */
+    color: #1b1b1b;
+}
+
+label {
+    color: #f4a261; /* Form labels use the same themed color */
+    font-family: 'Cinzel', serif;
+}
+
+textarea, input, select {
+    background-color: #2e2b2a; /* Matches the overall form styling */
+    color: #f4a261;
+    border: 1px solid #8b4513;
+    border-radius: 5px;
+    font-family: 'Cinzel', serif;
+    padding: 8px;
+}
+"""
 # Interface
 with gr.Blocks(css=css) as demo:
     with gr.Column(elem_id="col-container"):
@@ -277,7 +312,7 @@ with gr.Blocks(css=css) as demo:
             prompt = gr.Textbox(
                 label="🎲 Describe Your Vision:",
                 lines=3,
-                placeholder="Describe your hero, monster, or legendary landscape..."
+                placeholder="Describe your hero, monster, or legendary landscape...",
             )
             style = gr.Dropdown(
                 label="🎨 Select a Style",
@@ -343,4 +378,4 @@ with gr.Blocks(css=css) as demo:
     )
 
 # Launch the demo
-demo.launch()
+demo.launch()