Update styles.css

Author: KOSASIH

ui/static/styles.css

@@ -21,10 +21,13 @@ header {
 
 h1 {
     color: #333;
+    font-size: 2.5em; /* Increased font size for better visibility */
 }
 
 h2 {
     color: #555;
+    font-size: 1.8em; /* Increased font size for better visibility */
+    margin-top: 20px; /* Added margin for spacing */
 }
 
 .chat-box {
@@ -34,19 +37,23 @@ h2 {
     overflow-y: auto;
     background-color: #fafafa;
     margin-bottom: 10px;
+    border-radius: 4px; /* Added border radius for a softer look */
 }
 
 .input-group {
     display: flex;
     justify-content: space-between;
+    margin-bottom: 15px; /* Added margin for spacing */
 }
 
-input[type="text"] {
+input[type="text"],
+input[type="number"] {
     flex: 1;
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 4px;
     margin-right: 10px;
+    font-size: 1em; /* Increased font size for better readability */
 }
 
 button {
@@ -56,6 +63,8 @@ button {
     border: none;
     border-radius: 4px;
     cursor: pointer;
+    font-size: 1em; /* Increased font size for better readability */
+    transition: background-color 0.3s; /* Smooth transition for hover effect */
 }
 
 button:hover {
@@ -67,4 +76,37 @@ button:hover {
     padding: 10px;
     border: 1px solid #ccc;
     background-color: #e9ecef;
+    border-radius: 4px; /* Added border radius for a softer look */
 }
+
+ul {
+    list-style-type: none; /* Remove default list styling */
+    padding: 0; /* Remove default padding */
+}
+
+li {
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin-bottom: 10px; /* Space between list items */
+    background-color: #f9f9f9; /* Light background for list items */
+}
+
+li:hover {
+    background-color: #f1f1f1; /* Highlight on hover */
+}
+
+/* Responsive Design */
+@media (max-width: 600px) {
+    .input-group {
+        flex-direction: column; /* Stack input and button on small screens */
+    }
+
+    input[type="text"],
+    input[type="number"],
+    button {
+        width: 100%; /* Full width on small screens */
+        margin-right: 0; /* Remove right margin */
+        margin-bottom: 10px; /* Space between stacked elements */
+    }
+    }