Update templates/menu.html

templates/menu.html

@@ -8,7 +8,7 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <style>
-    body {
+   body {
     font-family: Arial, sans-serif;
     background-color: #fdf4e3; /* Updated background color */
     margin: 0;
@@ -53,11 +53,11 @@
 }
 .btn-primary:hover {
     background-color: #0FAA39;
-    border-color: #ffffff;
+    border-color: #0FAA39;
 }
 .btn-primary:active,
 .btn-primary:focus {
-    background-color: #4a5d68;
+    background-color: #0FAA39;
     border-color: #ffffff;
     box-shadow: none;
 }
@@ -113,6 +113,16 @@
 .avatar-dropdown-container:hover .dropdown-menu {
     display: block;
 }
+.avatar-dropdown-container {
+    position: absolute;
+    right: 20px; /* Adjust the value as needed to position it properly */
+    top: 50%; /* Adjust top to place it within the header */
+    transform: translateY(-50%); /* Correct the alignment to be perfectly centered */
+    display: flex;
+    align-items: right;
+    justify-content: center;
+}
+     
 .dropdown-menu .dropdown-item {
     padding: 10px 15px;
     text-decoration: none;
@@ -169,15 +179,6 @@ h1.text-center {
     align-items: center; /* Vertically align items */
     z-index: 1000; /* Make sure it's still above other content */
 }
-.avatar-dropdown-container {
-    position: absolute;
-    right: 20px; /* Adjust the value as needed to position it properly */
-    top: 50%; /* Adjust top to place it within the header */
-    transform: translateY(-50%); /* Correct the alignment to be perfectly centered */
-    display: flex;
-    align-items: right;
-    justify-content: center;
-}
 .search-bar-container {
     padding: 10px;
     position: absolute;
@@ -215,13 +216,65 @@ h1.text-center {
     margin-bottom: 10px;
     font-size: 1.1rem;
     font-weight: bold;
-    /*color: #6c757d; */
+    color: #343a40; /* Darker title text */
 }
 /* Style for add-on checkboxes */
 .addon-section .form-check {
-    margin-left: 10px;
-    color: #6c757d;
-    
+     display: inline-flex; /* Display checkboxes horizontally */
+    align-items: center;  /* Align checkboxes and labels */
+    margin-left: 10px; /* Space between checkboxes */
+    color: #343a40; /* Darker text color */
+}
+/* Customize the default checkbox */
+.addon-section .form-check-input {
+    -webkit-appearance: none;  /* Remove default checkbox styling in Webkit browsers (e.g. Chrome, Safari) */
+    -moz-appearance: none;     /* Remove default checkbox styling in Firefox */
+    appearance: none;          /* Remove default checkbox styling in all browsers */
+    width: 20px;
+    height: 20px;
+    border: 2px solid #343a40; /* Darker border color */
+    border-radius: 5px;        /* Rounded corners */
+    background-color: #f0f0f0; /* Lighter gray background when unchecked */
+    position: relative;
+    margin-right: 10px;        /* Add space between the checkbox and label */
+}
+     
+/* Checked state for the custom checkbox */
+.addon-section .form-check-input:checked {
+    background-color: #006400;  /* Dark green background when checked */
+    border-color: #006400;      /* Dark green border when checked */
+}
+/* Add the check mark when checkbox is checked */
+.addon-section .form-check-input:checked::before {
+    content: '';  /* Unicode check mark */
+    font-size: 14px;
+    position: absolute;
+    top: 3px;
+    left: 4px;
+    color: white;  /* White color for the check mark */
+}
+/* Hover effect for the checkboxes */
+.addon-section .form-check-input:hover {
+    /* background-color: #006400;  /* Slightly darker background on hover */
+}
+/* Focus effect on custom checkbox */
+.addon-section .form-check-input:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #006400;  /* Green focus outline */
+}
+/* Custom checkbox label styles */
+.addon-section .form-check-label {
+    font-size: 16px;
+    margin-left: 5px;
+    cursor: pointer;
+    display: inline-block;  /* Ensure label aligns correctly with checkbox */
+    vertical-align: middle; /* Align text vertically with the checkbox */
+}
+/* Fix alignment of text and checkbox */
+.addon-section .form-check input[type="checkbox"], 
+.addon-section .form-check label {
+    display: inline-block;
+    /* vertical-align: middle; /* Align text and checkboxes vertically */
 }
 /* Category Filter with Custom Radio Buttons */
 form.text-center.mb-4 {
@@ -249,7 +302,7 @@ form.text-center.mb-4 {
     vertical-align: middle; /* Align label vertically */
 }
 form-check-input addon-option{
-  color: #78706E;
+  color: #333d47;
 }     
 .custom-radio {
     appearance: none;