I DID IT

luasrc/app.js

@@ -31,49 +31,5 @@
       },
       false
     );
+  })();
   
-  document.addEventListener("DOMContentLoaded", function() {
-    // Move all your code here
-  
-    var mutationObserver = new MutationObserver(function(mutations) {
-      mutations.forEach(function(mutation) {
-        var checkboxes = document.querySelectorAll('.cbi-checkbox input[type="checkbox"]');
-    
-        checkboxes.forEach(function(checkbox) {
-          // Check if toggle switch is already created
-          if (!checkbox.nextSibling || checkbox.nextSibling.className !== 'switch') {
-            var switchElement = document.createElement('label');
-            switchElement.className = 'switch';
-          
-            var input = document.createElement('input');
-            input.type = 'checkbox';
-            input.checked = checkbox.checked;
-            switchElement.appendChild(input);
-          
-            var slider = document.createElement('span');
-            slider.className = 'slider';
-            switchElement.appendChild(slider);
-          
-            // Add the switch to the div wrapping the checkbox
-            checkbox.parentNode.insertBefore(switchElement, checkbox);
-          
-            // Hide the original checkbox
-            checkbox.style.display = 'none';
-          
-            input.addEventListener('change', function() {
-                checkbox.checked = this.checked;
-            });
-          
-            var observer = new MutationObserver(function() {
-                input.checked = checkbox.checked;
-            });
-            observer.observe(checkbox, { attributes: true });
-          }
-        });
-      });
-    });
-    
-    mutationObserver.observe(document.documentElement, { childList: true, subtree: true });
-  });
-
-})(); // Make sure to include this closing partz

luasrc/gaya/gaya.css

@@ -3028,52 +3028,51 @@ strong {
   }
 }
 
-/* The switch - the box around the slider */
+.cbi-checkbox {
-.cbi-checkbox .switch {
   position: relative;
   display: inline-block;
-  width: 60px;
+  width: 40px; /* Decreased from 75px */
-  height: 34px;
+  height: 20px; /* Decreased from 25px */
+  border-radius: 20px; /* Optional: added for rounded corners */
 }
 
-/* Hide default HTML checkbox */
+.cbi-checkbox input[type="checkbox"] {
-.cbi-checkbox .switch input { 
+  position: absolute;
-  opacity: 0;
+  width: 100%;
-  width: 0;
+  height: 100%;
-  height: 0;
+  z-index: 2;
+  opacity: 0; /* Make it invisible but still clickable */
+  cursor: pointer;
 }
 
-/* The slider */
+.cbi-checkbox label {
-.cbi-checkbox .switch .slider {
   position: absolute;
-  cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: #ccc;
+  background-color: #bbb;
-  transition: .4s;
+  transition: background-color .4s;
+  border-radius: 20px; /* Make the background rounded */
 }
 
-.cbi-checkbox .switch .slider:before {
+.cbi-checkbox label::after {
-  position: absolute;
   content: "";
-  height: 26px;
+  position: absolute;
-  width: 26px;
+  top: 1px; /* Adjusted to match the new height */
-  left: 4px;
+  left: 1px; /* Adjusted to match the new width */
-  bottom: 4px;
+  width: 18px; /* Decreased to fit the new dimensions */
-  background-color: white;
+  height: 18px; /* Decreased to fit the new dimensions */
-  transition: .4s;
+  background-color: #fff;
-}
+  transition: left .4s;
-
+  border-radius: 50%; /* Ensures the slider stays circular */
-.cbi-checkbox .switch input:checked + .slider {
-  background-color: #2196F3;
 }
 
-.cbi-checkbox .switch input:focus + .slider {
+.cbi-checkbox input[type="checkbox"]:checked + label {
-  box-shadow: 0 0 1px #2196F3;
+  background-color: #77C2BB;
 }
 
-.cbi-checkbox .switch input:checked + .slider:before {
+.cbi-checkbox input[type="checkbox"]:checked + label::after {
-  transform: translateX(26px);
+  left: 20px; /* Adjusted to new width */
+  background-color: #009688;
 }