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 * {
  37     -webkit-tap-highlight-color: rgba(0,0,0,0);
  38 }
  39
  40 /* Dialogs */
  41
  42 div.dialogOuter {
  43     display: table;
  44     height: 100%;
  45     width: 100%;
  46     position: fixed;
  47     left: 0;
  48     top: 0;
  49
  50     visibility: hidden;
  51 }
  52
  53 div.dialogMiddle {
  54     width: 100%;
  55     text-align: center;
  56     display: table-cell;
  57     vertical-align: middle;
  58 }
  59
  60 div.dialog {
  61     padding: 1em;
  62
  63     max-width: 75%;
  64     text-align: left;
  65
  66     display: inline-block;
  67     visibility: visible;
  68 }
  69
  70 div.dialog h1 {
  71     margin: 0;
  72     margin-bottom: 0.25em;
  73     text-align: center;
  74 }
  75
  76 div.dialog div.buttons {
  77     margin: 0;
  78     margin-top: 0.5em;
  79     text-align: center;
  80 }
  81
  82 button {
  83
  84     border-style: solid;
  85     border-width: 1px;
  86
  87     padding: 0.25em;
  88     padding-right: 1em;
  89     padding-left: 1em;
  90
  91 }
  92
  93 button:active {
  94
  95     padding-top: 0.35em;
  96     padding-left: 1.1em;
  97
  98     padding-bottom: 0.15em;
  99     padding-right: 0.9em;
 100
 101 }
 102
 103 button#reconnect {
 104     display: none;
 105 }
 106
 107 .guac-error button#reconnect {
 108     display: inline;
 109
 110     background:   #200;
 111     border-color: #822;
 112     color:        #944;
 113 }
 114
 115 .guac-error button#reconnect:hover {
 116     background:   #822;
 117     border-color: #B33;
 118     color:        black;
 119 }
 120
 121
 122 div.dialog p {
 123     margin: 0;
 124 }
 125
 126 #statusText {
 127     text-shadow: 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black;
 128     font-size: xx-large;
 129     color: white;
 130 }
 131
 132 .guac-error #statusText {
 133     text-shadow: 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black;
 134     color: #D44;
 135 }
 136
 137 /* Menu */
 138
 139 #menu {
 140     position: fixed;
 141     left: 0;
 142     top: 0;
 143     width: 100%;
 144     z-index: 4;
 145     background: #FEA;
 146     border-bottom: 1px solid black;
 147     font-size: 0.8em;
 148 }
 149
 150 .guac-error #menu {
 151     background: #D44;
 152 }
 153
 154 div#display * {
 155     position: relative;
 156     margin-left: auto;
 157     margin-right: auto;
 158 }
 159
 160 #menu img {
 161     vertical-align: middle;
 162 }
 163
 164 #menu span {
 165     vertical-align: middle;
 166 }
 167
 168 #menu button {
 169     vertical-align: middle;
 170     background:   #DC8;
 171     border-color: #986;
 172     color:        black;
 173 }
 174
 175 #menu button:hover {
 176     background:   #FFC;
 177     border-color: #DC8;
 178 }
 179
 180 .guac-error #menu button {
 181     background:   #B33;
 182     border-color: #822;
 183 }
 184
 185 .guac-error #menu button:hover {
 186     background:   #F44;
 187     border-color: #B33;
 188 }
 189
 190 div#clipboardDiv {
 191     display: none;
 192     position: absolute;
 193     background: #FA5;
 194     padding: 1em;
 195
 196     border: 1px solid black;
 197
 198     width: 50em;
 199     z-index: 2;
 200     opacity: 0.5;
 201 }
 202
 203 #menu:hover div#clipboardDiv {
 204     opacity: 1;
 205 }
 206
 207 div#clipboardDiv h2 {
 208     margin: 0;
 209     font-size: 1em;
 210 }
 211
 212 div#clipboardDiv textarea {
 213     width: 100%;
 214 }
 215
 216 div#menuControl {
 217     position: fixed;
 218     top: 0;
 219     left: 0;
 220
 221     width: 100%;
 222     height: 3px;
 223     background: none;
 224
 225     z-index: 3;
 226 }
 227
 228 /* Viewport Clone */
 229
 230 div#viewportClone {
 231     display: table;
 232     height: 100%;
 233     width: 100%;
 234     position: fixed;
 235     left: 0;
 236     top: 0;
 237
 238     visibility: hidden;
 239 }
 240
 241 /* Keyboard event target */
 242
 243 textarea#eventTarget {
 244     position: fixed;
 245
 246     /* Hide offscreen */
 247     left: 0;
 248     top: 0;
 249     width: 0;
 250     height: 0;
 251     opacity: 0;
 252
 253     overflow: hidden;
 254 }