GUAC-932: Restyle login page and general UI.

guacamole/src/main/webapp/app/home/styles/home.css

@@ -20,32 +20,6 @@
  * THE SOFTWARE.
  */
 
-div.connection-list-ui h1 {
-    
-    margin: 0;
-    padding: 0.5em;
-
-    font-size: 2em;
-    vertical-align: middle;
-    text-align: center;
-
-}
-
-div.connection-list-ui h2 {
-
-    padding: 0.5em;
-    margin: 0;
-    font-size: 1.5em;
-
-    font-weight: lighter;
-    text-shadow: 1px 1px white;
-
-    border-top: 1px solid #AAA;
-    border-bottom: 1px solid #AAA;
-    background: #DDD;
-    
-}
-
 div.logout-panel {
     padding: 0.45em;
     text-align: right;

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

@@ -28,26 +28,19 @@ input[type="submit"], button, a.button {
     background-color: #3C3C3C;
 
     border: 1px solid rgba(0, 0, 0, 0.4);
-    -moz-border-radius: 0.25em;
-    -webkit-border-radius: 0.25em;
-    -khtml-border-radius: 0.25em;
-    border-radius: 0.25em;
 
     color: white;
     text-shadow: -1px -1px rgba(0, 0, 0, 0.3);
     font-size: 1em;
+    font-weight: bold;
 
-    box-shadow: inset -1px -1px 0.1em rgba(0, 0, 0, 0.25),
+    padding: 0.35em 1em;
-                inset 1px 1px 0.1em rgba(255, 255, 255, 0.25),
-                -1px -1px 0.1em rgba(0, 0, 0, 0.25),
-                1px 1px 0.1em rgba(255, 255, 255, 0.25);
-    
-    padding: 0.35em;
-    padding-right: 1em;
-    padding-left: 1em;
     min-width: 5em;
     margin: 0.25em;
 
+    border-bottom: rgba(0, 0, 0, 0.25);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+
 }
 
 input[type="submit"]:hover, button:hover, a.button:hover {

guacamole/src/main/webapp/app/index/styles/font-carlito.css

@@ -0,0 +1,43 @@
+/*
+ * Copyright (C) 2014 Glyptodon LLC
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+/*
+ * The Carlito font is licensed under the SIL Open Font License, and thus is
+ * freely redistributable so long as it is distributed with software.
+ *
+ * The SIL OFL license can be found at http://scripts.sil.org/OFL or in the
+ * "LICENSE" file within the same directory as the Carlito-*.woff font files.
+ */
+
+@font-face {
+    font-family: 'Carlito';
+    font-weight: normal;
+    font-style: normal;
+    src: url('fonts/carlito/Carlito-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Carlito';
+    font-weight: bold;
+    font-style: normal;
+    src: url('fonts/carlito/Carlito-Bold.woff') format('woff');
+}

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

@@ -33,7 +33,7 @@ div.location, input[type=text], input[type=number], input[type=password], textar
     width: 100%;
     max-width: 16em;
     padding: 0.25em;
-    font-size: 10pt;
+    font-size: 0.8em;
     background: white;
     cursor: text;
 }
@@ -45,82 +45,3 @@ textarea {
     white-space: nowrap;
     overflow: auto;
 }
-
-input[type="submit"], button, a.button {
-    
-    -webkit-appearance: none;
-    text-decoration: none;
-
-    background-color: #3C3C3C;
-
-    border: 1px solid rgba(0, 0, 0, 0.4);
-    -moz-border-radius: 0.25em;
-    -webkit-border-radius: 0.25em;
-    -khtml-border-radius: 0.25em;
-    border-radius: 0.25em;
-
-    color: white;
-    text-shadow: -1px -1px rgba(0, 0, 0, 0.3);
-    font-size: 1em;
-
-    box-shadow: inset -1px -1px 0.1em rgba(0, 0, 0, 0.25),
-                inset 1px 1px 0.1em rgba(255, 255, 255, 0.25),
-                -1px -1px 0.1em rgba(0, 0, 0, 0.25),
-                1px 1px 0.1em rgba(255, 255, 255, 0.25);
-    
-    padding: 0.35em;
-    padding-right: 1em;
-    padding-left: 1em;
-    min-width: 5em;
-    margin: 0.25em;
-
-}
-
-input[type="submit"]:hover, button:hover, a.button:hover {
-    background-color: #5A5A5A;
-}
-
-input[type="submit"]:active, button:active, a.button:active {
-
-    background-color: #2C2C2C;
-    
-    box-shadow: 
-                inset 1px 1px 0.25em rgba(0, 0, 0, 0.25),
-                -1px -1px 0.25em rgba(0, 0, 0, 0.25),
-                1px 1px 0.25em rgba(255, 255, 255, 0.25);
-}
-
-button.danger, a.button.danger {
-    background: #A43;
-}
-
-button.danger:hover, a.button.danger:hover {
-    background: #C54;
-}
-
-button.danger:active, a.button.danger:active {
-    background: #932;
-}
-
-a.button {
-    display: inline-block;
-}
-
-.button.logout, .button.manage, .button.back {
-    background-repeat: no-repeat;
-    background-size: 1em;
-    background-position: 0.5em 0.45em;
-    padding-left: 1.8em;
-}
-
-.button.logout {
-    background-image: url('images/action-icons/guac-logout.png');
-}
-
-.button.manage {
-    background-image: url('images/action-icons/guac-config.png');
-}
-
-.button.back {
-    background-image: url('images/action-icons/guac-back.png');
-}

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

@@ -49,32 +49,29 @@
 }
 
 .status {
-    max-width: 75%;
+
-    width: 4in;
+    width: 75%;
+    max-width: 5in;
     margin-left: auto;
     margin-right: auto;
     overflow: auto;
 
-    border: 1px solid rgba(0, 0, 0, 0.5);
+    background: white;
-    background: #E7E7E7;
+    border: 1px solid rgba(0, 0, 0, 0.25);
-
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
-    -moz-border-radius: 0.2em;
-    -webkit-border-radius: 0.2em;
-    -khtml-border-radius: 0.2em;
-    border-radius: 0.2em;
-
-    box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.6);
  
     text-align: left;
-    font-size: 0.8em;
     
 }
 
 .status .title {
-    font-size: 1.1em;
+    font-size: 1.25em;
     font-weight: bold;
-    border-bottom: 1px solid black;
+    background: rgba(0, 0, 0, 0.04);
-    margin-bottom: 0.5em;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125);
+    margin: 0;
+    padding: 0.5em 1em;
 }
 
 .status.error {
@@ -83,7 +80,7 @@
 }
 
 .status > * {
-    margin: 0.75em;
+    margin: 1.25em;
 }
 
 /* Fade entire status area in/out based on shown status */

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

@@ -28,12 +28,16 @@
 }
 
 body {
-    background: #EEE;
+    background: white;
-    font-family: FreeSans, Helvetica, Arial, sans-serif;
+    font-family: Carlito, FreeSans, Helvetica, Arial, sans-serif;
     padding: 0;
     margin: 0;
 }
 
+input[type="submit"], button {
+    font-family: Carlito, FreeSans, Helvetica, Arial, sans-serif;
+}
+
 img {
     border: none;
     vertical-align: middle;
@@ -52,17 +56,23 @@ h1 {
 
 h2 {
 
-    border-top: 1px solid #AAA;
+    font-size: 1.25em;
-    border-bottom: 1px solid #AAA;
+    font-weight: bold;
-    background: rgba(0, 0, 0, 0.07);
+    padding: 0.75em 0.5em;
 
-    padding: 0.5em;
+    text-transform: uppercase;
-    margin: 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
-    font-size: 1.5em;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125);
+    background: rgba(0, 0, 0, 0.04);
 
-    font-weight: lighter;
+    margin-bottom: 1em;
-    text-shadow: 1px 1px white;
+    margin-top: 0;
+    border-top: none;
+}
 
+h2 ~ h2 {
+    margin-top: 1em;
+    border-top: 1px solid rgba(0, 0, 0, 0.125);
 }
 
 div.section {

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

@@ -20,7 +20,7 @@
  * THE SOFTWARE.
  */
 
-.error .login-form {
+.error .login-dialog {
     animation-name: shake-head;
     animation-duration: 0.25s;
     animation-timing-function: linear;
@@ -38,8 +38,16 @@ div.login-dialog-middle {
 
 div.login-dialog {
 
+    animation: fadein 0.125s linear;
+    -moz-animation: fadein 0.125s linear;
+    -webkit-animation: fadein 0.125s linear;
+
     max-width: 75%;
     text-align: left;
+    padding: 1em;
+    border: 1px solid rgba(0, 0, 0, 0.25);
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+    font-size: 1.25em;
 
     display: inline-block;
 }
@@ -51,40 +59,29 @@ div.login-dialog h1 {
 }
 
 div.login-dialog .buttons {
-    padding-top: 0.5em;
     text-align: right;
     margin: 0;
+    margin-top: 1em;
 }
 
 div.login-dialog .login-fields {
-    
     vertical-align: middle;
-
-    padding: 1em;
-    border-top: 1px solid #999;
-    border-bottom: 1px solid #999;
-
 }
 
 div.login-dialog th {
     text-shadow: 1px 1px white;
 }
 
-div.login-dialog .login-fields img.logo {
+.login-dialog .version {
-    position: fixed;
+    font-size: 1.25em;
-    margin: 10px;
+    font-weight: bold;
-    left: 0;
+    padding: 0.5em 0;
-    bottom: 0;
+    text-transform: uppercase;
-    opacity: 0.1;
-    z-index: -1;
-}
-
-div.version {
     text-align: center;
-    font-style: italic;
+}
-    font-size: 0.75em;
+
-    color: black;
+.login-dialog .logo {
-    opacity: 0.5;
+    display: block;
-
+    max-width: 3em;
-    padding: 0.5em;
+    margin: 0.5em auto;
 }

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

@@ -20,23 +20,19 @@
  * THE SOFTWARE.
  */
 
-input[type="submit"].login,
+.login-fields input {
-button.login {
+    display: block;
-
+    border: 1px solid rgba(0, 0, 0, 0.25);
-    background-image: url('images/guacamole-logo-64.png');
-    background-repeat: no-repeat;
-    background-size: 1.5em;
-    background-position: 0.5em 0.25em;
-
-    padding-left: 2.5em;
-
-}
-
-div.login-dialog .login-fields input {
-    border: 1px solid #777;
     -moz-border-radius: 0.2em;
     -webkit-border-radius: 0.2em;
     -khtml-border-radius: 0.2em;
     border-radius: 0.2em;
     width: 100%;
+    margin: 0;
+    margin-bottom: 0.5em;
+}
+
+input[type="submit"].login {
+    width: 100%;
+    margin: 0;
 }

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

@@ -21,34 +21,24 @@ THE SOFTWARE.
 -->
 
 <div class="login-ui" ng-class="{error: loginError}" >
+
+    <!-- Login error message -->
+    <p class="login-error">{{'login.loginError' | translate}}</p>
+
     <div class="login-dialog-middle">
 
         <div class="login-dialog">
 
-            <!-- Login error message -->
-            <p class="login-error">{{'login.loginError' | translate}}</p>
-
             <form class="login-form" ng-submit="login()">
 
                 <!-- Guacamole version -->
-                <div class="version">
+                <img class="logo" src="images/guac-tricolor.png" alt=""/>
-                    {{'application.title' | translate}}
+                <div class="version">{{'application.title' | translate}}</div>
-                </div>
 
                 <!-- Login fields (username + password) -->
                 <div class="login-fields">
-                    <table>
+                    <input ng-model="username" placeholder="{{'login.username' | translate}}" type="text" name="username" autofocus="autofocus" class="username"/>
-                        <tr>
+                    <input ng-model="password" placeholder="{{'login.password' | translate}}" type="password" name="password" class="password"/>
-                            <th>{{'login.username' | translate}}</th>
-                            <td><input ng-model="username" type="text" name="username" autofocus="autofocus" class="username"/></td>
-                        </tr>
-                        <tr>
-                            <th>{{'login.password' | translate}}</th>
-                            <td><input ng-model="password" type="password" name="password" class="password"/></td>
-                        </tr>
-                    </table>
-
-                    <img class="logo" src="images/guac-mono-192.png" alt=""/>
                 </div>
 
                 <!-- Submit button -->

guacamole/src/main/webapp/fonts/carlito/LICENSE

@@ -0,0 +1,95 @@
+Copyright (c) 2010-2013 by tyPoland Lukasz Dziedzic with Reserved Font Name "Carlito".
+
+This Font Software is licensed under the SIL Open Font License,
+Version 1.1 as shown below.
+
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+
+PREAMBLE The goals of the Open Font License (OFL) are to stimulate
+worldwide development of collaborative font projects, to support the font
+creation efforts of academic and linguistic communities, and to provide
+a free and open framework in which fonts may be shared and improved in
+partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves.
+The fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works.  The fonts and derivatives,
+however, cannot be released under any other type of license.  The
+requirement for fonts to remain under this license does not apply to
+any document created using the fonts or their derivatives.
+
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such.
+This may include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components
+as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting ? in part or in whole ?
+any of the components of the Original Version, by changing formats or
+by porting the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical writer
+or other person who contributed to the Font Software.
+
+
+PERMISSION & CONDITIONS
+
+Permission is hereby granted, free of charge, to any person obtaining a
+copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,in
+   Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+   redistributed and/or sold with any software, provided that each copy
+   contains the above copyright notice and this license. These can be
+   included either as stand-alone text files, human-readable headers or
+   in the appropriate machine-readable metadata fields within text or
+   binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+   Name(s) unless explicit written permission is granted by the
+   corresponding Copyright Holder. This restriction only applies to the
+   primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+   Software shall not be used to promote, endorse or advertise any
+   Modified Version, except to acknowledge the contribution(s) of the
+   Copyright Holder(s) and the Author(s) or with their explicit written
+   permission.
+
+5) The Font Software, modified or unmodified, in part or in whole, must
+   be distributed entirely under this license, and must not be distributed
+   under any other license. The requirement for fonts to remain under
+   this license does not apply to any document created using the Font
+   Software.
+
+
+ 
+TERMINATION
+This license becomes null and void if any of the above conditions are not met.
+
+ 
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT.  IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER
+DEALINGS IN THE FONT SOFTWARE.
+