Add toggle password visibility button on login form (#3205)

* Add password observer for login view and update Origine theme

* Update Alternative-Dark style

* Update BlueLagoon theme

* Update Dark theme

* Update Flat theme

* Update Screwdriver theme

* Update Origine-compact theme

* Update Pafat theme

* Coding style

2 files changed, 67 insertions, 21 deletions

diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index 87839702b..7ad618234 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -746,27 +746,40 @@ a.btn {
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: .5rem;
+	padding-right: .5rem;
 	text-align: center;
-	padding: 14px 0px;
 	text-shadow: 0 1px rgba(255,255,255,0.08);
 }
 
-.prompt label {
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
 	text-align: left;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 180px;
+.prompt .form-group {
+	margin-bottom: 1rem;
 }
 
-.prompt input {
-	margin: 5px auto;
-	width: 100%;
+.prompt .form-group::after {
+	display: none;
 }
 
-.prompt p {
-	margin: 20px 0;
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
+.prompt input {
+	width: 100%;
+	box-sizing: border-box;
 }
 
 .prompt input#username,.prompt input#passwordPlain {
@@ -780,6 +793,16 @@ a.btn {
 	box-shadow: 0 0 3px #e7ab34;
 }
 
+.prompt .btn.btn-important {
+	padding-left: 1.5rem;
+	padding-right: 1.5rem;
+	font-size: 1.1rem;
+}
+
+.prompt p {
+	margin: 20px 0;
+}
+
 /*=== New article notification */
 #new-article {
 	background: #0084cc;
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index 6d52dd09f..193d5d502 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -754,27 +754,40 @@ a.btn {
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-right: auto;
+	margin-left: auto;
+	padding-right: .5rem;
+	padding-left: .5rem;
 	text-align: center;
-	padding: 14px 0px;
-	text-shadow: 0 1px rgba(255,255,255,0.08);
 }
 
-.prompt label {
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
 	text-align: right;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 180px;
+.prompt .form-group {
+	margin-bottom: 1rem;
 }
 
-.prompt input {
-	margin: 5px auto;
-	width: 100%;
+.prompt .form-group::after {
+	display: none;
 }
 
-.prompt p {
-	margin: 20px 0;
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
+.prompt input {
+	width: 100%;
+	box-sizing: border-box;
+	
 }
 
 .prompt input#username,.prompt input#passwordPlain {
@@ -788,6 +801,16 @@ a.btn {
 	box-shadow: 0 0 3px #e7ab34;
 }
 
+.prompt .btn.btn-important {
+	padding-right: 1.5rem;
+	padding-left: 1.5rem;
+	font-size: 1.1rem;
+}
+
+.prompt p {
+	margin: 20px 0;
+}
+
 /*=== New article notification */
 #new-article {
 	background: #0084cc;