Fix show password buttons

Levminer · Nov 28, 2021 · 28d9c2d · 28d9c2d
1 parent 32cdd6e
commit 28d9c2d
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 68 deletions.
diff --git a/app/confirm/index.html b/app/confirm/index.html
@@ -28,16 +28,14 @@ <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>
-					<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>
+					<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-[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>
 						<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/landing/index.html b/app/landing/index.html
@@ -33,29 +33,25 @@ <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>
-						<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>
+						<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>
 					<div class="flex flex-col">
 						<label class="mb-1" id="password_label2">Confirm password</label>
-						<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>
+						<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>
 				</div>
 				<button class="buttoni mb-5" onclick="comparePasswords()">

diff --git a/src/dragonfly.scss b/src/dragonfly.scss
@@ -2,19 +2,6 @@
 /* 1.4.0 */
 /* Created by: Levminer */
 
-:root {
-	/* main colors */
-	--df_primary_color: rgb(255, 255, 255);
-	--df_secondary_color: rgb(255, 255, 255);
-	--df_tertiary_color: rgb(0, 0, 0);
-	/* background colors */
-	--df_primary_background: rgb(10, 10, 10);
-	--df_secondary_background: rgb(10, 10, 10);
-	/* gradiant colors */
-	--df_gradiant_start: rgb(20, 20, 20);
-	--df_gradiant_end: rgb(30, 30, 30);
-}
-
 /* body */
 body {
 	color: white;
@@ -58,22 +45,9 @@ a:visited {
 	text-decoration: none !important;
 }
 
-/* divs*/
-.center {
-	background-color: rgb(20, 20, 20);
-	position: relative;
-	top: 200px;
-	text-align: center;
-	padding-top: 30px;
-	margin: 130px auto;
-	height: 300px;
-	width: 60%;
-	border-radius: 30px;
-}
-
 /* scrollbar */
 ::-webkit-scrollbar-track {
-	background-color: #292a2d;
+	background-color: #000000;
 }
 
 ::-webkit-scrollbar {
@@ -82,23 +56,15 @@ a:visited {
 }
 
 ::-webkit-scrollbar-thumb {
-	background-color: rgb(20, 20, 20);
+	background-color: rgb(30, 30, 30);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-	background-color: rgb(30, 30, 30);
+	background-color: rgb(40, 40, 40);
 }
 
 ::-webkit-scrollbar-corner {
-	background: #292a2d;
-}
-
-/* build number */
-.build {
-	display: none;
-	top: 0;
-	position: sticky;
-	z-index: 999999;
+	background-color: #000000;
 }
 
 /* details */
@@ -220,6 +186,26 @@ details[open] summary ~ * {
 	transition: 0.2s ease-in;
 }
 
+.input:hover ~ #show_pass_0 {
+	transition: 0.2s ease-in;
+	stroke: white;
+}
+
+.input:hover ~ #show_pass_01 {
+	transition: 0.2s ease-in;
+	stroke: white;
+}
+
+.input:hover ~ #show_pass_1 {
+	transition: 0.2s ease-in;
+	stroke: white;
+}
+
+.input:hover ~ #show_pass_11 {
+	transition: 0.2s ease-in;
+	stroke: white;
+}
+
 hr {
 	margin-top: 15px;
 	color: white;