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 {
45 color: rgb
(128, 128, 128);
48 /* ----------------------------------------
50 * ----------------------------------------
56 .noVNC_spinner, .noVNC_spinner::before, .noVNC_spinner::after {
60 animation: noVNC_spinner
1.0s linear infinite
;
62 .noVNC_spinner::before {
67 animation-delay: -0.1s;
69 .noVNC_spinner::after {
74 animation-delay: 0.1s;
76 @keyframes noVNC_spinner
{
77 0% { box-shadow: -60px 10px 0 rgba
(255, 255, 255, 0); width: 20px; }
78 25% { box-shadow: 20px 10px 0 rgba
(255, 255, 255, 1); width: 10px; }
79 50% { box-shadow: 60px 10px 0 rgba
(255, 255, 255, 0); width: 10px; }
82 /* ----------------------------------------
84 * ----------------------------------------
87 input
[type
=input
], input
[type
=password
], input
[type
=number
],
88 input:not
([type
]), textarea
{
89 /* Disable default rendering */
90 -webkit-appearance: none
;
91 -moz-appearance: none
;
96 border: 1px solid rgb
(192, 192, 192);
99 background: linear-gradient
(to top
, rgb
(255, 255, 255) 80%, rgb
(240, 240, 240));
102 input
[type
=button
], input
[type
=submit
], select
{
103 /* Disable default rendering */
104 -webkit-appearance: none
;
105 -moz-appearance: none
;
110 border: 1px solid rgb
(192, 192, 192);
111 border-bottom-width: 2px;
114 background: linear-gradient
(to top
, rgb
(255, 255, 255), rgb
(240, 240, 240));
116 /* This avoids it jumping around when :active */
117 vertical-align: middle
;
120 input
[type
=button
], input
[type
=submit
] {
130 input
[type
=input
]:focus
, input
[type
=password
]:focus
,
131 input:not
([type
]):focus
, input
[type
=button
]:focus
,
132 input
[type
=submit
]:focus
,
133 textarea:focus
, select:focus
{
134 box-shadow: 0px 0px 3px rgba
(74, 144, 217, 0.5);
135 border-color: rgb
(74, 144, 217);
139 input
[type
=button
]::-moz-focus-inner
,
140 input
[type
=submit
]::-moz-focus-inner
{
144 input
[type
=input
]:disabled
, input
[type
=password
]:disabled
,
145 input:not
([type
]):disabled
, input
[type
=button
]:disabled
,
146 input
[type
=submit
]:disabled
, input
[type
=number
]:disabled
,
147 textarea:disabled
, select:disabled
{
148 color: rgb
(128, 128, 128);
149 background: rgb
(240, 240, 240);
152 input
[type
=button
]:active
, input
[type
=submit
]:active
,
154 border-bottom-width: 1px;
158 :root:not
(.noVNC_touch
) input
[type
=button
]:hover:not
(:disabled
),
159 :root:not
(.noVNC_touch
) input
[type
=submit
]:hover:not
(:disabled
),
160 :root:not
(.noVNC_touch
) select:hover:not
(:disabled
) {
161 background: linear-gradient
(to top
, rgb
(255, 255, 255), rgb
(250, 250, 250));
164 /* ----------------------------------------
165 * WebKit centering hacks
166 * ----------------------------------------
171 * This is a workaround because webkit misrenders transforms and
172 * uses non-integer coordinates, resulting in blurry content.
173 * Ideally we'd use "top: 50%; transform: translateY(-50%);" on
174 * the objects instead.
178 justify-content: center
;
184 pointer-events: none
;
187 pointer-events: auto
;
191 flex-direction: column
;
192 justify-content: center
;
197 pointer-events: none
;
200 pointer-events: auto
;
203 /* ----------------------------------------
205 * ----------------------------------------
208 .noVNC_connect_layer {
212 /* ----------------------------------------
214 * ----------------------------------------
217 #noVNC_fallback_error {
221 transform: translate
(-50%, -50px);
222 transition: 0.5s ease-in-out
;
233 word-wrap: break-word
;
237 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
238 background: rgba
(200,55,55,0.8);
240 #noVNC_fallback_error.noVNC_open
{
241 transform: translate
(-50%, 0);
246 #noVNC_fallback_errormsg {
250 #noVNC_fallback_error .noVNC_location
{
253 color: rgba
(255, 255, 255, 0.8);
256 #noVNC_fallback_error .noVNC_stack
{
262 border: 1px solid rgba
(0, 0, 0, 0.5);
263 background: rgba
(0, 0, 0, 0.2);
266 /* ----------------------------------------
268 * ----------------------------------------
271 #noVNC_control_bar_anchor {
272 /* The anchor is needed to get z-stacking to work */
276 transition: 0.5s ease-in-out
;
278 /* Edge misrenders animations wihthout this */
279 transform: translateX
(0);
281 :root
.noVNC_connected #noVNC_control_bar_anchor
.noVNC_idle
{
284 #noVNC_control_bar_anchor.noVNC_right
{
293 transition: 0.5s ease-in-out
;
295 background-color: rgb
(110, 132, 163);
296 border-radius: 0 10px 10px 0;
299 #noVNC_control_bar.noVNC_open
{
300 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
303 #noVNC_control_bar::before
{
304 /* This extra element is to get a proper shadow */
311 transition: box-shadow
0.5s ease-in-out
;
313 #noVNC_control_bar.noVNC_open::before
{
314 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
316 .noVNC_right #noVNC_control_bar {
318 border-radius: 10px 0 0 10px;
320 .noVNC_right #noVNC_control_bar.noVNC_open {
323 .noVNC_right #noVNC_control_bar::before {
327 #noVNC_control_bar_handle {
331 transform: translateY
(35px);
332 width: calc
(100% + 30px);
337 background-color: rgb
(83, 99, 122);
338 background-image: url
("../images/handle_bg.svg");
339 background-repeat: no-repeat
;
340 background-position: right
;
341 box-shadow: 3px 3px 0px rgba
(0, 0, 0, 0.5);
343 #noVNC_control_bar_handle:after
{
345 transition: transform
0.5s ease-in-out
;
346 background: url
("../images/handle.svg");
348 top: 22px; /* (50px-6px)/2 */
353 #noVNC_control_bar.noVNC_open #
noVNC_control_bar_handle:after
{
354 transform: translateX
(1px) rotate
(180deg);
356 :root:not
(.noVNC_connected
) #noVNC_control_bar_handle
{
359 .noVNC_right #noVNC_control_bar_handle {
360 background-position: left
;
362 .noVNC_right #noVNC_control_bar_handle:after {
365 transform: translateX
(1px) rotate
(180deg);
367 .noVNC_right #noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after {
370 #noVNC_control_bar_handle div
{
377 :root:not
(.noVNC_touch
) #noVNC_control_bar_handle div
{
380 .noVNC_right #noVNC_control_bar_handle div {
385 #noVNC_control_bar .noVNC_scroll
{
386 max-height: 100vh; /* Chrome is buggy with 100% */
389 padding: 0 10px 0 5px;
391 .noVNC_right #noVNC_control_bar .noVNC_scroll {
392 padding: 0 5px 0 10px;
395 /* General button style */
400 vertical-align: middle
;
401 border:1px solid rgba
(255, 255, 255, 0.2);
404 .noVNC_button.noVNC_selected {
405 border-color: rgba
(0, 0, 0, 0.8);
406 background: rgba
(0, 0, 0, 0.5);
408 .noVNC_button:disabled {
411 .noVNC_button:focus {
414 .noVNC_button:active {
418 :root:not
(.noVNC_touch
) .noVNC_button
.noVNC_selected:hover
{
419 border-color: rgba
(0, 0, 0, 0.4);
420 background: rgba
(0, 0, 0, 0.2);
422 :root:not
(.noVNC_touch
) .noVNC_button:hover
{
423 background: rgba
(255, 255, 255, 0.2);
425 .noVNC_button.noVNC_hidden {
431 transform: translateX
(25px);
433 transition: 0.5s ease-in-out
;
435 max-height: 100vh; /* Chrome is buggy with 100% */
447 border: 2px solid
#E0E0E0;
448 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
450 .noVNC_panel.noVNC_open {
453 transform: translateX
(75px);
455 .noVNC_right .noVNC_vcenter {
459 .noVNC_right .noVNC_panel {
460 transform: translateX
(-25px);
462 .noVNC_right .noVNC_panel.noVNC_open {
463 transform: translateX
(-75px);
468 border-top: 1px solid rgb
(192, 192, 192);
476 .noVNC_panel .noVNC_heading {
477 background-color: rgb
(110, 132, 163);
480 /* Compensate for padding in image */
487 .noVNC_panel .noVNC_heading img {
488 vertical-align: bottom
;
499 .noVNC_expander::before {
500 content: url
("../images/expander.svg");
501 display: inline-block
;
503 transition: 0.2s ease-in-out
;
505 .noVNC_expander.noVNC_open::before {
506 transform: rotateZ
(90deg);
508 .noVNC_expander ~ * {
512 background: rgba
(0, 0, 0, 0.05);
515 .noVNC_expander:not(.noVNC_open) ~ * {
519 /* Control bar content */
521 #noVNC_control_bar .noVNC_logo
{
525 :root:not
(.noVNC_connected
) #noVNC_view_drag_button
{
529 /* noVNC Touch Device only buttons */
530 :root:not
(.noVNC_connected
) #noVNC_mobile_buttons
{
533 :root:not
(.noVNC_touch
) #noVNC_mobile_buttons
{
537 /* Extra manual keys */
538 :root:not
(.noVNC_connected
) #noVNC_extra_keys
{
543 background-color: rgb
(92, 92, 92);
548 /* XVP Shutdown/Reboot */
549 :root:not
(.noVNC_connected
) #noVNC_xvp_button
{
558 #noVNC_xvp input
[type
=button
] {
563 :root:not
(.noVNC_connected
) #noVNC_clipboard_button
{
567 /* Full screen, minus padding and left and right margins */
568 max-width: calc
(100vw - 2*15px - 75px - 25px);
570 #noVNC_clipboard_text {
583 #noVNC_setting_port {
586 #noVNC_setting_path {
590 /* Connection Controls */
591 :root:not
(.noVNC_connected
) #noVNC_disconnect_button
{
595 /* ----------------------------------------
597 * ----------------------------------------
606 transform: translateY
(-100%);
610 transition: 0.5s ease-in-out
;
619 justify-content: center
;
620 align-content: center
;
623 word-wrap: break-word
;
626 border-bottom: 1px solid rgba
(0, 0, 0, 0.9);
628 #noVNC_status.noVNC_open
{
629 transform: translateY
(0);
634 #noVNC_status::before
{
636 display: inline-block
;
642 #noVNC_status.noVNC_status_normal
{
643 background: rgba
(128,128,128,0.9);
645 #noVNC_status.noVNC_status_normal::before
{
646 content: url
("../images/info.svg") " ";
648 #noVNC_status.noVNC_status_error
{
649 background: rgba
(200,55,55,0.9);
651 #noVNC_status.noVNC_status_error::before
{
652 content: url
("../images/error.svg") " ";
654 #noVNC_status.noVNC_status_warn
{
655 background: rgba
(180,180,30,0.9);
657 #noVNC_status.noVNC_status_warn::before
{
658 content: url
("../images/warning.svg") " ";
661 /* ----------------------------------------
663 * ----------------------------------------
667 transition: 0.5s ease-in-out
;
669 transform: scale
(0, 0);
673 #noVNC_connect_dlg.noVNC_open
{
674 transform: scale
(1, 1);
678 #noVNC_connect_dlg .noVNC_logo
{
679 transition: 0.5s ease-in-out
;
688 @media (max-width: 440px) {
690 max-width: calc
(100vw - 100px);
692 #noVNC_connect_dlg .noVNC_logo
{
693 font-size: calc
(25vw - 30px);
696 #noVNC_connect_button {
702 background-color: rgb
(110, 132, 163);
708 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
710 #noVNC_connect_button div
{
713 border: 1px solid rgb
(83, 99, 122);
714 border-bottom-width: 2px;
716 background: linear-gradient
(to top
, rgb
(110, 132, 163), rgb
(99, 119, 147));
718 /* This avoids it jumping around when :active */
719 vertical-align: middle
;
721 #noVNC_connect_button div:active
{
722 border-bottom-width: 1px;
725 :root:not
(.noVNC_touch
) #noVNC_connect_button
div:hover
{
726 background: linear-gradient
(to top
, rgb
(110, 132, 163), rgb
(105, 125, 155));
729 #noVNC_connect_button img
{
730 vertical-align: bottom
;
734 /* ----------------------------------------
736 * ----------------------------------------
739 #noVNC_password_dlg {
742 transform: translateY
(-50px);
744 #noVNC_password_dlg.noVNC_open
{
745 transform: translateY
(0);
747 #noVNC_password_dlg ul
{
753 /* ----------------------------------------
755 * ----------------------------------------
758 /* Transition screen */
769 background: rgba
(0, 0, 0, 0.5);
774 justify-content: center
;
775 flex-direction: column
;
777 :root
.noVNC_loading #noVNC_transition
,
778 :root
.noVNC_connecting #noVNC_transition
,
779 :root
.noVNC_disconnecting #noVNC_transition
,
780 :root
.noVNC_reconnecting #noVNC_transition
{
783 :root:not
(.noVNC_reconnecting
) #noVNC_cancel_reconnect_button
{
786 #noVNC_transition_text {
794 background-color: #313131;
795 border-bottom-right-radius: 800px 600px;
796 /*border-top-left-radius: 800px 600px;*/
799 #noVNC_keyboardinput {
802 background-color: #fff;
817 background-color: rgb
(40, 40, 40);
819 :root:not
(.noVNC_connected
) #noVNC_screen
{
823 /* Do not set width/height for VNC_canvas or incorrect
824 * scaling will occur. Canvas size depends on remote VNC
825 * settings and noVNC settings. */
828 /* IE miscalculates width without this :( */
832 /*Default noVNC logo.*/
833 /* From: http://fonts.googleapis.com/css?family=Orbitron:700 */
835 font-family: 'Orbitron';
838 src: local
('?'), url
('Orbitron700.woff') format
('woff'),
839 url
('Orbitron700.ttf') format
('truetype');
844 font-family: 'Orbitron', 'OrbitronTTF', sans-serif
;
846 text-shadow: 0.1em 0.1em 0 black
;
856 /* ----------------------------------------
858 * ----------------------------------------
861 @media screen and
(max-width: 640px){
867 @media screen and
(min-width: 321px) and
(max-width: 480px) {
873 @media screen and
(max-width: 320px) {