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).
15 * 50: Transition blocker
16 * 60: Connection popups
19 * 1000: Javascript crash
21 * 10000: Max (used for polyfills)
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
;
40 .noVNC_only_touch.noVNC_hidden {
44 /* ----------------------------------------
46 * ----------------------------------------
52 .noVNC_spinner, .noVNC_spinner::before, .noVNC_spinner::after {
56 animation: noVNC_spinner
1.0s ease-in-out alternate infinite
;
58 .noVNC_spinner::before {
62 animation-delay: -0.2s;
64 .noVNC_spinner::after {
68 animation-delay: 0.2s;
70 @keyframes noVNC_spinner
{
71 0% { box-shadow: 0 10px 0 white
; }
72 100% { box-shadow: 0 30px 0 white
; }
75 /* ----------------------------------------
77 * ----------------------------------------
80 input
[type
=input
], input
[type
=password
], input:not
([type
]), textarea
{
81 /* Disable default rendering */
82 -webkit-appearance: none
;
83 -moz-appearance: none
;
88 border: 1px solid rgb
(192, 192, 192);
91 background: linear-gradient
(to top
, rgb
(255, 255, 255) 80%, rgb
(240, 240, 240));
94 input
[type
=button
], select
{
95 /* Disable default rendering */
96 -webkit-appearance: none
;
97 -moz-appearance: none
;
102 border: 1px solid rgb
(192, 192, 192);
103 border-bottom-width: 2px;
106 background: linear-gradient
(to top
, rgb
(255, 255, 255), rgb
(240, 240, 240));
108 /* This avoids it jumping around when :active */
109 vertical-align: middle
;
122 input
[type
=input
]:focus
, input
[type
=password
]:focus
,
123 input:not
([type
]):focus
, input
[type
=button
]:focus
,
124 textarea:focus
, select:focus
{
125 box-shadow: 0px 0px 3px rgba
(74, 144, 217, 0.5);
126 border-color: rgb
(74, 144, 217);
130 input
[type
=button
]::-moz-focus-inner
{
134 input
[type
=input
]:disabled
, input
[type
=password
]:disabled
,
135 input:not
([type
]):disabled
, input
[type
=button
]:disabled
,
136 textarea:disabled
, select:disabled
{
137 color: rgb
(128, 128, 128);
138 background: rgb
(240, 240, 240);
141 input
[type
=button
]:active
, select:active
{
142 border-bottom-width: 1px;
146 :root:not
(.noVNC_touch
) input
[type
=button
]:hover:not
(:disabled
), :root:not
(.noVNC_touch
) select:hover:not
(:disabled
) {
147 background: linear-gradient
(to top
, rgb
(255, 255, 255), rgb
(250, 250, 250));
150 /* ----------------------------------------
151 * WebKit centering hacks
152 * ----------------------------------------
157 * This is a workaround because webkit misrenders transforms and
158 * uses non-integer coordinates, resulting in blurry content.
159 * Ideally we'd use "top: 50%; transform: translateY(-50%);" on
160 * the objects instead.
164 justify-content: center
;
170 pointer-events: none
;
173 pointer-events: auto
;
177 flex-direction: column
;
178 justify-content: center
;
183 pointer-events: none
;
186 pointer-events: auto
;
189 /* ----------------------------------------
191 * ----------------------------------------
194 .noVNC_connect_layer {
198 /* ----------------------------------------
200 * ----------------------------------------
203 #noVNC_fallback_error {
207 transform: translate
(-50%, -50px);
208 transition: 0.5s ease-in-out
;
219 word-wrap: break-word
;
223 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
224 background: rgba
(200,55,55,0.8);
226 #noVNC_fallback_error.noVNC_open
{
227 transform: translate
(-50%, 0);
232 #noVNC_fallback_errormsg {
236 #noVNC_fallback_error .noVNC_location
{
239 color: rgba
(255, 255, 255, 0.8);
242 #noVNC_fallback_error .noVNC_stack
{
248 border: 1px solid rgba
(0, 0, 0, 0.5);
249 background: rgba
(0, 0, 0, 0.2);
252 /* ----------------------------------------
254 * ----------------------------------------
257 #noVNC_control_bar_anchor {
258 /* The anchor is needed to get z-stacking to work */
262 transition: 0.5s ease-in-out
;
264 /* Edge misrenders animations wihthout this */
265 transform: translateX
(0);
267 :root
.noVNC_connected #noVNC_control_bar_anchor
.noVNC_idle
{
270 #noVNC_control_bar_anchor.noVNC_right
{
279 transition: 0.5s ease-in-out
;
281 background-color: rgb
(110, 132, 163);
282 border-radius: 0 10px 10px 0;
285 #noVNC_control_bar.noVNC_open
{
286 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
289 #noVNC_control_bar::before
{
290 /* This extra element is to get a proper shadow */
297 transition: box-shadow
0.5s ease-in-out
;
299 #noVNC_control_bar.noVNC_open::before
{
300 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
302 .noVNC_right #noVNC_control_bar {
304 border-radius: 10px 0 0 10px;
306 .noVNC_right #noVNC_control_bar.noVNC_open {
309 .noVNC_right #noVNC_control_bar::before {
313 #noVNC_control_bar_handle {
317 transform: translateY
(35px);
318 width: calc
(100% + 30px);
323 background-color: rgb
(83, 99, 122);
324 background-image: url
("../images/handle_bg.svg");
325 background-repeat: no-repeat
;
326 background-position: right
;
327 box-shadow: 3px 3px 0px rgba
(0, 0, 0, 0.5);
329 #noVNC_control_bar_handle:after
{
331 transition: transform
0.5s ease-in-out
;
332 background: url
("../images/handle.svg");
334 top: 22px; /* (50px-6px)/2 */
339 #noVNC_control_bar.noVNC_open #
noVNC_control_bar_handle:after
{
340 transform: translateX
(1px) rotate
(180deg);
342 :root:not
(.noVNC_connected
) #noVNC_control_bar_handle
{
345 .noVNC_right #noVNC_control_bar_handle {
346 background-position: left
;
348 .noVNC_right #noVNC_control_bar_handle:after {
351 transform: translateX
(1px) rotate
(180deg);
353 .noVNC_right #noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after {
356 #noVNC_control_bar_handle div
{
363 :root:not
(.noVNC_touch
) #noVNC_control_bar_handle div
{
366 .noVNC_right #noVNC_control_bar_handle div {
371 #noVNC_control_bar .noVNC_scroll
{
372 max-height: 100vh; /* Chrome is buggy with 100% */
375 padding: 0 10px 0 5px;
377 .noVNC_right #noVNC_control_bar .noVNC_scroll {
378 padding: 0 5px 0 10px;
381 /* General button style */
386 vertical-align: middle
;
387 border:1px solid rgba
(255, 255, 255, 0.2);
390 .noVNC_button.noVNC_selected {
391 border-color: rgba
(0, 0, 0, 0.8);
392 background: rgba
(0, 0, 0, 0.5);
394 .noVNC_button:disabled {
397 .noVNC_button:focus {
400 .noVNC_button:active {
404 :root:not
(.noVNC_touch
) .noVNC_button
.noVNC_selected:hover
{
405 border-color: rgba
(0, 0, 0, 0.4);
406 background: rgba
(0, 0, 0, 0.2);
408 :root:not
(.noVNC_touch
) .noVNC_button:hover
{
409 background: rgba
(255, 255, 255, 0.2);
411 .noVNC_button.noVNC_hidden {
417 transform: translateX
(25px);
419 transition: 0.5s ease-in-out
;
421 max-height: 100vh; /* Chrome is buggy with 100% */
433 border: 2px solid
#E0E0E0;
434 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
436 .noVNC_panel.noVNC_open {
439 transform: translateX
(75px);
441 .noVNC_right .noVNC_vcenter {
445 .noVNC_right .noVNC_panel {
446 transform: translateX
(-25px);
448 .noVNC_right .noVNC_panel.noVNC_open {
449 transform: translateX
(-75px);
454 border-top: 1px solid rgb
(192, 192, 192);
462 .noVNC_panel .noVNC_heading {
463 background-color: rgb
(110, 132, 163);
466 /* Compensate for padding in image */
473 .noVNC_panel .noVNC_heading img {
474 vertical-align: bottom
;
485 .noVNC_expander::before {
486 content: url
("../images/expander.svg");
487 display: inline-block
;
489 transition: 0.2s ease-in-out
;
491 .noVNC_expander.noVNC_open::before {
492 transform: rotateZ
(90deg);
494 .noVNC_expander ~ * {
498 background: rgba
(0, 0, 0, 0.05);
501 .noVNC_expander:not(.noVNC_open) ~ * {
505 /* Control bar content */
507 #noVNC_control_bar .noVNC_logo
{
511 :root:not
(.noVNC_connected
) #noVNC_view_drag_button
{
515 /* noVNC Touch Device only buttons */
516 :root:not
(.noVNC_connected
) #noVNC_mobile_buttons
{
519 :root:not
(.noVNC_touch
) #noVNC_mobile_buttons
{
523 #noVNC_keyboardinput {
526 background-color: #fff;
535 /* Extra manual keys */
536 :root:not
(.noVNC_connected
) #noVNC_extra_keys
{
541 background-color: rgb
(92, 92, 92);
546 /* XVP Shutdown/Reboot */
547 :root:not
(.noVNC_connected
) #noVNC_xvp_button
{
556 #noVNC_xvp input
[type
=button
] {
561 :root:not
(.noVNC_connected
) #noVNC_clipboard_button
{
565 /* Full screen, minus padding and left and right margins */
566 max-width: calc
(100vw - 2*15px - 75px - 25px);
568 #noVNC_clipboard_text {
581 #noVNC_setting_port {
584 #noVNC_setting_path {
588 /* Connection Controls */
589 :root:not
(.noVNC_connected
) #noVNC_disconnect_button
{
593 /* ----------------------------------------
595 * ----------------------------------------
604 transform: translateY
(-100%);
608 transition: 0.5s ease-in-out
;
617 justify-content: center
;
618 align-content: center
;
621 word-wrap: break-word
;
624 border-bottom: 1px solid rgba
(0, 0, 0, 0.9);
626 #noVNC_status.noVNC_open
{
627 transform: translateY
(0);
632 #noVNC_status::before
{
634 display: inline-block
;
640 #noVNC_status.noVNC_status_normal
{
641 background: rgba
(128,128,128,0.9);
643 #noVNC_status.noVNC_status_normal::before
{
644 content: url
("../images/info.svg") " ";
646 #noVNC_status.noVNC_status_error
{
647 background: rgba
(200,55,55,0.9);
649 #noVNC_status.noVNC_status_error::before
{
650 content: url
("../images/error.svg") " ";
652 #noVNC_status.noVNC_status_warn
{
653 background: rgba
(180,180,30,0.9);
655 #noVNC_status.noVNC_status_warn::before
{
656 content: url
("../images/warning.svg") " ";
659 /* ----------------------------------------
661 * ----------------------------------------
665 transition: 0.5s ease-in-out
;
667 transform: scale
(0, 0);
671 #noVNC_connect_dlg.noVNC_open
{
672 transform: scale
(1, 1);
676 #noVNC_connect_dlg .noVNC_logo
{
677 transition: 0.5s ease-in-out
;
686 @media (max-width: 440px) {
688 max-width: calc
(100vw - 100px);
690 #noVNC_connect_dlg .noVNC_logo
{
691 font-size: calc
(25vw - 30px);
694 #noVNC_connect_button {
700 background-color: rgb
(110, 132, 163);
706 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
708 #noVNC_connect_button div
{
711 border: 1px solid rgb
(83, 99, 122);
712 border-bottom-width: 2px;
714 background: linear-gradient
(to top
, rgb
(110, 132, 163), rgb
(99, 119, 147));
716 /* This avoids it jumping around when :active */
717 vertical-align: middle
;
719 #noVNC_connect_button div:active
{
720 border-bottom-width: 1px;
723 :root:not
(.noVNC_touch
) #noVNC_connect_button
div:hover
{
724 background: linear-gradient
(to top
, rgb
(110, 132, 163), rgb
(105, 125, 155));
727 #noVNC_connect_button img
{
728 vertical-align: bottom
;
732 /* ----------------------------------------
734 * ----------------------------------------
737 #noVNC_password_dlg {
740 transform: translateY
(-50px);
742 #noVNC_password_dlg.noVNC_open
{
743 transform: translateY
(0);
745 #noVNC_password_dlg ul
{
751 /* ----------------------------------------
753 * ----------------------------------------
756 /* Transition screen */
767 background: rgba
(0, 0, 0, 0.5);
772 justify-content: center
;
773 flex-direction: column
;
775 :root
.noVNC_connecting #noVNC_transition
,
776 :root
.noVNC_disconnecting #noVNC_transition
,
777 :root
.noVNC_reconnecting #noVNC_transition
{
780 :root:not
(.noVNC_reconnecting
) #noVNC_cancel_reconnect_button
{
783 #noVNC_transition_text {
791 background-color: #313131;
792 border-bottom-right-radius: 800px 600px;
793 /*border-top-left-radius: 800px 600px;*/
801 background-color: rgb
(40, 40, 40);
803 :root:not
(.noVNC_connected
) #noVNC_screen
{
807 /* Do not set width/height for VNC_canvas or incorrect
808 * scaling will occur. Canvas size depends on remote VNC
809 * settings and noVNC settings. */
814 /*Default noVNC logo.*/
815 /* From: http://fonts.googleapis.com/css?family=Orbitron:700 */
817 font-family: 'Orbitron';
820 src: local
('?'), url
('Orbitron700.woff') format
('woff'),
821 url
('Orbitron700.ttf') format
('truetype');
826 font-family: 'Orbitron', 'OrbitronTTF', sans-serif
;
828 text-shadow: 0.1em 0.1em 0 black
;
838 /* ----------------------------------------
840 * ----------------------------------------
843 @media screen and
(max-width: 640px){
849 @media screen and
(min-width: 321px) and
(max-width: 480px) {
855 @media screen and
(max-width: 320px) {