Make login form inputs prettier

skins/elastic/styles/styles.less

@@ -189,6 +189,24 @@ table.propform {
     }
 }
 
+/* Some common icons for "iconized inputs" */
+.input-group-addon.icon {
+
+    &:before {
+        &:extend(.font-icon-class);
+        margin: 0;
+        line-height: 1;
+    }
+    &.user:before {
+        content: @fa-var-user;
+    }
+    &.pass:before {
+        content: @fa-var-lock;
+    }
+    &.host:before {
+        content: @fa-var-home;
+    }
+}
 
 
 /*** Widgets ***/
@@ -216,7 +234,7 @@ table.propform {
 #login-form {
     margin: auto;
     width: 95%;
-    max-width: 320px;
+    max-width: 280px;
 }
 
 

skins/elastic/ui.js

@@ -272,6 +272,22 @@ function rcube_elastic_ui()
 
             row.addClass(row_classes.join(' '));
         });
+
+        // Make logon form prettier
+        if (rcmail.env.task == 'login') {
+            $('#login-form table tr').each(function() {
+                var input = $('input,select', this),
+                    label = $('label', this),
+                    icon = $('<i>').attr('class', 'input-group-addon icon ' + input.attr('name').replace('_', ''));
+
+                $(this).addClass('form-group row');
+                label.parent().css('display', 'none');
+                input.addClass('form-control')
+                    .attr('placeholder', label.text())
+                    .before(icon)
+                    .parent().addClass('input-group');
+            });
+        }
     };
 
     /**