3 * Copyright (C) 2019 The noVNC Authors
4 * noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
5 * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
13 * 50: Transition blocker
14 * 60: Connection popups
17 * 1000: Javascript crash
19 * 10000: Max (used for polyfills)
25 font-family: Helvetica
;
26 /*Background image with light grey curve.*/
27 background-color:#494949;
28 background-repeat:no-repeat
;
29 background-position:right bottom
;
38 .noVNC_only_touch.noVNC_hidden {
43 color: rgb
(128, 128, 128);
46 /* ----------------------------------------
48 * ----------------------------------------
54 .noVNC_spinner, .noVNC_spinner::before, .noVNC_spinner::after {
58 box-shadow: -60px 10px 0 rgba
(255, 255, 255, 0);
59 animation: noVNC_spinner
1.0s linear infinite
;
61 .noVNC_spinner::before {
66 animation-delay: -0.1s;
68 .noVNC_spinner::after {
73 animation-delay: 0.1s;
75 @keyframes noVNC_spinner
{
76 0% { box-shadow: -60px 10px 0 rgba
(255, 255, 255, 0); width: 20px; }
77 25% { box-shadow: 20px 10px 0 rgba
(255, 255, 255, 1); width: 10px; }
78 50% { box-shadow: 60px 10px 0 rgba
(255, 255, 255, 0); width: 10px; }
81 /* ----------------------------------------
83 * ----------------------------------------
86 input
[type
=input
], input
[type
=password
], input
[type
=number
],
87 input:not
([type
]), textarea
{
88 /* Disable default rendering */
89 -webkit-appearance: none
;
90 -moz-appearance: none
;
95 border: 1px solid rgb
(192, 192, 192);
98 background: linear-gradient
(to top
, rgb
(255, 255, 255) 80%, rgb
(240, 240, 240));
101 input
[type
=button
], input
[type
=submit
], select
{
102 /* Disable default rendering */
103 -webkit-appearance: none
;
104 -moz-appearance: none
;
109 border: 1px solid rgb
(192, 192, 192);
110 border-bottom-width: 2px;
113 background: linear-gradient
(to top
, rgb
(255, 255, 255), rgb
(240, 240, 240));
115 /* This avoids it jumping around when :active */
116 vertical-align: middle
;
119 input
[type
=button
], input
[type
=submit
] {
129 input
[type
=input
]:focus
, input
[type
=password
]:focus
,
130 input:not
([type
]):focus
, input
[type
=button
]:focus
,
131 input
[type
=submit
]:focus
,
132 textarea:focus
, select:focus
{
133 box-shadow: 0px 0px 3px rgba
(74, 144, 217, 0.5);
134 border-color: rgb
(74, 144, 217);
138 input
[type
=button
]::-moz-focus-inner
,
139 input
[type
=submit
]::-moz-focus-inner
{
143 input
[type
=input
]:disabled
, input
[type
=password
]:disabled
,
144 input:not
([type
]):disabled
, input
[type
=button
]:disabled
,
145 input
[type
=submit
]:disabled
, input
[type
=number
]:disabled
,
146 textarea:disabled
, select:disabled
{
147 color: rgb
(128, 128, 128);
148 background: rgb
(240, 240, 240);
151 input
[type
=button
]:active
, input
[type
=submit
]:active
,
153 border-bottom-width: 1px;
157 :root:not
(.noVNC_touch
) input
[type
=button
]:hover:not
(:disabled
),
158 :root:not
(.noVNC_touch
) input
[type
=submit
]:hover:not
(:disabled
),
159 :root:not
(.noVNC_touch
) select:hover:not
(:disabled
) {
160 background: linear-gradient
(to top
, rgb
(255, 255, 255), rgb
(250, 250, 250));
163 /* ----------------------------------------
164 * WebKit centering hacks
165 * ----------------------------------------
170 * This is a workaround because webkit misrenders transforms and
171 * uses non-integer coordinates, resulting in blurry content.
172 * Ideally we'd use "top: 50%; transform: translateY(-50%);" on
173 * the objects instead.
177 justify-content: center
;
183 pointer-events: none
;
186 pointer-events: auto
;
190 flex-direction: column
;
191 justify-content: center
;
196 pointer-events: none
;
199 pointer-events: auto
;
202 /* ----------------------------------------
204 * ----------------------------------------
207 .noVNC_connect_layer {
211 /* ----------------------------------------
213 * ----------------------------------------
216 #noVNC_fallback_error {
220 #noVNC_fallback_error.noVNC_open
{
224 #noVNC_fallback_error > div
{
228 transition: 0.5s ease-in-out
;
230 transform: translateY
(-50px);
238 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
239 background: rgba
(200,55,55,0.8);
241 #noVNC_fallback_error.noVNC_open
> div
{
242 transform: translateY
(0);
246 #noVNC_fallback_errormsg {
250 #noVNC_fallback_errormsg .noVNC_message
{
251 display: inline-block
;
253 font-family: monospace
;
254 white-space: pre-wrap
;
257 #noVNC_fallback_error .noVNC_location
{
260 color: rgba
(255, 255, 255, 0.8);
263 #noVNC_fallback_error .noVNC_stack
{
269 font-family: monospace
;
271 border: 1px solid rgba
(0, 0, 0, 0.5);
272 background: rgba
(0, 0, 0, 0.2);
276 /* ----------------------------------------
278 * ----------------------------------------
281 #noVNC_control_bar_anchor {
282 /* The anchor is needed to get z-stacking to work */
286 transition: 0.5s ease-in-out
;
288 /* Edge misrenders animations wihthout this */
289 transform: translateX
(0);
291 :root
.noVNC_connected #noVNC_control_bar_anchor
.noVNC_idle
{
294 #noVNC_control_bar_anchor.noVNC_right
{
303 transition: 0.5s ease-in-out
;
305 background-color: rgb
(110, 132, 163);
306 border-radius: 0 10px 10px 0;
309 #noVNC_control_bar.noVNC_open
{
310 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
313 #noVNC_control_bar::before
{
314 /* This extra element is to get a proper shadow */
321 transition: box-shadow
0.5s ease-in-out
;
323 #noVNC_control_bar.noVNC_open::before
{
324 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
326 .noVNC_right #noVNC_control_bar {
328 border-radius: 10px 0 0 10px;
330 .noVNC_right #noVNC_control_bar.noVNC_open {
333 .noVNC_right #noVNC_control_bar::before {
337 #noVNC_control_bar_handle {
341 transform: translateY
(35px);
342 width: calc
(100% + 30px);
347 background-color: rgb
(83, 99, 122);
348 background-image: url
("../images/handle_bg.svg");
349 background-repeat: no-repeat
;
350 background-position: right
;
351 box-shadow: 3px 3px 0px rgba
(0, 0, 0, 0.5);
353 #noVNC_control_bar_handle:after
{
355 transition: transform
0.5s ease-in-out
;
356 background: url
("../images/handle.svg");
358 top: 22px; /* (50px-6px)/2 */
363 #noVNC_control_bar.noVNC_open #
noVNC_control_bar_handle:after
{
364 transform: translateX
(1px) rotate
(180deg);
366 :root:not
(.noVNC_connected
) #noVNC_control_bar_handle
{
369 .noVNC_right #noVNC_control_bar_handle {
370 background-position: left
;
372 .noVNC_right #noVNC_control_bar_handle:after {
375 transform: translateX
(1px) rotate
(180deg);
377 .noVNC_right #noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after {
380 #noVNC_control_bar_handle div
{
387 :root:not
(.noVNC_touch
) #noVNC_control_bar_handle div
{
390 .noVNC_right #noVNC_control_bar_handle div {
395 #noVNC_control_bar .noVNC_scroll
{
396 max-height: 100vh; /* Chrome is buggy with 100% */
399 padding: 0 10px 0 5px;
401 .noVNC_right #noVNC_control_bar .noVNC_scroll {
402 padding: 0 5px 0 10px;
405 /* Control bar hint */
406 #noVNC_control_bar_hint {
408 left: calc
(100vw - 50px);
411 transform: translateY
(-50%) scale
(0);
418 transition: 0.2s ease-in-out
;
419 background: transparent
;
420 box-shadow: 0 0 10px black
, inset
0 0 10px 10px rgba
(110, 132, 163, 0.8);
422 transition-delay: 0s;
424 #noVNC_control_bar_anchor.noVNC_right #noVNC_control_bar_hint
{
426 right: calc
(100vw - 50px);
428 #noVNC_control_bar_hint.noVNC_active
{
431 transition-delay: 0.2s;
432 transform: translateY
(-50%) scale
(1);
435 /* General button style */
440 vertical-align: middle
;
441 border:1px solid rgba
(255, 255, 255, 0.2);
444 .noVNC_button.noVNC_selected {
445 border-color: rgba
(0, 0, 0, 0.8);
446 background: rgba
(0, 0, 0, 0.5);
448 .noVNC_button:disabled {
451 .noVNC_button:focus {
454 .noVNC_button:active {
458 /* Android browsers don't properly update hover state if touch events
459 * are intercepted, but focus should be safe to display */
460 :root:not
(.noVNC_touch
) .noVNC_button
.noVNC_selected:hover
,
461 .noVNC_button.noVNC_selected:focus {
462 border-color: rgba
(0, 0, 0, 0.4);
463 background: rgba
(0, 0, 0, 0.2);
465 :root:not
(.noVNC_touch
) .noVNC_button:hover
,
466 .noVNC_button:focus {
467 background: rgba
(255, 255, 255, 0.2);
469 .noVNC_button.noVNC_hidden {
475 transform: translateX
(25px);
477 transition: 0.5s ease-in-out
;
479 max-height: 100vh; /* Chrome is buggy with 100% */
491 border: 2px solid
#E0E0E0;
492 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
494 .noVNC_panel.noVNC_open {
497 transform: translateX
(75px);
499 .noVNC_right .noVNC_vcenter {
503 .noVNC_right .noVNC_panel {
504 transform: translateX
(-25px);
506 .noVNC_right .noVNC_panel.noVNC_open {
507 transform: translateX
(-75px);
512 border-top: 1px solid rgb
(192, 192, 192);
520 .noVNC_panel .noVNC_heading {
521 background-color: rgb
(110, 132, 163);
524 /* Compensate for padding in image */
531 .noVNC_panel .noVNC_heading img {
532 vertical-align: bottom
;
543 .noVNC_expander::before {
544 content: url
("../images/expander.svg");
545 display: inline-block
;
547 transition: 0.2s ease-in-out
;
549 .noVNC_expander.noVNC_open::before {
550 transform: rotateZ
(90deg);
552 .noVNC_expander ~ * {
556 background: rgba
(0, 0, 0, 0.05);
559 .noVNC_expander:not(.noVNC_open) ~ * {
563 /* Control bar content */
565 #noVNC_control_bar .noVNC_logo
{
569 :root:not
(.noVNC_connected
) #noVNC_view_drag_button
{
573 /* noVNC Touch Device only buttons */
574 :root:not
(.noVNC_connected
) #noVNC_mobile_buttons
{
577 :root:not
(.noVNC_touch
) #noVNC_mobile_buttons
{
581 /* Extra manual keys */
582 :root:not
(.noVNC_connected
) #noVNC_extra_keys
{
587 background-color: rgb
(92, 92, 92);
592 /* Shutdown/Reboot */
593 :root:not
(.noVNC_connected
) #noVNC_power_button
{
598 #noVNC_power_buttons {
602 #noVNC_power input
[type
=button
] {
607 :root:not
(.noVNC_connected
) #noVNC_clipboard_button
{
611 /* Full screen, minus padding and left and right margins */
612 max-width: calc
(100vw - 2*15px - 75px - 25px);
614 #noVNC_clipboard_text {
627 #noVNC_setting_port {
630 #noVNC_setting_path {
636 .noVNC_version_wrapper {
644 /* Connection Controls */
645 :root:not
(.noVNC_connected
) #noVNC_disconnect_button
{
649 /* ----------------------------------------
651 * ----------------------------------------
660 transform: translateY
(-100%);
664 transition: 0.5s ease-in-out
;
673 justify-content: center
;
674 align-content: center
;
677 word-wrap: break-word
;
680 border-bottom: 1px solid rgba
(0, 0, 0, 0.9);
682 #noVNC_status.noVNC_open
{
683 transform: translateY
(0);
688 #noVNC_status::before
{
690 display: inline-block
;
696 #noVNC_status.noVNC_status_normal
{
697 background: rgba
(128,128,128,0.9);
699 #noVNC_status.noVNC_status_normal::before
{
700 content: url
("../images/info.svg") " ";
702 #noVNC_status.noVNC_status_error
{
703 background: rgba
(200,55,55,0.9);
705 #noVNC_status.noVNC_status_error::before
{
706 content: url
("../images/error.svg") " ";
708 #noVNC_status.noVNC_status_warn
{
709 background: rgba
(180,180,30,0.9);
711 #noVNC_status.noVNC_status_warn::before
{
712 content: url
("../images/warning.svg") " ";
715 /* ----------------------------------------
717 * ----------------------------------------
721 transition: 0.5s ease-in-out
;
723 transform: scale
(0, 0);
727 #noVNC_connect_dlg.noVNC_open
{
728 transform: scale
(1, 1);
732 #noVNC_connect_dlg .noVNC_logo
{
733 transition: 0.5s ease-in-out
;
742 @media (max-width: 440px) {
744 max-width: calc
(100vw - 100px);
746 #noVNC_connect_dlg .noVNC_logo
{
747 font-size: calc
(25vw - 30px);
750 #noVNC_connect_button {
756 background-color: rgb
(110, 132, 163);
762 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
764 #noVNC_connect_button div
{
767 border: 1px solid rgb
(83, 99, 122);
768 border-bottom-width: 2px;
770 background: linear-gradient
(to top
, rgb
(110, 132, 163), rgb
(99, 119, 147));
772 /* This avoids it jumping around when :active */
773 vertical-align: middle
;
775 #noVNC_connect_button div:active
{
776 border-bottom-width: 1px;
779 :root:not
(.noVNC_touch
) #noVNC_connect_button
div:hover
{
780 background: linear-gradient
(to top
, rgb
(110, 132, 163), rgb
(105, 125, 155));
783 #noVNC_connect_button img
{
784 vertical-align: bottom
;
788 /* ----------------------------------------
790 * ----------------------------------------
793 #noVNC_password_dlg {
796 transform: translateY
(-50px);
798 #noVNC_password_dlg.noVNC_open
{
799 transform: translateY
(0);
801 #noVNC_password_dlg ul
{
807 /* ----------------------------------------
809 * ----------------------------------------
812 /* Transition screen */
823 background: rgba
(0, 0, 0, 0.5);
828 justify-content: center
;
829 flex-direction: column
;
831 :root
.noVNC_loading #noVNC_transition
,
832 :root
.noVNC_connecting #noVNC_transition
,
833 :root
.noVNC_disconnecting #noVNC_transition
,
834 :root
.noVNC_reconnecting #noVNC_transition
{
837 :root:not
(.noVNC_reconnecting
) #noVNC_cancel_reconnect_button
{
840 #noVNC_transition_text {
848 background-color: #313131;
849 border-bottom-right-radius: 800px 600px;
850 /*border-top-left-radius: 800px 600px;*/
853 #noVNC_keyboardinput {
856 background-color: #fff;
865 /*Default noVNC logo.*/
866 /* From: http://fonts.googleapis.com/css?family=Orbitron:700 */
868 font-family: 'Orbitron';
871 src: local
('?'), url
('Orbitron700.woff') format
('woff'),
872 url
('Orbitron700.ttf') format
('truetype');
877 font-family: 'Orbitron', 'OrbitronTTF', sans-serif
;
879 text-shadow: 0.1em 0.1em 0 black
;
889 /* ----------------------------------------
891 * ----------------------------------------
894 @media screen and
(max-width: 640px){
900 @media screen and
(min-width: 321px) and
(max-width: 480px) {
906 @media screen and
(max-width: 320px) {