Update frontend/webui/css/style.css

frontend/webui/css/style.css

@@ -1,22 +1,58 @@
 footer {
-    visibility: hidden
+    visibility: hidden; /* If you want completely removed, consider display: none; */
 }
 
+/* Generate Button Styling */
 #generate_button {
-    color: white;
-    border-color: #007bff;
-    background: #2563eb;
+    color: #fff;
+    background: #2563eb; /* Nice blue */
+    border: 2px solid #1e40af; /* Darker blue border */
+    padding: 12px 30px;
+    font-weight: 600;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, border-color 0.3s ease;
+    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.5);
+}
 
+#generate_button:hover,
+#generate_button:focus {
+    background: #1e40af; /* Darker blue on hover */
+    border-color: #1a3a9a;
+    outline: none;
 }
 
+/* Save Button Styling */
 #save_button {
-    color: white;
-    border-color: #028b40;
-    background: #01b97c;
+    color: #fff;
+    background: #01b97c; /* Fresh green */
+    border: 2px solid #017a50; /* Dark green border */
     width: 200px;
+    padding: 12px 0;
+    font-weight: 600;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, border-color 0.3s ease;
+    box-shadow: 0 4px 10px rgba(1, 185, 124, 0.5);
+    text-align: center;
 }
 
-#settings_header {
-    background: rgb(245, 105, 105);
+#save_button:hover,
+#save_button:focus {
+    background: #017a50; /* Darker green on hover */
+    border-color: #015d3b;
+    outline: none;
+}
 
-}
+/* Settings Header Styling */
+#settings_header {
+    background: rgb(245, 105, 105); /* Slightly softer red */
+    background: linear-gradient(90deg, #f56969, #e94e4e);
+    padding: 15px 20px;
+    border-radius: 8px 8px 0 0;
+    color: white;
+    font-weight: 700;
+    font-size: 1.2rem;
+    box-shadow: 0 4px 12px rgba(245, 105, 105, 0.5);
+    user-select: none;
+}