fix: resize checkboxes and optimize for dark/light modes

bredcat999 · Nov 11, 2022 · 8886463 · 8886463
1 parent 9d8ec84
commit 8886463
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 12 deletions.
diff --git a/src/index.html b/src/index.html
@@ -77,20 +77,20 @@
         <h1 class="font-bold text-xl">Preferences</h1>
         <label class="relative flex justify-between items-center group p-2 text-lg">
             Dark Mode
-            <input type="checkbox" class="absolute left-1/2 -translate-x-1/2 w-full h-full peer appearance-none rounded-md" id="pref-darkmode" />
-            <span class="w-16 h-10 flex items-center flex-shrink-0 ml-4 p-1 bg-gray-300 rounded-full duration-300 ease-in-out peer-checked:bg-purple-800 after:w-8 after:h-8 after:bg-white after:rounded-full after:shadow-md after:duration-300 peer-checked:after:translate-x-6 group-hover:after:translate-x-1"></span>
+            <input type="checkbox" class="absolute left-1/2 py-1 -translate-x-1/2 w-full h-full peer appearance-none rounded-md" id="pref-darkmode" />
+            <span class="w-16 h-8 flex items-center flex-shrink-0 ml-4 p-1 dark:bg-gray-700 bg-gray-300 rounded-full duration-300 ease-in-out peer-checked:bg-purple-800 after:w-8 after:h-8 after:dark:bg-gray-800 after:bg-white after:rounded-full after:shadow-md after:duration-300 peer-checked:after:translate-x-6 group-hover:after:translate-x-[0.5]"></span>
           </label>
         <br />
         <label class="relative flex justify-between items-center group p-2 text-lg">
             Search Autocomplete
-            <input type="checkbox" class="absolute left-1/2 -translate-x-1/2 w-full h-full peer appearance-none rounded-md" id="pref-autocomplete" />
-            <span class="w-16 h-10 flex items-center flex-shrink-0 ml-4 p-1 bg-gray-300 rounded-full duration-300 ease-in-out peer-checked:bg-purple-800 after:w-8 after:h-8 after:bg-white after:rounded-full after:shadow-md after:duration-300 peer-checked:after:translate-x-6 group-hover:after:translate-x-1"></span>
+            <input type="checkbox" class="absolute left-1/2 py-1 -translate-x-1/2 w-full h-full peer appearance-none rounded-md" id="pref-autocomplete" />
+            <span class="w-16 h-8 flex items-center flex-shrink-0 ml-4 p-1 dark:bg-gray-700 bg-gray-300 rounded-full duration-300 ease-in-out peer-checked:bg-purple-800 after:w-8 after:h-8 after:dark:bg-gray-800 after:bg-white after:rounded-full after:shadow-md after:duration-300 peer-checked:after:translate-x-6 group-hover:after:translate-x-[0.5]"></span>
           </label>
         <br />
         <label class="relative flex justify-between items-center group p-2 text-lg">
             Bookmarks Bar
-            <input type="checkbox" class="absolute left-1/2 -translate-x-1/2 w-full h-full peer appearance-none rounded-md" id="pref-bookmarks" />
-            <span class="w-16 h-10 flex items-center flex-shrink-0 ml-4 p-1 bg-gray-300 rounded-full duration-300 ease-in-out peer-checked:bg-purple-800 after:w-8 after:h-8 after:bg-white after:rounded-full after:shadow-md after:duration-300 peer-checked:after:translate-x-6 group-hover:after:translate-x-1"></span>
+            <input type="checkbox" class="absolute left-1/2 py-1 -translate-x-1/2 w-full h-full peer appearance-none rounded-md" id="pref-bookmarks" />
+            <span class="w-16 h-8 flex items-center flex-shrink-0 ml-4 p-1 dark:bg-gray-700 bg-gray-300 rounded-full duration-300 ease-in-out peer-checked:bg-purple-800 after:w-8 after:h-8 after:dark:bg-gray-800 after:bg-white after:rounded-full after:shadow-md after:duration-300 peer-checked:after:translate-x-6 group-hover:after:translate-x-[0.5]"></span>
           </label>
         <br />
         <label for="pref-strt">Startup Page</label>
@@ -100,9 +100,9 @@ <h1 class="font-bold text-xl">Preferences</h1>
         <br />
         <br />
         <label class="relative flex justify-between items-center group p-2 text-lg">
-            Force Website Dark Mode
-            <input type="checkbox" class="absolute left-1/2 -translate-x-1/2 w-full h-full peer appearance-none rounded-md" id="pref-dm" />
-            <span class="w-16 h-10 flex items-center flex-shrink-0 ml-4 p-1 bg-gray-300 rounded-full duration-300 ease-in-out peer-checked:bg-purple-800 after:w-8 after:h-8 after:bg-white after:rounded-full after:shadow-md after:duration-300 peer-checked:after:translate-x-6 group-hover:after:translate-x-1"></span>
+            Forced Website Dark Mode
+            <input type="checkbox" class="absolute left-1/2 py-1 -translate-x-1/2 w-full h-full peer appearance-none rounded-md" id="pref-dm" />
+            <span class="w-16 h-8 flex items-center flex-shrink-0 ml-4 p-1 dark:bg-gray-700 bg-gray-300 rounded-full duration-300 ease-in-out peer-checked:bg-purple-800 after:w-8 after:h-8 after:dark:bg-gray-800 after:bg-white after:rounded-full after:shadow-md after:duration-300 peer-checked:after:translate-x-6 group-hover:after:translate-x-[0.5]"></span>
           </label>
         <br />
         <br />

diff --git a/styles.css b/styles.css
@@ -32,9 +32,6 @@
 	.suggestions-box {
 		@apply absolute rounded-b-lg bg-red-200 dark:bg-gray-800 border-blue-500 shadow;
 	}
-	.cb {
-		@apply rounded-full p-3;
-	}
 	*:focus {
 		@apply outline-emerald-600;
 	}