Update templates/menu.html

templates/menu.html

@@ -334,39 +334,41 @@ form-check-input addon-option{
     border-color: #388E3C;
 }
      /* Custom Toggle Switch Styling */
+/* Custom Square Toggle Switch Styling */
 .custom-toggle {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     position: relative;
-    width: 60px;
-    height: 34px;
+    width: 40px; /* Smaller size */
+    height: 20px; /* Smaller size */
     background: #ccc;
-    border-radius: 50px;
+    border-radius: 4px; /* Square or slightly rounded */
     cursor: pointer;
     transition: background 0.3s;
 }
 
 .custom-toggle:checked {
-    background: #4caf50;
+    background: #4caf50; /* Green when checked */
 }
 
 .custom-toggle:before {
     content: "";
     position: absolute;
-    top: 4px;
-    left: 4px;
-    width: 26px;
-    height: 26px;
+    top: 2px; /* Small space from top */
+    left: 2px; /* Small space from left */
+    width: 16px; /* Smaller width */
+    height: 16px; /* Smaller height */
     background: white;
-    border-radius: 50%;
+    border-radius: 3px; /* Square shape, with rounded corners */
     transition: transform 0.3s;
 }
 
 .custom-toggle:checked:before {
-    transform: translateX(26px);
+    transform: translateX(20px); /* Moves the toggle to the right */
 }
 
+
 /* Optional: Style the labels */
 .form-check-label {
     font-size: 16px;