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 * ----------------------------------------
88 input
[type
=datetime-local
],
100 /* Disable default rendering */
101 -webkit-appearance: none
;
102 -moz-appearance: none
;
107 border: 1px solid rgb
(192, 192, 192);
110 background: linear-gradient
(to top
, rgb
(255, 255, 255) 80%, rgb
(240, 240, 240));
118 /* Disable default rendering */
119 -webkit-appearance: none
;
120 -moz-appearance: none
;
125 border: 1px solid rgb
(192, 192, 192);
126 border-bottom-width: 2px;
129 background: linear-gradient
(to top
, rgb
(255, 255, 255), rgb
(240, 240, 240));
131 /* This avoids it jumping around when :active */
132 vertical-align: middle
;
148 input:not
([type
]):focus
,
149 input
[type
=button
]:focus
,
150 input
[type
=color
]:focus
,
151 input
[type
=date
]:focus
,
152 input
[type
=datetime-local
]:focus
,
153 input
[type
=email
]:focus
,
154 input
[type
=month
]:focus
,
155 input
[type
=number
]:focus
,
156 input
[type
=password
]:focus
,
157 input
[type
=reset
]:focus
,
158 input
[type
=search
]:focus
,
159 input
[type
=submit
]:focus
,
160 input
[type
=tel
]:focus
,
161 input
[type
=text
]:focus
,
162 input
[type
=time
]:focus
,
163 input
[type
=url
]:focus
,
164 input
[type
=week
]:focus
,
167 box-shadow: 0px 0px 3px rgba
(74, 144, 217, 0.5);
168 border-color: rgb
(74, 144, 217);
172 input
[type
=button
]::-moz-focus-inner
,
173 input
[type
=color
]::-moz-focus-inner
,
174 input
[type
=reset
]::-moz-focus-inner
,
175 input
[type
=submit
]::-moz-focus-inner
{
179 input:not
([type
]):disabled
,
180 input
[type
=button
]:disabled
,
181 input
[type
=color
]:disabled
,
182 input
[type
=date
]:disabled
,
183 input
[type
=datetime-local
]:disabled
,
184 input
[type
=email
]:disabled
,
185 input
[type
=month
]:disabled
,
186 input
[type
=number
]:disabled
,
187 input
[type
=password
]:disabled
,
188 input
[type
=reset
]:disabled
,
189 input
[type
=search
]:disabled
,
190 input
[type
=submit
]:disabled
,
191 input
[type
=tel
]:disabled
,
192 input
[type
=text
]:disabled
,
193 input
[type
=time
]:disabled
,
194 input
[type
=url
]:disabled
,
195 input
[type
=week
]:disabled
,
198 color: rgb
(128, 128, 128);
199 background: rgb
(240, 240, 240);
202 input
[type
=button
]:active
,
203 input
[type
=color
]:active
,
204 input
[type
=reset
]:active
,
205 input
[type
=submit
]:active
,
207 border-bottom-width: 1px;
211 :root:not
(.noVNC_touch
) input
[type
=button
]:hover:not
(:disabled
),
212 :root:not
(.noVNC_touch
) input
[type
=color
]:hover:not
(:disabled
),
213 :root:not
(.noVNC_touch
) input
[type
=reset
]:hover:not
(:disabled
),
214 :root:not
(.noVNC_touch
) input
[type
=submit
]:hover:not
(:disabled
),
215 :root:not
(.noVNC_touch
) select:hover:not
(:disabled
) {
216 background: linear-gradient
(to top
, rgb
(255, 255, 255), rgb
(250, 250, 250));
219 /* ----------------------------------------
220 * WebKit centering hacks
221 * ----------------------------------------
226 * This is a workaround because webkit misrenders transforms and
227 * uses non-integer coordinates, resulting in blurry content.
228 * Ideally we'd use "top: 50%; transform: translateY(-50%);" on
229 * the objects instead.
233 justify-content: center
;
239 pointer-events: none
;
242 pointer-events: auto
;
246 flex-direction: column
;
247 justify-content: center
;
252 pointer-events: none
;
255 pointer-events: auto
;
258 /* ----------------------------------------
260 * ----------------------------------------
263 .noVNC_connect_layer {
267 /* ----------------------------------------
269 * ----------------------------------------
272 #noVNC_fallback_error {
276 #noVNC_fallback_error.noVNC_open
{
280 #noVNC_fallback_error > div
{
284 transition: 0.5s ease-in-out
;
286 transform: translateY
(-50px);
294 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
295 background: rgba
(200,55,55,0.8);
297 #noVNC_fallback_error.noVNC_open
> div
{
298 transform: translateY
(0);
302 #noVNC_fallback_errormsg {
306 #noVNC_fallback_errormsg .noVNC_message
{
307 display: inline-block
;
309 font-family: monospace
;
310 white-space: pre-wrap
;
313 #noVNC_fallback_error .noVNC_location
{
316 color: rgba
(255, 255, 255, 0.8);
319 #noVNC_fallback_error .noVNC_stack
{
325 font-family: monospace
;
327 border: 1px solid rgba
(0, 0, 0, 0.5);
328 background: rgba
(0, 0, 0, 0.2);
332 /* ----------------------------------------
334 * ----------------------------------------
337 #noVNC_control_bar_anchor {
338 /* The anchor is needed to get z-stacking to work */
342 transition: 0.5s ease-in-out
;
344 /* Edge misrenders animations wihthout this */
345 transform: translateX
(0);
347 :root
.noVNC_connected #noVNC_control_bar_anchor
.noVNC_idle
{
350 #noVNC_control_bar_anchor.noVNC_right
{
359 transition: 0.5s ease-in-out
;
361 background-color: rgb
(110, 132, 163);
362 border-radius: 0 10px 10px 0;
365 #noVNC_control_bar.noVNC_open
{
366 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
369 #noVNC_control_bar::before
{
370 /* This extra element is to get a proper shadow */
377 transition: box-shadow
0.5s ease-in-out
;
379 #noVNC_control_bar.noVNC_open::before
{
380 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
382 .noVNC_right #noVNC_control_bar {
384 border-radius: 10px 0 0 10px;
386 .noVNC_right #noVNC_control_bar.noVNC_open {
389 .noVNC_right #noVNC_control_bar::before {
393 #noVNC_control_bar_handle {
397 transform: translateY
(35px);
398 width: calc
(100% + 30px);
403 background-color: rgb
(83, 99, 122);
404 background-image: url
("../images/handle_bg.svg");
405 background-repeat: no-repeat
;
406 background-position: right
;
407 box-shadow: 3px 3px 0px rgba
(0, 0, 0, 0.5);
409 #noVNC_control_bar_handle:after
{
411 transition: transform
0.5s ease-in-out
;
412 background: url
("../images/handle.svg");
414 top: 22px; /* (50px-6px)/2 */
419 #noVNC_control_bar.noVNC_open #
noVNC_control_bar_handle:after
{
420 transform: translateX
(1px) rotate
(180deg);
422 :root:not
(.noVNC_connected
) #noVNC_control_bar_handle
{
425 .noVNC_right #noVNC_control_bar_handle {
426 background-position: left
;
428 .noVNC_right #noVNC_control_bar_handle:after {
431 transform: translateX
(1px) rotate
(180deg);
433 .noVNC_right #noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after {
436 #noVNC_control_bar_handle div
{
443 :root:not
(.noVNC_touch
) #noVNC_control_bar_handle div
{
446 .noVNC_right #noVNC_control_bar_handle div {
451 #noVNC_control_bar .noVNC_scroll
{
452 max-height: 100vh; /* Chrome is buggy with 100% */
455 padding: 0 10px 0 5px;
457 .noVNC_right #noVNC_control_bar .noVNC_scroll {
458 padding: 0 5px 0 10px;
461 /* Control bar hint */
462 #noVNC_control_bar_hint {
464 left: calc
(100vw - 50px);
467 transform: translateY
(-50%) scale
(0);
474 transition: 0.2s ease-in-out
;
475 background: transparent
;
476 box-shadow: 0 0 10px black
, inset
0 0 10px 10px rgba
(110, 132, 163, 0.8);
478 transition-delay: 0s;
480 #noVNC_control_bar_anchor.noVNC_right #noVNC_control_bar_hint
{
482 right: calc
(100vw - 50px);
484 #noVNC_control_bar_hint.noVNC_active
{
487 transition-delay: 0.2s;
488 transform: translateY
(-50%) scale
(1);
491 /* General button style */
496 vertical-align: middle
;
497 border:1px solid rgba
(255, 255, 255, 0.2);
500 .noVNC_button.noVNC_selected {
501 border-color: rgba
(0, 0, 0, 0.8);
502 background: rgba
(0, 0, 0, 0.5);
504 .noVNC_button:disabled {
507 .noVNC_button:focus {
510 .noVNC_button:active {
514 /* Android browsers don't properly update hover state if touch events
515 * are intercepted, but focus should be safe to display */
516 :root:not
(.noVNC_touch
) .noVNC_button
.noVNC_selected:hover
,
517 .noVNC_button.noVNC_selected:focus {
518 border-color: rgba
(0, 0, 0, 0.4);
519 background: rgba
(0, 0, 0, 0.2);
521 :root:not
(.noVNC_touch
) .noVNC_button:hover
,
522 .noVNC_button:focus {
523 background: rgba
(255, 255, 255, 0.2);
525 .noVNC_button.noVNC_hidden {
531 transform: translateX
(25px);
533 transition: 0.5s ease-in-out
;
535 max-height: 100vh; /* Chrome is buggy with 100% */
547 border: 2px solid
#E0E0E0;
548 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
550 .noVNC_panel.noVNC_open {
553 transform: translateX
(75px);
555 .noVNC_right .noVNC_vcenter {
559 .noVNC_right .noVNC_panel {
560 transform: translateX
(-25px);
562 .noVNC_right .noVNC_panel.noVNC_open {
563 transform: translateX
(-75px);
568 border-top: 1px solid rgb
(192, 192, 192);
576 .noVNC_panel .noVNC_heading {
577 background-color: rgb
(110, 132, 163);
580 /* Compensate for padding in image */
587 .noVNC_panel .noVNC_heading img {
588 vertical-align: bottom
;
599 .noVNC_expander::before {
600 content: url
("../images/expander.svg");
601 display: inline-block
;
603 transition: 0.2s ease-in-out
;
605 .noVNC_expander.noVNC_open::before {
606 transform: rotateZ
(90deg);
608 .noVNC_expander ~ * {
612 background: rgba
(0, 0, 0, 0.05);
615 .noVNC_expander:not(.noVNC_open) ~ * {
619 /* Control bar content */
621 #noVNC_control_bar .noVNC_logo
{
625 :root:not
(.noVNC_connected
) #noVNC_view_drag_button
{
629 /* noVNC Touch Device only buttons */
630 :root:not
(.noVNC_connected
) #noVNC_mobile_buttons
{
633 :root:not
(.noVNC_touch
) #noVNC_mobile_buttons
{
637 /* Extra manual keys */
638 :root:not
(.noVNC_connected
) #noVNC_toggle_extra_keys_button
{
643 background-color: rgb
(92, 92, 92);
648 /* Shutdown/Reboot */
649 :root:not
(.noVNC_connected
) #noVNC_power_button
{
654 #noVNC_power_buttons {
658 #noVNC_power input
[type
=button
] {
663 :root:not
(.noVNC_connected
) #noVNC_clipboard_button
{
667 /* Full screen, minus padding and left and right margins */
668 max-width: calc
(100vw - 2*15px - 75px - 25px);
670 #noVNC_clipboard_text {
683 #noVNC_setting_port {
686 #noVNC_setting_path {
692 .noVNC_version_wrapper {
700 /* Connection Controls */
701 :root:not
(.noVNC_connected
) #noVNC_disconnect_button
{
705 /* ----------------------------------------
707 * ----------------------------------------
716 transform: translateY
(-100%);
720 transition: 0.5s ease-in-out
;
729 justify-content: center
;
730 align-content: center
;
733 word-wrap: break-word
;
736 border-bottom: 1px solid rgba
(0, 0, 0, 0.9);
738 #noVNC_status.noVNC_open
{
739 transform: translateY
(0);
744 #noVNC_status::before
{
746 display: inline-block
;
752 #noVNC_status.noVNC_status_normal
{
753 background: rgba
(128,128,128,0.9);
755 #noVNC_status.noVNC_status_normal::before
{
756 content: url
("../images/info.svg") " ";
758 #noVNC_status.noVNC_status_error
{
759 background: rgba
(200,55,55,0.9);
761 #noVNC_status.noVNC_status_error::before
{
762 content: url
("../images/error.svg") " ";
764 #noVNC_status.noVNC_status_warn
{
765 background: rgba
(180,180,30,0.9);
767 #noVNC_status.noVNC_status_warn::before
{
768 content: url
("../images/warning.svg") " ";
771 /* ----------------------------------------
773 * ----------------------------------------
777 transition: 0.5s ease-in-out
;
779 transform: scale
(0, 0);
783 #noVNC_connect_dlg.noVNC_open
{
784 transform: scale
(1, 1);
788 #noVNC_connect_dlg .noVNC_logo
{
789 transition: 0.5s ease-in-out
;
798 @media (max-width: 440px) {
800 max-width: calc
(100vw - 100px);
802 #noVNC_connect_dlg .noVNC_logo
{
803 font-size: calc
(25vw - 30px);
806 #noVNC_connect_button {
812 background-color: rgb
(110, 132, 163);
818 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
820 #noVNC_connect_button div
{
823 border: 1px solid rgb
(83, 99, 122);
824 border-bottom-width: 2px;
826 background: linear-gradient
(to top
, rgb
(110, 132, 163), rgb
(99, 119, 147));
828 /* This avoids it jumping around when :active */
829 vertical-align: middle
;
831 #noVNC_connect_button div:active
{
832 border-bottom-width: 1px;
835 :root:not
(.noVNC_touch
) #noVNC_connect_button
div:hover
{
836 background: linear-gradient
(to top
, rgb
(110, 132, 163), rgb
(105, 125, 155));
839 #noVNC_connect_button img
{
840 vertical-align: bottom
;
844 /* ----------------------------------------
846 * ----------------------------------------
849 #noVNC_credentials_dlg {
852 transform: translateY
(-50px);
854 #noVNC_credentials_dlg.noVNC_open
{
855 transform: translateY
(0);
857 #noVNC_credentials_dlg ul
{
867 /* ----------------------------------------
869 * ----------------------------------------
872 /* Transition screen */
883 background: rgba
(0, 0, 0, 0.5);
888 justify-content: center
;
889 flex-direction: column
;
891 :root
.noVNC_loading #noVNC_transition
,
892 :root
.noVNC_connecting #noVNC_transition
,
893 :root
.noVNC_disconnecting #noVNC_transition
,
894 :root
.noVNC_reconnecting #noVNC_transition
{
897 :root:not
(.noVNC_reconnecting
) #noVNC_cancel_reconnect_button
{
900 #noVNC_transition_text {
908 background-color: #313131;
909 border-bottom-right-radius: 800px 600px;
910 /*border-top-left-radius: 800px 600px;*/
913 #noVNC_keyboardinput {
916 background-color: #fff;
925 /*Default noVNC logo.*/
926 /* From: http://fonts.googleapis.com/css?family=Orbitron:700 */
928 font-family: 'Orbitron';
931 src: local
('?'), url
('Orbitron700.woff') format
('woff'),
932 url
('Orbitron700.ttf') format
('truetype');
937 font-family: 'Orbitron', 'OrbitronTTF', sans-serif
;
939 text-shadow: 0.1em 0.1em 0 black
;
949 /* ----------------------------------------
951 * ----------------------------------------
954 @media screen and
(max-width: 640px){
960 @media screen and
(min-width: 321px) and
(max-width: 480px) {
966 @media screen and
(max-width: 320px) {