Update styles.css

fix copy buttons and empty space at bottom of page

styles.css

@@ -1,32 +1,99 @@
-/* Highlight active elements */
-input[type="text"]:focus, button:hover, button:focus {
-    border: 2px solid #f1c40f; /* Gold border for emphasis */
-    box-shadow: 0 0 5px #f1c40f;
+/* General styling for the Gradio app */
+body {
+    background-color: #1c1e26;
+    color: #c0c0c0;
+    font-family: Arial, sans-serif;
 }
 
-/* Add color accents to section headers */
-h2, h3 {
-    color: #f39c12; /* Orange for headers */
-    border-bottom: 2px solid #f39c12; /* Optional: border for separation */
-    padding-bottom: 5px;
+/* Styling for the headers */
+h1, h2, h3 {
+    color: #f0a500;
 }
 
-/* Add subtle background to examples */
-.gr-examples {
-    background-color: #2c3e50; /* Dark background for examples section */
+/* Styling for the buttons */
+button {
+    background-color: #005f73;
+    color: #ffffff;
+    border: none;
+    padding: 10px 20px;
+    margin: 10px 0;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+button:hover {
+    background-color: #0a9396;
+}
+
+/* Styling for the textboxes */
+textarea {
+    background-color: #242629;
+    color: #ffffff;
+    border: 1px solid #ccc;
     padding: 10px;
     border-radius: 5px;
 }
 
-/* Button styling */
-button {
-    background-color: #3498db; /* Blue background */
-    color: white; /* White text */
-    border: none; /* Remove default border */
-    padding: 10px 20px; /* Add padding */
-    border-radius: 5px; /* Rounded corners */
+/* Specific styling for the copy buttons to make them visible */
+.gr-button.copy-button {
+    background-color: #ef476f;
+    color: #ffffff;
+    border: none;
+    padding: 5px 10px;
+    margin: 10px;
+    cursor: pointer;
+    border-radius: 5px;
 }
 
-button:hover {
-    background-color: #2980b9; /* Darker blue on hover */
+.gr-button.copy-button:hover {
+    background-color: #d43d57;
+}
+
+/* Adjust layout to reduce unused space at the bottom */
+.gradio-container {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.gradio-content {
+    flex: 1;
+}
+
+/* Improved layout for rows and columns */
+.gr-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.gr-column {
+    flex: 1;
+    padding: 10px;
+}
+
+/* Ensuring the model architecture and error boxes are aligned */
+.model-architecture, .error-box {
+    flex: 1;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #242629;
+}
+
+/* Styling for markdown sections */
+.markdown {
+    margin: 20px 0;
+}
+
+/* Ensure the examples have better spacing */
+.gr-examples {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.gr-examples button {
+    flex: 1 1 45%;
+    margin: 5px;
 }