Update app.py

app.py

@@ -73,21 +73,20 @@ def generate_txt2img(current_model, prompt, is_negative=False, image_style="None
     return image
 
 css = """
-/* Custom CSS */
+/* General Container Styles */
 .gradio-container {
     font-family: 'IBM Plex Sans', sans-serif;
-    max-width: 900px;
+    max-width: 730px !important;
     margin: auto;
-    padding: 2rem;
-    border-radius: 15px;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+    padding-top: 1.5rem;
     text-align: center; /* Center the content horizontally */
 }
 
 /* Button Styles */
 .gr-button {
     color: white;
-    background-color: #007bff; /* Use a primary color for the background */
+    background: black;
+    white-space: nowrap;
     border: none;
     padding: 10px 20px;
     border-radius: 8px;
@@ -96,27 +95,45 @@ css = """
 }
 
 .gr-button:hover {
-    background-color: #0056b3; /* Darken the background color on hover */
+    background-color: #060606; /* Darken the background color on hover */
 }
 
-/* Textbox Styles */
-.gr-textbox {
-    border-radius: 8px;
-    border: 1px solid #ccc;
-    padding: 10px;
-    transition: border-color 0.3s;
+/* Share Button Styles */
+#share-btn-container {
+    padding: 0.5rem !important;
+    background-color: #000000;
+    justify-content: center;
+    align-items: center;
+    border-radius: 9999px !important;
+    max-width: 13rem;
+    margin: 0 auto; /* Center the container horizontally */
+}
+
+#share-btn-container:hover {
+    background-color: #060606;
 }
 
-.gr-textbox:focus {
-    border-color: #007bff;
-    outline: none;
+#share-btn {
+    all: initial;
+    color: #ffffff;
+    font-weight: 600;
+    cursor: pointer;
+    font-family: 'IBM Plex Sans', sans-serif;
+    margin: 0.5rem !important;
+    padding: 0.5rem !important;
+}
+/* Other Styles */
+#gallery {
+    min-height: 22rem;
+    margin: auto; /* Center the gallery horizontally */
+    border-bottom-right-radius: 0.5rem !important;
+    border-bottom-left-radius: 0.5rem !important;
 }
 
 /* Centered Container for the Image */
 .image-container {
     max-width: 100%; /* Set the maximum width for the container */
-    margin: 0 auto; /* Center the container horizontally */
-    text-align: center; /* Center the content inside the container horizontally */
+    margin: auto; /* Center the container horizontally */
     padding: 20px; /* Add padding for spacing */
     border: 1px solid #ccc; /* Add a subtle border to the container */
     border-radius: 10px;