Need overflow: hidden for software-cursor, otherwise the cursor exiting the side...
[guacamole.git] / 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 *:not(.guac-error) button#reconnect {
83     display: none;
84 }
85
86 div.dialog p {
87     margin: 0;
88 }
89
90 #statusText {
91     text-shadow: 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black;
92     font-size: xx-large;
93     color: white;
94 }
95
96 .guac-error #statusText {
97     text-shadow: 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black;
98     color: #D44;
99 }
100
101 /* Menu */
102
103 #menu {
104     position: fixed;
105     left: 0;
106     top: 0;
107     width: 100%;
108     z-index: 4;
109     background: #FEA;
110     border-bottom: 1px solid black;
111     font-size: 0.8em;
112 }
113
114 .guac-error #menu {
115     background: #D44;
116 }
117
118 div#display * {
119     position: relative;
120     margin-left: auto;
121     margin-right: auto;
122 }
123
124 #menu img {
125     vertical-align: middle;
126 }
127
128 #menu span {
129     vertical-align: middle;
130 }
131
132 #menu button {
133     vertical-align: middle;
134     background: #DC8;
135     border: 1px solid #986;
136     color: black; 
137     padding: 0.25em;
138     padding-right: 1em;
139     padding-left: 1em;
140 }
141
142 #menu button:hover {
143     background: #FFC;
144     border: 1px solid #DC8;
145 }
146
147 #menu button:active {
148     padding-top: 0.35em;
149     padding-left: 1.1em;
150
151     padding-bottom: 0.15em;
152     padding-right: 0.9em;
153 }
154
155 .guac-error #menu button {
156     background: #B33;
157     border: 1px solid #822;
158 }
159
160 .guac-error #menu button:hover {
161     background: #F44;
162     border: 1px solid #B33;
163 }
164
165 div#clipboardDiv {
166     display: none;
167     position: absolute;
168     background: #FA5;
169     padding: 1em;
170
171     border: 1px solid black;
172
173     width: 50em;
174     z-index: 2;
175     opacity: 0.5;
176 }
177
178 #menu:hover div#clipboardDiv {
179     opacity: 1;
180 }
181
182 div#clipboardDiv h2 {
183     margin: 0;
184     font-size: 1em;
185 }
186
187 div#clipboardDiv textarea {
188     width: 100%;
189 }
190
191 div#menuControl {
192     position: fixed;
193     top: 0;
194     left: 0;
195     
196     width: 100%;
197     height: 3px;
198     background: none;
199
200     z-index: 3;
201 }
202
203 /* Viewport Clone */
204
205 div#viewportClone {
206     display: table;
207     height: 100%;
208     width: 100%;
209     position: fixed;
210     left: 0;
211     top: 0;
212
213     visibility: hidden;
214 }
215
216 /* Keyboard event target */
217
218 textarea#eventTarget {
219     position: fixed;
220    
221     /* Hide offscreen */
222     left: 0;
223     top: 0;
224     width: 0;
225     height: 0;
226     opacity: 0;
227
228     overflow: hidden;
229 }