Respect prefers-reduced-motion #129

Levminer · Nov 17, 2021 · fce76c6 · fce76c6
1 parent 2445187
commit fce76c6
Show file tree

Hide file tree

Showing 11 changed files with 76 additions and 94 deletions.
diff --git a/.tailwindrc.js b/.tailwindrc.js
@@ -41,6 +41,10 @@ module.exports = {
 			screens: {
 				lg: "1400px",
 			},
+
+			stroke: (theme) => ({
+				black: theme("colors.gray.900"),
+			}),
 		},
 	},
 	corePlugins: {

diff --git a/app/confirm/index.html b/app/confirm/index.html
@@ -8,7 +8,6 @@
 		<!-- css -->
 		<link rel="stylesheet" href="../.././src/dragonfly.css" />
 		<link rel="stylesheet" href="../.././src/tailwind.css" />
-		<link rel="stylesheet" href="./src/css/index.css" />
 		<!-- favicon -->
 		<link rel="shortcut icon" href="../../img/icon.ico" type="image/x-icon" />
 	</head>
@@ -30,14 +29,16 @@ <h3 class="pt-3">Welcome back!</h3>
 				<h4 id="text">Please enter your password to continue!</h4>
 				<div class="flex flex-col justify-center items-center">
 					<label class="mb-1" id="password_label1">Password</label>
-					<input class="input" type="password" id="password_input" spellcheck="false" />
-					<svg tabindex="0" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 relative top-[-45px] cursor-pointer left-[120px]" fill="none" viewBox="0 0 24 24" stroke="black" id="show_pass_0">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-					</svg>
-					<svg tabindex="0" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 relative top-[-45px] cursor-pointer left-[120px] hidden" fill="none" viewBox="0 0 24 24" stroke="black" id="show_pass_01">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
-					</svg>
+					<div class="flex flex-col group">
+						<input class="input" type="password" id="password_input" spellcheck="false" />
+						<svg tabindex="0" xmlns="http://www.w3.org/2000/svg" class="hover:!stroke-black group-hover:stroke-current h-6 w-6 relative top-[-45px] cursor-pointer left-[250px]" fill="none" viewBox="0 0 24 24" stroke="black" id="show_pass_0">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+						</svg>
+						<svg tabindex="0" xmlns="http://www.w3.org/2000/svg" class="hover:!stroke-black group-hover:stroke-current h-6 w-6 relative top-[-45px] cursor-pointer left-[250px] hidden" fill="none" viewBox="0 0 24 24" stroke="black" id="show_pass_01">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+						</svg>
+					</div>
 					<div>
 						<button class="buttoni mb-5" onclick="unhashPassword()">
 							<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">

diff --git a/app/confirm/src/css/index.css b/app/confirm/src/css/index.css
diff --git a/app/landing/index.html b/app/landing/index.html
@@ -6,7 +6,6 @@
 		<!-- css -->
 		<link rel="stylesheet" href="../.././src/dragonfly.css" />
 		<link rel="stylesheet" href="../../src/tailwind.css" />
-		<link rel="stylesheet" href="./src/css/index.css" />
 		<!-- js -->
 		<script defer src="./src/js/index.js"></script>
 		<!-- favicon -->
@@ -35,25 +34,29 @@ <h4 id="text">
 				<div class="flex flex-row flex-wrap justify-center gap-3 pb-5 select-none">
 					<div class="flex flex-col">
 						<label class="mb-1" id="password_label1">Password</label>
-						<input class="input" type="password" id="password_input1" spellcheck="false" />
-						<svg tabindex="0" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 relative top-[-45px] cursor-pointer left-[250px]" fill="none" viewBox="0 0 24 24" stroke="black" id="show_pass_0">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-						</svg>
-						<svg tabindex="0" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 relative top-[-45px] cursor-pointer left-[250px] hidden" fill="none" viewBox="0 0 24 24" stroke="black" id="show_pass_01">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
-						</svg>
+						<div class="flex flex-col group">
+							<input class="input" type="password" id="password_input1" spellcheck="false" />
+							<svg tabindex="0" xmlns="http://www.w3.org/2000/svg" class="hover:!stroke-black group-hover:stroke-current h-6 w-6 relative top-[-45px] cursor-pointer left-[250px]" fill="none" viewBox="0 0 24 24" stroke="black" id="show_pass_0">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+							</svg>
+							<svg tabindex="0" xmlns="http://www.w3.org/2000/svg" class="hover:!stroke-black group-hover:stroke-current h-6 w-6 relative top-[-45px] cursor-pointer left-[250px] hidden" fill="none" viewBox="0 0 24 24" stroke="black" id="show_pass_01">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+							</svg>
+						</div>
 					</div>
 					<div class="flex flex-col">
 						<label class="mb-1" id="password_label2">Confirm password</label>
-						<input class="input" type="password" id="password_input2" spellcheck="false" />
-						<svg tabindex="0" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 relative top-[-45px] cursor-pointer left-[250px]" fill="none" viewBox="0 0 24 24" stroke="black" id="show_pass_1">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-						</svg>
-						<svg tabindex="0" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 relative top-[-45px] cursor-pointer left-[250px] hidden" fill="none" viewBox="0 0 24 24" stroke="black" id="show_pass_11">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
-						</svg>
+						<div class="flex flex-col group">
+							<input class="input" type="password" id="password_input2" spellcheck="false" />
+							<svg tabindex="0" xmlns="http://www.w3.org/2000/svg" class="hover:!stroke-black group-hover:stroke-current h-6 w-6 relative top-[-45px] cursor-pointer left-[250px]" fill="none" viewBox="0 0 24 24" stroke="black" id="show_pass_1">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+							</svg>
+							<svg tabindex="0" xmlns="http://www.w3.org/2000/svg" class="hover:!stroke-black group-hover:stroke-current h-6 w-6 relative top-[-45px] cursor-pointer left-[250px] hidden" fill="none" viewBox="0 0 24 24" stroke="black" id="show_pass_11">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+							</svg>
+						</div>
 					</div>
 				</div>
 				<button class="buttoni mb-5" onclick="comparePasswords()">

diff --git a/app/landing/src/css/index.css b/app/landing/src/css/index.css
diff --git a/app/settings/index.html b/app/settings/index.html
@@ -203,7 +203,7 @@ <h3>Launch on startup</h3>
 							<h4>Start the app after the operating system started. The app will start on the tray.</h4>
 							<div class="flex justify-center items-center w-72 h-[68px] bg-white mx-auto rounded-full">
 								<div class="relative inline-block w-10 mr-2 align-middle select-none bg-gray-900 border-2 border-gray-900 rounded-full">
-									<input id="tgl0" onclick="startup()" type="checkbox" class="toggle checked:bg-white outline-none focus:outline-none right-5 duration-200 ease-in absolute block w-4 h-4 rounded-full top-1 bg-black appearance-none cursor-pointer" />
+									<input id="tgl0" onclick="startup()" type="checkbox" class="toggle" />
 									<label for="tgl0" class="toggle-bg block overflow-hidden h-6 rounded-full bg-white cursor-pointer"></label>
 								</div>
 								<span id="tgt0" class="text-black text-xl">-</span>
@@ -213,7 +213,7 @@ <h3>Close app to tray</h3>
 							<h4>On closing the app will not quit. You can open the app from the tray.</h4>
 							<div class="flex justify-center items-center w-72 h-[68px] bg-white mx-auto rounded-full">
 								<div class="relative inline-block w-10 mr-2 align-middle select-none bg-gray-900 border-2 border-gray-900 rounded-full">
-									<input id="tgl1" onclick="tray()" type="checkbox" class="toggle checked:bg-white outline-none focus:outline-none right-5 duration-200 ease-in absolute block w-4 h-4 rounded-full top-1 bg-black appearance-none cursor-pointer" />
+									<input id="tgl1" onclick="tray()" type="checkbox" class="toggle" />
 									<label for="tgl1" class="toggle-bg block overflow-hidden h-6 rounded-full bg-white cursor-pointer"></label>
 								</div>
 								<span id="tgt1" class="text-black text-xl">-</span>
@@ -224,7 +224,7 @@ <h3>Window capture</h3>
 								<h4>Allows screenshots and screen capture. You can record or screenshot the app.</h4>
 								<div class="flex justify-center items-center w-72 h-[68px] bg-white mx-auto rounded-full">
 									<div class="relative inline-block w-10 mr-2 align-middle select-none bg-gray-900 border-2 border-gray-900 rounded-full">
-										<input id="tgl2" onclick="capture()" type="checkbox" class="toggle checked:bg-white outline-none focus:outline-none right-5 duration-200 ease-in absolute block w-4 h-4 rounded-full top-1 bg-black appearance-none cursor-pointer" />
+										<input id="tgl2" onclick="capture()" type="checkbox" class="toggle" />
 										<label for="tgl2" class="toggle-bg block overflow-hidden h-6 rounded-full bg-white cursor-pointer"></label>
 									</div>
 									<span id="tgt2" class="text-black text-xl">-</span>
@@ -237,7 +237,7 @@ <h4>Uses GPU for smoother experience. Enable this option if you experience frame
 								<div class="flex justify-center items-center w-72 h-[68px] bg-white mx-auto rounded-full">
 									<a href="#" onclick="hardware()">
 										<div class="pointer-events-none relative inline-block w-10 mr-2 align-middle select-none bg-gray-900 border-2 border-gray-900 rounded-full">
-											<input tabindex="-1" id="tgl7" type="checkbox" class="toggle checked:bg-white outline-none focus:outline-none right-5 duration-200 ease-in absolute block w-4 h-4 rounded-full top-1 bg-black appearance-none cursor-pointer" />
+											<input tabindex="-1" id="tgl7" type="checkbox" class="toggle" />
 											<label for="tgl7" class="toggle-bg block overflow-hidden h-6 rounded-full bg-white cursor-pointer"></label></div
 									></a>
 									<span id="tgt7" class="text-black text-xl">-</span>
@@ -301,7 +301,7 @@ <h4>The saved 2FA description will be visible. You can copy it after clicking it
 							<div class="flex justify-center items-center w-72 h-[68px] bg-white mx-auto rounded-full">
 								<a href="#" onclick="names()">
 									<div class="pointer-events-none relative inline-block w-10 mr-2 align-middle select-none bg-gray-900 border-2 border-gray-900 rounded-full">
-										<input tabindex="-1" id="tgl3" type="checkbox" class="toggle checked:bg-white outline-none focus:outline-none right-5 duration-200 ease-in absolute block w-4 h-4 rounded-full top-1 bg-black appearance-none cursor-pointer" />
+										<input tabindex="-1" id="tgl3" type="checkbox" class="toggle" />
 										<label for="tgl3" class="toggle-bg block overflow-hidden h-6 rounded-full bg-white cursor-pointer"></label></div
 								></a>
 								<span id="tgt3" class="text-black text-xl">-</span>
@@ -313,7 +313,7 @@ <h4>Blurs the 2FA code. You can still copy it or hover over it to reveal.</h4>
 							<div class="flex justify-center items-center w-72 h-[68px] bg-white mx-auto rounded-full">
 								<a href="#" onclick="reveal()">
 									<div class="pointer-events-none relative inline-block w-10 mr-2 align-middle select-none bg-gray-900 border-2 border-gray-900 rounded-full">
-										<input tabindex="-1" id="tgl4" type="checkbox" class="toggle checked:bg-white outline-none focus:outline-none right-5 duration-200 ease-in absolute block w-4 h-4 rounded-full top-1 bg-black appearance-none cursor-pointer" />
+										<input tabindex="-1" id="tgl4" type="checkbox" class="toggle" />
 										<label for="tgl4" class="toggle-bg block overflow-hidden h-6 rounded-full bg-white cursor-pointer"></label></div
 								></a>
 								<span id="tgt4" class="text-black text-xl">-</span>
@@ -325,7 +325,7 @@ <h4>Keep your search history. Works even after restart.</h4>
 							<div class="flex justify-center items-center w-72 h-[68px] bg-white mx-auto rounded-full">
 								<a href="#" onclick="results()">
 									<div class="pointer-events-none relative inline-block w-10 mr-2 align-middle select-none bg-gray-900 border-2 border-gray-900 rounded-full">
-										<input tabindex="-1" id="tgl5" type="checkbox" class="toggle checked:bg-white outline-none focus:outline-none right-5 duration-200 ease-in absolute block w-4 h-4 rounded-full top-1 bg-black appearance-none cursor-pointer" />
+										<input tabindex="-1" id="tgl5" type="checkbox" class="toggle" />
 										<label for="tgl5" class="toggle-bg block overflow-hidden h-6 rounded-full bg-white cursor-pointer"></label></div
 								></a>
 								<span id="tgt5" class="text-black text-xl">-</span>
@@ -337,7 +337,7 @@ <h4>Reset the search bar after you copied a code. Useful if you copy and search
 							<div class="flex justify-center items-center w-72 h-[68px] bg-white mx-auto rounded-full">
 								<a href="#" onclick="copy()">
 									<div class="pointer-events-none relative inline-block w-10 mr-2 align-middle select-none bg-gray-900 border-2 border-gray-900 rounded-full">
-										<input tabindex="-1" id="tgl6" type="checkbox" class="toggle checked:bg-white outline-none focus:outline-none right-5 duration-200 ease-in absolute block w-4 h-4 rounded-full top-1 bg-black appearance-none cursor-pointer" />
+										<input tabindex="-1" id="tgl6" type="checkbox" class="toggle" />
 										<label for="tgl6" class="toggle-bg block overflow-hidden h-6 rounded-full bg-white cursor-pointer"></label></div
 								></a>
 								<span id="tgt6" class="text-black text-xl">-</span>
@@ -927,7 +927,7 @@ <h4>You can use your webcam to scan QR code(s). Works well with high quality web
 							<div class="flex justify-center items-center w-72 h-[68px] bg-white mx-auto rounded-full">
 								<a href="#" onclick="webcam()">
 									<div class="pointer-events-none relative inline-block w-10 mr-2 align-middle select-none bg-gray-900 border-2 border-gray-900 rounded-full">
-										<input tabindex="-1" id="tgl8" type="checkbox" class="toggle checked:bg-white outline-none focus:outline-none right-5 duration-200 ease-in absolute block w-4 h-4 rounded-full top-1 bg-black appearance-none cursor-pointer" />
+										<input tabindex="-1" id="tgl8" type="checkbox" class="toggle" />
 										<label for="tgl8" class="toggle-bg block overflow-hidden h-6 rounded-full bg-white cursor-pointer"></label></div
 								></a>
 								<span id="tgt8" class="text-black text-xl">-</span>

diff --git a/app/settings/src/css/index.css b/app/settings/src/css/index.css
@@ -6,12 +6,3 @@ body {
 .tabcontent {
 	animation: fadeEffect 1s;
 }
-
-.toggle:checked ~ .toggle-bg {
-	background-color: black !important;
-	transition: 0.2s ease-in;
-}
-
-.toggle:checked {
-	right: 4px !important;
-}