New Login screen design with bigger logo and bigger input boxes.

3 files changed, 98 insertions, 75 deletions

diff --git a/plugins/Login/templates/header.tpl b/plugins/Login/templates/header.tpl
index 8556d0c82b..7c5a57666c 100644
--- a/plugins/Login/templates/header.tpl
+++ b/plugins/Login/templates/header.tpl
@@ -51,7 +51,7 @@
 				{/capture}
 		{/if}
 	{if !$isCustomLogo}</a>
-		<div class="description"># {$linkTitle}
+		<div class="description"><a href="http://piwik.org" alt="Piwik" title="{$linkTitle}">{$linkTitle}</a>
 			<div class="arrow"> </div>
 		</div>
 	{/if}
diff --git a/plugins/Login/templates/login.css b/plugins/Login/templates/login.css
index 82aa97c92f..61126e0a66 100644
--- a/plugins/Login/templates/login.css
+++ b/plugins/Login/templates/login.css
@@ -5,57 +5,94 @@
 }
 
 body {
-	font: 12px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana,
-		sans-serif;
+	font: 12px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
 }
 
 form {
-	margin-left: 8px;
-	padding: 16px 16px 40px 16px;
-	font-weight: bold;
+	padding: 16px 16px 16px 16px;
 	border-radius: 5px;
-	-moz-border-radius: 5px;
-	-webkit-border-radius: 5px;
-}
-
-form .forgetmenot {
-	font-weight: normal;
-	float: left;
-	margin-bottom: 0;
 }
 
 #login form input.submit {
-	font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana,
-		sans-serif;
-	padding: 3px 5px;
-	border: 1px solid;
-	font-size: 13px;
+	font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
 	-moz-border-radius: 3px;
 	-webkit-border-radius: 3px;
-	border-radius: 3px;
-	cursor: default;
-	text-decoration: none;
-	margin-top: -6px;
-}
-
-form .submit {
 	float: right;
+	height: 35px;
+	padding: 0 20px;
+	cursor: pointer;
+	font: bold 15px Arial, Helvetica;
+	color: #8f5a0a;
 }
 
-form p {
+#login form div {
 	margin-bottom: 24px;
 }
 
 .updated,.login #login_error,.login .message {
 	background-color: #ffffe0;
 	border-color: #e6db55;
+	margin: 0 auto;
+	width: 330px;
+}
+
+#login fieldset {
+	border: 0;
+}
+
+#login fieldset.actions {
+	line-height: 35px;
+	width: 320px;
+}
+
+#login h1
+{
+	text-align: center;
+	color: #666;
+	margin: 0 0 30px 0;
+	letter-spacing: 4px;
+	font: normal 26px/1 Verdana, Helvetica;
+	position: relative;
 }
 
-#login {
-	width: 292px;
-	margin: 20px auto 7em;
+#login
+{
+	background-color: #fafafa;
+	width: 360px;
+	padding: 30px;
+	margin: 50px auto 0 auto;
+	z-index: 0;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;  
+	-webkit-box-shadow:
+		0 0 2px rgba(0, 0, 0, 0.2),
+		0 1px 1px rgba(0, 0, 0, .2);
+	-moz-box-shadow:
+		0 0 2px rgba(0, 0, 0, 0.2),  
+		1px 1px   0 rgba(0,   0,   0,   .1);
+	box-shadow:
+		0 0 2px rgba(0, 0, 0, 0.2),  
+		0 1px 1px rgba(0, 0, 0, .2);
+}
+
+#login form { margin: 0; position: relative; }
+#login form input[type="text"],
+#login form input[type="password"] {
+	padding: 10px 15px 10px 30px;
+	margin: 0 0 15px 0;
+	width: 273px; /* 273 + 2 + 45 = 320 */
+	border: 1px solid #ccc;
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+	border-radius: 5px;
+	-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
+	-webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
+	box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
 }
 
+
+
 #login_error,.message {
 	margin: 0 0 16px 8px;
 	border: 1px solid;
@@ -67,6 +104,10 @@ form p {
 	padding: 16px;
 }
 
+#nav {
+	text-align: center;
+}
+
 #login_form_password,#reset_form_password,#reset_form_password_bis,
 #login_form_login,#reset_form_login {
 	font-size: 20px;
@@ -79,14 +120,6 @@ form p {
 	color: #555;
 }
 
-.login form {
-	background-color: #eaf3fa;
-}
-
-#login form input.submit {
-	background-color: #cee1ef !important;
-}
-
 #login #login_error {
 	background-color: #ffebe8;
 	border-color: #c00;
@@ -133,18 +166,21 @@ a {
 	position: relative;
 }
 
-#logo .description {
-	cursor:default;
-	position: absolute;
+#logo .description a {
 	font:16px/16px 'Patrick Hand';
 	color:#666666;
+	right: auto;
+	text-decoration: none;
+}
+
+#logo .description {
+	position: absolute;
+	left: -60px !important;
+	top: -40px !important;
 	-webkit-transform:rotate(-6deg);
 	-moz-transform:rotate(-6deg);
 	-ms-transform:rotate(-6deg);
 	-o-transform:rotate(-6deg);
-	left: -60px !important;
-	top: -40px !important;
-	right: auto;
 }
 
 #logo .description .arrow {
@@ -152,7 +188,7 @@ a {
 	width:50px;
 	height:68px;
 	position:absolute;
-	left:-20px;
+	left:-25px;
 }
 
 #logo img {
diff --git a/plugins/Login/templates/login.tpl b/plugins/Login/templates/login.tpl
index 7df5d52d68..5b2cb472a6 100644
--- a/plugins/Login/templates/login.tpl
+++ b/plugins/Login/templates/login.tpl
@@ -32,46 +32,33 @@
 </div>
 
 <form id="login_form" {$form_data.attributes}>
-	<p>
-		<label>{'General_Username'|translate}:<br/>
-		<input type="text" name="form_login" id="login_form_login" class="input" value="" size="20" tabindex="10" />
-		<input type="hidden" name="form_nonce" id="login_form_nonce" value="{$nonce}" /></label>
-	</p>
+	<h1>{'Login_LogIn'|translate}</h1>
+	<fieldset class="inputs">
+		<input type="text" name="form_login" id="login_form_login" class="input" value="" size="20" tabindex="10" placeholder="{'General_Username'|translate}" />
+		<input type="password" name="form_password" id="login_form_password" class="input" value="" size="20" tabindex="20" placeholder="{'Login_Password'|translate}" />
+		<input type="hidden" name="form_nonce" id="login_form_nonce" value="{$nonce}" />
+	</fieldset>
 
-	<p>
-		<label>{'Login_Password'|translate}:<br />
-		<input type="password" name="form_password" id="login_form_password" class="input" value="" size="20" tabindex="20" /></label>
-	</p>
-	
-	<p class="forgetmenot">
-		<label><input name="form_rememberme" type="checkbox" id="login_form_rememberme" value="1" tabindex="90" {if $form_data.form_rememberme.value}checked="checked" {/if}/> {'Login_RememberMe'|translate} </label>
-	</p>
-	<p>
+	<fieldset class="actions">
+		<label><input name="form_rememberme" type="checkbox" id="login_form_rememberme" value="1" tabindex="90" {if $form_data.form_rememberme.value}checked="checked" {/if}/> {'Login_RememberMe'|translate}</label>
 		<input class="submit" id='login_form_submit' type="submit" value="{'Login_LogIn'|translate}" tabindex="100" />
-	</p>
+	</fieldset>
 </form>
 
 <form id="reset_form" style="display:none;">
-	<p>
-		<label>{'Login_LoginOrEmail'|translate}:<br />
-		<input type="text" name="form_login" id="reset_form_login" class="input" value="" size="20" tabindex="10" />
+	<fieldset class="inputs">
+		<input type="text" name="form_login" id="reset_form_login" class="input" value="" size="20" tabindex="10" placeholder="{'Login_LoginOrEmail'|translate}" />
 		<input type="hidden" name="form_nonce" id="reset_form_nonce" value="{$nonce}" /></label>
-	</p>
 
-	<p>
-		<label>{'Login_Password'|translate}:<br />
-		<input type="password" name="form_password" id="reset_form_password" class="input" value="" size="20" tabindex="20" /></label>
-	</p>
-	
-	<p>
-		<label>{'Login_PasswordRepeat'|translate}:<br />
-		<input type="password" name="form_password_bis" id="reset_form_password_bis" class="input" value="" size="20" tabindex="30" /></label>
-	</p>
+		<input type="password" name="form_password" id="reset_form_password" class="input" value="" size="20" tabindex="20" placeholder="{'Login_Password'|translate}" /></label>
+
+		<input type="password" name="form_password_bis" id="reset_form_password_bis" class="input" value="" size="20" tabindex="30" placeholder="{'Login_PasswordRepeat'|translate}" /></label>
+	</fieldset>
 	
-	<p>
+	<fieldset class="actions">
 		<span class="loadingPiwik" style="display:none;"><img src="themes/default/images/loading-blue.gif" /></span>
 		<input class="submit" id='reset_form_submit' type="submit" value="{'Login_ChangePassword'|translate}" tabindex="100"/>
-	</p>
+	</fieldset>
 	
 	<input type="hidden" name="module" value="Login"/>
 	<input type="hidden" name="action" value="resetPassword"/>