Update custom.css

custom.css

@@ -1,6 +1,112 @@
-#title{text-align: center;}
-#title h1{font-size: 2em;}
-#prompt input{width: 100%; border-radius: 4px;}
-#run_button{width: 100%; margin-top: 1em; border-radius: 4px;}
-#gallery{display:flex; flex-wrap: wrap; max-width: 300px;}  /* Reduzindo o tamanho da galeria */
-#gallery .grid-wrap{min-height: 100%; max-width: 100px; max-height: 100px;}  /* Reduzindo o tamanho das imagens da galeria */
+/* Global styles */
+body {
+    font-family: 'Arial', sans-serif;
+    line-height: 1.6;
+    color: #333;
+    background-color: #f5f5f5;
+}
+
+/* Title styles */
+#title {
+    text-align: center;
+    padding: 20px 0;
+    background-color: #3498db;
+    color: white;
+    margin-bottom: 20px;
+}
+
+#title h1 {
+    font-size: 2.5em;
+    margin: 0;
+}
+
+/* Input styles */
+#prompt input, #negative_prompt textarea {
+    width: 100%;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+    padding: 10px;
+    font-size: 1em;
+    transition: border-color 0.3s ease;
+}
+
+#prompt input:focus, #negative_prompt textarea:focus {
+    border-color: #3498db;
+    outline: none;
+}
+
+/* Button styles */
+#generate_button {
+    width: 100%;
+    margin-top: 1em;
+    border-radius: 4px;
+    background-color: #2ecc71;
+    color: white;
+    font-size: 1.1em;
+    padding: 10px;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+#generate_button:hover {
+    background-color: #27ae60;
+}
+
+/* Gallery styles */
+#gallery {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    max-width: 100%;
+    margin-top: 20px;
+}
+
+#gallery .grid-wrap {
+    min-height: 150px;
+    max-width: 150px;
+    max-height: 150px;
+    margin: 10px;
+    border-radius: 4px;
+    overflow: hidden;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    transition: transform 0.3s ease;
+}
+
+#gallery .grid-wrap:hover {
+    transform: scale(1.05);
+}
+
+/* Slider styles */
+.gradio-slider {
+    margin-bottom: 15px;
+}
+
+.gradio-slider input[type="range"] {
+    width: 100%;
+}
+
+/* Dropdown styles */
+.gradio-dropdown select {
+    width: 100%;
+    padding: 8px;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+    font-size: 1em;
+}
+
+/* Result image styles */
+#result img {
+    max-width: 100%;
+    border-radius: 4px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    #gallery .grid-wrap {
+        min-height: 100px;
+        max-width: 100px;
+        max-height: 100px;
+    }
+}