app/styles/base.css

   1 /*
   2  * noVNC base CSS
   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).
   8  */
   9
  10 body {
  11   margin:0;
  12   padding:0;
  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;
  18   height:100%;
  19   touch-action: none;
  20 }
  21
  22 html {
  23   height:100%;
  24 }
  25
  26 .noVNC_only_touch.noVNC_hidden {
  27   display: none;
  28 }
  29
  30 /* ----------------------------------------
  31  * Spinner
  32  * ----------------------------------------
  33  */
  34
  35 .noVNC_spinner {
  36   position: relative;
  37 }
  38 .noVNC_spinner, .noVNC_spinner::before, .noVNC_spinner::after {
  39   width: 10px;
  40   height: 10px;
  41   border-radius: 50%;
  42   animation: noVNC_spinner 1.0s ease-in-out alternate infinite;
  43 }
  44 .noVNC_spinner::before {
  45   content: "";
  46   position: absolute;
  47   left: -20px;
  48   animation-delay: -0.2s;
  49 }
  50 .noVNC_spinner::after {
  51   content: "";
  52   position: absolute;
  53   left: 20px;
  54   animation-delay: 0.2s;
  55 }
  56 @keyframes noVNC_spinner {
  57   0% { box-shadow: 0 10px 0 white; }
  58   100% { box-shadow: 0 30px 0 white; }
  59 }
  60
  61 /* ----------------------------------------
  62  * Input Elements
  63  * ----------------------------------------
  64  */
  65
  66 input[type=input], input[type=password], input:not([type]), textarea {
  67   /* Disable default rendering */
  68   -webkit-appearance: none;
  69   -moz-appearance: none;
  70   background: none;
  71
  72   margin: 2px;
  73   padding: 2px;
  74   border: 1px solid rgb(192, 192, 192);
  75   border-radius: 5px;
  76   color: black;
  77   background: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240));
  78 }
  79
  80 input[type=button], select {
  81   /* Disable default rendering */
  82   -webkit-appearance: none;
  83   -moz-appearance: none;
  84   background: none;
  85
  86   margin: 2px;
  87   padding: 2px;
  88   border: 1px solid rgb(192, 192, 192);
  89   border-bottom-width: 2px;
  90   border-radius: 5px;
  91   color: black;
  92   background: linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
  93
  94   /* This avoids it jumping around when :active */
  95   vertical-align: middle;
  96 }
  97
  98 input[type=button] {
  99   padding-left: 20px;
 100   padding-right: 20px;
 101 }
 102
 103 option {
 104   color: black;
 105   background: white;
 106 }
 107
 108 input[type=input]:focus, input[type=password]:focus,
 109 input:not([type]):focus, input[type=button]:focus,
 110 textarea:focus, select:focus {
 111   box-shadow: 0px 0px 3px rgba(74, 144, 217, 0.5);
 112   border-color: rgb(74, 144, 217);
 113   outline: none;
 114 }
 115
 116 input[type=button]::-moz-focus-inner {
 117   border: none;
 118 }
 119
 120 input[type=input]:disabled, input[type=password]:disabled,
 121 input:not([type]):disabled, input[type=button]:disabled,
 122 textarea:disabled, select:disabled {
 123   color: rgb(128, 128, 128);
 124   background: rgb(240, 240, 240);
 125 }
 126
 127 input[type=button]:active, select:active {
 128   border-bottom-width: 1px;
 129   margin-top: 3px;
 130 }
 131
 132 :root:not(.noVNC_touch) input[type=button]:hover:not(:disabled), :root:not(.noVNC_touch) select:hover:not(:disabled) {
 133   background: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
 134 }
 135
 136 /* ----------------------------------------
 137  * WebKit centering hacks
 138  * ----------------------------------------
 139  */
 140
 141 .noVNC_center {
 142   /*
 143    * This is a workaround because webkit misrenders transforms and
 144    * uses non-integer coordinates, resulting in blurry content.
 145    * Ideally we'd use "top: 50%; transform: translateY(-50%);" on
 146    * the objects instead.
 147    */
 148   display: flex;
 149   align-items: center;
 150   justify-content: center;
 151   position: fixed;
 152   top: 0;
 153   left: 0;
 154   width: 100%;
 155   height: 100%;
 156   pointer-events: none;
 157 }
 158 .noVNC_center > * {
 159   pointer-events: auto;
 160 }
 161 .noVNC_vcenter {
 162   display: flex;
 163   flex-direction: column;
 164   justify-content: center;
 165   position: fixed;
 166   top: 0;
 167   left: 0;
 168   height: 100%;
 169   pointer-events: none;
 170 }
 171 .noVNC_vcenter > * {
 172   pointer-events: auto;
 173 }
 174
 175 /* ----------------------------------------
 176  * Fallback error
 177  * ----------------------------------------
 178  */
 179
 180 #noVNC_fallback_error {
 181   position: fixed;
 182   z-index: 3;
 183   left: 50%;
 184   transform: translate(-50%, -50px);
 185   transition: 0.5s ease-in-out;
 186
 187   visibility: hidden;
 188   opacity: 0;
 189
 190   top: 60px;
 191   padding: 15px;
 192   width: auto;
 193
 194   text-align: center;
 195   font-weight: bold;
 196   word-wrap: break-word;
 197   color: #fff;
 198
 199   border-radius: 10px;
 200   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
 201   background: rgba(200,55,55,0.8);
 202 }
 203 #noVNC_fallback_error.noVNC_open {
 204   transform: translate(-50%, 0);
 205   visibility: visible;
 206   opacity: 1;
 207 }
 208
 209 #noVNC_fallback_errormsg {
 210   font-weight: normal;
 211 }
 212
 213 #noVNC_fallback_error .noVNC_location {
 214   font-style: italic;
 215   font-size: 0.8em;
 216   color: rgba(255, 255, 255, 0.8);
 217 }
 218
 219 #noVNC_fallback_error .noVNC_stack {
 220   padding: 10px;
 221   margin: 10px;
 222   font-size: 0.8em;
 223   text-align: left;
 224   white-space: pre;
 225   border: 1px solid rgba(0, 0, 0, 0.5);
 226   background: rgba(0, 0, 0, 0.2);
 227 }
 228
 229 /* ----------------------------------------
 230  * Control Bar
 231  * ----------------------------------------
 232  */
 233
 234 #noVNC_control_bar_anchor {
 235   /* The anchor is needed to get z-stacking to work */
 236   position: fixed;
 237   z-index: 2;
 238
 239   transition: 0.5s ease-in-out;
 240
 241   /* Edge misrenders animations wihthout this */
 242   transform: translateX(0);
 243 }
 244 :root.noVNC_connected #noVNC_control_bar_anchor.noVNC_idle {
 245   opacity: 0.8;
 246 }
 247 #noVNC_control_bar_anchor.noVNC_right {
 248   left: auto;
 249   right: 0;
 250 }
 251
 252 #noVNC_control_bar {
 253   position: relative;
 254   left: -100%;
 255
 256   transition: 0.5s ease-in-out;
 257
 258   background-color: rgb(110, 132, 163);
 259   border-radius: 0 10px 10px 0;
 260
 261 }
 262 #noVNC_control_bar.noVNC_open {
 263   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
 264   left: 0;
 265 }
 266 #noVNC_control_bar::before {
 267   /* This extra element is to get a proper shadow */
 268   content: "";
 269   position: absolute;
 270   z-index: -1;
 271   height: 100%;
 272   width: 30px;
 273   left: -30px;
 274   transition: box-shadow 0.5s ease-in-out;
 275 }
 276 #noVNC_control_bar.noVNC_open::before {
 277   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
 278 }
 279 .noVNC_right #noVNC_control_bar {
 280   left: 100%;
 281   border-radius: 10px 0 0 10px;
 282 }
 283 .noVNC_right #noVNC_control_bar.noVNC_open {
 284   left: 0;
 285 }
 286 .noVNC_right #noVNC_control_bar::before {
 287   visibility: hidden;
 288 }
 289
 290 #noVNC_control_bar_handle {
 291   position: absolute;
 292   left: -15px;
 293   top: 0;
 294   transform: translateY(35px);
 295   width: calc(100% + 30px);
 296   height: 50px;
 297   z-index: -2;
 298   cursor: pointer;
 299   border-radius: 5px;
 300   background-color: rgb(83, 99, 122);
 301   background-image: url("../images/handle_bg.svg");
 302   background-repeat: no-repeat;
 303   background-position: right;
 304   box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
 305 }
 306 #noVNC_control_bar_handle:after {
 307   content: "";
 308   transition: transform 0.5s ease-in-out;
 309   background: url("../images/handle.svg");
 310   position: absolute;
 311   top: 22px; /* (50px-6px)/2 */
 312   right: 5px;
 313   width: 5px;
 314   height: 6px;
 315 }
 316 #noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after {
 317   transform: translateX(1px) rotate(180deg);
 318 }
 319 :root:not(.noVNC_connected) #noVNC_control_bar_handle {
 320   display: none;
 321 }
 322 .noVNC_right #noVNC_control_bar_handle {
 323   background-position: left;
 324 }
 325 .noVNC_right #noVNC_control_bar_handle:after {
 326   left: 5px;
 327   right: 0;
 328   transform: translateX(1px) rotate(180deg);
 329 }
 330 .noVNC_right #noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after {
 331   transform: none;
 332 }
 333 #noVNC_control_bar_handle div {
 334   position: absolute;
 335   right: -35px;
 336   top: 0;
 337   width: 50px;
 338   height: 50px;
 339 }
 340 :root:not(.noVNC_touch) #noVNC_control_bar_handle div {
 341   display: none;
 342 }
 343 .noVNC_right #noVNC_control_bar_handle div {
 344   left: -35px;
 345   right: auto;
 346 }
 347
 348 #noVNC_control_bar .noVNC_scroll {
 349   max-height: 100vh; /* Chrome is buggy with 100% */
 350   overflow-x: hidden;
 351   overflow-y: auto;
 352   padding: 0 10px 0 5px;
 353 }
 354 .noVNC_right #noVNC_control_bar .noVNC_scroll {
 355   padding: 0 5px 0 10px;
 356 }
 357
 358 /* General button style */
 359 .noVNC_button {
 360   display: block;
 361   padding: 4px 4px;
 362   margin: 10px 0;
 363   vertical-align: middle;
 364   border:1px solid rgba(255, 255, 255, 0.2);
 365   -webkit-border-radius: 6px;
 366   -moz-border-radius: 6px;
 367   border-radius: 6px;
 368 }
 369 .noVNC_button.noVNC_selected {
 370   border-color: rgba(0, 0, 0, 0.8);
 371   background: rgba(0, 0, 0, 0.5);
 372 }
 373 .noVNC_button:disabled {
 374   opacity: 0.4;
 375 }
 376 .noVNC_button:focus {
 377   outline: none;
 378 }
 379 .noVNC_button:active {
 380   padding-top: 5px;
 381   padding-bottom: 3px;
 382 }
 383 :root:not(.noVNC_touch) .noVNC_button.noVNC_selected:hover {
 384   border-color: rgba(0, 0, 0, 0.4);
 385   background: rgba(0, 0, 0, 0.2);
 386 }
 387 :root:not(.noVNC_touch) .noVNC_button:hover {
 388   background: rgba(255, 255, 255, 0.2);
 389 }
 390 .noVNC_button.noVNC_hidden {
 391   display: none;
 392 }
 393
 394 /* Panels */
 395 .noVNC_panel {
 396   transform: translateX(25px);
 397
 398   transition: 0.5s ease-in-out;
 399
 400   max-height: 100vh; /* Chrome is buggy with 100% */
 401   overflow-x: hidden;
 402   overflow-y: auto;
 403
 404   visibility: hidden;
 405   opacity: 0;
 406
 407   padding: 15px;
 408
 409   background: #fff;
 410   -webkit-border-radius: 10px;
 411   -moz-border-radius: 10px;
 412   border-radius: 10px;
 413   color: #000;
 414   border: 2px solid #E0E0E0;
 415   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
 416 }
 417 .noVNC_panel.noVNC_open {
 418   visibility: visible;
 419   opacity: 1;
 420   transform: translateX(75px);
 421 }
 422 .noVNC_right .noVNC_vcenter {
 423   left: auto;
 424   right: 0;
 425 }
 426 .noVNC_right .noVNC_panel {
 427   transform: translateX(-25px);
 428 }
 429 .noVNC_right .noVNC_panel.noVNC_open {
 430   transform: translateX(-75px);
 431 }
 432
 433 .noVNC_panel hr {
 434   border: none;
 435   border-top: 1px solid rgb(192, 192, 192);
 436 }
 437
 438 .noVNC_panel label {
 439   display: block;
 440 }
 441
 442 .noVNC_panel .noVNC_heading {
 443   background-color: rgb(110, 132, 163);
 444   border-radius: 5px;
 445   padding: 5px;
 446   /* Compensate for padding in image */
 447   padding-right: 8px;
 448   color: white;
 449   font-size: 20px;
 450   margin-bottom: 10px;
 451   white-space: nowrap;
 452 }
 453 .noVNC_panel .noVNC_heading img {
 454   vertical-align: bottom;
 455 }
 456
 457 .noVNC_submit {
 458   float: right;
 459 }
 460
 461 :root:not(.noVNC_connected) #noVNC_view_drag_button {
 462   display: none;
 463 }
 464
 465 /* noVNC Touch Device only buttons */
 466 :root:not(.noVNC_connected) #noVNC_mobile_buttons {
 467   display: none;
 468 }
 469 :root:not(.noVNC_touch) #noVNC_mobile_buttons {
 470   display: none;
 471 }
 472
 473 #noVNC_keyboardinput {
 474   width: 1px;
 475   height: 1px;
 476   background-color: #fff;
 477   color: #fff;
 478   border: 0;
 479   position: relative;
 480   left: -40px;
 481   z-index: -1;
 482   ime-mode: disabled;
 483 }
 484
 485 /* Extra manual keys */
 486 :root:not(.noVNC_connected) #noVNC_extra_keys {
 487   display: none;
 488 }
 489
 490 #noVNC_modifiers {
 491   background-color: rgb(92, 92, 92);
 492   border: none;
 493   padding: 0 10px;
 494 }
 495
 496 /* XVP Shutdown/Reboot */
 497 :root:not(.noVNC_connected) #noVNC_xvp_button {
 498   display: none;
 499 }
 500 #noVNC_xvp {
 501 }
 502 #noVNC_xvp_buttons {
 503   display: none;
 504 }
 505
 506 #noVNC_xvp input[type=button] {
 507   width: 100%;
 508 }
 509
 510 /* Clipboard */
 511 :root:not(.noVNC_connected) #noVNC_clipboard_button {
 512   display: none;
 513 }
 514 #noVNC_clipboard {
 515   /* Full screen, minus padding and left and right margins */
 516   max-width: calc(100vw - 2*15px - 75px - 25px);
 517 }
 518 #noVNC_clipboard_text {
 519   width: 500px;
 520   max-width: 100%;
 521 }
 522
 523 /* Settings */
 524 #noVNC_settings {
 525 }
 526 #noVNC_settings ul {
 527   list-style: none;
 528   margin: 0px;
 529   padding: 0px;
 530 }
 531 #noVNC_setting_path {
 532   width: 100px;
 533 }
 534
 535 /* Connection Controls */
 536 :root.noVNC_connected #noVNC_connect_controls_button {
 537   display: none;
 538 }
 539 :root:not(.noVNC_connected) #noVNC_disconnect_button {
 540   display: none;
 541 }
 542 #noVNC_connect_controls ul {
 543   list-style: none;
 544   margin: 0px;
 545   padding: 0px;
 546 }
 547 #noVNC_setting_port {
 548   width: 80px;
 549 }
 550
 551 /* ----------------------------------------
 552  * Status Dialog
 553  * ----------------------------------------
 554  */
 555
 556 #noVNC_status {
 557   position: fixed;
 558   top: 0;
 559   left: 0;
 560   width: 100%;
 561   z-index: 3;
 562   transform: translateY(-100%);
 563
 564   transition: 0.5s ease-in-out;
 565
 566   visibility: hidden;
 567   opacity: 0;
 568
 569   padding: 5px;
 570
 571   display: flex;
 572   flex-direction: row;
 573   justify-content: center;
 574   align-content: center;
 575
 576   line-height: 25px;
 577   word-wrap: break-word;
 578   color: #fff;
 579
 580   border-bottom: 1px solid rgba(0, 0, 0, 0.9);
 581 }
 582 #noVNC_status.noVNC_open {
 583   transform: translateY(0);
 584   visibility: visible;
 585   opacity: 1;
 586 }
 587
 588 #noVNC_status::before {
 589   content: "";
 590   display: inline-block;
 591   width: 25px;
 592   height: 25px;
 593   margin-right: 5px;
 594 }
 595
 596 #noVNC_status.noVNC_status_normal {
 597   background: rgba(128,128,128,0.9);
 598 }
 599 #noVNC_status.noVNC_status_normal::before {
 600   content: url("../images/info.svg") " ";
 601 }
 602 #noVNC_status.noVNC_status_error {
 603   background: rgba(200,55,55,0.9);
 604 }
 605 #noVNC_status.noVNC_status_error::before {
 606   content: url("../images/error.svg") " ";
 607 }
 608 #noVNC_status.noVNC_status_warn {
 609   background: rgba(180,180,30,0.9);
 610 }
 611 #noVNC_status.noVNC_status_warn::before {
 612   content: url("../images/warning.svg") " ";
 613 }
 614
 615 /* ----------------------------------------
 616  * Password Dialog
 617  * ----------------------------------------
 618  */
 619
 620 #noVNC_password_dlg {
 621   transform: translateY(-50px);
 622 }
 623 #noVNC_password_dlg.noVNC_open {
 624   transform: translateY(0);
 625 }
 626 #noVNC_password_dlg ul {
 627   list-style: none;
 628   margin: 0px;
 629   padding: 0px;
 630 }
 631
 632 /* ----------------------------------------
 633  * Main Area
 634  * ----------------------------------------
 635  */
 636
 637 /* Transition screen */
 638 #noVNC_transition {
 639   display: none;
 640
 641   position: fixed;
 642   top: 0;
 643   left: 0;
 644   bottom: 0;
 645   right: 0;
 646
 647   color: white;
 648   background: rgba(0, 0, 0, 0.5);
 649   z-index: 1000;
 650
 651   /*display: flex;*/
 652   align-items: center;
 653   justify-content: center;
 654   flex-direction: column;
 655 }
 656 :root.noVNC_connecting #noVNC_transition,
 657 :root.noVNC_disconnecting #noVNC_transition {
 658   display: flex;
 659 }
 660 #noVNC_transition_text {
 661   font-size: 1.5em;
 662 }
 663
 664 /* Main container */
 665 #noVNC_container {
 666   display: table;
 667   width: 100%;
 668   height: 100%;
 669   background-color: #313131;
 670   border-bottom-right-radius: 800px 600px;
 671   /*border-top-left-radius: 800px 600px;*/
 672 }
 673
 674 /* HTML5 Canvas */
 675 #noVNC_screen {
 676   position: absolute;
 677   margin: 0px;
 678   padding: 0px;
 679   bottom: 0px;
 680   top: 0px;
 681   left: 0px;
 682   right: 0px;
 683   width: auto;
 684   height: auto;
 685 }
 686 :root:not(.noVNC_connected) #noVNC_screen {
 687   display: none;
 688 }
 689
 690 /* Do not set width/height for VNC_canvas or incorrect
 691  * scaling will occur. Canvas size depends on remote VNC
 692  * settings and noVNC settings. */
 693 #noVNC_canvas {
 694   position: absolute;
 695   left: 0;
 696   right: 0;
 697   margin-left: auto;
 698   margin-right: auto;
 699 }
 700
 701 /*Default noVNC logo.*/
 702 /* From: http://fonts.googleapis.com/css?family=Orbitron:700 */
 703 @font-face {
 704   font-family: 'Orbitron';
 705   font-style: normal;
 706   font-weight: 700;
 707   src: local('?'), url('Orbitron700.woff') format('woff'),
 708                    url('Orbitron700.ttf') format('truetype');
 709 }
 710
 711 .noVNC_logo {
 712   color:yellow;
 713   text-align:left;
 714   font-family: 'Orbitron', 'OrbitronTTF', sans-serif;
 715   font-size: 13px;
 716   line-height:90%;
 717   text-shadow: 1px 1px 0 #000;
 718 }
 719 .noVNC_logo span{
 720   color:green;
 721 }
 722
 723 #noVNC_logo {
 724   margin-top: 60px;
 725   margin-left: 60px;
 726   font-size: 180px;
 727   text-shadow:
 728        5px 5px 0 #000,
 729       -1px -1px 0 #000,
 730        1px -1px 0 #000,
 731       -1px 1px 0 #000,
 732        1px 1px 0 #000;
 733 }
 734 :root.noVNC_connected #noVNC_logo {
 735   display: none;
 736 }
 737
 738 #noVNC_bell {
 739   display: none;
 740 }
 741
 742 /* ----------------------------------------
 743  * Media sizing
 744  * ----------------------------------------
 745  */
 746
 747 @media screen and (max-width: 640px){
 748   #noVNC_logo {
 749     font-size: 150px;
 750   }
 751 }
 752
 753 @media screen and (min-width: 321px) and (max-width: 480px) {
 754   #noVNC_logo {
 755     font-size: 110px;
 756   }
 757 }
 758
 759 @media screen and (max-width: 320px) {
 760   #noVNC_logo {
 761     font-size: 90px;
 762   }
 763 }