Better UI form

src/webui/style/style.css

@@ -468,44 +468,145 @@ h1, h2 {
 
 /* --- Site Info --- */
 
-#site-info-form input, #site-info-form textarea {
-    display: block;
-    margin-top: 5px;
-    border: none;
-    backdrop-filter: blur(20px);
-    background: #00293054;
-    border-radius: 5px;
-    outline: none;
-    font-size: 14px;
-    font-weight: 400;
-    color: #fff;
-    border-radius: 5px;
-    border: 1px solid #aaa;
-    padding: 0 15px;
-    height: 42px;
-    margin: 8px 0;
+/* --- Site Info Form --- */
+#site-info-form {
+  max-width: 950px;
 }
 
-#site-info-form label {
-  font-size: 12px;
-  font-weight: 500;
+#site-info-form fieldset {
+  border: none;
+  margin-bottom: 28px;
+  padding: 0;
+  background: rgba(0, 41, 48, 0.45);
+  border-radius: 18px;
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
+  padding: 32px 28px;
+  margin: 32px auto;
+  backdrop-filter: blur(12px);
+}
+
+#site-info-form legend {
+  font-size: 1.2em;
+  font-weight: 700;
+  color: #26c4ff;
+  margin-bottom: 12px;
+  letter-spacing: 1px;
+}
+
+#site-info-form .fields {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 18px;
 }
 
 #site-info-form .input-field {
-    display: flex;
-    width: calc(100% / 3 - 15px);
+  flex: 1 1 calc(33.333% - 18px);
+  min-width: 220px;
+  max-width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+}
+
+#site-info-form label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #b8eaff;
+  margin-bottom: 6px;
+  letter-spacing: 0.5px;
+}
+
+#site-info-form input,
+#site-info-form textarea,
+#site-info-form select {
+  background: rgba(4, 44, 60, 0.55);
+  color: #fff;
+  border: 1px solid #26c4ff33;
+  border-radius: 8px;
+  font-size: 15px;
+  font-weight: 400;
+  padding: 10px 14px;
+  margin-bottom: 4px;
+  outline: none;
+  transition: border-color 0.2s, background 0.2s;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
+}
+
+#site-info-form input:focus,
+#site-info-form textarea:focus,
+#site-info-form select:focus {
+  border-color: #26c4ff;
+  background: rgba(38, 196, 255, 0.09);
+}
+
+#site-info-form textarea {
+  min-height: 60px;
+  resize: vertical;
+}
+
+#site-info-form input[type="file"] {
+  background: none;
+  color: #fff;
+  border: none;
+  padding: 0;
+  margin-top: 2px;
+}
+
+#site-info-form img#thumbnail-preview {
+  margin-top: 8px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(38,196,255,0.12);
+  border: 1px solid #26c4ff33;
+}
+
+#site-info-form button[type="submit"] {
+  background: linear-gradient(135deg, #26c4ff, #016074);
+  color: #fff;
+  font-weight: 700;
+  border: none;
+  border-radius: 30px;
+  padding: 12px 32px;
+  font-size: 1.1em;
+  margin-top: 18px;
+  cursor: pointer;
+  box-shadow: 0 4px 16px rgba(38,196,255,0.15);
+  transition: background 0.2s;
+}
+
+#site-info-form button[type="submit"]:hover {
+  background: linear-gradient(135deg, #72d9ff, #26657e);
+}
+
+#site-info-form button[type="button"] {
+  background: #074053;
+  color: #fff;
+  border: none;
+  border-radius: 18px;
+  padding: 7px 18px;
+  font-size: 0.98em;
+  margin-top: 8px;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(38,196,255,0.09);
+  transition: background 0.2s;
+}
+
+#site-info-form button[type="button"]:hover {
+  background: #26c4ff;
+  color: #002a30;
+}
+
+@media (max-width: 900px) {
+  #site-info-form {
+    padding: 18px 8px;
+  }
+  #site-info-form .fields,
+  #site-info-form fieldset {
     flex-direction: column;
-    margin: 4px 0;
-}
-
-#site-info-form fieldset{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    border:none;
-}
-
-h3 {
-  display: block;
+    gap: 0;
+  }
+  #site-info-form .input-field {
+    min-width: 100%;
+    margin-bottom: 12px;
+  }
 }