Merge pull request #850 from owncloud/icons-for-login

Icons for login

core/css/styles.css

@@ -122,6 +122,17 @@ input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-b
 #login #datadirContent label { display:block; margin:0; color:#999;  }
 #login form #datadirField legend { margin-bottom:15px; }
 
+
+/* Icons for username and password fields to better recognize them */
+#adminlogin, #adminpass, #user, #password { width:11.7em!important; padding-left:1.8em; }
+#adminlogin+label, #adminpass+label, #user+label, #password+label { left:2.2em; }
+#adminlogin+label+img, #adminpass+label+img, #user+label+img, #password+label+img {
+	position:absolute; left:1.25em; top:1.65em;
+	opacity:.3;
+}
+#adminpass+label+img, #password+label+img { top:1.1em; }
+
+
 /* Nicely grouping input field sets */
 .grouptop input {
 	margin-bottom:0;
@@ -138,11 +149,11 @@ input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-b
 	box-shadow:0 1px 1px #fff,0 1px 0 #ddd inset;
 }
 
-#login form label { margin:.95em 0 0 .85em; color:#666; }
+#login form label { color:#666; }
-#login .groupmiddle label, #login .groupbottom label { margin-top:13px; }
+#login .groupmiddle label, #login .groupbottom label { top:.65em; }
 /* NEEDED FOR INFIELD LABELS */
 p.infield { position:relative; }
-label.infield { cursor:text !important; }
+label.infield { cursor:text !important; top:1.05em; left:.85em; }
 #login form label.infield { position:absolute; font-size:19px; color:#aaa; white-space:nowrap; }
 #login form input[type="checkbox"]+label { position:relative; margin:0; font-size:1em; text-shadow:#fff 0 1px 0; }
 #login form .errors { background:#fed7d7; border:1px solid #f00; list-style-indent:inside; margin:0 0 2em; padding:1em; }

core/templates/installation.php

@@ -35,12 +35,14 @@
 	<fieldset id="adminaccount">
 		<legend><?php echo $l->t( 'Create an <strong>admin account</strong>' ); ?></legend>
 		<p class="infield grouptop">
-			<label for="adminlogin" class="infield"><?php echo $l->t( 'Username' ); ?></label>
 			<input type="text" name="adminlogin" id="adminlogin" value="<?php print OC_Helper::init_var('adminlogin'); ?>" autocomplete="off" autofocus required />
+			<label for="adminlogin" class="infield"><?php echo $l->t( 'Username' ); ?></label>
+			<img class="svg" src="<?php echo image_path('', 'actions/user.svg'); ?>" alt="" />
 		</p>
 		<p class="infield groupbottom">
-			<label for="adminpass" class="infield"><?php echo $l->t( 'Password' ); ?></label>
 			<input type="password" name="adminpass" id="adminpass" value="<?php print OC_Helper::init_var('adminpass'); ?>" required />
+			<label for="adminpass" class="infield"><?php echo $l->t( 'Password' ); ?></label>
+			<img class="svg" src="<?php echo image_path('', 'actions/password.svg'); ?>" alt="" />
 		</p>
 	</fieldset>
 

core/templates/login.php

@@ -17,12 +17,14 @@
 		<?php endif; ?>
 		</ul>
 		<p class="infield grouptop">
-			<label for="user" class="infield"><?php echo $l->t( 'Username' ); ?></label>
 			<input type="text" name="user" id="user" value="<?php echo $_['username']; ?>"<?php echo $_['user_autofocus']?' autofocus':''; ?> autocomplete="on" required />
+			<label for="user" class="infield"><?php echo $l->t( 'Username' ); ?></label>
+			<img class="svg" src="<?php echo image_path('', 'actions/user.svg'); ?>" alt="" />
 		</p>
 		<p class="infield groupbottom">
-			<label for="password" class="infield"><?php echo $l->t( 'Password' ); ?></label>
 			<input type="password" name="password" id="password" value="" required<?php echo $_['user_autofocus']?'':' autofocus'; ?> />
+			<label for="password" class="infield"><?php echo $l->t( 'Password' ); ?></label>
+			<img class="svg" src="<?php echo image_path('', 'actions/password.svg'); ?>" alt="" />
 		</p>
 		<input type="checkbox" name="remember_login" value="1" id="remember_login" /><label for="remember_login"><?php echo $l->t('remember'); ?></label>
 		<input type="submit" id="submit" class="login primary" value="<?php echo $l->t( 'Log in' ); ?>" />