CSS

app.py

@@ -247,33 +247,23 @@ examples = [
 ]
 
 css = """
-/* Define CSS Variables for Consistency */
-:root {
-    --main-bg-color: #1b1b1b;
-    --main-font: 'Cinzel', serif;
-    --text-color: #f5f5f5;
-    --highlight-color: #ffd700;
-    --accent-color: #8b4513;
-    --shadow-color: rgba(255, 223, 0, 0.8);
-}
-
 /* General body styling */
 body {
-    background-color: var(--main-bg-color);
-    font-family: var(--main-font);
-    color: var(--text-color);
+    background-color: #1b1b1b;
+    font-family: 'Cinzel', serif;
+    color: #f5f5f5;
     background-image: url('https://www.transparenttextures.com/patterns/dark-matter.png');
     margin: 0;
     padding: 0;
 }
 
-/* Container Styling */
+/* Container */
 #col-container {
     margin: 0 auto;
     max-width: 550px;
     padding: 20px;
-    border: 6px solid var(--accent-color);
-    background: radial-gradient(circle, #302d2b 0%, #3b3634 60%, var(--main-bg-color) 100%);
+    border: 6px solid #8b4513;
+    background: radial-gradient(circle, #302d2b 0%, #3b3634 60%, #1b1b1b 100%);
     border-radius: 20px;
     box-shadow: 0 0 30px rgba(0, 0, 0, 0.9), 0 0 15px rgba(139, 69, 19, 0.7);
     transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
@@ -281,22 +271,21 @@ body {
 
 #col-container:hover {
     transform: scale(1.03);
-    box-shadow: 0 0 40px var(--shadow-color), 0 0 20px rgba(255, 140, 0, 0.8);
+    box-shadow: 0 0 40px rgba(255, 223, 0, 0.8), 0 0 20px rgba(255, 140, 0, 0.8);
 }
 
-/* Fancy Text Effects for Titles */
+/* Fancy title and text effects */
 #col-container h1, #col-container h2, #col-container h3 {
     color: #ffebcc;
-    text-shadow: 0 0 10px var(--accent-color), 0 0 20px var(--highlight-color);
+    text-shadow: 0 0 10px #8b4513, 0 0 20px #ffd700;
 }
 
-/* Paragraph Text Styling */
 #col-container p {
     color: #dcdcdc;
     text-shadow: 0 0 6px rgba(139, 69, 19, 0.8);
 }
 
-/* Links in Markdown */
+/* Markdown links */
 #col-container a {
     color: #e6ac00;
     text-decoration: none;
@@ -306,13 +295,13 @@ body {
 
 #col-container a:hover {
     color: #fff700;
-    text-shadow: 0 0 10px var(--highlight-color), 0 0 20px #ffebcc;
+    text-shadow: 0 0 10px #fff700, 0 0 20px #ffebcc;
 }
 
-/* Button Effects */
+/* Buttons with D&D glowing effect */
 .gr-button {
-    background-color: var(--accent-color);
-    color: var(--text-color);
+    background-color: #8b4513;
+    color: #f5f5f5;
     font-weight: bold;
     padding: 10px 20px;
     border: 2px solid #b8860b;
@@ -324,39 +313,60 @@ body {
 .gr-button:hover {
     background-color: #b8860b;
     transform: scale(1.05);
-    box-shadow: 0 0 12px var(--shadow-color), 0 0 24px rgba(255, 140, 0, 0.7);
+    box-shadow: 0 0 12px rgba(255, 223, 0, 0.9), 0 0 24px rgba(255, 140, 0, 0.7);
 }
 
-/* Input and Dropdown Styling */
+/* Input and Dropdown styling */
 input, select, .gr-input, .gr-slider {
     background-color: #302d2b;
-    color: var(--text-color);
-    border: 2px solid var(--accent-color);
+    color: #f5f5f5;
+    border: 2px solid #8b4513;
     border-radius: 5px;
     padding: 8px 12px;
-    font-family: var(--main-font);
+    font-family: 'Cinzel', serif;
     transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }
 
 input:focus, select:focus, .gr-input:focus, .gr-slider:focus {
     outline: none;
-    border-color: var(--highlight-color);
-    box-shadow: 0 0 8px var(--highlight-color);
+    border-color: #ffd700;
+    box-shadow: 0 0 8px #ffd700;
+}
+
+/* Slider styling */
+.gr-slider > div {
+    background-color: #8b4513 !important;
 }
 
-/* Advanced Element Styling */
-.gr-checkbox-label, .gr-accordion {
+/* Checkbox customization */
+.gr-checkbox-label {
     font-weight: bold;
-    color: var(--text-color);
+    color: #f5f5f5;
     text-shadow: 0 0 5px rgba(139, 69, 19, 0.7);
 }
 
+/* Accordion effects */
+.gr-accordion {
+    background: linear-gradient(145deg, #302d2b, #3b3634);
+    color: #f5f5f5;
+    border: 2px solid #8b4513;
+    border-radius: 10px;
+    padding: 8px;
+    transition: all 0.3s ease;
+}
+
+.gr-accordion:hover {
+    box-shadow: 0 0 12px rgba(255, 223, 0, 0.7), 0 0 20px rgba(255, 140, 0, 0.5);
+}
+
+/* Image glow effect */
 .gr-image {
-    border: 4px solid var(--accent-color);
+    border: 4px solid #8b4513;
     border-radius: 10px;
-    box-shadow: 0 0 10px var(--accent-color), 0 0 20px var(--highlight-color);
+    box-shadow: 0 0 10px #8b4513, 0 0 20px #ffd700;
 }
 
+/* Add glow on hover for images */
 .gr-image:hover {
     box-shadow: 0 0 20px rgba(255, 140, 0, 0.7), 0 0 40px rgba(255, 223, 0, 0.9);
 }
@@ -375,7 +385,7 @@ with gr.Blocks(css=css) as demo:
             """
         )
 
-        # Input and Style Selector
+        # Prompt input and style selector
         with gr.Row():
             prompt = gr.Textbox(
                 label="🎲 Describe Your Vision:",
@@ -387,13 +397,13 @@ with gr.Blocks(css=css) as demo:
                 choices=STYLE_NAMES,
                 value=DEFAULT_STYLE_NAME,
             )
-
-        # Action Button and Result
+        
+        # Run button and result display
         with gr.Row():
             run_button = gr.Button("Generate Image")
         result = gr.Image(label="🖼️ Your Legendary Vision")
         
-        # Advanced Settings
+        # Advanced settings
         with gr.Accordion("⚙️ Advanced Settings", open=False):
             seed = gr.Slider(
                 label="Seed",
@@ -419,7 +429,7 @@ with gr.Blocks(css=css) as demo:
                     step=32,
                     value=1024,
                 )
-
+            
             num_inference_steps = gr.Slider(
                 label="Inference Steps",
                 minimum=1,
@@ -428,7 +438,7 @@ with gr.Blocks(css=css) as demo:
                 value=6,
             )
 
-        # Examples
+        # Examples with styles
         gr.Examples(
             examples=examples,
             inputs=[prompt, style],
@@ -445,5 +455,5 @@ with gr.Blocks(css=css) as demo:
         outputs=[result, seed],
     )
 
-# Launch Application
+# Launch the demo
 demo.launch()