Attempting to fix checkbox styling

luasrc/gaya/gaya.css

@@ -3028,6 +3028,7 @@ strong {
   }
 }
 
+/* The switch - the box around the slider */
 .switch {
   position: relative;
   display: inline-block;
@@ -3035,12 +3036,14 @@ strong {
   height: 34px;
 }
 
+/* Hide default HTML checkbox */
 .switch input { 
   opacity: 0;
   width: 0;
   height: 0;
 }
 
+/* The slider */
 .slider {
   position: absolute;
   cursor: pointer;
@@ -3049,7 +3052,6 @@ strong {
   right: 0;
   bottom: 0;
   background-color: #ccc;
-  -webkit-transition: .4s;
   transition: .4s;
 }
 
@@ -3061,7 +3063,6 @@ strong {
   left: 4px;
   bottom: 4px;
   background-color: white;
-  -webkit-transition: .4s;
   transition: .4s;
 }
 
@@ -3074,17 +3075,5 @@ input:focus + .slider {
 }
 
 input:checked + .slider:before {
-  -webkit-transform: translateX(26px);
-  -ms-transform: translateX(26px);
   transform: translateX(26px);
 }
-
-/* Rounded sliders */
-.slider.round {
-  border-radius: 34px;
-}
-
-.slider.round:before {
-  border-radius: 50%;
-}
-  

template/header.htm

@@ -62,20 +62,48 @@
 </div>
 <script>
 	{
-  const nav = document.querySelector(".navbar");
+// Function to run when the DOM is fully loaded
-  let lastScrollY = window.scrollY;
+document.addEventListener("DOMContentLoaded", function() {
+    // Find all checkboxes
+    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
   
-  window.addEventListener("scroll", () => {
+    // Loop over each checkbox
-    if (lastScrollY < window.scrollY) {
+    checkboxes.forEach(function(checkbox) {
-      nav.classList.add("navbar--hidden");
+        // Create the switch
-    } else {
+        var switchElement = document.createElement('label');
-      nav.classList.remove("navbar--hidden");
+        switchElement.className = 'switch';
-    }
       
-    lastScrollY = window.scrollY;
+        // Create the input for the switch
+        var input = document.createElement('input');
+        input.type = 'checkbox';
+        input.checked = checkbox.checked;
+        switchElement.appendChild(input);
+      
+        // Create the slider for the switch
+        var slider = document.createElement('span');
+        slider.className = 'slider';
+        switchElement.appendChild(slider);
+      
+        // Add the switch to the page
+        checkbox.parentNode.insertBefore(switchElement, checkbox.nextSibling);
+      
+        // Hide the original checkbox
+        checkbox.style.display = 'none';
+      
+        // When the switch is clicked, update the checkbox
+        input.addEventListener('change', function() {
+            checkbox.checked = this.checked;
         });
+      
+        // When the checkbox is updated (e.g. by JavaScript), update the switch
+        var observer = new MutationObserver(function() {
+            input.checked = checkbox.checked;
+        });
+        observer.observe(checkbox, { attributes: true });
+    });  
+});
 }
-	</script>
+</script>
 	<script>
 		document.addEventListener('DOMContentLoaded', (event) => {
     let checkboxes = document.querySelectorAll('input[type="checkbox"]');