src/main/webapp/styles/client.css

   1
   2 /*
   3  *  Guacamole - Clientless Remote Desktop
   4  *  Copyright (C) 2010  Michael Jumper
   5  *
   6  *  This program is free software: you can redistribute it and/or modify
   7  *  it under the terms of the GNU Affero General Public License as published by
   8  *  the Free Software Foundation, either version 3 of the License, or
   9  *  (at your option) any later version.
  10  *
  11  *  This program is distributed in the hope that it will be useful,
  12  *  but WITHOUT ANY WARRANTY; without even the implied warranty of
  13  *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  14  *  GNU Affero General Public License for more details.
  15  *
  16  *  You should have received a copy of the GNU Affero General Public License
  17  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  18  */
  19
  20 body {
  21     background: black;
  22     font-family: sans-serif;
  23     padding: 0;
  24     margin: 0;
  25 }
  26
  27 img {
  28     border: none;
  29 }
  30
  31 .software-cursor {
  32     cursor: url('../images/mouse/dot.gif'),url('../images/mouse/blank.cur'),default;
  33     overflow: hidden;
  34 }
  35
  36 .guac-error .software-cursor {
  37     cursor: default;
  38 }
  39
  40 * {
  41     -webkit-tap-highlight-color: rgba(0,0,0,0);
  42 }
  43
  44 /* Dialogs */
  45
  46 div.dialogOuter {
  47     display: table;
  48     height: 100%;
  49     width: 100%;
  50     position: fixed;
  51     left: 0;
  52     top: 0;
  53
  54     visibility: hidden;
  55 }
  56
  57 div.dialogMiddle {
  58     width: 100%;
  59     text-align: center;
  60     display: table-cell;
  61     vertical-align: middle;
  62 }
  63
  64 div.dialog {
  65     padding: 1em;
  66
  67     max-width: 75%;
  68     text-align: left;
  69
  70     display: inline-block;
  71     visibility: visible;
  72 }
  73
  74 div.dialog h1 {
  75     margin: 0;
  76     margin-bottom: 0.25em;
  77     text-align: center;
  78 }
  79
  80 div.dialog div.buttons {
  81     margin: 0;
  82     margin-top: 0.5em;
  83     text-align: center;
  84 }
  85
  86 button {
  87
  88     border-style: solid;
  89     border-width: 1px;
  90
  91     padding: 0.25em;
  92     padding-right: 1em;
  93     padding-left: 1em;
  94
  95 }
  96
  97 button:active {
  98
  99     padding-top: 0.35em;
 100     padding-left: 1.1em;
 101
 102     padding-bottom: 0.15em;
 103     padding-right: 0.9em;
 104
 105 }
 106
 107 button#reconnect {
 108     display: none;
 109 }
 110
 111 .guac-error button#reconnect {
 112     display: inline;
 113
 114     background:   #200;
 115     border-color: #822;
 116     color:        #944;
 117 }
 118
 119 .guac-error button#reconnect:hover {
 120     background:   #822;
 121     border-color: #B33;
 122     color:        black;
 123 }
 124
 125
 126 div.dialog p {
 127     margin: 0;
 128 }
 129
 130 #statusText {
 131     text-shadow: 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black;
 132     font-size: xx-large;
 133     color: white;
 134 }
 135
 136 .guac-error #statusText {
 137     text-shadow: 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black;
 138     color: #D44;
 139 }
 140
 141 /* Menu */
 142
 143 #menu {
 144     position: fixed;
 145     left: 0;
 146     top: 0;
 147     width: 100%;
 148     z-index: 4;
 149     background: #FEA;
 150     border-bottom: 1px solid black;
 151     font-size: 0.8em;
 152 }
 153
 154 .guac-error #menu {
 155     background: #D44;
 156 }
 157
 158 div#display * {
 159     position: relative;
 160     margin-left: auto;
 161     margin-right: auto;
 162 }
 163
 164 #menu img {
 165     vertical-align: middle;
 166 }
 167
 168 #menu span {
 169     vertical-align: middle;
 170 }
 171
 172 #menu button {
 173     vertical-align: middle;
 174     background:   #DC8;
 175     border-color: #986;
 176     color:        black;
 177 }
 178
 179 #menu button:hover {
 180     background:   #FFC;
 181     border-color: #DC8;
 182 }
 183
 184 .guac-error #menu button {
 185     background:   #B33;
 186     border-color: #822;
 187 }
 188
 189 .guac-error #menu button:hover {
 190     background:   #F44;
 191     border-color: #B33;
 192 }
 193
 194 div#clipboardDiv {
 195     display: none;
 196     position: absolute;
 197     background: #FA5;
 198     padding: 1em;
 199
 200     border: 1px solid black;
 201
 202     width: 50em;
 203     z-index: 2;
 204     opacity: 0.5;
 205 }
 206
 207 #menu:hover div#clipboardDiv {
 208     opacity: 1;
 209 }
 210
 211 div#clipboardDiv h2 {
 212     margin: 0;
 213     font-size: 1em;
 214 }
 215
 216 div#clipboardDiv textarea {
 217     width: 100%;
 218 }
 219
 220 div#menuControl {
 221     position: fixed;
 222     top: 0;
 223     left: 0;
 224
 225     width: 100%;
 226     height: 3px;
 227     background: none;
 228
 229     z-index: 3;
 230 }
 231
 232 /* Viewport Clone */
 233
 234 div#viewportClone {
 235     display: table;
 236     height: 100%;
 237     width: 100%;
 238     position: fixed;
 239     left: 0;
 240     top: 0;
 241
 242     visibility: hidden;
 243 }
 244
 245 /* Keyboard event target */
 246
 247 textarea#eventTarget {
 248     position: absolute;
 249
 250     /* Hide offscreen */
 251     left: 0;
 252     top: 0;
 253     width: 0;
 254     height: 0;
 255     opacity: 0;
 256
 257     overflow: hidden;
 258 }
 259
 260 /* Touch-specific menu */
 261
 262 div#touchMenu {
 263
 264     position: absolute;
 265     visibility: hidden;
 266
 267     display: inline-block;
 268     background: black;
 269     border: 1px solid silver;
 270     padding: 1em;
 271     opacity: 0.8;
 272
 273 }