]>
Commit | Line | Data |
---|---|---|
c327865b | 1 | body { |
01a9eee9 JM |
2 | margin:0; |
3 | padding:0; | |
4 | font-family: Helvetica; | |
5 | /*Background image with light grey curve.*/ | |
6 | background-color:#494949; | |
7 | background-repeat:no-repeat; | |
8 | background-position:right bottom; | |
9 | height:100%; | |
c327865b CG |
10 | } |
11 | ||
12 | html { | |
01a9eee9 | 13 | height:100%; |
c327865b CG |
14 | } |
15 | ||
16 | #noVNC_controls ul { | |
01a9eee9 JM |
17 | list-style: none; |
18 | margin: 0px; | |
19 | padding: 0px; | |
c327865b CG |
20 | } |
21 | #noVNC_controls li { | |
01a9eee9 | 22 | padding-bottom:8px; |
c327865b CG |
23 | } |
24 | ||
25 | #noVNC_host { | |
01a9eee9 JM |
26 | width:150px; |
27 | } | |
c327865b | 28 | #noVNC_port { |
01a9eee9 | 29 | width: 80px; |
c327865b CG |
30 | } |
31 | #noVNC_password { | |
01a9eee9 | 32 | width: 150px; |
c327865b CG |
33 | } |
34 | #noVNC_encrypt { | |
35 | } | |
36 | #noVNC_connectTimeout { | |
01a9eee9 | 37 | width: 30px; |
c327865b | 38 | } |
6209639f JM |
39 | #noVNC_path { |
40 | width: 100px; | |
41 | } | |
c327865b | 42 | #noVNC_connect_button { |
01a9eee9 JM |
43 | width: 110px; |
44 | float:right; | |
c327865b CG |
45 | } |
46 | ||
c327865b | 47 | |
a5df24b4 JM |
48 | #noVNC_view_drag_button { |
49 | display: none; | |
50 | } | |
51 | #sendCtrlAltDelButton { | |
52 | display: none; | |
53 | } | |
c327865b | 54 | #noVNC_mobile_buttons { |
608e0f52 JM |
55 | display: none; |
56 | } | |
57 | ||
58 | .noVNC-buttons-left { | |
a5df24b4 | 59 | float: left; |
01a9eee9 | 60 | padding-left:10px; |
a5df24b4 | 61 | padding-top:4px; |
c327865b | 62 | } |
01a9eee9 | 63 | |
608e0f52 JM |
64 | .noVNC-buttons-right { |
65 | float:right; | |
66 | right: 0px; | |
01a9eee9 | 67 | padding-right:10px; |
a5df24b4 | 68 | padding-top:4px; |
c327865b CG |
69 | } |
70 | ||
71 | #noVNC_status_bar { | |
b70ce077 | 72 | margin-top: 0px; |
01a9eee9 | 73 | padding: 0px; |
c327865b CG |
74 | } |
75 | ||
76 | #noVNC_status_bar div { | |
01a9eee9 JM |
77 | font-size: 12px; |
78 | padding-top: 4px; | |
79 | width:100%; | |
c327865b CG |
80 | } |
81 | ||
c327865b | 82 | #noVNC_status { |
01a9eee9 JM |
83 | height:20px; |
84 | text-align: center; | |
c327865b CG |
85 | } |
86 | #noVNC_settings_menu { | |
01a9eee9 JM |
87 | margin: 3px; |
88 | text-align: left; | |
c327865b CG |
89 | } |
90 | #noVNC_settings_menu ul { | |
01a9eee9 JM |
91 | list-style: none; |
92 | margin: 0px; | |
93 | padding: 0px; | |
c327865b CG |
94 | } |
95 | ||
96 | #noVNC_apply { | |
01a9eee9 | 97 | float:right; |
c327865b CG |
98 | } |
99 | ||
c327865b | 100 | .noVNC_status_normal { |
01a9eee9 | 101 | background: #eee; |
c327865b CG |
102 | } |
103 | .noVNC_status_error { | |
01a9eee9 | 104 | background: #f44; |
c327865b | 105 | } |
01a9eee9 JM |
106 | .noVNC_status_warn { |
107 | background: #ff4; | |
c327865b CG |
108 | } |
109 | ||
110 | /* Do not set width/height for VNC_screen or VNC_canvas or incorrect | |
111 | * scaling will occur. Canvas resizes to remote VNC settings */ | |
b70ce077 JM |
112 | #noVNC_screen_pad { |
113 | margin: 0px; | |
114 | padding: 0px; | |
115 | height: 44px; | |
116 | } | |
c327865b | 117 | #noVNC_screen { |
01a9eee9 JM |
118 | text-align: center; |
119 | display: table; | |
120 | width:100%; | |
121 | height:100%; | |
122 | background-color:#313131; | |
123 | border-bottom-right-radius: 800px 600px; | |
124 | /*border-top-left-radius: 800px 600px;*/ | |
c327865b | 125 | } |
a5df24b4 JM |
126 | |
127 | #noVNC_container, #noVNC_canvas { | |
5299db1a JM |
128 | margin: 0px; |
129 | padding: 0px; | |
a5df24b4 JM |
130 | } |
131 | ||
132 | #noVNC_canvas { | |
133 | left: 0px; | |
c327865b CG |
134 | } |
135 | ||
136 | #VNC_clipboard_clear_button { | |
01a9eee9 | 137 | float:right; |
c327865b CG |
138 | } |
139 | #VNC_clipboard_text { | |
01a9eee9 | 140 | font-size: 11px; |
c327865b CG |
141 | } |
142 | ||
c327865b | 143 | #noVNC_clipboard_clear_button { |
01a9eee9 | 144 | float:right; |
c327865b CG |
145 | } |
146 | ||
f4bce783 JM |
147 | /*Bubble contents divs*/ |
148 | #noVNC_settings { | |
149 | display:none; | |
150 | margin-top:77px; | |
151 | right:20px; | |
152 | position:fixed; | |
153 | } | |
154 | ||
155 | #noVNC_controls { | |
0ce93900 | 156 | display:none; |
f4bce783 JM |
157 | margin-top:77px; |
158 | right:12px; | |
159 | position:fixed; | |
160 | } | |
161 | #noVNC_controls.top:after { | |
162 | right:15px; | |
163 | } | |
164 | ||
0ce93900 JM |
165 | #noVNC_description { |
166 | display:none; | |
167 | position:fixed; | |
168 | ||
169 | margin-top:77px; | |
170 | right:20px; | |
171 | left:20px; | |
172 | padding:15px; | |
173 | color:#000; | |
174 | background:#eee; /* default background for browsers without gradient support */ | |
175 | ||
176 | border:2px solid #E0E0E0; | |
177 | -webkit-border-radius:10px; | |
178 | -moz-border-radius:10px; | |
179 | border-radius:10px; | |
180 | } | |
181 | ||
f4bce783 JM |
182 | #noVNC_clipboard { |
183 | display:none; | |
184 | margin-top:77px; | |
185 | right:30px; | |
186 | position:fixed; | |
187 | } | |
188 | #noVNC_clipboard.top:after { | |
189 | right:85px; | |
190 | } | |
191 | ||
192 | #keyboardinput { | |
193 | width:1px; | |
194 | height:1px; | |
195 | background-color:#fff; | |
196 | color:#fff; | |
197 | border:0; | |
198 | position: relative; | |
199 | left: -40px; | |
200 | z-index: -1; | |
201 | } | |
202 | ||
203 | .noVNC_status_warn { | |
204 | background-color:yellow; | |
205 | } | |
206 | ||
207 | /* | |
208 | * Advanced Styling | |
209 | */ | |
210 | ||
211 | /* Control bar */ | |
212 | #noVNC-control-bar { | |
213 | position:fixed; | |
214 | background: #b2bdcd; /* Old browsers */ | |
215 | background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */ | |
216 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */ | |
217 | background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */ | |
218 | background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */ | |
219 | background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */ | |
220 | background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */ | |
221 | ||
222 | display:block; | |
223 | height:44px; | |
224 | left:0; | |
225 | top:0; | |
226 | width:100%; | |
227 | z-index:200; | |
228 | } | |
229 | ||
230 | .noVNC_status_button { | |
231 | padding: 4px 4px; | |
232 | vertical-align: middle; | |
233 | border:1px solid #869dbc; | |
234 | -webkit-border-radius: 6px; | |
235 | -moz-border-radius: 6px; | |
236 | border-radius: 6px; | |
237 | background: #b2bdcd; /* Old browsers */ | |
238 | background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */ | |
239 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */ | |
240 | background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */ | |
241 | background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */ | |
242 | background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */ | |
243 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2bdcd', endColorstr='#6e84a3',GradientType=0 ); /* IE6-9 */ | |
244 | background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */ | |
245 | /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/ | |
246 | } | |
247 | ||
248 | .noVNC_status_button_selected { | |
249 | padding: 4px 4px; | |
250 | vertical-align: middle; | |
251 | border:1px solid #4366a9; | |
252 | -webkit-border-radius: 6px; | |
253 | -moz-border-radius: 6px; | |
254 | background: #779ced; /* Old browsers */ | |
255 | background: -moz-linear-gradient(top, #779ced 0%, #3970e0 49%, #2160dd 51%, #2463df 100%); /* FF3.6+ */ | |
256 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#779ced), color-stop(49%,#3970e0), color-stop(51%,#2160dd), color-stop(100%,#2463df)); /* Chrome,Safari4+ */ | |
257 | background: -webkit-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Chrome10+,Safari5.1+ */ | |
258 | background: -o-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Opera11.10+ */ | |
259 | background: -ms-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* IE10+ */ | |
260 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#779ced', endColorstr='#2463df',GradientType=0 ); /* IE6-9 */ | |
261 | background: linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* W3C */ | |
262 | /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/ | |
263 | } | |
264 | ||
265 | ||
c327865b CG |
266 | /*Settings Bubble*/ |
267 | .triangle-right { | |
01a9eee9 JM |
268 | position:relative; |
269 | padding:15px; | |
270 | margin:1em 0 3em; | |
271 | color:#fff; | |
272 | background:#fff; /* default background for browsers without gradient support */ | |
273 | /* css3 */ | |
274 | /*background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698)); | |
275 | background:-moz-linear-gradient(#2e88c4, #075698); | |
276 | background:-o-linear-gradient(#2e88c4, #075698); | |
277 | background:linear-gradient(#2e88c4, #075698);*/ | |
278 | -webkit-border-radius:10px; | |
279 | -moz-border-radius:10px; | |
280 | border-radius:10px; | |
281 | color:#000; | |
282 | border:2px solid #E0E0E0; | |
c327865b CG |
283 | } |
284 | ||
285 | .triangle-right.top:after { | |
01a9eee9 JM |
286 | border-color: transparent #E0E0E0; |
287 | border-width: 20px 20px 0 0; | |
288 | bottom: auto; | |
289 | left: auto; | |
290 | right: 50px; | |
291 | top: -20px; | |
c327865b CG |
292 | } |
293 | ||
294 | .triangle-right:after { | |
01a9eee9 JM |
295 | content:""; |
296 | position:absolute; | |
297 | bottom:-20px; /* value = - border-top-width - border-bottom-width */ | |
298 | left:50px; /* controls horizontal position */ | |
299 | border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */ | |
300 | border-style:solid; | |
5299db1a | 301 | border-color:#E0E0E0 transparent; |
01a9eee9 | 302 | /* reduce the damage in FF3.0 */ |
5299db1a | 303 | display:block; |
01a9eee9 | 304 | width:0; |
c327865b CG |
305 | } |
306 | ||
307 | .triangle-right.top:after { | |
01a9eee9 JM |
308 | top:-40px; /* value = - border-top-width - border-bottom-width */ |
309 | right:50px; /* controls horizontal position */ | |
310 | bottom:auto; | |
311 | left:auto; | |
312 | border-width:40px 40px 0 0; /* vary these values to change the angle of the vertex */ | |
5299db1a | 313 | border-color:transparent #E0E0E0; |
c327865b CG |
314 | } |
315 | ||
b70ce077 | 316 | /*Default noVNC logo.*/ |
479bfa99 JM |
317 | /* From: http://fonts.googleapis.com/css?family=Orbitron:700 */ |
318 | @font-face { | |
319 | font-family: 'Orbitron'; | |
320 | font-style: normal; | |
321 | font-weight: 700; | |
322 | src: local('?'), url('Orbitron700.woff') format('woff'), | |
323 | url('Orbitron700.ttf') format('truetype'); | |
324 | } | |
325 | ||
b70ce077 | 326 | #noVNC_logo { |
a5df24b4 JM |
327 | margin-top: 170px; |
328 | margin-left: 10px; | |
01a9eee9 JM |
329 | color:yellow; |
330 | text-align:left; | |
479bfa99 | 331 | font-family: 'Orbitron', 'OrbitronTTF', sans-serif; |
01a9eee9 JM |
332 | line-height:90%; |
333 | text-shadow: | |
c327865b CG |
334 | 5px 5px 0 #000, |
335 | -1px -1px 0 #000, | |
336 | 1px -1px 0 #000, | |
337 | -1px 1px 0 #000, | |
338 | 1px 1px 0 #000; | |
339 | } | |
340 | ||
a5df24b4 | 341 | |
b70ce077 | 342 | #noVNC_logo span{ |
01a9eee9 | 343 | color:green; |
a7eb596d CG |
344 | } |
345 | ||
a5df24b4 JM |
346 | /* ---------------------------------------- |
347 | * Media sizing | |
348 | * ---------------------------------------- | |
349 | */ | |
350 | ||
351 | ||
352 | .noVNC_status_button { | |
353 | font-size: 12px; | |
a5df24b4 | 354 | } |
938daad1 | 355 | |
a5df24b4 JM |
356 | #noVNC_clipboard_text { |
357 | width: 500px; | |
a5df24b4 JM |
358 | } |
359 | ||
360 | #noVNC_logo { | |
361 | font-size: 180px; | |
362 | } | |
363 | ||
364 | @media screen and (min-width: 481px) and (max-width: 640px) { | |
365 | .noVNC_status_button { | |
366 | font-size: 10px; | |
a5df24b4 JM |
367 | } |
368 | #noVNC_clipboard_text { | |
369 | width: 410px; | |
a5df24b4 JM |
370 | } |
371 | #noVNC_logo { | |
372 | font-size: 150px; | |
373 | } | |
374 | } | |
375 | ||
376 | @media screen and (min-width: 321px) and (max-width: 480px) { | |
377 | .noVNC_status_button { | |
378 | font-size: 10px; | |
a5df24b4 JM |
379 | } |
380 | #noVNC_clipboard_text { | |
381 | width: 250px; | |
a5df24b4 JM |
382 | } |
383 | #noVNC_logo { | |
384 | font-size: 110px; | |
385 | } | |
386 | } | |
387 | ||
388 | @media screen and (max-width: 320px) { | |
389 | .noVNC_status_button { | |
390 | font-size: 9px; | |
a5df24b4 JM |
391 | } |
392 | #noVNC_clipboard_text { | |
393 | width: 220px; | |
a5df24b4 JM |
394 | } |
395 | #noVNC_logo { | |
396 | font-size: 90px; | |
397 | } | |
398 | } |