Fix opacity of submit button for password in authentication page

The authentication page uses pure CSS instead of the SCSS styles, so the rules were adjusted as needed. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
bink · Dec 14, 2018 · 173e065 · 173e065
1 parent b0cde89
commit 173e065
Showing 1 changed file with 26 additions and 4 deletions.
diff --git a/css/authenticate.css b/css/authenticate.css
@@ -5,21 +5,43 @@ form fieldset {
 
 #password {
 	margin-right: 0 !important;
-	border-top-right-radius: 0;
-	border-bottom-right-radius: 0;
 	height: 45px;
 	box-sizing: border-box;
 	flex: 1 1 auto;
 	width: 100% !important;
 	min-width: 0; /* FF hack for to override default value */
+
+	/* The padding needs to be set here instead of for "input[type="password"]"
+	 * elements to prevent being overriden by a more specific rule in the
+	 * server. */
+	padding-right: 44px;
+}
+
+input[type="password"]:focus + .icon-confirm:not(:disabled) {
+	opacity: .6;
+}
+
+input[type="password"] + .icon-confirm {
+	position: absolute;
+	right: 15px;
+
+	border: none;
+	/* Needed to override an important rule set in the server. */
+	background-color: transparent !important;
+
+	opacity: .3;
+}
+
+input[type="password"] + .icon-confirm:hover:not(:disabled),
+input[type="password"] + .icon-confirm:focus:not(:disabled),
+input[type="password"] + .icon-confirm:active:not(:disabled) {
+	opacity: 1;
 }
 
 input[type='submit'] {
 	width: 45px;
 	height: 45px;
 	margin-left: 0 !important;
-	border-top-left-radius: 0;
-	border-bottom-left-radius: 0;
 }
 
 fieldset > p {