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