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).
13 font-family: Helvetica
;
14 /*Background image with light grey curve.*/
15 background-color:#494949;
16 background-repeat:no-repeat
;
17 background-position:right bottom
;
25 .noVNC_only_touch.noVNC_hidden {
29 /* ----------------------------------------
31 * ----------------------------------------
34 input
[type
=input
], input
[type
=password
], input:not
([type
]), textarea
{
35 /* Disable default rendering */
36 -webkit-appearance: none
;
37 -moz-appearance: none
;
42 border: 1px solid rgb
(192, 192, 192);
45 background: linear-gradient
(to top
, rgb
(255, 255, 255) 80%, rgb
(240, 240, 240));
48 input
[type
=button
], select
{
49 /* Disable default rendering */
50 -webkit-appearance: none
;
51 -moz-appearance: none
;
56 border: 1px solid rgb
(192, 192, 192);
57 border-bottom-width: 2px;
60 background: linear-gradient
(to top
, rgb
(255, 255, 255), rgb
(240, 240, 240));
62 /* This avoids it jumping around when :active */
63 vertical-align: middle
;
76 input
[type
=input
]:focus
, input
[type
=password
]:focus
,
77 input:not
([type
]):focus
, input
[type
=button
]:focus
,
78 textarea:focus
, select:focus
{
79 box-shadow: 0px 0px 3px rgba
(74, 144, 217, 0.5);
80 border-color: rgb
(74, 144, 217);
84 input
[type
=button
]::-moz-focus-inner
{
88 input
[type
=input
]:disabled
, input
[type
=password
]:disabled
,
89 input:not
([type
]):disabled
, input
[type
=button
]:disabled
,
90 textarea:disabled
, select:disabled
{
91 color: rgb
(128, 128, 128);
92 background: rgb
(240, 240, 240);
95 input
[type
=button
]:active
, select:active
{
96 border-bottom-width: 1px;
100 :root:not
(.noVNC_touch
) input
[type
=button
]:hover:not
(:disabled
), :root:not
(.noVNC_touch
) select:hover:not
(:disabled
) {
101 background: linear-gradient
(to top
, rgb
(255, 255, 255), rgb
(250, 250, 250));
104 /* ----------------------------------------
105 * WebKit centering hacks
106 * ----------------------------------------
111 * This is a workaround because webkit misrenders transforms and
112 * uses non-integer coordinates, resulting in blurry content.
113 * Ideally we'd use "top: 50%; transform: translateY(-50%);" on
114 * the objects instead.
118 justify-content: center
;
124 pointer-events: none
;
127 pointer-events: auto
;
131 flex-direction: column
;
132 justify-content: center
;
137 pointer-events: none
;
140 pointer-events: auto
;
143 /* ----------------------------------------
145 * ----------------------------------------
148 #noVNC_control_bar_anchor {
149 /* The anchor is needed to get z-stacking to work */
153 transition: 0.5s ease-in-out
;
155 /* Edge misrenders animations wihthout this */
156 transform: translateX
(0);
158 :root
.noVNC_connected #noVNC_control_bar_anchor
.noVNC_idle
{
164 /* left: calc(-35px - 10px - 5px - 30px), but IE doesn't animate calc */
167 transition: 0.5s ease-in-out
;
169 background-color: rgb
(110, 132, 163);
170 border-radius: 0 10px 10px 0;
172 /* The extra border is to get a proper shadow */
173 border-color: rgb
(110, 132, 163);
175 border-width: 0 0 0 30px;
177 #noVNC_control_bar.noVNC_open
{
178 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
182 #noVNC_control_bar_handle {
186 transform: translateY
(35px);
191 border-radius: 0 5px 5px 0;
192 background-color: rgb
(83, 99, 122);
193 background-image: url
("../images/handle_bg.svg");
194 background-repeat: no-repeat
;
195 background-position: right
;
196 box-shadow: 3px 3px 0px rgba
(0, 0, 0, 0.5);
198 #noVNC_control_bar_handle:after
{
200 transition: 0.5s ease-in-out
;
201 background: url
("../images/handle.svg");
203 top: 22px; /* (50px-6px)/2 */
208 #noVNC_control_bar.noVNC_open #
noVNC_control_bar_handle:after
{
209 transform: translateX
(1px) rotate
(180deg);
211 :root:not
(.noVNC_connected
) #noVNC_control_bar_handle
{
214 #noVNC_control_bar_handle div
{
221 :root:not
(.noVNC_touch
) #noVNC_control_bar_handle div
{
225 #noVNC_control_bar .noVNC_scroll
{
226 max-height: 100vh; /* Chrome is buggy with 100% */
229 padding: 0 10px 0 5px;
232 /* General button style */
237 vertical-align: middle
;
238 border:1px solid rgba
(255, 255, 255, 0.2);
239 -webkit-border-radius: 6px;
240 -moz-border-radius: 6px;
243 .noVNC_button.noVNC_selected {
244 border-color: rgba
(0, 0, 0, 0.8);
245 background: rgba
(0, 0, 0, 0.5);
247 .noVNC_button:disabled {
250 .noVNC_button:focus {
253 .noVNC_button:active {
257 :root:not
(.noVNC_touch
) .noVNC_button
.noVNC_selected:hover
{
258 border-color: rgba
(0, 0, 0, 0.4);
259 background: rgba
(0, 0, 0, 0.2);
261 :root:not
(.noVNC_touch
) .noVNC_button:hover
{
262 background: rgba
(255, 255, 255, 0.2);
264 .noVNC_button.noVNC_hidden {
270 transform: translateX
(25px);
272 transition: 0.5s ease-in-out
;
274 max-height: 100vh; /* Chrome is buggy with 100% */
284 -webkit-border-radius: 10px;
285 -moz-border-radius: 10px;
288 border: 2px solid
#E0E0E0;
289 box-shadow: 6px 6px 0px rgba
(0, 0, 0, 0.5);
291 .noVNC_panel.noVNC_open {
294 transform: translateX
(75px);
299 border-top: 1px solid rgb
(192, 192, 192);
306 .noVNC_panel .noVNC_heading {
307 background-color: rgb
(110, 132, 163);
310 /* Compensate for padding in image */
317 .noVNC_panel .noVNC_heading img {
318 vertical-align: bottom
;
325 :root:not
(.noVNC_connected
) #noVNC_view_drag_button
{
329 /* noVNC Touch Device only buttons */
330 :root:not
(.noVNC_connected
) #noVNC_mobile_buttons
{
333 :root:not
(.noVNC_touch
) #noVNC_mobile_buttons
{
337 #noVNC_keyboardinput {
340 background-color: #fff;
349 /* Extra manual keys */
350 :root:not
(.noVNC_connected
) #noVNC_extra_keys
{
355 background-color: rgb
(92, 92, 92);
360 /* XVP Shutdown/Reboot */
361 :root:not
(.noVNC_connected
) #noVNC_xvp_button
{
370 #noVNC_xvp input
[type
=button
] {
375 :root:not
(.noVNC_connected
) #noVNC_clipboard_button
{
379 /* Full screen, minus padding and left and right margins */
380 max-width: calc
(100vw - 2*15px - 75px - 25px);
382 #noVNC_clipboard_text {
395 #noVNC_setting_path {
399 /* Connection Controls */
400 :root
.noVNC_connected #noVNC_connect_controls_button
{
403 :root:not
(.noVNC_connected
) #noVNC_disconnect_button
{
406 #noVNC_connect_controls ul
{
411 #noVNC_setting_port {
415 /* ----------------------------------------
417 * ----------------------------------------
426 transform: translateY
(-100%);
428 transition: 0.5s ease-in-out
;
437 justify-content: center
;
438 align-content: center
;
441 word-wrap: break-word
;
444 border-bottom: 1px solid rgba
(0, 0, 0, 0.9);
446 #noVNC_status.noVNC_open
{
447 transform: translateY
(0);
452 #noVNC_status::before
{
454 display: inline-block
;
460 #noVNC_status.noVNC_status_normal
{
461 background: rgba
(128,128,128,0.9);
463 #noVNC_status.noVNC_status_normal::before
{
464 content: url
("../images/info.svg") " ";
466 #noVNC_status.noVNC_status_error
{
467 background: rgba
(200,55,55,0.9);
469 #noVNC_status.noVNC_status_error::before
{
470 content: url
("../images/error.svg") " ";
472 #noVNC_status.noVNC_status_warn
{
473 background: rgba
(180,180,30,0.9);
475 #noVNC_status.noVNC_status_warn::before
{
476 content: url
("../images/warning.svg") " ";
479 /* ----------------------------------------
481 * ----------------------------------------
484 #noVNC_password_dlg {
485 transform: translateY
(-50px);
487 #noVNC_password_dlg.noVNC_open
{
488 transform: translateY
(0);
490 #noVNC_password_dlg ul
{
496 /* ----------------------------------------
498 * ----------------------------------------
505 background-color: #313131;
506 border-bottom-right-radius: 800px 600px;
507 /*border-top-left-radius: 800px 600px;*/
522 :root:not
(.noVNC_connected
) #noVNC_screen
{
526 /* Do not set width/height for VNC_canvas or incorrect
527 * scaling will occur. Canvas size depends on remote VNC
528 * settings and noVNC settings. */
537 /*Default noVNC logo.*/
538 /* From: http://fonts.googleapis.com/css?family=Orbitron:700 */
540 font-family: 'Orbitron';
543 src: local
('?'), url
('Orbitron700.woff') format
('woff'),
544 url
('Orbitron700.ttf') format
('truetype');
550 font-family: 'Orbitron', 'OrbitronTTF', sans-serif
;
553 text-shadow: 1px 1px 0 #000;
570 :root
.noVNC_connected #noVNC_logo
{
574 /* ----------------------------------------
576 * ----------------------------------------
579 @media screen and
(max-width: 640px){
585 @media screen and
(min-width: 321px) and
(max-width: 480px) {
591 @media screen and
(max-width: 320px) {