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