app/styles/base.css

   1 /*
   2  * noVNC base CSS
   3  * Copyright (C) 2019 The noVNC Authors
   4  * noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
   5  * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
   6  */
   7
   8 /*
   9  * Z index layers:
  10  *
  11  * 0: Main screen
  12  * 10: Control bar
  13  * 50: Transition blocker
  14  * 60: Connection popups
  15  * 100: Status bar
  16  * ...
  17  * 1000: Javascript crash
  18  * ...
  19  * 10000: Max (used for polyfills)
  20  */
  21
  22 body {
  23   margin:0;
  24   padding:0;
  25   font-family: Helvetica;
  26   /*Background image with light grey curve.*/
  27   background-color:#494949;
  28   background-repeat:no-repeat;
  29   background-position:right bottom;
  30   height:100%;
  31   touch-action: none;
  32 }
  33
  34 html {
  35   height:100%;
  36 }
  37
  38 .noVNC_only_touch.noVNC_hidden {
  39   display: none;
  40 }
  41
  42 .noVNC_disabled {
  43   color: rgb(128, 128, 128);
  44 }
  45
  46 /* ----------------------------------------
  47  * Spinner
  48  * ----------------------------------------
  49  */
  50
  51 .noVNC_spinner {
  52   position: relative;
  53 }
  54 .noVNC_spinner, .noVNC_spinner::before, .noVNC_spinner::after {
  55   width: 10px;
  56   height: 10px;
  57   border-radius: 2px;
  58   box-shadow: -60px 10px 0 rgba(255, 255, 255, 0);
  59   animation: noVNC_spinner 1.0s linear infinite;
  60 }
  61 .noVNC_spinner::before {
  62   content: "";
  63   position: absolute;
  64   left: 0px;
  65   top: 0px;
  66   animation-delay: -0.1s;
  67 }
  68 .noVNC_spinner::after {
  69   content: "";
  70   position: absolute;
  71   top: 0px;
  72   left: 0px;
  73   animation-delay: 0.1s;
  74 }
  75 @keyframes noVNC_spinner {
  76   0% { box-shadow: -60px 10px 0 rgba(255, 255, 255, 0); width: 20px; }
  77   25% { box-shadow: 20px 10px 0 rgba(255, 255, 255, 1); width: 10px; }
  78   50% { box-shadow: 60px 10px 0 rgba(255, 255, 255, 0); width: 10px; }
  79 }
  80
  81 /* ----------------------------------------
  82  * Input Elements
  83  * ----------------------------------------
  84  */
  85
  86 input[type=input], input[type=password], input[type=number],
  87 input:not([type]), textarea {
  88   /* Disable default rendering */
  89   -webkit-appearance: none;
  90   -moz-appearance: none;
  91   background: none;
  92
  93   margin: 2px;
  94   padding: 2px;
  95   border: 1px solid rgb(192, 192, 192);
  96   border-radius: 5px;
  97   color: black;
  98   background: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240));
  99 }
 100
 101 input[type=button], input[type=submit], select {
 102   /* Disable default rendering */
 103   -webkit-appearance: none;
 104   -moz-appearance: none;
 105   background: none;
 106
 107   margin: 2px;
 108   padding: 2px;
 109   border: 1px solid rgb(192, 192, 192);
 110   border-bottom-width: 2px;
 111   border-radius: 5px;
 112   color: black;
 113   background: linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
 114
 115   /* This avoids it jumping around when :active */
 116   vertical-align: middle;
 117 }
 118
 119 input[type=button], input[type=submit] {
 120   padding-left: 20px;
 121   padding-right: 20px;
 122 }
 123
 124 option {
 125   color: black;
 126   background: white;
 127 }
 128
 129 input[type=input]:focus, input[type=password]:focus,
 130 input:not([type]):focus, input[type=button]:focus,
 131 input[type=submit]:focus,
 132 textarea:focus, select:focus {
 133   box-shadow: 0px 0px 3px rgba(74, 144, 217, 0.5);
 134   border-color: rgb(74, 144, 217);
 135   outline: none;
 136 }
 137
 138 input[type=button]::-moz-focus-inner,
 139 input[type=submit]::-moz-focus-inner {
 140   border: none;
 141 }
 142
 143 input[type=input]:disabled, input[type=password]:disabled,
 144 input:not([type]):disabled, input[type=button]:disabled,
 145 input[type=submit]:disabled, input[type=number]:disabled,
 146 textarea:disabled, select:disabled {
 147   color: rgb(128, 128, 128);
 148   background: rgb(240, 240, 240);
 149 }
 150
 151 input[type=button]:active, input[type=submit]:active,
 152 select:active {
 153   border-bottom-width: 1px;
 154   margin-top: 3px;
 155 }
 156
 157 :root:not(.noVNC_touch) input[type=button]:hover:not(:disabled),
 158 :root:not(.noVNC_touch) input[type=submit]:hover:not(:disabled),
 159 :root:not(.noVNC_touch) select:hover:not(:disabled) {
 160   background: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
 161 }
 162
 163 /* ----------------------------------------
 164  * WebKit centering hacks
 165  * ----------------------------------------
 166  */
 167
 168 .noVNC_center {
 169   /*
 170    * This is a workaround because webkit misrenders transforms and
 171    * uses non-integer coordinates, resulting in blurry content.
 172    * Ideally we'd use "top: 50%; transform: translateY(-50%);" on
 173    * the objects instead.
 174    */
 175   display: flex;
 176   align-items: center;
 177   justify-content: center;
 178   position: fixed;
 179   top: 0;
 180   left: 0;
 181   width: 100%;
 182   height: 100%;
 183   pointer-events: none;
 184 }
 185 .noVNC_center > * {
 186   pointer-events: auto;
 187 }
 188 .noVNC_vcenter {
 189   display: flex;
 190   flex-direction: column;
 191   justify-content: center;
 192   position: fixed;
 193   top: 0;
 194   left: 0;
 195   height: 100%;
 196   pointer-events: none;
 197 }
 198 .noVNC_vcenter > * {
 199   pointer-events: auto;
 200 }
 201
 202 /* ----------------------------------------
 203  * Layering
 204  * ----------------------------------------
 205  */
 206
 207 .noVNC_connect_layer {
 208   z-index: 60;
 209 }
 210
 211 /* ----------------------------------------
 212  * Fallback error
 213  * ----------------------------------------
 214  */
 215
 216 #noVNC_fallback_error {
 217   z-index: 1000;
 218   visibility: hidden;
 219 }
 220 #noVNC_fallback_error.noVNC_open {
 221   visibility: visible;
 222 }
 223
 224 #noVNC_fallback_error > div {
 225   max-width: 90%;
 226   padding: 15px;
 227
 228   transition: 0.5s ease-in-out;
 229
 230   transform: translateY(-50px);
 231   opacity: 0;
 232
 233   text-align: center;
 234   font-weight: bold;
 235   color: #fff;
 236
 237   border-radius: 10px;
 238   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
 239   background: rgba(200,55,55,0.8);
 240 }
 241 #noVNC_fallback_error.noVNC_open > div {
 242   transform: translateY(0);
 243   opacity: 1;
 244 }
 245
 246 #noVNC_fallback_errormsg {
 247   font-weight: normal;
 248 }
 249
 250 #noVNC_fallback_errormsg .noVNC_message {
 251   display: inline-block;
 252   text-align: left;
 253   font-family: monospace;
 254   white-space: pre-wrap;
 255 }
 256
 257 #noVNC_fallback_error .noVNC_location {
 258   font-style: italic;
 259   font-size: 0.8em;
 260   color: rgba(255, 255, 255, 0.8);
 261 }
 262
 263 #noVNC_fallback_error .noVNC_stack {
 264   max-height: 50vh;
 265   padding: 10px;
 266   margin: 10px;
 267   font-size: 0.8em;
 268   text-align: left;
 269   font-family: monospace;
 270   white-space: pre;
 271   border: 1px solid rgba(0, 0, 0, 0.5);
 272   background: rgba(0, 0, 0, 0.2);
 273   overflow: auto;
 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 /* Control bar hint */
 406 #noVNC_control_bar_hint {
 407   position: fixed;
 408   left: calc(100vw - 50px);
 409   right: auto;
 410   top: 50%;
 411   transform: translateY(-50%) scale(0);
 412   width: 100px;
 413   height: 50%;
 414   max-height: 600px;
 415
 416   visibility: hidden;
 417   opacity: 0;
 418   transition: 0.2s ease-in-out;
 419   background: transparent;
 420   box-shadow: 0 0 10px black, inset 0 0 10px 10px rgba(110, 132, 163, 0.8);
 421   border-radius: 10px;
 422   transition-delay: 0s;
 423 }
 424 #noVNC_control_bar_anchor.noVNC_right #noVNC_control_bar_hint{
 425   left: auto;
 426   right: calc(100vw - 50px);
 427 }
 428 #noVNC_control_bar_hint.noVNC_active {
 429   visibility: visible;
 430   opacity: 1;
 431   transition-delay: 0.2s;
 432   transform: translateY(-50%) scale(1);
 433 }
 434
 435 /* General button style */
 436 .noVNC_button {
 437   display: block;
 438   padding: 4px 4px;
 439   margin: 10px 0;
 440   vertical-align: middle;
 441   border:1px solid rgba(255, 255, 255, 0.2);
 442   border-radius: 6px;
 443 }
 444 .noVNC_button.noVNC_selected {
 445   border-color: rgba(0, 0, 0, 0.8);
 446   background: rgba(0, 0, 0, 0.5);
 447 }
 448 .noVNC_button:disabled {
 449   opacity: 0.4;
 450 }
 451 .noVNC_button:focus {
 452   outline: none;
 453 }
 454 .noVNC_button:active {
 455   padding-top: 5px;
 456   padding-bottom: 3px;
 457 }
 458 /* Android browsers don't properly update hover state if touch events
 459  * are intercepted, but focus should be safe to display */
 460 :root:not(.noVNC_touch) .noVNC_button.noVNC_selected:hover,
 461 .noVNC_button.noVNC_selected:focus {
 462   border-color: rgba(0, 0, 0, 0.4);
 463   background: rgba(0, 0, 0, 0.2);
 464 }
 465 :root:not(.noVNC_touch) .noVNC_button:hover,
 466 .noVNC_button:focus {
 467   background: rgba(255, 255, 255, 0.2);
 468 }
 469 .noVNC_button.noVNC_hidden {
 470   display: none;
 471 }
 472
 473 /* Panels */
 474 .noVNC_panel {
 475   transform: translateX(25px);
 476
 477   transition: 0.5s ease-in-out;
 478
 479   max-height: 100vh; /* Chrome is buggy with 100% */
 480   overflow-x: hidden;
 481   overflow-y: auto;
 482
 483   visibility: hidden;
 484   opacity: 0;
 485
 486   padding: 15px;
 487
 488   background: #fff;
 489   border-radius: 10px;
 490   color: #000;
 491   border: 2px solid #E0E0E0;
 492   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
 493 }
 494 .noVNC_panel.noVNC_open {
 495   visibility: visible;
 496   opacity: 1;
 497   transform: translateX(75px);
 498 }
 499 .noVNC_right .noVNC_vcenter {
 500   left: auto;
 501   right: 0;
 502 }
 503 .noVNC_right .noVNC_panel {
 504   transform: translateX(-25px);
 505 }
 506 .noVNC_right .noVNC_panel.noVNC_open {
 507   transform: translateX(-75px);
 508 }
 509
 510 .noVNC_panel hr {
 511   border: none;
 512   border-top: 1px solid rgb(192, 192, 192);
 513 }
 514
 515 .noVNC_panel label {
 516   display: block;
 517   white-space: nowrap;
 518 }
 519
 520 .noVNC_panel .noVNC_heading {
 521   background-color: rgb(110, 132, 163);
 522   border-radius: 5px;
 523   padding: 5px;
 524   /* Compensate for padding in image */
 525   padding-right: 8px;
 526   color: white;
 527   font-size: 20px;
 528   margin-bottom: 10px;
 529   white-space: nowrap;
 530 }
 531 .noVNC_panel .noVNC_heading img {
 532   vertical-align: bottom;
 533 }
 534
 535 .noVNC_submit {
 536   float: right;
 537 }
 538
 539 /* Expanders */
 540 .noVNC_expander {
 541   cursor: pointer;
 542 }
 543 .noVNC_expander::before {
 544   content: url("../images/expander.svg");
 545   display: inline-block;
 546   margin-right: 5px;
 547   transition: 0.2s ease-in-out;
 548 }
 549 .noVNC_expander.noVNC_open::before {
 550   transform: rotateZ(90deg);
 551 }
 552 .noVNC_expander ~ * {
 553   margin: 5px;
 554   margin-left: 10px;
 555   padding: 5px;
 556   background: rgba(0, 0, 0, 0.05);
 557   border-radius: 5px;
 558 }
 559 .noVNC_expander:not(.noVNC_open) ~ * {
 560   display: none;
 561 }
 562
 563 /* Control bar content */
 564
 565 #noVNC_control_bar .noVNC_logo {
 566   font-size: 13px;
 567 }
 568
 569 :root:not(.noVNC_connected) #noVNC_view_drag_button {
 570   display: none;
 571 }
 572
 573 /* noVNC Touch Device only buttons */
 574 :root:not(.noVNC_connected) #noVNC_mobile_buttons {
 575   display: none;
 576 }
 577 :root:not(.noVNC_touch) #noVNC_mobile_buttons {
 578   display: none;
 579 }
 580
 581 /* Extra manual keys */
 582 :root:not(.noVNC_connected) #noVNC_extra_keys {
 583   display: none;
 584 }
 585
 586 #noVNC_modifiers {
 587   background-color: rgb(92, 92, 92);
 588   border: none;
 589   padding: 0 10px;
 590 }
 591
 592 /* Shutdown/Reboot */
 593 :root:not(.noVNC_connected) #noVNC_power_button {
 594   display: none;
 595 }
 596 #noVNC_power {
 597 }
 598 #noVNC_power_buttons {
 599   display: none;
 600 }
 601
 602 #noVNC_power input[type=button] {
 603   width: 100%;
 604 }
 605
 606 /* Clipboard */
 607 :root:not(.noVNC_connected) #noVNC_clipboard_button {
 608   display: none;
 609 }
 610 #noVNC_clipboard {
 611   /* Full screen, minus padding and left and right margins */
 612   max-width: calc(100vw - 2*15px - 75px - 25px);
 613 }
 614 #noVNC_clipboard_text {
 615   width: 500px;
 616   max-width: 100%;
 617 }
 618
 619 /* Settings */
 620 #noVNC_settings {
 621 }
 622 #noVNC_settings ul {
 623   list-style: none;
 624   margin: 0px;
 625   padding: 0px;
 626 }
 627 #noVNC_setting_port {
 628   width: 80px;
 629 }
 630 #noVNC_setting_path {
 631   width: 100px;
 632 }
 633
 634 /* Version */
 635
 636 .noVNC_version_wrapper {
 637   font-size: small;
 638 }
 639
 640 .noVNC_version {
 641   margin-left: 1rem;
 642 }
 643
 644 /* Connection Controls */
 645 :root:not(.noVNC_connected) #noVNC_disconnect_button {
 646   display: none;
 647 }
 648
 649 /* ----------------------------------------
 650  * Status Dialog
 651  * ----------------------------------------
 652  */
 653
 654 #noVNC_status {
 655   position: fixed;
 656   top: 0;
 657   left: 0;
 658   width: 100%;
 659   z-index: 100;
 660   transform: translateY(-100%);
 661
 662   cursor: pointer;
 663
 664   transition: 0.5s ease-in-out;
 665
 666   visibility: hidden;
 667   opacity: 0;
 668
 669   padding: 5px;
 670
 671   display: flex;
 672   flex-direction: row;
 673   justify-content: center;
 674   align-content: center;
 675
 676   line-height: 25px;
 677   word-wrap: break-word;
 678   color: #fff;
 679
 680   border-bottom: 1px solid rgba(0, 0, 0, 0.9);
 681 }
 682 #noVNC_status.noVNC_open {
 683   transform: translateY(0);
 684   visibility: visible;
 685   opacity: 1;
 686 }
 687
 688 #noVNC_status::before {
 689   content: "";
 690   display: inline-block;
 691   width: 25px;
 692   height: 25px;
 693   margin-right: 5px;
 694 }
 695
 696 #noVNC_status.noVNC_status_normal {
 697   background: rgba(128,128,128,0.9);
 698 }
 699 #noVNC_status.noVNC_status_normal::before {
 700   content: url("../images/info.svg") " ";
 701 }
 702 #noVNC_status.noVNC_status_error {
 703   background: rgba(200,55,55,0.9);
 704 }
 705 #noVNC_status.noVNC_status_error::before {
 706   content: url("../images/error.svg") " ";
 707 }
 708 #noVNC_status.noVNC_status_warn {
 709   background: rgba(180,180,30,0.9);
 710 }
 711 #noVNC_status.noVNC_status_warn::before {
 712   content: url("../images/warning.svg") " ";
 713 }
 714
 715 /* ----------------------------------------
 716  * Connect Dialog
 717  * ----------------------------------------
 718  */
 719
 720 #noVNC_connect_dlg {
 721   transition: 0.5s ease-in-out;
 722
 723   transform: scale(0, 0);
 724   visibility: hidden;
 725   opacity: 0;
 726 }
 727 #noVNC_connect_dlg.noVNC_open {
 728   transform: scale(1, 1);
 729   visibility: visible;
 730   opacity: 1;
 731 }
 732 #noVNC_connect_dlg .noVNC_logo {
 733   transition: 0.5s ease-in-out;
 734   padding: 10px;
 735   margin-bottom: 10px;
 736
 737   font-size: 80px;
 738   text-align: center;
 739
 740   border-radius: 5px;
 741 }
 742 @media (max-width: 440px) {
 743   #noVNC_connect_dlg {
 744     max-width: calc(100vw - 100px);
 745   }
 746   #noVNC_connect_dlg .noVNC_logo {
 747     font-size: calc(25vw - 30px);
 748   }
 749 }
 750 #noVNC_connect_button {
 751   cursor: pointer;
 752
 753   padding: 10px;
 754
 755   color: white;
 756   background-color: rgb(110, 132, 163);
 757   border-radius: 12px;
 758
 759   text-align: center;
 760   font-size: 20px;
 761
 762   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
 763 }
 764 #noVNC_connect_button div {
 765   margin: 2px;
 766   padding: 5px 30px;
 767   border: 1px solid rgb(83, 99, 122);
 768   border-bottom-width: 2px;
 769   border-radius: 5px;
 770   background: linear-gradient(to top, rgb(110, 132, 163), rgb(99, 119, 147));
 771
 772   /* This avoids it jumping around when :active */
 773   vertical-align: middle;
 774 }
 775 #noVNC_connect_button div:active {
 776   border-bottom-width: 1px;
 777   margin-top: 3px;
 778 }
 779 :root:not(.noVNC_touch) #noVNC_connect_button div:hover {
 780   background: linear-gradient(to top, rgb(110, 132, 163), rgb(105, 125, 155));
 781 }
 782
 783 #noVNC_connect_button img {
 784   vertical-align: bottom;
 785   height: 1.3em;
 786 }
 787
 788 /* ----------------------------------------
 789  * Password Dialog
 790  * ----------------------------------------
 791  */
 792
 793 #noVNC_credentials_dlg {
 794   position: relative;
 795
 796   transform: translateY(-50px);
 797 }
 798 #noVNC_credentials_dlg.noVNC_open {
 799   transform: translateY(0);
 800 }
 801 #noVNC_credentials_dlg ul {
 802   list-style: none;
 803   margin: 0px;
 804   padding: 0px;
 805 }
 806 .noVNC_hidden {
 807   display: none;
 808 }
 809
 810
 811 /* ----------------------------------------
 812  * Main Area
 813  * ----------------------------------------
 814  */
 815
 816 /* Transition screen */
 817 #noVNC_transition {
 818   display: none;
 819
 820   position: fixed;
 821   top: 0;
 822   left: 0;
 823   bottom: 0;
 824   right: 0;
 825
 826   color: white;
 827   background: rgba(0, 0, 0, 0.5);
 828   z-index: 50;
 829
 830   /*display: flex;*/
 831   align-items: center;
 832   justify-content: center;
 833   flex-direction: column;
 834 }
 835 :root.noVNC_loading #noVNC_transition,
 836 :root.noVNC_connecting #noVNC_transition,
 837 :root.noVNC_disconnecting #noVNC_transition,
 838 :root.noVNC_reconnecting #noVNC_transition {
 839   display: flex;
 840 }
 841 :root:not(.noVNC_reconnecting) #noVNC_cancel_reconnect_button {
 842   display: none;
 843 }
 844 #noVNC_transition_text {
 845   font-size: 1.5em;
 846 }
 847
 848 /* Main container */
 849 #noVNC_container {
 850   width: 100%;
 851   height: 100%;
 852   background-color: #313131;
 853   border-bottom-right-radius: 800px 600px;
 854   /*border-top-left-radius: 800px 600px;*/
 855 }
 856
 857 #noVNC_keyboardinput {
 858   width: 1px;
 859   height: 1px;
 860   background-color: #fff;
 861   color: #fff;
 862   border: 0;
 863   position: absolute;
 864   left: -40px;
 865   z-index: -1;
 866   ime-mode: disabled;
 867 }
 868
 869 /*Default noVNC logo.*/
 870 /* From: http://fonts.googleapis.com/css?family=Orbitron:700 */
 871 @font-face {
 872   font-family: 'Orbitron';
 873   font-style: normal;
 874   font-weight: 700;
 875   src: local('?'), url('Orbitron700.woff') format('woff'),
 876                    url('Orbitron700.ttf') format('truetype');
 877 }
 878
 879 .noVNC_logo {
 880   color:yellow;
 881   font-family: 'Orbitron', 'OrbitronTTF', sans-serif;
 882   line-height:90%;
 883   text-shadow: 0.1em 0.1em 0 black;
 884 }
 885 .noVNC_logo span{
 886   color:green;
 887 }
 888
 889 #noVNC_bell {
 890   display: none;
 891 }
 892
 893 /* ----------------------------------------
 894  * Media sizing
 895  * ----------------------------------------
 896  */
 897
 898 @media screen and (max-width: 640px){
 899   #noVNC_logo {
 900     font-size: 150px;
 901   }
 902 }
 903
 904 @media screen and (min-width: 321px) and (max-width: 480px) {
 905   #noVNC_logo {
 906     font-size: 110px;
 907   }
 908 }
 909
 910 @media screen and (max-width: 320px) {
 911   #noVNC_logo {
 912     font-size: 90px;
 913   }
 914 }