From 6223be61f0813dbd37d629fd7668a26c1eb077d4 Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Thu, 6 Nov 2014 14:19:07 -0800 Subject: [PATCH] GUAC-900: Merge client styles. --- .../main/webapp/app/client/styles/client.css | 24 +- guacamole/src/main/webapp/styles/client.css | 783 ------------------ 2 files changed, 22 insertions(+), 785 deletions(-) delete mode 100644 guacamole/src/main/webapp/styles/client.css diff --git a/guacamole/src/main/webapp/app/client/styles/client.css b/guacamole/src/main/webapp/app/client/styles/client.css index ef656c883..1687e0ea1 100644 --- a/guacamole/src/main/webapp/app/client/styles/client.css +++ b/guacamole/src/main/webapp/app/client/styles/client.css @@ -1,5 +1,5 @@ /* - * Copyright (C) 2014 Glyptodon LLC + * Copyright (C) 2013 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 @@ -25,6 +25,7 @@ body.client { font-family: FreeSans, Helvetica, Arial, sans-serif; padding: 0; margin: 0; + overflow: hidden; } img { @@ -113,6 +114,15 @@ div.dialog p { margin: 0; } +div.main { + overflow: auto; + position: fixed; + top: 0; + bottom: 0; + right: 0; + left: 0; +} + div.displayOuter { height: 100%; width: 100%; @@ -283,11 +293,21 @@ div#viewportClone { margin-bottom: 0.5em; } -.dialog .status { +.dialog .status, .dialog .countdown, .dialog .reconnect { + margin: 0; padding: 0.5em; font-size: 0.8em; } +.dialog .reconnect { + display: none; +} + +.guac-error .dialog .reconnect { + display: block; + text-align: center; +} + p.hint { border: 0.25em solid rgba(255, 255, 255, 0.25); diff --git a/guacamole/src/main/webapp/styles/client.css b/guacamole/src/main/webapp/styles/client.css deleted file mode 100644 index 096e94a50..000000000 --- a/guacamole/src/main/webapp/styles/client.css +++ /dev/null @@ -1,783 +0,0 @@ -/* - * Copyright (C) 2013 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. - */ - -body { - background: black; - font-family: FreeSans, Helvetica, Arial, sans-serif; - padding: 0; - margin: 0; - overflow: hidden; -} - -img { - border: none; -} - -.software-cursor { - cursor: url('images/mouse/blank.gif'),url('images/mouse/blank.cur'),default; - overflow: hidden; - cursor: none; -} - -.guac-error .software-cursor { - cursor: default; -} - -* { - -webkit-tap-highlight-color: rgba(0,0,0,0); -} - -.event-target { - position: fixed; - opacity: 0; -} - -/* Dialogs */ - -div.dialogOuter { - display: table; - height: 100%; - width: 100%; - position: fixed; - left: 0; - top: 0; - background: rgba(0, 0, 0, 0.75); -} - -div.dialogMiddle { - width: 100%; - text-align: center; - display: table-cell; - vertical-align: middle; -} - -button { - - border-style: solid; - border-width: 1px; - - padding: 0.25em; - padding-right: 1em; - padding-left: 1em; - -} - -button:active { - - padding-top: 0.35em; - padding-left: 1.1em; - - padding-bottom: 0.15em; - padding-right: 0.9em; - -} - -button#reconnect { - display: none; -} - -.guac-error button#reconnect { - display: inline; - - background: #200; - border-color: #822; - color: #944; -} - -.guac-error button#reconnect:hover { - background: #822; - border-color: #B33; - color: black; -} - - -div.dialog p { - margin: 0; -} - -div.main { - overflow: auto; - position: fixed; - top: 0; - bottom: 0; - right: 0; - left: 0; -} - -div.displayOuter { - height: 100%; - width: 100%; - position: absolute; - left: 0; - top: 0; - display: table; -} - -div.displayMiddle { - width: 100%; - display: table-cell; - vertical-align: middle; - text-align: center; -} - -div#display * { - position: relative; -} - -div#display > * { - margin-left: auto; - margin-right: auto; -} - -div.magnifier-background { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: 1; - overflow: hidden; -} - -div.magnifier { - - position: absolute; - left: 0; - top: 0; - - box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.75); - width: 50%; - height: 50%; - overflow: hidden; - -} - -.pan-overlay, -.type-overlay { - position: fixed; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: 1; -} - -.pan-overlay .indicator { - position: fixed; - background-size: 32px 32px; - -moz-background-size: 32px 32px; - -webkit-background-size: 32px 32px; - -khtml-background-size: 32px 32px; - background-position: center; - background-repeat: no-repeat; - opacity: 0.8; -} - -.pan-overlay .indicator.up { - - top: 0; - left: 0; - right: 0; - height: 32px; - - background-image: url('images/arrows/arrows-u.png'); - -} - -.pan-overlay .indicator.down { - - bottom: 0; - left: 0; - right: 0; - height: 32px; - - background-image: url('images/arrows/arrows-d.png'); - -} - -.pan-overlay .indicator.left { - - top: 0; - bottom: 0; - left: 0; - width: 32px; - - background-image: url('images/arrows/arrows-l.png'); - -} - -.pan-overlay .indicator.right { - - top: 0; - bottom: 0; - right: 0; - width: 32px; - - background-image: url('images/arrows/arrows-r.png'); - -} - -/* Viewport Clone */ - -div#viewportClone { - display: table; - height: 100%; - width: 100%; - position: fixed; - left: 0; - top: 0; - - visibility: hidden; -} - -@keyframes show-dialog { - 0% {transform: scale(0.75); } - 100% {transform: scale(1); } -} - -@-webkit-keyframes show-dialog { - 0% {-webkit-transform: scale(0.75); } - 100% {-webkit-transform: scale(1); } -} - -.dialog { - - animation-name: show-dialog; - animation-timing-function: linear; - animation-duration: 0.125s; - -webkit-animation-name: show-dialog; - -webkit-animation-timing-function: linear; - -webkit-animation-duration: 0.125s; - - max-width: 75%; - max-height: none; - width: 4in; - -moz-border-radius: 0.2em; - -webkit-border-radius: 0.2em; - -khtml-border-radius: 0.2em; - border-radius: 0.2em; - - padding: 0.5em; - text-align: left; - -} - -.guac-error .dialog { - background: #FDD; - border: 1px solid #964040; -} - -.dialog .title { - font-size: 1.1em; - font-weight: bold; - border-bottom: 1px solid black; - margin-bottom: 0.5em; -} - -.dialog .status, .dialog .countdown, .dialog .reconnect { - margin: 0; - padding: 0.5em; - font-size: 0.8em; -} - -.dialog .reconnect { - display: none; -} - -.guac-error .dialog .reconnect { - display: block; - text-align: center; -} - -p.hint { - - border: 0.25em solid rgba(255, 255, 255, 0.25); - background: black; - opacity: 0.75; - - color: white; - - max-width: 10em; - padding: 1em; - margin: 1em; - - position: absolute; - left: 0; - top: 0; - - box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.75); - -} - -#notificationArea { - position: fixed; - right: 0.5em; - bottom: 0.5em; - max-width: 25%; - min-width: 10em; -} - -.notification { - - font-size: 0.7em; - text-align: center; - - border: 1px solid rgba(0, 0, 0, 0.75); - -moz-border-radius: 0.2em; - -webkit-border-radius: 0.2em; - -khtml-border-radius: 0.2em; - border-radius: 0.2em; - background: white; - - color: black; - - padding: 0.5em; - margin: 1em; - overflow: hidden; - - box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.25); - -} - -.notification div { - display: inline-block; - text-align: left; -} - -.notification .title-bar { - display: block; - white-space: nowrap; - font-weight: bold; - - border-bottom: 1px solid black; - padding-bottom: 0.5em; - margin-bottom: 0.5em; -} - -.notification .title-bar * { - vertical-align: middle; -} - -.notification .close { - - background: url('images/action-icons/guac-close.png'); - background-size: 10px 10px; - -moz-background-size: 10px 10px; - -webkit-background-size: 10px 10px; - -khtml-background-size: 10px 10px; - - width: 10px; - height: 10px; - - float: right; - cursor: pointer; - -} - -@keyframes progress { - from {background-position: 0px 0px;} - to {background-position: 64px 0px;} -} - -@-webkit-keyframes progress { - from {background-position: 0px 0px;} - to {background-position: 64px 0px;} -} - -.notification .caption, -.download.notification .caption { - width: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.upload.notification .status, -.download.notification .status { - color: red; - font-size: 1em; - padding: 1em; -} - -.download.notification .progress, -.upload.notification .progress, -.download.notification .download { - - margin-top: 1em; - margin-left: 0.75em; - padding: 0.25em; - min-width: 5em; - - border: 1px solid gray; - -moz-border-radius: 0.2em; - -webkit-border-radius: 0.2em; - -khtml-border-radius: 0.2em; - border-radius: 0.2em; - - text-align: center; - float: right; - - position: relative; - -} - -.upload.notification .progress { - float: none; - width: 80%; - margin-left: auto; - margin-right: auto; -} - -.download.notification .progress div, -.upload.notification .progress div { - position: relative; -} - -.download.notification .progress .bar, -.upload.notification .progress .bar { - background: #A3D655; - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 0; - box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5), - inset -1px -1px 0 rgba( 0, 0, 0, 0.1), - 1px 1px 0 gray; -} - -.upload.notification .progress, -.download.notification .progress { - - background: #C2C2C2 url('images/progress.png'); - background-size: 16px 16px; - -moz-background-size: 16px 16px; - -webkit-background-size: 16px 16px; - -khtml-background-size: 16px 16px; - - animation-name: progress; - animation-duration: 2s; - animation-timing-function: linear; - animation-iteration-count: infinite; - - -webkit-animation-name: progress; - -webkit-animation-duration: 2s; - -webkit-animation-timing-function: linear; - -webkit-animation-iteration-count: infinite; - -} - -.download.notification .download { - background: rgb(16, 87, 153); - cursor: pointer; -} - -#preload { - visibility: hidden; - position: absolute; - left: 0; - right: 0; - width: 0; - height: 0; - overflow: hidden; -} - -/* Menu */ - -/** - * show-menu: Animation for showing the menu - */ -@keyframes show-menu { - from { left: -480px; opacity: 0;} - to { left: 0; opacity: 1;} -} -@-moz-keyframes show-menu { - from { left: -480px; opacity: 0;} - to { left: 0; opacity: 1;} -} -@-webkit-keyframes show-menu { - from { left: -480px; opacity: 0;} - to { left: 0; opacity: 1;} -} - -/** - * hide-menu: Animation for hiding the menu - */ -@keyframes hide-menu { - from { left: 0; opacity: 1;} - to { left: -480px; opacity: 0;} -} -@-moz-keyframes hide-menu { - from { left: 0; opacity: 1;} - to { left: -480px; opacity: 0;} -} -@-webkit-keyframes hide-menu { - from { left: 0; opacity: 1;} - to { left: -480px; opacity: 0;} -} - -#menu { - overflow: auto; - position: fixed; - top: 0; - bottom: 0; - max-width: 100%; - width: 480px; - background: #EEE; - box-shadow: inset -1px 0 2px white, 1px 0 2px black; - z-index: 10; -} - -#menu .content { - padding: 1em; -} - -#menu .content > * { - margin: 1em 0; -} - -#menu, #menu.closed { - left: -480px; - opacity: 0; -} - -#menu.open { - left: 0px; - opacity: 1; -} - -#menu.closed { - animation-name: hide-menu; - animation-timing-function: linear; - animation-duration: 0.05s; - -webkit-animation-name: hide-menu; - -webkit-animation-timing-function: linear; - -webkit-animation-duration: 0.05s; -} - -#menu.open { - animation-name: show-menu; - animation-timing-function: linear; - animation-duration: 0.05s; - -webkit-animation-name: show-menu; - -webkit-animation-timing-function: linear; - -webkit-animation-duration: 0.05s; -} - -#clipboard-settings textarea { - width: 100%; - border: 1px solid #AAA; - -moz-border-radius: 0.25em; - -webkit-border-radius: 0.25em; - -khtml-border-radius: 0.25em; - border-radius: 0.25em; - white-space: pre; - display: block; -} - -#mouse-settings .choice { - text-align: center; -} - -#mouse-settings .choice .figure { - display: inline-block; - vertical-align: middle; - max-width: 80%; -} - -#keyboard-settings .caption { - font-size: 0.9em; - margin-left: 2em; - margin-right: 2em; -} - -#mouse-settings .figure .caption { - text-align: center; - font-size: 0.9em; -} - -#mouse-settings .figure img { - display: block; - max-width: 100%; - margin: 1em auto; -} - -#menu h3 { - - background: rgba(0, 0, 0, 0.4); - - padding: 0.25em 0.5em; - margin: 0; - font-size: 1em; - - color: white; - font-weight: bold; - -} - -#keyboard-settings .figure { - float: right; - max-width: 30%; - margin: 1em; -} - -#keyboard-settings .figure img { - max-width: 100%; -} - -#zoom-settings { - text-align: center; -} - -#zoom-out, #zoom-in, #zoom-state { - display: inline-block; - vertical-align: middle; -} - -#zoom-out, #zoom-in { - max-width: 3em; - border: 1px solid rgba(0, 0, 0, 0.5); - background: rgba(0, 0, 0, 0.1); - border-radius: 2em; - margin: 0.5em; - cursor: pointer; -} - -#zoom-out img, #zoom-in img { - max-width: 100%; - opacity: 0.5; -} - -#zoom-out:hover, #zoom-in:hover { - border: 1px solid rgba(0, 0, 0, 1); - background: #CDA; -} - -#zoom-out:hover img, #zoom-in:hover img { - opacity: 1; -} - -#zoom-state { - font-size: 2em; -} - -#text-input { - display: none; - position: absolute; - - border-top: 1px solid rgba(0, 0, 0, 0.5); - background: #CDA; - -} - -#text-input-field, -#text-input-buttons { - display: inline-block; - vertical-align: middle; -} - -#text-input-field { - width: 30%; - overflow: hidden; - white-space: nowrap; -} - -#text-input-buttons { - width: 70%; - text-align: right; -} - -#target { - - border: none; - border-radius: 0; - - display: inline-block; - vertical-align: middle; - font-size: 12pt; - width: 100%; - height: auto; - resize: none; - outline: none; - - margin: 0; - padding: 0.25em; - padding-left: 0; - background: #CDA; - overflow: hidden; - -} - -#text-input.open { - display: block; -} - -#sent-history { - display: inline-block; - vertical-align: middle; - padding: 0.25em; - padding-right: 0; -} - -#sent-history .sent-text { - display: inline-block; - vertical-align: baseline; - white-space: pre; - font-size: 12pt; - - animation: fadeout 1s linear; - -webkit-animation: fadeout 1s linear; - opacity: 0; -} - -#text-input-buttons button { - border: 1px solid rgba(0, 0, 0, 0.5); - background: none; - color: black; - box-shadow: none; - text-shadow: none; - padding: 0.25em; - max-width: 20%; - margin: 0.1em; - min-width: 3em; -} - -#text-input-buttons button:active, -#text-input-buttons button.pressed { - border: 1px solid rgba(255, 255, 255, 0.5); - background: rgba(0, 0, 0, 0.75); - color: white; -} - -.notification.message { - background: #DFD; - animation: fadein 0.125s linear, fadeout 2s 3s linear; - -webkit-animation: fadein 0.125s linear, fadeout 2s 3s linear; -} - -.notification.message .caption { - vertical-align: middle; - white-space: normal; - overflow: hidden; - text-overflow: ellipsis; -} -