Update app.py

app.py

@@ -79,78 +79,66 @@ def generate_txt2img(current_model, prompt, is_negative=False, image_style="None
 
 
 css = """
-        /* Ensure responsive design for different screen sizes */
-@media only screen and (max-width: 768px) {
-    .gradio-container {
-        max-width: 100% !important;
-    }
+/* General Container Styles */
+.gradio-container {
+    font-family: 'IBM Plex Sans', sans-serif;
+    max-width: 730px !important;
+    margin: auto;
+    padding-top: 1.5rem;
 }
 
-/* Improve button style for better visibility */
+/* Button Styles */
 .gr-button {
     color: white;
-    background: black;
     border-color: black;
-    border-radius: 5px; /* Add border-radius for a more modern look */
-}
-
-/* Adjust range input style for better visibility */
-input[type='range'] {
-    accent-color: black;
-    width: 100%; /* Ensure the range input spans the entire width */
-}
-
-/* Increase spacing and improve layout for the gallery section */
-#gallery {
-    min-height: 20rem; /* Adjust min-height for better responsiveness */
-    margin: 15px auto; /* Center the gallery */
-    border-radius: 0.5rem; /* Add border-radius for a smoother appearance */
+    background: black;
+    white-space: nowrap;
 }
 
-/* Enhance hover effect for details */
-.details:hover {
-    text-decoration: underline;
+.gr-button:focus {
+    border-color: rgb(147 197 253 / var(--tw-border-opacity));
+    outline: none;
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+    --tw-border-opacity: 1;
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px var(--tw-ring-offset-width)) var(--tw-ring-color);
+    --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity));
+    --tw-ring-opacity: .5;
 }
 
-/* Improve readability and style for the footer */
-.footer {
-    margin: 35px 0 45px;
+/* Footer Styles */
+.footer, .dark .footer {
+    margin-bottom: 45px;
+    margin-top: 35px;
     text-align: center;
     border-bottom: 1px solid #e5e5e5;
-    background: white; /* Add background color for better contrast */
 }
 
-/* Adjust padding and border color for the advanced options button */
-#advanced-btn {
-    font-size: 0.9rem;
-    line-height: 24px;
-    margin: 12px 0;
-    padding: 6px 12px; /* Increase padding for a more comfortable click area */
-    border-radius: 14px;
-    border-color: black; /* Match border color with button color */
+.footer > p, .dark .footer > p {
+    font-size: .8rem;
+    display: inline-block;
+    padding: 0 10px;
+    transform: translateY(10px);
+    background: white;
 }
 
-/* Improve styling for acknowledgments section */
-.acknowledgments h4 {
-    margin: 1.25em 0 0.25em;
-    font-weight: bold;
-    font-size: 1.15rem;
+.dark .footer {
+    border-color: #303030;
 }
 
-/* Add a subtle animation to the spin class */
-.animate-spin {
-    animation: spin 1s linear infinite;
+.dark .footer > p {
+    background: #0b0f19;
 }
 
-/* Adjust share button styling for better visibility */
+/* Share Button Styles */
 #share-btn-container {
-    padding: 0.5rem !important;
+    padding: 0 0.5rem !important;
     background-color: #000000;
     justify-content: center;
     align-items: center;
-    border-radius: 9999px;
+    border-radius: 9999px !important;
     max-width: 13rem;
-    margin: 0 auto;
+    margin-left: auto;
 }
 
 #share-btn-container:hover {
@@ -158,6 +146,7 @@ input[type='range'] {
 }
 
 #share-btn {
+    all: initial;
     color: #ffffff;
     font-weight: 600;
     cursor: pointer;
@@ -167,43 +156,24 @@ input[type='range'] {
     right: 0;
 }
 
-/* Adjust form and button styling for better alignment */
-.gr-form {
-    flex: 1 1 100%; /* Use full width for better responsiveness */
-    border-radius: 5px; /* Add border-radius for a smoother appearance */
-}
-
-#prompt-container {
-    gap: 0;
-}
-
-#prompt-container .form {
-    border-radius: 5px; /* Add border-radius for a smoother appearance */
-}
-
-#gen-button {
-    border-radius: 5px; /* Add border-radius for a smoother appearance */
-}
-
-/* Improve styling for input text boxes */
-#prompt-text-input, #negative-prompt-text-input {
-    padding: 0.45rem 0.625rem;
-}
-
-/* Ensure a minimum width for component-16 */
-#component-16 {
-    border-top-width: 1px !important;
-    margin-top: 1em;
-    min-width: 200px; /* Add a minimum width for better visibility */
+/* Animation Styles */
+.animate-spin {
+    animation: spin 1s linear infinite;
 }
 
-/* Reduce size of the duplicated image */
-.image_duplication{position: absolute; width: 100px; left: 50px}
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
 }
 
-/* Remove unnecessary border for tab items */
-.tabitem {
-    border: none !important;
+/* Other Styles */
+#gallery {
+    min-height: 22rem;
+    margin-bottom: 15px;
+    margin-left: auto;
+    margin-right: auto;
+    border-bottom-right-radius: .5rem !important;
+    border-bottom-left-radius: .5rem !important;
 }
 """