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 box-shadow: -60px 10px 0 rgba
(255, 255, 255, 0);
61 animation: noVNC_spinner
1.0s linear infinite
;
63 .noVNC_spinner::before {
68 animation-delay: -0.1s;
70 .noVNC_spinner::after {
75 animation-delay: 0.1s;
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; }
83 /* ----------------------------------------
85 * ----------------------------------------
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
;
97 border: 1px solid rgb
(192, 192, 192);
100 background: linear-gradient
(to top
, rgb
(255, 255, 255) 80%, rgb
(240, 240, 240));
103 input
[type
=button
], input
[type
=submit
], select
{
104 /* Disable default rendering */
105 -webkit-appearance: none
;
106 -moz-appearance: none
;
111 border: 1px solid rgb
(192, 192, 192);
112 border-bottom-width: 2px;
115 background: linear-gradient
(to top
, rgb
(255, 255, 255), rgb
(240, 240, 240));
117 /* This avoids it jumping around when :active */
118 vertical-align: middle
;
121 input
[type
=button
], input
[type
=submit
] {
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);
140 input
[type
=button
]::-moz-focus-inner
,
141 input
[type
=submit
]::-moz-focus-inner
{
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);
153 input
[type
=button
]:active
, input
[type
=submit
]:active
,
155 border-bottom-width: 1px;
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));
165 /* ----------------------------------------
166 * WebKit centering hacks
167 * ----------------------------------------
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.
179 justify-content: center
;
185 pointer-events: none
;
188 pointer-events: auto
;
192 flex-direction: column
;
193 justify-content: center
;
198 pointer-events: none
;
201 pointer-events: auto
;
204 /* ----------------------------------------
206 * ----------------------------------------
209 .noVNC_connect_layer {
213 /* ----------------------------------------
215 * ----------------------------------------
218 #noVNC_fallback_error {
222 #noVNC_fallback_error.noVNC_open
{
226 #noVNC_fallback_error > div
{
230 transition: 0.5s ease-in-out
;
232 transform: translateY
(-50px);
240 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
241 background: rgba
(200,55,55,0.8);
243 #noVNC_fallback_error.noVNC_open
> div
{
244 transform: translateY
(0);
248 #noVNC_fallback_errormsg {
252 #noVNC_fallback_errormsg .noVNC_message
{
253 display: inline-block
;
255 font-family: monospace
;
256 white-space: pre-wrap
;
259 #noVNC_fallback_error .noVNC_location
{
262 color: rgba
(255, 255, 255, 0.8);
265 #noVNC_fallback_error .noVNC_stack
{
271 font-family: monospace
;
273 border: 1px solid rgba
(0, 0, 0, 0.5);
274 background: rgba
(0, 0, 0, 0.2);
278 /* ----------------------------------------
280 * ----------------------------------------
283 #noVNC_control_bar_anchor {
284 /* The anchor is needed to get z-stacking to work */
288 transition: 0.5s ease-in-out
;
290 /* Edge misrenders animations wihthout this */
291 transform: translateX
(0);
293 :root
.noVNC_connected #noVNC_control_bar_anchor
.noVNC_idle
{
296 #noVNC_control_bar_anchor.noVNC_right
{
305 transition: 0.5s ease-in-out
;
307 background-color: rgb
(110, 132, 163);
308 border-radius: 0 10px 10px 0;
311 #noVNC_control_bar.noVNC_open
{
312 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
315 #noVNC_control_bar::before
{
316 /* This extra element is to get a proper shadow */
323 transition: box-shadow
0.5s ease-in-out
;
325 #noVNC_control_bar.noVNC_open::before
{
326 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
328 .noVNC_right #noVNC_control_bar {
330 border-radius: 10px 0 0 10px;
332 .noVNC_right #noVNC_control_bar.noVNC_open {
335 .noVNC_right #noVNC_control_bar::before {
339 #noVNC_control_bar_handle {
343 transform: translateY
(35px);
344 width: calc
(100% + 30px);
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);
355 #noVNC_control_bar_handle:after
{
357 transition: transform
0.5s ease-in-out
;
358 background: url
("../images/handle.svg");
360 top: 22px; /* (50px-6px)/2 */
365 #noVNC_control_bar.noVNC_open #
noVNC_control_bar_handle:after
{
366 transform: translateX
(1px) rotate
(180deg);
368 :root:not
(.noVNC_connected
) #noVNC_control_bar_handle
{
371 .noVNC_right #noVNC_control_bar_handle {
372 background-position: left
;
374 .noVNC_right #noVNC_control_bar_handle:after {
377 transform: translateX
(1px) rotate
(180deg);
379 .noVNC_right #noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after {
382 #noVNC_control_bar_handle div
{
389 :root:not
(.noVNC_touch
) #noVNC_control_bar_handle div
{
392 .noVNC_right #noVNC_control_bar_handle div {
397 #noVNC_control_bar .noVNC_scroll
{
398 max-height: 100vh; /* Chrome is buggy with 100% */
401 padding: 0 10px 0 5px;
403 .noVNC_right #noVNC_control_bar .noVNC_scroll {
404 padding: 0 5px 0 10px;
407 /* Control bar hint */
408 #noVNC_control_bar_hint {
410 left: calc
(100vw - 50px);
413 transform: translateY
(-50%) scale
(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);
424 transition-delay: 0s;
426 #noVNC_control_bar_anchor.noVNC_right #noVNC_control_bar_hint
{
428 right: calc
(100vw - 50px);
430 #noVNC_control_bar_hint.noVNC_active
{
433 transition-delay: 0.2s;
434 transform: translateY
(-50%) scale
(1);
437 /* General button style */
442 vertical-align: middle
;
443 border:1px solid rgba
(255, 255, 255, 0.2);
446 .noVNC_button.noVNC_selected {
447 border-color: rgba
(0, 0, 0, 0.8);
448 background: rgba
(0, 0, 0, 0.5);
450 .noVNC_button:disabled {
453 .noVNC_button:focus {
456 .noVNC_button:active {
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);
467 :root:not
(.noVNC_touch
) .noVNC_button:hover
,
468 .noVNC_button:focus {
469 background: rgba
(255, 255, 255, 0.2);
471 .noVNC_button.noVNC_hidden {
477 transform: translateX
(25px);
479 transition: 0.5s ease-in-out
;
481 max-height: 100vh; /* Chrome is buggy with 100% */
493 border: 2px solid
#E0E0E0;
494 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
496 .noVNC_panel.noVNC_open {
499 transform: translateX
(75px);
501 .noVNC_right .noVNC_vcenter {
505 .noVNC_right .noVNC_panel {
506 transform: translateX
(-25px);
508 .noVNC_right .noVNC_panel.noVNC_open {
509 transform: translateX
(-75px);
514 border-top: 1px solid rgb
(192, 192, 192);
522 .noVNC_panel .noVNC_heading {
523 background-color: rgb
(110, 132, 163);
526 /* Compensate for padding in image */
533 .noVNC_panel .noVNC_heading img {
534 vertical-align: bottom
;
545 .noVNC_expander::before {
546 content: url
("../images/expander.svg");
547 display: inline-block
;
549 transition: 0.2s ease-in-out
;
551 .noVNC_expander.noVNC_open::before {
552 transform: rotateZ
(90deg);
554 .noVNC_expander ~ * {
558 background: rgba
(0, 0, 0, 0.05);
561 .noVNC_expander:not(.noVNC_open) ~ * {
565 /* Control bar content */
567 #noVNC_control_bar .noVNC_logo
{
571 :root:not
(.noVNC_connected
) #noVNC_view_drag_button
{
575 /* noVNC Touch Device only buttons */
576 :root:not
(.noVNC_connected
) #noVNC_mobile_buttons
{
579 :root:not
(.noVNC_touch
) #noVNC_mobile_buttons
{
583 /* Extra manual keys */
584 :root:not
(.noVNC_connected
) #noVNC_extra_keys
{
589 background-color: rgb
(92, 92, 92);
594 /* Shutdown/Reboot */
595 :root:not
(.noVNC_connected
) #noVNC_power_button
{
600 #noVNC_power_buttons {
604 #noVNC_power input
[type
=button
] {
609 :root:not
(.noVNC_connected
) #noVNC_clipboard_button
{
613 /* Full screen, minus padding and left and right margins */
614 max-width: calc
(100vw - 2*15px - 75px - 25px);
616 #noVNC_clipboard_text {
629 #noVNC_setting_port {
632 #noVNC_setting_path {
636 /* Connection Controls */
637 :root:not
(.noVNC_connected
) #noVNC_disconnect_button
{
641 /* ----------------------------------------
643 * ----------------------------------------
652 transform: translateY
(-100%);
656 transition: 0.5s ease-in-out
;
665 justify-content: center
;
666 align-content: center
;
669 word-wrap: break-word
;
672 border-bottom: 1px solid rgba
(0, 0, 0, 0.9);
674 #noVNC_status.noVNC_open
{
675 transform: translateY
(0);
680 #noVNC_status::before
{
682 display: inline-block
;
688 #noVNC_status.noVNC_status_normal
{
689 background: rgba
(128,128,128,0.9);
691 #noVNC_status.noVNC_status_normal::before
{
692 content: url
("../images/info.svg") " ";
694 #noVNC_status.noVNC_status_error
{
695 background: rgba
(200,55,55,0.9);
697 #noVNC_status.noVNC_status_error::before
{
698 content: url
("../images/error.svg") " ";
700 #noVNC_status.noVNC_status_warn
{
701 background: rgba
(180,180,30,0.9);
703 #noVNC_status.noVNC_status_warn::before
{
704 content: url
("../images/warning.svg") " ";
707 /* ----------------------------------------
709 * ----------------------------------------
713 transition: 0.5s ease-in-out
;
715 transform: scale
(0, 0);
719 #noVNC_connect_dlg.noVNC_open
{
720 transform: scale
(1, 1);
724 #noVNC_connect_dlg .noVNC_logo
{
725 transition: 0.5s ease-in-out
;
734 @media (max-width: 440px) {
736 max-width: calc
(100vw - 100px);
738 #noVNC_connect_dlg .noVNC_logo
{
739 font-size: calc
(25vw - 30px);
742 #noVNC_connect_button {
748 background-color: rgb
(110, 132, 163);
754 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
756 #noVNC_connect_button div
{
759 border: 1px solid rgb
(83, 99, 122);
760 border-bottom-width: 2px;
762 background: linear-gradient
(to top
, rgb
(110, 132, 163), rgb
(99, 119, 147));
764 /* This avoids it jumping around when :active */
765 vertical-align: middle
;
767 #noVNC_connect_button div:active
{
768 border-bottom-width: 1px;
771 :root:not
(.noVNC_touch
) #noVNC_connect_button
div:hover
{
772 background: linear-gradient
(to top
, rgb
(110, 132, 163), rgb
(105, 125, 155));
775 #noVNC_connect_button img
{
776 vertical-align: bottom
;
780 /* ----------------------------------------
782 * ----------------------------------------
785 #noVNC_password_dlg {
788 transform: translateY
(-50px);
790 #noVNC_password_dlg.noVNC_open
{
791 transform: translateY
(0);
793 #noVNC_password_dlg ul
{
799 /* ----------------------------------------
801 * ----------------------------------------
804 /* Transition screen */
815 background: rgba
(0, 0, 0, 0.5);
820 justify-content: center
;
821 flex-direction: column
;
823 :root
.noVNC_loading #noVNC_transition
,
824 :root
.noVNC_connecting #noVNC_transition
,
825 :root
.noVNC_disconnecting #noVNC_transition
,
826 :root
.noVNC_reconnecting #noVNC_transition
{
829 :root:not
(.noVNC_reconnecting
) #noVNC_cancel_reconnect_button
{
832 #noVNC_transition_text {
840 background-color: #313131;
841 border-bottom-right-radius: 800px 600px;
842 /*border-top-left-radius: 800px 600px;*/
845 #noVNC_keyboardinput {
848 background-color: #fff;
863 background-color: rgb
(40, 40, 40);
865 :root:not
(.noVNC_connected
) #noVNC_screen
{
869 /* Do not set width/height for VNC_canvas or incorrect
870 * scaling will occur. Canvas size depends on remote VNC
871 * settings and noVNC settings. */
874 /* IE miscalculates width without this :( */
877 #noVNC_canvas:focus
{
881 /*Default noVNC logo.*/
882 /* From: http://fonts.googleapis.com/css?family=Orbitron:700 */
884 font-family: 'Orbitron';
887 src: local
('?'), url
('Orbitron700.woff') format
('woff'),
888 url
('Orbitron700.ttf') format
('truetype');
893 font-family: 'Orbitron', 'OrbitronTTF', sans-serif
;
895 text-shadow: 0.1em 0.1em 0 black
;
905 /* ----------------------------------------
907 * ----------------------------------------
910 @media screen and
(max-width: 640px){
916 @media screen and
(min-width: 321px) and
(max-width: 480px) {
922 @media screen and
(max-width: 320px) {