From c48218680283de2872be66ff81700dc8a5cf6e80 Mon Sep 17 00:00:00 2001
From: riley <riley@tench.com>
Date: Mon, 13 Nov 2023 12:48:19 -0500
Subject: [PATCH] Adding checkbox styling

---
 luasrc/gaya/gaya.css | 60 ++++++++++++++++++++++++++++++++++++++++++++
 template/header.htm  | 16 ++++++++++++
 2 files changed, 76 insertions(+)

diff --git a/luasrc/gaya/gaya.css b/luasrc/gaya/gaya.css
index 806269b..7060dc8 100644
--- a/luasrc/gaya/gaya.css
+++ b/luasrc/gaya/gaya.css
@@ -3027,4 +3027,64 @@ strong {
     background-color: transparent;
   }
 }
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+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%;
+}
   
\ No newline at end of file
diff --git a/template/header.htm b/template/header.htm
index d559d26..ce70178 100644
--- a/template/header.htm
+++ b/template/header.htm
@@ -76,6 +76,22 @@
   });
 }
 	</script>
+	<script>
+		document.addEventListener('DOMContentLoaded', (event) => {
+    let checkboxes = document.querySelectorAll('input[type="checkbox"]');
+    checkboxes.forEach((checkbox) => {
+        let label = document.createElement('label');
+        label.setAttribute('class', 'switch');
+
+        let span = document.createElement('span');
+        span.setAttribute('class', 'slider round');
+
+        checkbox.parentNode.insertBefore(label, checkbox);
+        label.appendChild(checkbox);
+        label.appendChild(span);
+    });
+});
+</script>
 	<div class="fill">
 		<div class="container">