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

17 files changed, 434 insertions, 97 deletions

diff --git a/app/views/auth/formLogin.phtml b/app/views/auth/formLogin.phtml
index 52545351e..dfff64ffb 100644
--- a/app/views/auth/formLogin.phtml
+++ b/app/views/auth/formLogin.phtml
@@ -15,7 +15,10 @@
 
 		<div class="form-group">
 			<label for="passwordPlain"><?= _t('gen.auth.password') ?></label>
-			<input type="password" id="passwordPlain" required="required" />
+			<div class="stick">
+				<input type="password" id="passwordPlain" required="required" />
+				<a class="btn toggle-password" data-toggle="passwordPlain"><?= _i('key') ?></a>
+			</div>
 			<input type="hidden" id="challenge" name="challenge" />
 			<noscript><strong><?= _t('gen.js.should_be_activated') ?></strong></noscript>
 		</div>
diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 2f34976fa..0bbad36d5 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -663,6 +663,11 @@ a.btn {
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: .5rem;
+	padding-right: .5rem;
 	text-align: center;
 }
 
@@ -671,13 +676,36 @@ a.btn {
 }
 
 .prompt form {
-	margin: 10px auto 20px auto;
-	width: 200px;
+	margin-top: 2rem;
+	margin-bottom: 3rem;
+	text-align: left;
+}
+
+.prompt .form-group {
+	margin-bottom: 1rem;
+}
+
+.prompt .form-group::after {
+	display: none;
+}
+
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
 }
 
+.prompt .stick,
 .prompt input {
-	margin: 5px auto;
 	width: 100%;
+	box-sizing: border-box;
+}
+
+.prompt .btn.btn-important {
+	padding-left: 1.5rem;
+	padding-right: 1.5rem;
+	font-size: 1.1rem;
 }
 
 .prompt p {
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 4526745ea..7ad420820 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -663,21 +663,45 @@ a.btn {
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-right: auto;
+	margin-left: auto;
+	padding-right: .5rem;
+	padding-left: .5rem;
 	text-align: center;
 }
 
-.prompt label {
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
 	text-align: right;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 200px;
+.prompt .form-group {
+	margin-bottom: 1rem;
+}
+
+.prompt .form-group::after {
+	display: none;
 }
 
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
 .prompt input {
-	margin: 5px auto;
 	width: 100%;
+	box-sizing: border-box;	
+}
+
+.prompt .btn.btn-important {
+	padding-right: 1.5rem;
+	padding-left: 1.5rem;
+	font-size: 1.1rem;
 }
 
 .prompt p {
diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css
index 6ad90e2dc..c45908c5d 100644
--- a/p/themes/BlueLagoon/BlueLagoon.css
+++ b/p/themes/BlueLagoon/BlueLagoon.css
@@ -757,27 +757,44 @@ 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 form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
+	text-align: left;
+}
+
 .prompt label {
 	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 {
@@ -791,6 +808,16 @@ a.btn {
 	box-shadow: 0 0 3px #0062be;
 }
 
+.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/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index 26c317f1d..6a8f39104 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -765,27 +765,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 {
@@ -799,6 +812,16 @@ a.btn {
 	box-shadow: 0 0 3px #0062be;
 }
 
+.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;
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index cf66b63e3..06a5b7df0 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -701,21 +701,45 @@ a.btn {
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: .5rem;
+	padding-right: .5rem;
 	text-align: center;
 }
 
-.prompt label {
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
 	text-align: left;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 200px;
+.prompt .form-group {
+	margin-bottom: 1rem;
+}
+
+.prompt .form-group::after {
+	display: none;
 }
 
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
 .prompt input {
-	margin: 5px auto;
 	width: 100%;
+	box-sizing: border-box;
+}
+
+.prompt .btn.btn-important {
+	padding-left: 1.5rem;
+	padding-right: 1.5rem;
+	font-size: 1.1rem;
 }
 
 .prompt p {
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index c50f9a083..108c3caf1 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -701,21 +701,45 @@ a.btn {
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-right: auto;
+	margin-left: auto;
+	padding-right: .5rem;
+	padding-left: .5rem;
 	text-align: center;
 }
 
-.prompt label {
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
 	text-align: right;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 200px;
+.prompt .form-group {
+	margin-bottom: 1rem;
+}
+
+.prompt .form-group::after {
+	display: none;
 }
 
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
 .prompt input {
-	margin: 5px auto;
 	width: 100%;
+	box-sizing: border-box;
+}
+
+.prompt .btn.btn-important {
+	padding-right: 1.5rem;
+	padding-left: 1.5rem;
+	font-size: 1.1rem;
 }
 
 .prompt p {
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index ca148dcae..5c3070fe1 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -706,21 +706,45 @@ a.btn {
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: .5rem;
+	padding-right: .5rem;
 	text-align: center;
 }
 
-.prompt label {
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
 	text-align: left;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 200px;
+.prompt .form-group {
+	margin-bottom: 1rem;
+}
+
+.prompt .form-group::after {
+	display: none;
 }
 
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
 .prompt input {
-	margin: 5px auto;
 	width: 100%;
+	box-sizing: border-box;
+}
+
+.prompt .btn.btn-important {
+	padding-left: 1.5rem;
+	padding-right: 1.5rem;
+	font-size: 1.1rem;
 }
 
 .prompt p {
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index 7434dcc0c..0cf97a52c 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -706,21 +706,45 @@ a.btn {
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-right: auto;
+	margin-left: auto;
+	padding-right: .5rem;
+	padding-left: .5rem;
 	text-align: center;
 }
 
-.prompt label {
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
 	text-align: right;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 200px;
+.prompt .form-group {
+	margin-bottom: 1rem;
+}
+
+.prompt .form-group::after {
+	display: none;
 }
 
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
 .prompt input {
-	margin: 5px auto;
 	width: 100%;
+	box-sizing: border-box;
+}
+
+.prompt .btn.btn-important {
+	padding-right: 1.5rem;
+	padding-left: 1.5rem;
+	font-size: 1.1rem;
 }
 
 .prompt p {
diff --git a/p/themes/Origine-compact/origine-compact.css b/p/themes/Origine-compact/origine-compact.css
index 0cdab1bcd..30a2c8ecb 100644
--- a/p/themes/Origine-compact/origine-compact.css
+++ b/p/themes/Origine-compact/origine-compact.css
@@ -735,21 +735,45 @@ a.btn,
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: .5rem;
+	padding-right: .5rem;
 	text-align: center;
 }
 
-.prompt label {
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
 	text-align: left;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 200px;
+.prompt .form-group {
+	margin-bottom: 1rem;
+}
+
+.prompt .form-group::after {
+	display: none;
 }
 
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
 .prompt input {
-	margin: 5px auto;
 	width: 100%;
+	box-sizing: border-box;
+}
+
+.prompt .btn.btn-important {
+	padding-left: 1.5rem;
+	padding-right: 1.5rem;
+	font-size: 1.1rem;
 }
 
 .prompt p {
diff --git a/p/themes/Origine-compact/origine-compact.rtl.css b/p/themes/Origine-compact/origine-compact.rtl.css
index 30fd8e8ee..fbfa0c03e 100644
--- a/p/themes/Origine-compact/origine-compact.rtl.css
+++ b/p/themes/Origine-compact/origine-compact.rtl.css
@@ -735,21 +735,45 @@ a.btn,
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-right: auto;
+	margin-left: auto;
+	padding-right: .5rem;
+	padding-left: .5rem;
 	text-align: center;
 }
 
-.prompt label {
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
 	text-align: right;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 200px;
+.prompt .form-group {
+	margin-bottom: 1rem;
+}
+
+.prompt .form-group::after {
+	display: none;
 }
 
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
 .prompt input {
-	margin: 5px auto;
 	width: 100%;
+	box-sizing: border-box;	
+}
+
+.prompt .btn.btn-important {
+	padding-right: 1.5rem;
+	padding-left: 1.5rem;
+	font-size: 1.1rem;
 }
 
 .prompt p {
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 0aaf244cc..9765ebb4e 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -698,14 +698,12 @@ a.btn {
 	margin-right: auto;
 	padding-left: .5rem;
 	padding-right: .5rem;
-
 	text-align: center;
 }
 
 .prompt form {
 	margin-top: 2rem;
 	margin-bottom: 3rem;
-
 	text-align: left;
 }
 
@@ -720,7 +718,6 @@ a.btn {
 .prompt .form-group.form-group-actions {
 	display: flex;
 	margin-top: 2rem;
-
 	align-items: center;
 	justify-content: space-between;
 }
@@ -728,12 +725,12 @@ a.btn {
 .prompt .stick,
 .prompt input {
 	width: 100%;
+	box-sizing: border-box;
 }
 
 .prompt .btn.btn-important {
 	padding-left: 1.5rem;
 	padding-right: 1.5rem;
-
 	font-size: 1.1rem;
 }
 
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 73966e5ce..7fbb30a9e 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -698,14 +698,12 @@ a.btn {
 	margin-left: auto;
 	padding-right: .5rem;
 	padding-left: .5rem;
-
 	text-align: center;
 }
 
 .prompt form {
 	margin-top: 2rem;
 	margin-bottom: 3rem;
-
 	text-align: right;
 }
 
@@ -720,7 +718,6 @@ a.btn {
 .prompt .form-group.form-group-actions {
 	display: flex;
 	margin-top: 2rem;
-
 	align-items: center;
 	justify-content: space-between;
 }
@@ -728,12 +725,12 @@ a.btn {
 .prompt .stick,
 .prompt input {
 	width: 100%;
+	box-sizing: border-box;	
 }
 
 .prompt .btn.btn-important {
 	padding-right: 1.5rem;
 	padding-left: 1.5rem;
-
 	font-size: 1.1rem;
 }
 
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index 88b7d2f24..29cd22bdc 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -700,21 +700,45 @@ a.btn {
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: .5rem;
+	padding-right: .5rem;
 	text-align: center;
 }
 
-.prompt label {
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
 	text-align: left;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 200px;
+.prompt .form-group {
+	margin-bottom: 1rem;
 }
 
+.prompt .form-group::after {
+	display: none;
+}
+
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
 .prompt input {
-	margin: 5px auto;
 	width: 100%;
+	box-sizing: border-box;
+}
+
+.prompt .btn.btn-important {
+	padding-left: 1.5rem;
+	padding-right: 1.5rem;
+	font-size: 1.1rem;
 }
 
 .prompt p {
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index 12835e13c..9226f8ad3 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -700,21 +700,45 @@ a.btn {
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-right: auto;
+	margin-left: auto;
+	padding-right: .5rem;
+	padding-left: .5rem;
 	text-align: center;
 }
 
-.prompt label {
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
 	text-align: right;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 200px;
+.prompt .form-group {
+	margin-bottom: 1rem;
+}
+
+.prompt .form-group::after {
+	display: none;
 }
 
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
 .prompt input {
-	margin: 5px auto;
 	width: 100%;
+	box-sizing: border-box;	
+}
+
+.prompt .btn.btn-important {
+	padding-right: 1.5rem;
+	padding-left: 1.5rem;
+	font-size: 1.1rem;
 }
 
 .prompt p {
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;