diff --git a/guacamole/src/main/webapp/app/client/styles/guac-menu.css b/guacamole/src/main/webapp/app/client/styles/guac-menu.css new file mode 100644 index 000000000..434749069 --- /dev/null +++ b/guacamole/src/main/webapp/app/client/styles/guac-menu.css @@ -0,0 +1,162 @@ +/* + * Copyright (C) 2015 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. + */ + +#guac-menu .content { + + padding: 0; + margin: 0; + + /* IE10 */ + display: -ms-flexbox; + -ms-flex-align: stretch; + -ms-flex-direction: column; + + /* Ancient Mozilla */ + display: -moz-box; + -moz-box-align: stretch; + -moz-box-orient: vertical; + + /* Ancient WebKit */ + display: -webkit-box; + -webkit-box-align: stretch; + -webkit-box-orient: vertical; + + /* Old WebKit */ + display: -webkit-flex; + -webkit-align-items: stretch; + -webkit-flex-direction: column; + + /* W3C */ + display: flex; + align-items: stretch; + flex-direction: column; + +} + +#guac-menu .content > * { + + margin: 0; + + -ms-flex: 0 0 auto; + -moz-box-flex: 0; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + +} + +#guac-menu .content > * + * { + margin-top: 1em; +} + +#guac-menu #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; + font-size: 1em; +} + +#guac-menu #mouse-settings .choice { + text-align: center; +} + +#guac-menu #mouse-settings .choice .figure { + display: inline-block; + vertical-align: middle; + width: 75%; + max-width: 320px; +} + +#guac-menu #keyboard-settings .caption { + font-size: 0.9em; + margin-left: 2em; + margin-right: 2em; +} + +#guac-menu #mouse-settings .figure .caption { + text-align: center; + font-size: 0.9em; +} + +#guac-menu #mouse-settings .figure img { + display: block; + width: 100%; + max-width: 320px; + margin: 1em auto; +} + +#guac-menu #keyboard-settings .figure { + float: right; + max-width: 30%; + margin: 1em; +} + +#guac-menu #keyboard-settings .figure img { + max-width: 100%; +} + +#guac-menu #zoom-settings { + text-align: center; +} + +#guac-menu #zoom-out, +#guac-menu #zoom-in, +#guac-menu #zoom-state { + display: inline-block; + vertical-align: middle; +} + +#guac-menu #zoom-out, +#guac-menu #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; +} + +#guac-menu #zoom-out img, +#guac-menu #zoom-in img { + max-width: 100%; + opacity: 0.5; +} + +#guac-menu #zoom-out:hover, +#guac-menu #zoom-in:hover { + border: 1px solid rgba(0, 0, 0, 1); + background: #CDA; +} + +#guac-menu #zoom-out:hover img, +#guac-menu #zoom-in:hover img { + opacity: 1; +} + +#guac-menu #zoom-state { + font-size: 2em; +} diff --git a/guacamole/src/main/webapp/app/client/styles/menu.css b/guacamole/src/main/webapp/app/client/styles/menu.css index 107b397ca..a5bc2c43d 100644 --- a/guacamole/src/main/webapp/app/client/styles/menu.css +++ b/guacamole/src/main/webapp/app/client/styles/menu.css @@ -1,5 +1,5 @@ /* - * Copyright (C) 2013 Glyptodon LLC + * Copyright (C) 2015 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 @@ -20,7 +20,7 @@ * THE SOFTWARE. */ -#menu { +.menu { overflow: hidden; position: absolute; top: 0; @@ -127,38 +127,6 @@ flex: 0 0 auto; } -#menu .content { - - padding: 0; - margin: 0; - - /* IE10 */ - display: -ms-flexbox; - -ms-flex-align: stretch; - -ms-flex-direction: column; - - /* Ancient Mozilla */ - display: -moz-box; - -moz-box-align: stretch; - -moz-box-orient: vertical; - - /* Ancient WebKit */ - display: -webkit-box; - -webkit-box-align: stretch; - -webkit-box-orient: vertical; - - /* Old WebKit */ - display: -webkit-flex; - -webkit-align-items: stretch; - -webkit-flex-direction: column; - - /* W3C */ - display: flex; - align-items: stretch; - flex-direction: column; - -} - .menu-section h3 { margin: 0; padding: 0; @@ -169,122 +137,13 @@ padding-top: 1em; } -#menu .content > * { - - margin: 0; - - -ms-flex: 0 0 auto; - -moz-box-flex: 0; - -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; - flex: 0 0 auto; - -} - -#menu .content > * + * { - margin-top: 1em; -} - -#menu, -#menu.closed { +.menu, +.menu.closed { left: -480px; opacity: 0; } -#menu.open { +.menu.open { left: 0px; opacity: 1; } - -#menu #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; - font-size: 1em; -} - -#menu #mouse-settings .choice { - text-align: center; -} - -#menu #mouse-settings .choice .figure { - display: inline-block; - vertical-align: middle; - width: 75%; - max-width: 320px; -} - -#menu #keyboard-settings .caption { - font-size: 0.9em; - margin-left: 2em; - margin-right: 2em; -} - -#menu #mouse-settings .figure .caption { - text-align: center; - font-size: 0.9em; -} - -#menu #mouse-settings .figure img { - display: block; - width: 100%; - max-width: 320px; - margin: 1em auto; -} - -#menu #keyboard-settings .figure { - float: right; - max-width: 30%; - margin: 1em; -} - -#menu #keyboard-settings .figure img { - max-width: 100%; -} - -#menu #zoom-settings { - text-align: center; -} - -#menu #zoom-out, -#menu #zoom-in, -#menu #zoom-state { - display: inline-block; - vertical-align: middle; -} - -#menu #zoom-out, -#menu #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; -} - -#menu #zoom-out img, -#menu #zoom-in img { - max-width: 100%; - opacity: 0.5; -} - -#menu #zoom-out:hover, -#menu #zoom-in:hover { - border: 1px solid rgba(0, 0, 0, 1); - background: #CDA; -} - -#menu #zoom-out:hover img, -#menu #zoom-in:hover img { - opacity: 1; -} - -#menu #zoom-state { - font-size: 2em; -} diff --git a/guacamole/src/main/webapp/app/client/templates/client.html b/guacamole/src/main/webapp/app/client/templates/client.html index 2a2a0cde0..134771e94 100644 --- a/guacamole/src/main/webapp/app/client/templates/client.html +++ b/guacamole/src/main/webapp/app/client/templates/client.html @@ -53,7 +53,7 @@ -