CSS/forms: style them

* login form style should only affect login form
* accessibility: add labels on login page

application/forms/Authentication/LoginForm.php

@@ -1,32 +1,4 @@
 <?php
-// @codeCoverageIgnoreStart
-// {{{ICINGA_LICENSE_HEADER}}}
-/**
- * This file is part of Icinga Web 2.
- *
- * Icinga Web 2 - Head for multiple monitoring backends.
- * Copyright (C) 2013 Icinga Development Team
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU General Public License
- * as published by the Free Software Foundation; either version 2
- * of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- *
- * @copyright  2013 Icinga Development Team <info@icinga.org>
- * @license    http://www.gnu.org/licenses/gpl-2.0.txt GPL, version 2
- * @author     Icinga Development Team <info@icinga.org>
- *
- */
-// {{{ICINGA_LICENSE_HEADER}}}
 
 namespace Icinga\Form\Authentication;
 
@@ -49,32 +21,23 @@ class LoginForm extends Form
     protected function create()
     {
         $this->setName('form_login');
-        $this->addElement(
+        $this->addElement('text', 'username', array(
-            'text',
+            'label'       => t('Username'),
-            'username',
+            'placeholder' => t('Please enter your username...'),
-            array(
+            'required'    => true,
-                'required' => true,
+        ));
-                'placeholder' => t('Username'),
-            )
-        );
 
-        $this->addElement(
+        $this->addElement('password', 'password', array(
-            'password',
+            'label'       => t('Password'),
-            'password',
+            'placeholder' => t('...and your password'),
-            array(
+            'required'    => true
-                'placeholder'    => t('Password'),
+        ));
-                'required' => true
-            )
-        );
-        $user = $this->getElement('username');
         // TODO: We need a place to intercept filled forms before rendering
         if (isset($_POST['username'])) {
             $this->getElement('password')->setAttrib('class', 'autofocus');
         } else {
-            $user->setAttrib('class', 'autofocus');
+            $this->getElement('username')->setAttrib('class', 'autofocus');
         }
         $this->setSubmitLabel('Login');
-
     }
 }
-// @codeCoverageIgnoreEnd

public/css/icinga/forms.less

@@ -30,22 +30,16 @@ label {
 }
 
 input, select {
+  box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
-  box-sizing: border-box;
+  border: 1px solid #ddd;
-  background: #ddd;
-  color: #333;
   padding: 0.2em;
-  border: 2px solid #ddd;
+  background: #fff;
 }
 
-select {
+input:focus, select:focus {
-  /* https://bugzilla.mozilla.org/show_bug.cgi?id=649849 */
+  border-color: #333;
-  -moz-appearance: none;
-  padding-right: 5px;
-  text-overflow: '';
-  -webkit-appearance: none;
-  cursor: pointer;
 }
 
 input[type=submit] {

public/css/icinga/login.less

@@ -50,18 +50,43 @@
   }
 
   .form label {
-    display: none;
+    font-weight: normal;
+    display: inline-block;
+    line-height: 2.5em;
+    width: 10em;
+    margin-right: 1em;
+    text-align: right;
+
   }
 
   form {
     margin-left: auto;
     margin-right: auto;
-    width: 20em;
+    width: 40em;
   }
 
   form input {
-    width: 100%;
+    width: 18em;
     padding: 0.5em;
+	background: #ddd;
+	color: #333;
+    border: 1px solid #ddd;
+  }
+
+  form input:focus {
+    background: white;
+  }
+
+  input[type=submit] {
+    color: #eee;
+    border-color: #777;
+    background: #777;
+    margin-left: 11em;
+  }
+
+  input[type=submit]:hover, a.button:hover, input[type=submit]:focus {
+    background-color: #333;
+    border-color: #333;
   }
 
   .footer {