GUAC-932: Restyle login page and general UI.

guacamole/src/main/webapp/app/client/styles/menu.css

@@ -94,17 +94,9 @@
     margin: 1em auto;
 }
 
-#menu h3 {
+#menu h2 {
-
-    background: rgba(0, 0, 0, 0.4);
-
     padding: 0.25em 0.5em;
-    margin: 0;
     font-size: 1em;
-
-    color: white;
-    font-weight: bold;
-
 }
 
 #menu #keyboard-settings .figure {

guacamole/src/main/webapp/app/client/templates/client.html

@@ -40,15 +40,13 @@
 
     <!-- Menu -->
     <div ng-class="{open: menuShown}" id="menu">
-        <h2 id="menu-title">{{connectionName}}</h2>
+        <h2>{{'client.clipboard' | translate}}</h2>
-
-        <h3>{{'client.clipboard' | translate}}</h3>
         <div class="content" id="clipboard-settings">
             <p class="description">{{'client.copiedText' | translate}}</p>
             <textarea ng-model="clipboardData" rows="10" cols="40" id="clipboard"></textarea>
         </div>
 
-        <h3></h3>
+        <h2>{{'client.inputMethod' | translate}}</h2>
         <div class="content" id="keyboard-settings">
 
             <!-- No IME -->
@@ -72,7 +70,7 @@
 
         </div>
 
-        <h3>{{'client.mouseMode' | translate}}</h3>
+        <h2>{{'client.mouseMode' | translate}}</h2>
         <div class="content" id="mouse-settings">
             <p class="description">{{'client.mouseModeDesc' | translate}}</p>
 
@@ -96,7 +94,7 @@
 
         </div>
 
-        <h3>{{'client.display' | translate}}</h3>
+        <h2>{{'client.display' | translate}}</h2>
         <div class="content">
             <div id="zoom-settings">
                 <div ng-click="zoomOut()" id="zoom-out"><img src="images/settings/zoom-out.png" alt="-"/></div>

guacamole/src/main/webapp/app/index/styles/buttons.css

@@ -33,6 +33,7 @@ input[type="submit"], button, a.button {
     text-shadow: -1px -1px rgba(0, 0, 0, 0.3);
     font-size: 1em;
     font-weight: bold;
+    font-family: Carlito, FreeSans, Helvetica, Arial, sans-serif;
 
     padding: 0.35em 1em;
     min-width: 5em;

guacamole/src/main/webapp/app/index/styles/status.css

@@ -72,11 +72,11 @@
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125);
     margin: 0;
     padding: 0.5em 1em;
+    text-transform: uppercase;
 }
 
 .status.error {
     background: #FDD;
-    border: 1px solid #964040;
 }
 
 .status > * {

guacamole/src/main/webapp/app/index/styles/ui.css

@@ -34,10 +34,6 @@ body {
     margin: 0;
 }
 
-input[type="submit"], button {
-    font-family: Carlito, FreeSans, Helvetica, Arial, sans-serif;
-}
-
 img {
     border: none;
     vertical-align: middle;

guacamole/src/main/webapp/app/login/styles/dialog.css

@@ -42,7 +42,8 @@ div.login-dialog {
     -moz-animation: fadein 0.125s linear;
     -webkit-animation: fadein 0.125s linear;
 
-    max-width: 75%;
+    width: 100%;
+    max-width: 3in;
     text-align: left;
     padding: 1em;
     border: 1px solid rgba(0, 0, 0, 0.25);

guacamole/src/main/webapp/app/login/styles/input.css

@@ -26,10 +26,13 @@
     -moz-border-radius: 0.2em;
     -webkit-border-radius: 0.2em;
     -khtml-border-radius: 0.2em;
+    font-family: Carlito, FreeSans, Helvetica, Arial, sans-serif;
     border-radius: 0.2em;
     width: 100%;
     margin: 0;
     margin-bottom: 0.5em;
+    padding: 0.5em 0.75em;
+    max-width: none;
 }
 
 input[type="submit"].login {