CSS D&D MAP

app.py

@@ -234,14 +234,14 @@ def infer(
 
 # Example prompts
 examples = [
-    ["A 10x8 battle map located in Ravenloft", "D&D MAP"],
+    ["A 10x8 battle map located in Ravenloft", "D&D Map"],
     ["A heroic adventurer wielding a flaming sword standing on a cliff", "D&D Art"],
     ["A mystical library with ancient scrolls and glowing runes", "Dark Fantasy"],
     ["A ferocious dragon breathing fire in a dark cavern", "Epic Battle"],
 ]
 
-# Custom CSS for a Dungeons & Dragons theme
 css = """
+/* General body styling */
 body {
     background-color: #1b1b1b;
     font-family: 'Cinzel', serif;
@@ -251,42 +251,48 @@ body {
     padding: 0;
 }
 
+/* Container */
 #col-container {
     margin: 0 auto;
     max-width: 550px;
-    padding: 15px;
-    border: 4px solid #8b4513;
-    background: linear-gradient(145deg, #2e2b2a, #3a3433);
-    border-radius: 15px;
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
-    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+    padding: 20px;
+    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;
 }
 
-/* Hover effect for #col-container */
 #col-container:hover {
-    transform: scale(1.02);
-    box-shadow: 0 0 30px rgba(139, 69, 19, 0.9);
+    transform: scale(1.03);
+    box-shadow: 0 0 40px rgba(255, 223, 0, 0.8), 0 0 20px rgba(255, 140, 0, 0.8);
 }
 
+/* Fancy title and text effects */
 #col-container h1, #col-container h2, #col-container h3 {
-    color: #e6e6e6;
-    text-shadow: 2px 2px 8px rgba(139, 69, 19, 0.8);
+    color: #ffebcc;
+    text-shadow: 0 0 10px #8b4513, 0 0 20px #ffd700;
+}
+
+#col-container p {
+    color: #dcdcdc;
+    text-shadow: 0 0 6px rgba(139, 69, 19, 0.8);
 }
 
-/* Markdown links customization */
+/* Markdown links */
 #col-container a {
-    color: #b8860b;
+    color: #e6ac00;
     text-decoration: none;
     font-weight: bold;
     transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
 }
 
 #col-container a:hover {
-    color: #e6ac00;
-    text-shadow: 0 0 8px #e6ac00, 0 0 15px #e6ac00;
+    color: #fff700;
+    text-shadow: 0 0 10px #fff700, 0 0 20px #ffebcc;
 }
 
-/* Button styling */
+/* Buttons with D&D glowing effect */
 .gr-button {
     background-color: #8b4513;
     color: #f5f5f5;
@@ -295,56 +301,68 @@ body {
     border: 2px solid #b8860b;
     border-radius: 8px;
     cursor: pointer;
-    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+    transition: background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, transform 0.2s ease-in-out;
 }
 
 .gr-button:hover {
     background-color: #b8860b;
-    box-shadow: 0 0 10px rgba(255, 165, 0, 0.8);
+    transform: scale(1.05);
+    box-shadow: 0 0 12px rgba(255, 223, 0, 0.9), 0 0 24px rgba(255, 140, 0, 0.7);
 }
 
-/* Inputs and dropdowns */
+/* Input and Dropdown styling */
 input, select, .gr-input, .gr-slider {
-    background-color: #2e2b2a;
+    background-color: #302d2b;
     color: #f5f5f5;
     border: 2px solid #8b4513;
     border-radius: 5px;
-    padding: 5px 10px;
+    padding: 8px 12px;
     font-family: 'Cinzel', serif;
-    transition: border 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+    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: #b8860b;
-    box-shadow: 0 0 10px #b8860b;
+    border-color: #ffd700;
+    box-shadow: 0 0 8px #ffd700;
 }
 
-/* Slider and checkbox */
+/* Slider styling */
 .gr-slider > div {
     background-color: #8b4513 !important;
 }
 
-.gr-checkbox {
-    color: #f5f5f5;
-}
-
+/* Checkbox customization */
 .gr-checkbox-label {
     font-weight: bold;
     color: #f5f5f5;
+    text-shadow: 0 0 5px rgba(139, 69, 19, 0.7);
 }
 
-/* Accordion */
+/* Accordion effects */
 .gr-accordion {
     background: linear-gradient(145deg, #302d2b, #3b3634);
     color: #f5f5f5;
     border: 2px solid #8b4513;
-    border-radius: 8px;
+    border-radius: 10px;
+    padding: 8px;
     transition: all 0.3s ease;
 }
 
 .gr-accordion:hover {
-    box-shadow: 0 0 10px rgba(139, 69, 19, 0.8);
+    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 #8b4513;
+    border-radius: 10px;
+    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);
 }
 """