From 49dae536a77a515ea1247c0ec64fd75bf626b7c7 Mon Sep 17 00:00:00 2001
From: Timothy Flynn <trflynn89@pm.me>
Date: Wed, 2 Apr 2025 11:38:34 -0400
Subject: [PATCH] Base: Replace bespoke input switch with native element

Turns out we support <input type=checkbox switch>, so let's use it!
---
 Base/res/ladybird/about-pages/settings.html | 33 ++++-------
 Base/res/ladybird/ladybird.css              | 66 ++++-----------------
 2 files changed, 26 insertions(+), 73 deletions(-)

diff --git a/Base/res/ladybird/about-pages/settings.html b/Base/res/ladybird/about-pages/settings.html
index 00a99115f1f..0870d2f8840 100644
--- a/Base/res/ladybird/about-pages/settings.html
+++ b/Base/res/ladybird/about-pages/settings.html
@@ -90,6 +90,12 @@
                 margin-bottom: 0;
             }
 
+            .toggle-container {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+
             .permission-container {
                 display: flex;
                 align-items: center;
@@ -287,14 +293,9 @@
         <div class="card">
             <div class="card-header">Search</div>
             <div class="card-body">
-                <div class="card-group">
-                    <div class="toggle-container">
-                        <label for="search-toggle">Enable Search</label>
-                        <label class="toggle">
-                            <input id="search-toggle" type="checkbox" />
-                            <span class="toggle-button"></span>
-                        </label>
-                    </div>
+                <div class="card-group toggle-container">
+                    <label for="search-toggle">Enable Search</label>
+                    <input id="search-toggle" type="checkbox" switch />
                 </div>
                 <div class="card-group hidden">
                     <label for="search-engine">Default Search Engine</label>
@@ -306,14 +307,9 @@
 
                 <hr />
 
-                <div class="card-group">
-                    <div class="toggle-container">
-                        <label for="autocomplete-toggle">Enable Autocomplete</label>
-                        <label class="toggle">
-                            <input id="autocomplete-toggle" type="checkbox" />
-                            <span class="toggle-button"></span>
-                        </label>
-                    </div>
+                <div class="card-group toggle-container">
+                    <label for="autocomplete-toggle">Enable Autocomplete</label>
+                    <input id="autocomplete-toggle" type="checkbox" switch />
                 </div>
                 <div class="card-group hidden">
                     <label for="autocomplete-engine">Default Autocomplete Engine</label>
@@ -350,10 +346,7 @@
             <div class="dialog-body">
                 <div class="toggle-container">
                     <label for="site-settings-global">Enable on all sites</label>
-                    <label class="toggle">
-                        <input id="site-settings-global" type="checkbox" />
-                        <span class="toggle-button"></span>
-                    </label>
+                    <input id="site-settings-global" type="checkbox" switch />
                 </div>
                 <hr />
                 <label>Allowlist</label>
diff --git a/Base/res/ladybird/ladybird.css b/Base/res/ladybird/ladybird.css
index 642e6618160..ae7d14c3f4d 100644
--- a/Base/res/ladybird/ladybird.css
+++ b/Base/res/ladybird/ladybird.css
@@ -146,67 +146,27 @@ select:focus {
     outline: none;
 }
 
-/**
- * Create a toggle switch as a checkbox alternative:
- *
- * <div class="toggle-container">
- *     <label for="your-toggle">Toggle Label</label>
- *     <label class="toggle">
- *         <input id="your-toggle" type="checkbox" checked />
- *         <span class="toggle-button"></span>
- *     </label>
- * </div>
- */
-
-.toggle-container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.toggle-container .toggle {
+input[type="checkbox"][switch] {
     width: 50px;
     height: 24px;
 
-    display: inline-block;
-    position: relative;
-}
-
-.toggle-container .toggle input {
-    display: none;
-}
-
-.toggle-container .toggle-button {
     background-color: var(--toggle-background-color);
-    border-radius: 24px;
-
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-
     cursor: pointer;
+
+    outline: none;
 }
 
-.toggle-container .toggle-button:before {
-    background-color: white;
-    border-radius: 50%;
-
-    content: "";
-
-    width: 18px;
-    height: 18px;
-
-    position: absolute;
-    bottom: 3px;
-    left: 3px;
-}
-
-.toggle-container input:checked + .toggle-button {
+input[type="checkbox"][switch]:checked {
     background-color: var(--violet-100);
 }
 
-.toggle-container input:checked + .toggle-button:before {
-    transform: translateX(26px);
+input[type="checkbox"][switch]::before {
+    background-color: white;
+    border: 0.6em solid white;
+
+    left: 3px;
+}
+
+input[type="checkbox"][switch]:checked::before {
+    left: calc(100% - 1.3em);
 }