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