Update static/style.css

static/style.css

@@ -210,4 +210,184 @@ th {
 
 .custombutton:hover {
   background-color: #636363; /* Darker grey on hover */
-}
+}
+/* Reset and Base Styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background-color: #f4f4f4;
+  color: #333;
+  padding: 20px;
+  line-height: 1.6;
+}
+
+/* Header Styles */
+h1 {
+  font-size: 2em;
+  margin-bottom: 20px;
+  color: #2c3e50;
+}
+
+h2 {
+  font-size: 1.5em;
+  margin-top: 30px;
+  margin-bottom: 10px;
+  padding-bottom: 5px;
+  border-bottom: 2px solid #ddd;
+  color: #34495e;
+}
+
+/* Paragraph and Link Styles */
+p {
+  margin-bottom: 15px;
+}
+
+a {
+  color: #3498db;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* Form Styles */
+form {
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  padding: 20px;
+  margin-bottom: 30px;
+}
+
+form label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+form input[type="email"],
+form input[type="password"],
+form input[type="text"],
+form input[type="number"],
+form select {
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 15px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+form button {
+  display: inline-block;
+  background: #3498db;
+  color: #fff;
+  padding: 10px 15px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+form button:hover {
+  background: #2980b9;
+}
+
+/* Table Styles */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  background: #fff;
+  margin-bottom: 30px;
+}
+
+table th,
+table td {
+  padding: 10px;
+  text-align: left;
+  border: 1px solid #ddd;
+}
+
+table th {
+  background: #f8f8f8;
+  font-weight: bold;
+}
+
+/* Custom Button for Inventory Management */
+.custombutton {
+  display: inline-block;
+  background: #27ae60;
+  color: #fff;
+  padding: 10px 20px;
+  text-decoration: none;
+  border-radius: 4px;
+  margin-bottom: 30px;
+}
+
+.custombutton:hover {
+  background: #219150;
+}
+
+/* Icon Integration using Font Awesome */
+/* Logout link icon: add the class "logout-icon" to the <a> element if needed */
+.logout-icon::before {
+  content: "\f2f5"; /* Font Awesome icon code for "sign-out-alt" */
+  font-family: "Font Awesome 6 Free";
+  font-weight: 900;
+  margin-right: 5px;
+}
+
+/* Inventory Management button icon */
+.custombutton::before {
+  content: "\f187"; /* Font Awesome icon code for "boxes" */
+  font-family: "Font Awesome 6 Free";
+  font-weight: 900;
+  margin-right: 8px;
+}
+
+/* Flash Messages Styles */
+ul {
+  list-style: none;
+  margin: 20px 0;
+  padding: 0;
+}
+
+ul li {
+  background: #ffeeba;
+  border: 1px solid #f5c06f;
+  padding: 10px;
+  margin-bottom: 5px;
+  border-radius: 4px;
+}
+
+/* Responsive Table Styling */
+@media (max-width: 768px) {
+  table, thead, tbody, th, td, tr {
+    display: block;
+  }
+  table tr {
+    margin-bottom: 15px;
+  }
+  table th {
+    background: #f4f4f4;
+    font-weight: bold;
+  }
+  table td {
+    text-align: right;
+    padding-left: 50%;
+    position: relative;
+  }
+  table td::before {
+    content: attr(data-label);
+    position: absolute;
+    left: 0;
+    width: 45%;
+    padding-left: 10px;
+    font-weight: bold;
+    text-align: left;
+  }
+}