web/settings: replace checkbox with toggle

- equal font size & padding for all subtexts in settings
- equal padding & border radius for all settings components

it just looks way better now

web/src/routes/+layout.svelte

@@ -2,11 +2,10 @@
     import "@fontsource/ibm-plex-mono/400.css";
     import "@fontsource/ibm-plex-mono/500.css";
 
+    import device from "$lib/device";
     import currentTheme, { statusBarColors } from "$lib/state/theme";
 
     import Sidebar from "$components/sidebar/Sidebar.svelte";
-
-    import device from "$lib/device";
 </script>
 
 <svelte:head>
@@ -45,7 +44,10 @@
         --sidebar-highlight: #ffffff;
         --sidebar-hover: rgba(255, 255, 255, 0.1);
 
-        --input-border: #8d8d95;
+        --input-border: var(--gray);
+
+        --toggle-bg: var(--input-border);
+        --toggle-bg-enabled: var(--secondary);
 
         --padding: 12px;
         --border-radius: 11px;
@@ -85,6 +87,9 @@
 
         --input-border: #383838;
 
+        --toggle-bg: var(--input-border);
+        --toggle-bg-enabled: #777777;
+
         --sidebar-mobile-gradient: linear-gradient(
             90deg,
             rgba(16, 16, 16, 0.9) 0%,
@@ -217,9 +222,10 @@
     }
 
     :global(.subtext) {
-        font-size: 13px;
+        font-size: 12px;
         color: var(--gray);
         line-height: 1.4;
+        padding: 0 var(--padding);
     }
 
     #cobalt {

web/src/routes/settings/general/appearance/+page.svelte

@@ -2,7 +2,7 @@
     import SettingsCategory from "$components/settings/SettingsCategory.svelte";
     import Switcher from "$components/buttons/Switcher.svelte";
     import SettingsButton from "$components/buttons/SettingsButton.svelte";
-    import SettingsCheckbox from "$components/buttons/SettingsCheckbox.svelte";
+    import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
 
     import { themeOptions } from "$lib/types/settings";
 </script>
@@ -18,13 +18,13 @@
 </SettingsCategory>
 
 <SettingsCategory title="accessibility">
-    <SettingsCheckbox
+    <SettingsToggle
         settingContext="accessibility"
         settingId="reduceTransparency"
         title="reduce visual transparency"
         description="disables blur effects and reduces transparency of surfaces."
     />
-    <SettingsCheckbox
+    <SettingsToggle
         settingContext="accessibility"
         settingId="reduceAnimations"
         title="reduce animations"

web/src/routes/settings/save/audio/+page.svelte

@@ -2,7 +2,7 @@
     import SettingsCategory from "$components/settings/SettingsCategory.svelte";
     import Switcher from "$components/buttons/Switcher.svelte";
     import SettingsButton from "$components/buttons/SettingsButton.svelte";
-    import SettingsCheckbox from "$components/buttons/SettingsCheckbox.svelte";
+    import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
 
     import { audioFormatOptions } from "$lib/types/settings";
 
@@ -24,7 +24,7 @@
 </SettingsCategory>
 
 <SettingsCategory title="youtube">
-    <SettingsCheckbox
+    <SettingsToggle
         settingContext="save"
         settingId="youtubeDubBrowserLang"
         title="use browser language for dubbed videos"
@@ -33,7 +33,7 @@
 </SettingsCategory>
 
 <SettingsCategory title="tiktok">
-    <SettingsCheckbox
+    <SettingsToggle
         settingContext="save"
         settingId="tiktokFullAudio"
         title="use original sound"

web/src/routes/settings/save/metadata/+page.svelte

@@ -2,7 +2,7 @@
     import SettingsCategory from "$components/settings/SettingsCategory.svelte";
     import Switcher from "$components/buttons/Switcher.svelte";
     import SettingsButton from "$components/buttons/SettingsButton.svelte";
-    import SettingsCheckbox from "$components/buttons/SettingsCheckbox.svelte";
+    import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
 
     import { filenameStyleOptions } from "$lib/types/settings";
 </script>
@@ -22,7 +22,7 @@
 </SettingsCategory>
 
 <SettingsCategory title="file metadata">
-    <SettingsCheckbox
+    <SettingsToggle
         settingContext="save"
         settingId="disableMetadata"
         title="disable file metadata"
@@ -31,7 +31,7 @@
 </SettingsCategory>
 
 <SettingsCategory title="saving method">
-    <SettingsCheckbox
+    <SettingsToggle
         settingContext="save"
         settingId="downloadPopup"
         title="ask how to save"

web/src/routes/settings/save/video/+page.svelte

@@ -2,7 +2,7 @@
     import SettingsCategory from "$components/settings/SettingsCategory.svelte";
     import Switcher from "$components/buttons/Switcher.svelte";
     import SettingsButton from "$components/buttons/SettingsButton.svelte";
-    import SettingsCheckbox from "$components/buttons/SettingsCheckbox.svelte";
+    import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
 
     import { videoQualityOptions } from "$lib/types/settings";
     import { youtubeVideoCodecOptions } from "$lib/types/settings";
@@ -40,7 +40,7 @@
 </SettingsCategory>
 
 <SettingsCategory title="twitter">
-    <SettingsCheckbox
+    <SettingsToggle
         settingContext="save"
         settingId="twitterGif"
         title="convert looping videos to GIF"
@@ -49,7 +49,7 @@
 </SettingsCategory>
 
 <SettingsCategory title="tiktok">
-    <SettingsCheckbox
+    <SettingsToggle
         settingContext="save"
         settingId="tiktokH265"
         title="prefer HEVC/H265 format"