Use new header plugin placeholders

1 files changed, 33 insertions, 21 deletions

diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index e2d64686..0367534b 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -257,8 +257,6 @@ pre {
 
 #header-login-form {
     height: 0;
-    text-align: center;
-    background: #1b926c;
     transition: 0.3s;
 }
 
@@ -266,14 +264,39 @@ pre {
     display: block;
     height: 30px;
     padding: 5px 0;
-    box-shadow: 0 1px 1px 1px #797979;
 }
 
-#header-login-form input[type="text"], #header-login-form input[type="password"], #header-login-form .remember-me {
+#header-login-form input[type="text"], #header-login-form input[type="password"] {
+    width: 200px;
+}
+
+#header-login-form input, #header-login-form .remember-me {
+    transition: visibility 1s, opacity 1s;
+    visibility: hidden;
+    opacity: 0;
+}
+
+#header-login-form.open input, #header-login-form.open .remember-me {
+    visibility: visible;
+    opacity: 1;
+}
+
+.subheader-form {
+    text-align: center;
+    background: #1b926c;
+    display: block;
+}
+
+.subheader-form.open {
+    height: 30px;
+    padding: 5px 0;
+}
+
+.subheader-form input[type="text"], .subheader-form input[type="password"], .subheader-form .remember-me {
     margin: 0 0 5px 0;
     padding: 5px 5px 3px 15px;
     height: 20px;
-    width: 200px;
+    width: 20%;
     background: #1fa67a;
     border: medium none currentColor;
     border-radius: 25px;
@@ -282,24 +305,24 @@ pre {
 }
 
 /* because chrome */
-#header-login-form input[type="text"]::-webkit-input-placeholder,
-#header-login-form input[type="password"]::-webkit-input-placeholder
+.subheader-form input[type="text"]::-webkit-input-placeholder,
+.subheader-form input[type="password"]::-webkit-input-placeholder
 {
     color: #b0ddce;
 }
 
-#header-login-form .remember-me {
+.subheader-form .remember-me {
     display: inline-block;
     width: auto;
     padding: 5px 20px 3px 20px;
     cursor: pointer;
 }
 
-#header-login-form .remember-me label, #header-login-form .remember-me input {
+.subheader-form .remember-me label, .subheader-form .remember-me input {
     cursor: pointer;
 }
 
-#header-login-form input[type="submit"] {
+.subheader-form input[type="submit"] {
     display: inline-block;
     margin: 0 0 5px 0;
     height: 25px;
@@ -311,17 +334,6 @@ pre {
     color: #b0ddce;
 }
 
-#header-login-form input, #header-login-form .remember-me {
-    transition: visibility 1s, opacity 1s;
-    visibility: hidden;
-    opacity: 0;
-}
-
-#header-login-form.open input, #header-login-form.open .remember-me {
-    visibility: visible;
-    opacity: 1;
-}
-
 .new-version-message {
     text-align: center;
 }