|
1 /* |
|
2 * noVNC base CSS |
|
3 * Copyright (C) 2012 Joel Martin |
|
4 * Copyright (C) 2016 Samuel Mannehed for Cendio AB |
|
5 * Copyright (C) 2016 Pierre Ossman for Cendio AB |
|
6 * noVNC is licensed under the MPL 2.0 (see LICENSE.txt) |
|
7 * This file is licensed under the 2-Clause BSD license (see LICENSE.txt). |
|
8 */ |
|
9 |
|
10 /* |
|
11 * Z index layers: |
|
12 * |
|
13 * 0: Main screen |
|
14 * 10: Control bar |
|
15 * 50: Transition blocker |
|
16 * 60: Connection popups |
|
17 * 100: Status bar |
|
18 * ... |
|
19 * 1000: Javascript crash |
|
20 * ... |
|
21 * 10000: Max (used for polyfills) |
|
22 */ |
|
23 |
|
24 body { |
|
25 margin:0; |
|
26 padding:0; |
|
27 font-family: Helvetica; |
|
28 /*Background image with light grey curve.*/ |
|
29 background-color:#494949; |
|
30 background-repeat:no-repeat; |
|
31 background-position:right bottom; |
|
32 height:100%; |
|
33 touch-action: none; |
|
34 } |
|
35 |
|
36 html { |
|
37 height:100%; |
|
38 } |
|
39 |
|
40 .noVNC_only_touch.noVNC_hidden { |
|
41 display: none; |
|
42 } |
|
43 |
|
44 .noVNC_disabled { |
|
45 color: rgb(128, 128, 128); |
|
46 } |
|
47 |
|
48 /* ---------------------------------------- |
|
49 * Spinner |
|
50 * ---------------------------------------- |
|
51 */ |
|
52 |
|
53 .noVNC_spinner { |
|
54 position: relative; |
|
55 } |
|
56 .noVNC_spinner, .noVNC_spinner::before, .noVNC_spinner::after { |
|
57 width: 10px; |
|
58 height: 10px; |
|
59 border-radius: 2px; |
|
60 box-shadow: -60px 10px 0 rgba(255, 255, 255, 0); |
|
61 animation: noVNC_spinner 1.0s linear infinite; |
|
62 } |
|
63 .noVNC_spinner::before { |
|
64 content: ""; |
|
65 position: absolute; |
|
66 left: 0px; |
|
67 top: 0px; |
|
68 animation-delay: -0.1s; |
|
69 } |
|
70 .noVNC_spinner::after { |
|
71 content: ""; |
|
72 position: absolute; |
|
73 top: 0px; |
|
74 left: 0px; |
|
75 animation-delay: 0.1s; |
|
76 } |
|
77 @keyframes noVNC_spinner { |
|
78 0% { box-shadow: -60px 10px 0 rgba(255, 255, 255, 0); width: 20px; } |
|
79 25% { box-shadow: 20px 10px 0 rgba(255, 255, 255, 1); width: 10px; } |
|
80 50% { box-shadow: 60px 10px 0 rgba(255, 255, 255, 0); width: 10px; } |
|
81 } |
|
82 |
|
83 /* ---------------------------------------- |
|
84 * Input Elements |
|
85 * ---------------------------------------- |
|
86 */ |
|
87 |
|
88 input[type=input], input[type=password], input[type=number], |
|
89 input:not([type]), textarea { |
|
90 /* Disable default rendering */ |
|
91 -webkit-appearance: none; |
|
92 -moz-appearance: none; |
|
93 background: none; |
|
94 |
|
95 margin: 2px; |
|
96 padding: 2px; |
|
97 border: 1px solid rgb(192, 192, 192); |
|
98 border-radius: 5px; |
|
99 color: black; |
|
100 background: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240)); |
|
101 } |
|
102 |
|
103 input[type=button], input[type=submit], select { |
|
104 /* Disable default rendering */ |
|
105 -webkit-appearance: none; |
|
106 -moz-appearance: none; |
|
107 background: none; |
|
108 |
|
109 margin: 2px; |
|
110 padding: 2px; |
|
111 border: 1px solid rgb(192, 192, 192); |
|
112 border-bottom-width: 2px; |
|
113 border-radius: 5px; |
|
114 color: black; |
|
115 background: linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240)); |
|
116 |
|
117 /* This avoids it jumping around when :active */ |
|
118 vertical-align: middle; |
|
119 } |
|
120 |
|
121 input[type=button], input[type=submit] { |
|
122 padding-left: 20px; |
|
123 padding-right: 20px; |
|
124 } |
|
125 |
|
126 option { |
|
127 color: black; |
|
128 background: white; |
|
129 } |
|
130 |
|
131 input[type=input]:focus, input[type=password]:focus, |
|
132 input:not([type]):focus, input[type=button]:focus, |
|
133 input[type=submit]:focus, |
|
134 textarea:focus, select:focus { |
|
135 box-shadow: 0px 0px 3px rgba(74, 144, 217, 0.5); |
|
136 border-color: rgb(74, 144, 217); |
|
137 outline: none; |
|
138 } |
|
139 |
|
140 input[type=button]::-moz-focus-inner, |
|
141 input[type=submit]::-moz-focus-inner { |
|
142 border: none; |
|
143 } |
|
144 |
|
145 input[type=input]:disabled, input[type=password]:disabled, |
|
146 input:not([type]):disabled, input[type=button]:disabled, |
|
147 input[type=submit]:disabled, input[type=number]:disabled, |
|
148 textarea:disabled, select:disabled { |
|
149 color: rgb(128, 128, 128); |
|
150 background: rgb(240, 240, 240); |
|
151 } |
|
152 |
|
153 input[type=button]:active, input[type=submit]:active, |
|
154 select:active { |
|
155 border-bottom-width: 1px; |
|
156 margin-top: 3px; |
|
157 } |
|
158 |
|
159 :root:not(.noVNC_touch) input[type=button]:hover:not(:disabled), |
|
160 :root:not(.noVNC_touch) input[type=submit]:hover:not(:disabled), |
|
161 :root:not(.noVNC_touch) select:hover:not(:disabled) { |
|
162 background: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250)); |
|
163 } |
|
164 |
|
165 /* ---------------------------------------- |
|
166 * WebKit centering hacks |
|
167 * ---------------------------------------- |
|
168 */ |
|
169 |
|
170 .noVNC_center { |
|
171 /* |
|
172 * This is a workaround because webkit misrenders transforms and |
|
173 * uses non-integer coordinates, resulting in blurry content. |
|
174 * Ideally we'd use "top: 50%; transform: translateY(-50%);" on |
|
175 * the objects instead. |
|
176 */ |
|
177 display: flex; |
|
178 align-items: center; |
|
179 justify-content: center; |
|
180 position: fixed; |
|
181 top: 0; |
|
182 left: 0; |
|
183 width: 100%; |
|
184 height: 100%; |
|
185 pointer-events: none; |
|
186 } |
|
187 .noVNC_center > * { |
|
188 pointer-events: auto; |
|
189 } |
|
190 .noVNC_vcenter { |
|
191 display: flex; |
|
192 flex-direction: column; |
|
193 justify-content: center; |
|
194 position: fixed; |
|
195 top: 0; |
|
196 left: 0; |
|
197 height: 100%; |
|
198 pointer-events: none; |
|
199 } |
|
200 .noVNC_vcenter > * { |
|
201 pointer-events: auto; |
|
202 } |
|
203 |
|
204 /* ---------------------------------------- |
|
205 * Layering |
|
206 * ---------------------------------------- |
|
207 */ |
|
208 |
|
209 .noVNC_connect_layer { |
|
210 z-index: 60; |
|
211 } |
|
212 |
|
213 /* ---------------------------------------- |
|
214 * Fallback error |
|
215 * ---------------------------------------- |
|
216 */ |
|
217 |
|
218 #noVNC_fallback_error { |
|
219 z-index: 1000; |
|
220 visibility: hidden; |
|
221 } |
|
222 #noVNC_fallback_error.noVNC_open { |
|
223 visibility: visible; |
|
224 } |
|
225 |
|
226 #noVNC_fallback_error > div { |
|
227 max-width: 90%; |
|
228 padding: 15px; |
|
229 |
|
230 transition: 0.5s ease-in-out; |
|
231 |
|
232 transform: translateY(-50px); |
|
233 opacity: 0; |
|
234 |
|
235 text-align: center; |
|
236 font-weight: bold; |
|
237 color: #fff; |
|
238 |
|
239 border-radius: 10px; |
|
240 box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5); |
|
241 background: rgba(200,55,55,0.8); |
|
242 } |
|
243 #noVNC_fallback_error.noVNC_open > div { |
|
244 transform: translateY(0); |
|
245 opacity: 1; |
|
246 } |
|
247 |
|
248 #noVNC_fallback_errormsg { |
|
249 font-weight: normal; |
|
250 } |
|
251 |
|
252 #noVNC_fallback_errormsg .noVNC_message { |
|
253 display: inline-block; |
|
254 text-align: left; |
|
255 font-family: monospace; |
|
256 white-space: pre-wrap; |
|
257 } |
|
258 |
|
259 #noVNC_fallback_error .noVNC_location { |
|
260 font-style: italic; |
|
261 font-size: 0.8em; |
|
262 color: rgba(255, 255, 255, 0.8); |
|
263 } |
|
264 |
|
265 #noVNC_fallback_error .noVNC_stack { |
|
266 max-height: 50vh; |
|
267 padding: 10px; |
|
268 margin: 10px; |
|
269 font-size: 0.8em; |
|
270 text-align: left; |
|
271 font-family: monospace; |
|
272 white-space: pre; |
|
273 border: 1px solid rgba(0, 0, 0, 0.5); |
|
274 background: rgba(0, 0, 0, 0.2); |
|
275 overflow: auto; |
|
276 } |
|
277 |
|
278 /* ---------------------------------------- |
|
279 * Control Bar |
|
280 * ---------------------------------------- |
|
281 */ |
|
282 |
|
283 #noVNC_control_bar_anchor { |
|
284 /* The anchor is needed to get z-stacking to work */ |
|
285 position: fixed; |
|
286 z-index: 10; |
|
287 |
|
288 transition: 0.5s ease-in-out; |
|
289 |
|
290 /* Edge misrenders animations wihthout this */ |
|
291 transform: translateX(0); |
|
292 } |
|
293 :root.noVNC_connected #noVNC_control_bar_anchor.noVNC_idle { |
|
294 opacity: 0.8; |
|
295 } |
|
296 #noVNC_control_bar_anchor.noVNC_right { |
|
297 left: auto; |
|
298 right: 0; |
|
299 } |
|
300 |
|
301 #noVNC_control_bar { |
|
302 position: relative; |
|
303 left: -100%; |
|
304 |
|
305 transition: 0.5s ease-in-out; |
|
306 |
|
307 background-color: rgb(110, 132, 163); |
|
308 border-radius: 0 10px 10px 0; |
|
309 |
|
310 } |
|
311 #noVNC_control_bar.noVNC_open { |
|
312 box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5); |
|
313 left: 0; |
|
314 } |
|
315 #noVNC_control_bar::before { |
|
316 /* This extra element is to get a proper shadow */ |
|
317 content: ""; |
|
318 position: absolute; |
|
319 z-index: -1; |
|
320 height: 100%; |
|
321 width: 30px; |
|
322 left: -30px; |
|
323 transition: box-shadow 0.5s ease-in-out; |
|
324 } |
|
325 #noVNC_control_bar.noVNC_open::before { |
|
326 box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5); |
|
327 } |
|
328 .noVNC_right #noVNC_control_bar { |
|
329 left: 100%; |
|
330 border-radius: 10px 0 0 10px; |
|
331 } |
|
332 .noVNC_right #noVNC_control_bar.noVNC_open { |
|
333 left: 0; |
|
334 } |
|
335 .noVNC_right #noVNC_control_bar::before { |
|
336 visibility: hidden; |
|
337 } |
|
338 |
|
339 #noVNC_control_bar_handle { |
|
340 position: absolute; |
|
341 left: -15px; |
|
342 top: 0; |
|
343 transform: translateY(35px); |
|
344 width: calc(100% + 30px); |
|
345 height: 50px; |
|
346 z-index: -1; |
|
347 cursor: pointer; |
|
348 border-radius: 5px; |
|
349 background-color: rgb(83, 99, 122); |
|
350 background-image: url("../images/handle_bg.svg"); |
|
351 background-repeat: no-repeat; |
|
352 background-position: right; |
|
353 box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5); |
|
354 } |
|
355 #noVNC_control_bar_handle:after { |
|
356 content: ""; |
|
357 transition: transform 0.5s ease-in-out; |
|
358 background: url("../images/handle.svg"); |
|
359 position: absolute; |
|
360 top: 22px; /* (50px-6px)/2 */ |
|
361 right: 5px; |
|
362 width: 5px; |
|
363 height: 6px; |
|
364 } |
|
365 #noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after { |
|
366 transform: translateX(1px) rotate(180deg); |
|
367 } |
|
368 :root:not(.noVNC_connected) #noVNC_control_bar_handle { |
|
369 display: none; |
|
370 } |
|
371 .noVNC_right #noVNC_control_bar_handle { |
|
372 background-position: left; |
|
373 } |
|
374 .noVNC_right #noVNC_control_bar_handle:after { |
|
375 left: 5px; |
|
376 right: 0; |
|
377 transform: translateX(1px) rotate(180deg); |
|
378 } |
|
379 .noVNC_right #noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after { |
|
380 transform: none; |
|
381 } |
|
382 #noVNC_control_bar_handle div { |
|
383 position: absolute; |
|
384 right: -35px; |
|
385 top: 0; |
|
386 width: 50px; |
|
387 height: 50px; |
|
388 } |
|
389 :root:not(.noVNC_touch) #noVNC_control_bar_handle div { |
|
390 display: none; |
|
391 } |
|
392 .noVNC_right #noVNC_control_bar_handle div { |
|
393 left: -35px; |
|
394 right: auto; |
|
395 } |
|
396 |
|
397 #noVNC_control_bar .noVNC_scroll { |
|
398 max-height: 100vh; /* Chrome is buggy with 100% */ |
|
399 overflow-x: hidden; |
|
400 overflow-y: auto; |
|
401 padding: 0 10px 0 5px; |
|
402 } |
|
403 .noVNC_right #noVNC_control_bar .noVNC_scroll { |
|
404 padding: 0 5px 0 10px; |
|
405 } |
|
406 |
|
407 /* Control bar hint */ |
|
408 #noVNC_control_bar_hint { |
|
409 position: fixed; |
|
410 left: calc(100vw - 50px); |
|
411 right: auto; |
|
412 top: 50%; |
|
413 transform: translateY(-50%) scale(0); |
|
414 width: 100px; |
|
415 height: 50%; |
|
416 max-height: 600px; |
|
417 |
|
418 visibility: hidden; |
|
419 opacity: 0; |
|
420 transition: 0.2s ease-in-out; |
|
421 background: transparent; |
|
422 box-shadow: 0 0 10px black, inset 0 0 10px 10px rgba(110, 132, 163, 0.8); |
|
423 border-radius: 10px; |
|
424 transition-delay: 0s; |
|
425 } |
|
426 #noVNC_control_bar_anchor.noVNC_right #noVNC_control_bar_hint{ |
|
427 left: auto; |
|
428 right: calc(100vw - 50px); |
|
429 } |
|
430 #noVNC_control_bar_hint.noVNC_active { |
|
431 visibility: visible; |
|
432 opacity: 1; |
|
433 transition-delay: 0.2s; |
|
434 transform: translateY(-50%) scale(1); |
|
435 } |
|
436 |
|
437 /* General button style */ |
|
438 .noVNC_button { |
|
439 display: block; |
|
440 padding: 4px 4px; |
|
441 margin: 10px 0; |
|
442 vertical-align: middle; |
|
443 border:1px solid rgba(255, 255, 255, 0.2); |
|
444 border-radius: 6px; |
|
445 } |
|
446 .noVNC_button.noVNC_selected { |
|
447 border-color: rgba(0, 0, 0, 0.8); |
|
448 background: rgba(0, 0, 0, 0.5); |
|
449 } |
|
450 .noVNC_button:disabled { |
|
451 opacity: 0.4; |
|
452 } |
|
453 .noVNC_button:focus { |
|
454 outline: none; |
|
455 } |
|
456 .noVNC_button:active { |
|
457 padding-top: 5px; |
|
458 padding-bottom: 3px; |
|
459 } |
|
460 /* Android browsers don't properly update hover state if touch events |
|
461 * are intercepted, but focus should be safe to display */ |
|
462 :root:not(.noVNC_touch) .noVNC_button.noVNC_selected:hover, |
|
463 .noVNC_button.noVNC_selected:focus { |
|
464 border-color: rgba(0, 0, 0, 0.4); |
|
465 background: rgba(0, 0, 0, 0.2); |
|
466 } |
|
467 :root:not(.noVNC_touch) .noVNC_button:hover, |
|
468 .noVNC_button:focus { |
|
469 background: rgba(255, 255, 255, 0.2); |
|
470 } |
|
471 .noVNC_button.noVNC_hidden { |
|
472 display: none; |
|
473 } |
|
474 |
|
475 /* Panels */ |
|
476 .noVNC_panel { |
|
477 transform: translateX(25px); |
|
478 |
|
479 transition: 0.5s ease-in-out; |
|
480 |
|
481 max-height: 100vh; /* Chrome is buggy with 100% */ |
|
482 overflow-x: hidden; |
|
483 overflow-y: auto; |
|
484 |
|
485 visibility: hidden; |
|
486 opacity: 0; |
|
487 |
|
488 padding: 15px; |
|
489 |
|
490 background: #fff; |
|
491 border-radius: 10px; |
|
492 color: #000; |
|
493 border: 2px solid #E0E0E0; |
|
494 box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5); |
|
495 } |
|
496 .noVNC_panel.noVNC_open { |
|
497 visibility: visible; |
|
498 opacity: 1; |
|
499 transform: translateX(75px); |
|
500 } |
|
501 .noVNC_right .noVNC_vcenter { |
|
502 left: auto; |
|
503 right: 0; |
|
504 } |
|
505 .noVNC_right .noVNC_panel { |
|
506 transform: translateX(-25px); |
|
507 } |
|
508 .noVNC_right .noVNC_panel.noVNC_open { |
|
509 transform: translateX(-75px); |
|
510 } |
|
511 |
|
512 .noVNC_panel hr { |
|
513 border: none; |
|
514 border-top: 1px solid rgb(192, 192, 192); |
|
515 } |
|
516 |
|
517 .noVNC_panel label { |
|
518 display: block; |
|
519 white-space: nowrap; |
|
520 } |
|
521 |
|
522 .noVNC_panel .noVNC_heading { |
|
523 background-color: rgb(110, 132, 163); |
|
524 border-radius: 5px; |
|
525 padding: 5px; |
|
526 /* Compensate for padding in image */ |
|
527 padding-right: 8px; |
|
528 color: white; |
|
529 font-size: 20px; |
|
530 margin-bottom: 10px; |
|
531 white-space: nowrap; |
|
532 } |
|
533 .noVNC_panel .noVNC_heading img { |
|
534 vertical-align: bottom; |
|
535 } |
|
536 |
|
537 .noVNC_submit { |
|
538 float: right; |
|
539 } |
|
540 |
|
541 /* Expanders */ |
|
542 .noVNC_expander { |
|
543 cursor: pointer; |
|
544 } |
|
545 .noVNC_expander::before { |
|
546 content: url("../images/expander.svg"); |
|
547 display: inline-block; |
|
548 margin-right: 5px; |
|
549 transition: 0.2s ease-in-out; |
|
550 } |
|
551 .noVNC_expander.noVNC_open::before { |
|
552 transform: rotateZ(90deg); |
|
553 } |
|
554 .noVNC_expander ~ * { |
|
555 margin: 5px; |
|
556 margin-left: 10px; |
|
557 padding: 5px; |
|
558 background: rgba(0, 0, 0, 0.05); |
|
559 border-radius: 5px; |
|
560 } |
|
561 .noVNC_expander:not(.noVNC_open) ~ * { |
|
562 display: none; |
|
563 } |
|
564 |
|
565 /* Control bar content */ |
|
566 |
|
567 #noVNC_control_bar .noVNC_logo { |
|
568 font-size: 13px; |
|
569 } |
|
570 |
|
571 :root:not(.noVNC_connected) #noVNC_view_drag_button { |
|
572 display: none; |
|
573 } |
|
574 |
|
575 /* noVNC Touch Device only buttons */ |
|
576 :root:not(.noVNC_connected) #noVNC_mobile_buttons { |
|
577 display: none; |
|
578 } |
|
579 :root:not(.noVNC_touch) #noVNC_mobile_buttons { |
|
580 display: none; |
|
581 } |
|
582 |
|
583 /* Extra manual keys */ |
|
584 :root:not(.noVNC_connected) #noVNC_extra_keys { |
|
585 display: none; |
|
586 } |
|
587 |
|
588 #noVNC_modifiers { |
|
589 background-color: rgb(92, 92, 92); |
|
590 border: none; |
|
591 padding: 0 10px; |
|
592 } |
|
593 |
|
594 /* Shutdown/Reboot */ |
|
595 :root:not(.noVNC_connected) #noVNC_power_button { |
|
596 display: none; |
|
597 } |
|
598 #noVNC_power { |
|
599 } |
|
600 #noVNC_power_buttons { |
|
601 display: none; |
|
602 } |
|
603 |
|
604 #noVNC_power input[type=button] { |
|
605 width: 100%; |
|
606 } |
|
607 |
|
608 /* Clipboard */ |
|
609 :root:not(.noVNC_connected) #noVNC_clipboard_button { |
|
610 display: none; |
|
611 } |
|
612 #noVNC_clipboard { |
|
613 /* Full screen, minus padding and left and right margins */ |
|
614 max-width: calc(100vw - 2*15px - 75px - 25px); |
|
615 } |
|
616 #noVNC_clipboard_text { |
|
617 width: 500px; |
|
618 max-width: 100%; |
|
619 } |
|
620 |
|
621 /* Settings */ |
|
622 #noVNC_settings { |
|
623 } |
|
624 #noVNC_settings ul { |
|
625 list-style: none; |
|
626 margin: 0px; |
|
627 padding: 0px; |
|
628 } |
|
629 #noVNC_setting_port { |
|
630 width: 80px; |
|
631 } |
|
632 #noVNC_setting_path { |
|
633 width: 100px; |
|
634 } |
|
635 |
|
636 /* Connection Controls */ |
|
637 :root:not(.noVNC_connected) #noVNC_disconnect_button { |
|
638 display: none; |
|
639 } |
|
640 |
|
641 /* ---------------------------------------- |
|
642 * Status Dialog |
|
643 * ---------------------------------------- |
|
644 */ |
|
645 |
|
646 #noVNC_status { |
|
647 position: fixed; |
|
648 top: 0; |
|
649 left: 0; |
|
650 width: 100%; |
|
651 z-index: 100; |
|
652 transform: translateY(-100%); |
|
653 |
|
654 cursor: pointer; |
|
655 |
|
656 transition: 0.5s ease-in-out; |
|
657 |
|
658 visibility: hidden; |
|
659 opacity: 0; |
|
660 |
|
661 padding: 5px; |
|
662 |
|
663 display: flex; |
|
664 flex-direction: row; |
|
665 justify-content: center; |
|
666 align-content: center; |
|
667 |
|
668 line-height: 25px; |
|
669 word-wrap: break-word; |
|
670 color: #fff; |
|
671 |
|
672 border-bottom: 1px solid rgba(0, 0, 0, 0.9); |
|
673 } |
|
674 #noVNC_status.noVNC_open { |
|
675 transform: translateY(0); |
|
676 visibility: visible; |
|
677 opacity: 1; |
|
678 } |
|
679 |
|
680 #noVNC_status::before { |
|
681 content: ""; |
|
682 display: inline-block; |
|
683 width: 25px; |
|
684 height: 25px; |
|
685 margin-right: 5px; |
|
686 } |
|
687 |
|
688 #noVNC_status.noVNC_status_normal { |
|
689 background: rgba(128,128,128,0.9); |
|
690 } |
|
691 #noVNC_status.noVNC_status_normal::before { |
|
692 content: url("../images/info.svg") " "; |
|
693 } |
|
694 #noVNC_status.noVNC_status_error { |
|
695 background: rgba(200,55,55,0.9); |
|
696 } |
|
697 #noVNC_status.noVNC_status_error::before { |
|
698 content: url("../images/error.svg") " "; |
|
699 } |
|
700 #noVNC_status.noVNC_status_warn { |
|
701 background: rgba(180,180,30,0.9); |
|
702 } |
|
703 #noVNC_status.noVNC_status_warn::before { |
|
704 content: url("../images/warning.svg") " "; |
|
705 } |
|
706 |
|
707 /* ---------------------------------------- |
|
708 * Connect Dialog |
|
709 * ---------------------------------------- |
|
710 */ |
|
711 |
|
712 #noVNC_connect_dlg { |
|
713 transition: 0.5s ease-in-out; |
|
714 |
|
715 transform: scale(0, 0); |
|
716 visibility: hidden; |
|
717 opacity: 0; |
|
718 } |
|
719 #noVNC_connect_dlg.noVNC_open { |
|
720 transform: scale(1, 1); |
|
721 visibility: visible; |
|
722 opacity: 1; |
|
723 } |
|
724 #noVNC_connect_dlg .noVNC_logo { |
|
725 transition: 0.5s ease-in-out; |
|
726 padding: 10px; |
|
727 margin-bottom: 10px; |
|
728 |
|
729 font-size: 80px; |
|
730 text-align: center; |
|
731 |
|
732 border-radius: 5px; |
|
733 } |
|
734 @media (max-width: 440px) { |
|
735 #noVNC_connect_dlg { |
|
736 max-width: calc(100vw - 100px); |
|
737 } |
|
738 #noVNC_connect_dlg .noVNC_logo { |
|
739 font-size: calc(25vw - 30px); |
|
740 } |
|
741 } |
|
742 #noVNC_connect_button { |
|
743 cursor: pointer; |
|
744 |
|
745 padding: 10px; |
|
746 |
|
747 color: white; |
|
748 background-color: rgb(110, 132, 163); |
|
749 border-radius: 12px; |
|
750 |
|
751 text-align: center; |
|
752 font-size: 20px; |
|
753 |
|
754 box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5); |
|
755 } |
|
756 #noVNC_connect_button div { |
|
757 margin: 2px; |
|
758 padding: 5px 30px; |
|
759 border: 1px solid rgb(83, 99, 122); |
|
760 border-bottom-width: 2px; |
|
761 border-radius: 5px; |
|
762 background: linear-gradient(to top, rgb(110, 132, 163), rgb(99, 119, 147)); |
|
763 |
|
764 /* This avoids it jumping around when :active */ |
|
765 vertical-align: middle; |
|
766 } |
|
767 #noVNC_connect_button div:active { |
|
768 border-bottom-width: 1px; |
|
769 margin-top: 3px; |
|
770 } |
|
771 :root:not(.noVNC_touch) #noVNC_connect_button div:hover { |
|
772 background: linear-gradient(to top, rgb(110, 132, 163), rgb(105, 125, 155)); |
|
773 } |
|
774 |
|
775 #noVNC_connect_button img { |
|
776 vertical-align: bottom; |
|
777 height: 1.3em; |
|
778 } |
|
779 |
|
780 /* ---------------------------------------- |
|
781 * Password Dialog |
|
782 * ---------------------------------------- |
|
783 */ |
|
784 |
|
785 #noVNC_password_dlg { |
|
786 position: relative; |
|
787 |
|
788 transform: translateY(-50px); |
|
789 } |
|
790 #noVNC_password_dlg.noVNC_open { |
|
791 transform: translateY(0); |
|
792 } |
|
793 #noVNC_password_dlg ul { |
|
794 list-style: none; |
|
795 margin: 0px; |
|
796 padding: 0px; |
|
797 } |
|
798 |
|
799 /* ---------------------------------------- |
|
800 * Main Area |
|
801 * ---------------------------------------- |
|
802 */ |
|
803 |
|
804 /* Transition screen */ |
|
805 #noVNC_transition { |
|
806 display: none; |
|
807 |
|
808 position: fixed; |
|
809 top: 0; |
|
810 left: 0; |
|
811 bottom: 0; |
|
812 right: 0; |
|
813 |
|
814 color: white; |
|
815 background: rgba(0, 0, 0, 0.5); |
|
816 z-index: 50; |
|
817 |
|
818 /*display: flex;*/ |
|
819 align-items: center; |
|
820 justify-content: center; |
|
821 flex-direction: column; |
|
822 } |
|
823 :root.noVNC_loading #noVNC_transition, |
|
824 :root.noVNC_connecting #noVNC_transition, |
|
825 :root.noVNC_disconnecting #noVNC_transition, |
|
826 :root.noVNC_reconnecting #noVNC_transition { |
|
827 display: flex; |
|
828 } |
|
829 :root:not(.noVNC_reconnecting) #noVNC_cancel_reconnect_button { |
|
830 display: none; |
|
831 } |
|
832 #noVNC_transition_text { |
|
833 font-size: 1.5em; |
|
834 } |
|
835 |
|
836 /* Main container */ |
|
837 #noVNC_container { |
|
838 width: 100%; |
|
839 height: 100%; |
|
840 background-color: #313131; |
|
841 border-bottom-right-radius: 800px 600px; |
|
842 /*border-top-left-radius: 800px 600px;*/ |
|
843 } |
|
844 |
|
845 #noVNC_keyboardinput { |
|
846 width: 1px; |
|
847 height: 1px; |
|
848 background-color: #fff; |
|
849 color: #fff; |
|
850 border: 0; |
|
851 position: absolute; |
|
852 left: -40px; |
|
853 z-index: -1; |
|
854 ime-mode: disabled; |
|
855 } |
|
856 |
|
857 /*Default noVNC logo.*/ |
|
858 .noVNC_logo { |
|
859 color:yellow; |
|
860 font-family: sans-serif; |
|
861 line-height:90%; |
|
862 text-shadow: 0.1em 0.1em 0 black; |
|
863 } |
|
864 .noVNC_logo span{ |
|
865 color:green; |
|
866 } |
|
867 |
|
868 #noVNC_bell { |
|
869 display: none; |
|
870 } |
|
871 |
|
872 /* ---------------------------------------- |
|
873 * Media sizing |
|
874 * ---------------------------------------- |
|
875 */ |
|
876 |
|
877 @media screen and (max-width: 640px){ |
|
878 #noVNC_logo { |
|
879 font-size: 150px; |
|
880 } |
|
881 } |
|
882 |
|
883 @media screen and (min-width: 321px) and (max-width: 480px) { |
|
884 #noVNC_logo { |
|
885 font-size: 110px; |
|
886 } |
|
887 } |
|
888 |
|
889 @media screen and (max-width: 320px) { |
|
890 #noVNC_logo { |
|
891 font-size: 90px; |
|
892 } |
|
893 } |