diff --git a/guacamole/src/main/webapp/app/home/styles/home.css b/guacamole/src/main/webapp/app/home/styles/home.css index 26bcb7fae..2ea3cff42 100644 --- a/guacamole/src/main/webapp/app/home/styles/home.css +++ b/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; diff --git a/guacamole/src/main/webapp/app/index/styles/buttons.css b/guacamole/src/main/webapp/app/index/styles/buttons.css index 9e61b9a5b..e5daa3e3c 100644 --- a/guacamole/src/main/webapp/app/index/styles/buttons.css +++ b/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), - 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; + padding: 0.35em 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 { diff --git a/guacamole/src/main/webapp/app/index/styles/font-carlito.css b/guacamole/src/main/webapp/app/index/styles/font-carlito.css new file mode 100644 index 000000000..43ccaaba5 --- /dev/null +++ b/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'); +} diff --git a/guacamole/src/main/webapp/app/index/styles/input.css b/guacamole/src/main/webapp/app/index/styles/input.css index 4a27f50a9..d5e5820f8 100644 --- a/guacamole/src/main/webapp/app/index/styles/input.css +++ b/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'); -} diff --git a/guacamole/src/main/webapp/app/index/styles/status.css b/guacamole/src/main/webapp/app/index/styles/status.css index bdd64dc47..e0083a97f 100644 --- a/guacamole/src/main/webapp/app/index/styles/status.css +++ b/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: #E7E7E7; - - -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); + background: white; + border: 1px solid rgba(0, 0, 0, 0.25); + box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); 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; - margin-bottom: 0.5em; + background: rgba(0, 0, 0, 0.04); + 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 */ diff --git a/guacamole/src/main/webapp/app/index/styles/ui.css b/guacamole/src/main/webapp/app/index/styles/ui.css index efcdcdaeb..7bb9a276a 100644 --- a/guacamole/src/main/webapp/app/index/styles/ui.css +++ b/guacamole/src/main/webapp/app/index/styles/ui.css @@ -28,12 +28,16 @@ } body { - background: #EEE; - font-family: FreeSans, Helvetica, Arial, sans-serif; + background: white; + 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; - border-bottom: 1px solid #AAA; - background: rgba(0, 0, 0, 0.07); + font-size: 1.25em; + font-weight: bold; + padding: 0.75em 0.5em; - padding: 0.5em; - margin: 0; - font-size: 1.5em; + text-transform: uppercase; + border-bottom: 1px solid rgba(0, 0, 0, 0.125); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125); + background: rgba(0, 0, 0, 0.04); - font-weight: lighter; - text-shadow: 1px 1px white; + margin-bottom: 1em; + margin-top: 0; + border-top: none; +} +h2 ~ h2 { + margin-top: 1em; + border-top: 1px solid rgba(0, 0, 0, 0.125); } div.section { diff --git a/guacamole/src/main/webapp/app/login/styles/dialog.css b/guacamole/src/main/webapp/app/login/styles/dialog.css index 72f1ad7c7..fcfa0d458 100644 --- a/guacamole/src/main/webapp/app/login/styles/dialog.css +++ b/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 { - position: fixed; - margin: 10px; - left: 0; - bottom: 0; - opacity: 0.1; - z-index: -1; -} - -div.version { +.login-dialog .version { + font-size: 1.25em; + font-weight: bold; + padding: 0.5em 0; + text-transform: uppercase; text-align: center; - font-style: italic; - font-size: 0.75em; - color: black; - opacity: 0.5; - - padding: 0.5em; +} + +.login-dialog .logo { + display: block; + max-width: 3em; + margin: 0.5em auto; } diff --git a/guacamole/src/main/webapp/app/login/styles/input.css b/guacamole/src/main/webapp/app/login/styles/input.css index 479737663..e07bddbe2 100644 --- a/guacamole/src/main/webapp/app/login/styles/input.css +++ b/guacamole/src/main/webapp/app/login/styles/input.css @@ -20,23 +20,19 @@ * THE SOFTWARE. */ -input[type="submit"].login, -button.login { - - 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; +.login-fields input { + display: block; + border: 1px solid 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; width: 100%; + margin: 0; + margin-bottom: 0.5em; } + +input[type="submit"].login { + width: 100%; + margin: 0; +} \ No newline at end of file diff --git a/guacamole/src/main/webapp/app/login/templates/login.html b/guacamole/src/main/webapp/app/login/templates/login.html index 9920e985d..e64605c61 100644 --- a/guacamole/src/main/webapp/app/login/templates/login.html +++ b/guacamole/src/main/webapp/app/login/templates/login.html @@ -21,34 +21,24 @@ THE SOFTWARE. -->
{{'login.loginError' | translate}}
+{{'login.loginError' | translate}}
-