Fix switch display on config editor page

GeyserMC · Dec 17, 2024 · dba7bb3 · dba7bb3
1 parent d94cc09
commit dba7bb3
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 36 deletions.
diff --git a/src/pages/utilities/config-editor.tsx b/src/pages/utilities/config-editor.tsx
@@ -259,7 +259,6 @@ const ConfigEditorPage: React.FC = () => {
                         <div key={name}>
                             <input className={styles.checkbox} type='checkbox' id={name}
                                    defaultChecked={value.toLowerCase() === 'true'} onChange={handleChange}/>
-                            <label htmlFor={name} className='switch'></label>
                         </div>
                     );
                 } else if (!isNaN(value)) {

diff --git a/src/pages/utilities/utilities.module.scss b/src/pages/utilities/utilities.module.scss
@@ -109,41 +109,6 @@
     border-radius: 50%;
 }
 
-/* https://codepen.io/JAGATHISH1123/pen/PvayMB */
-.switch {
-    position: relative;
-    display: inline-block;
-    width: 40px;
-    height: 20px;
-    background-color: var(--switch-background-color);
-    border-radius: 20px;
-    transition: all 0.3s;
-
-    &::after {
-        content: '';
-        position: absolute;
-        width: 18px;
-        height: 18px;
-        border-radius: 50%;
-        background-color: white;
-        top: 1px;
-        left: 1px;
-        transition: all 0.3s;
-    }
-}
-
-.checkbox:checked+.switch::after {
-    left: 20px;
-}
-
-.checkbox:checked+.switch {
-    background-color: var(--ifm-color-secondary);
-}
-
-.checkbox {
-    display: inline-block;
-}
-
 .hidden {
     display: none;
 }
@@ -199,3 +164,46 @@
         min-width: 100%;
     }
 }
+
+
+:root {
+    --ifm-color-primary: #25c2a0;
+  }
+
+/* Modified from https://danklammer.com/articles/simple-css-toggle-switch */
+.checkbox {
+    appearance: none;
+    position: relative;
+    display: inline-block;
+    box-sizing: content-box;
+    width: 4.5em;
+    height: 1.8em;
+    padding: 0.2em;
+    border: none;
+    cursor: pointer;
+    border-radius: 1.5em;
+    overflow: hidden;
+    background-color: #707070;
+    transition: background ease 0.3s;
+
+    &:before {
+        content: "";
+        display: block;
+        position: absolute;
+        z-index: 2;
+        width: 1.8em;
+        height: 1.8em;
+        background: #fff;
+        color: #fff;
+        border-radius: 1.5em;
+        transition: transform cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
+    }
+
+    &:checked {
+        background-color: var(--ifm-color-secondary);
+    }
+
+    &:checked:before {
+        transform: translateX(2.5em);
+    }
+}