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 /* Control bar hint */
 406 #noVNC_control_bar_hint {
 407   position: fixed;
 408   left: calc(100vw - 50px);
 409   right: auto;
 410   width: 100px;
 411   height: 50%;
 412   max-height: 600px;
 413
 414   visibility: hidden;
 415   opacity: 0;
 416   transition: 0.2s ease-in-out;
 417   background: transparent;
 418   box-shadow: 0 0 10px black, inset 0 0 10px 10px rgba(110, 132, 163, 0.8);
 419   border-radius: 10px;
 420   transition-delay: 0s;
 421   transform: scale(0);
 422 }
 423 #noVNC_control_bar_anchor.noVNC_right #noVNC_control_bar_hint{
 424   left: auto;
 425   right: calc(100vw - 50px);
 426 }
 427 #noVNC_control_bar_hint.noVNC_active {
 428   visibility: visible;
 429   opacity: 1;
 430   transition-delay: 0.2s;
 431   transform: scale(1);
 432 }
 433
 434 /* General button style */
 435 .noVNC_button {
 436   display: block;
 437   padding: 4px 4px;
 438   margin: 10px 0;
 439   vertical-align: middle;
 440   border:1px solid rgba(255, 255, 255, 0.2);
 441   border-radius: 6px;
 442 }
 443 .noVNC_button.noVNC_selected {
 444   border-color: rgba(0, 0, 0, 0.8);
 445   background: rgba(0, 0, 0, 0.5);
 446 }
 447 .noVNC_button:disabled {
 448   opacity: 0.4;
 449 }
 450 .noVNC_button:focus {
 451   outline: none;
 452 }
 453 .noVNC_button:active {
 454   padding-top: 5px;
 455   padding-bottom: 3px;
 456 }
 457 :root:not(.noVNC_touch) .noVNC_button.noVNC_selected:hover {
 458   border-color: rgba(0, 0, 0, 0.4);
 459   background: rgba(0, 0, 0, 0.2);
 460 }
 461 :root:not(.noVNC_touch) .noVNC_button:hover {
 462   background: rgba(255, 255, 255, 0.2);
 463 }
 464 .noVNC_button.noVNC_hidden {
 465   display: none;
 466 }
 467
 468 /* Panels */
 469 .noVNC_panel {
 470   transform: translateX(25px);
 471
 472   transition: 0.5s ease-in-out;
 473
 474   max-height: 100vh; /* Chrome is buggy with 100% */
 475   overflow-x: hidden;
 476   overflow-y: auto;
 477
 478   visibility: hidden;
 479   opacity: 0;
 480
 481   padding: 15px;
 482
 483   background: #fff;
 484   border-radius: 10px;
 485   color: #000;
 486   border: 2px solid #E0E0E0;
 487   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
 488 }
 489 .noVNC_panel.noVNC_open {
 490   visibility: visible;
 491   opacity: 1;
 492   transform: translateX(75px);
 493 }
 494 .noVNC_right .noVNC_vcenter {
 495   left: auto;
 496   right: 0;
 497 }
 498 .noVNC_right .noVNC_panel {
 499   transform: translateX(-25px);
 500 }
 501 .noVNC_right .noVNC_panel.noVNC_open {
 502   transform: translateX(-75px);
 503 }
 504
 505 .noVNC_panel hr {
 506   border: none;
 507   border-top: 1px solid rgb(192, 192, 192);
 508 }
 509
 510 .noVNC_panel label {
 511   display: block;
 512   white-space: nowrap;
 513 }
 514
 515 .noVNC_panel .noVNC_heading {
 516   background-color: rgb(110, 132, 163);
 517   border-radius: 5px;
 518   padding: 5px;
 519   /* Compensate for padding in image */
 520   padding-right: 8px;
 521   color: white;
 522   font-size: 20px;
 523   margin-bottom: 10px;
 524   white-space: nowrap;
 525 }
 526 .noVNC_panel .noVNC_heading img {
 527   vertical-align: bottom;
 528 }
 529
 530 .noVNC_submit {
 531   float: right;
 532 }
 533
 534 /* Expanders */
 535 .noVNC_expander {
 536   cursor: pointer;
 537 }
 538 .noVNC_expander::before {
 539   content: url("../images/expander.svg");
 540   display: inline-block;
 541   margin-right: 5px;
 542   transition: 0.2s ease-in-out;
 543 }
 544 .noVNC_expander.noVNC_open::before {
 545   transform: rotateZ(90deg);
 546 }
 547 .noVNC_expander ~ * {
 548   margin: 5px;
 549   margin-left: 10px;
 550   padding: 5px;
 551   background: rgba(0, 0, 0, 0.05);
 552   border-radius: 5px;
 553 }
 554 .noVNC_expander:not(.noVNC_open) ~ * {
 555   display: none;
 556 }
 557
 558 /* Control bar content */
 559
 560 #noVNC_control_bar .noVNC_logo {
 561   font-size: 13px;
 562 }
 563
 564 :root:not(.noVNC_connected) #noVNC_view_drag_button {
 565   display: none;
 566 }
 567
 568 /* noVNC Touch Device only buttons */
 569 :root:not(.noVNC_connected) #noVNC_mobile_buttons {
 570   display: none;
 571 }
 572 :root:not(.noVNC_touch) #noVNC_mobile_buttons {
 573   display: none;
 574 }
 575
 576 /* Extra manual keys */
 577 :root:not(.noVNC_connected) #noVNC_extra_keys {
 578   display: none;
 579 }
 580
 581 #noVNC_modifiers {
 582   background-color: rgb(92, 92, 92);
 583   border: none;
 584   padding: 0 10px;
 585 }
 586
 587 /* XVP Shutdown/Reboot */
 588 :root:not(.noVNC_connected) #noVNC_xvp_button {
 589   display: none;
 590 }
 591 #noVNC_xvp {
 592 }
 593 #noVNC_xvp_buttons {
 594   display: none;
 595 }
 596
 597 #noVNC_xvp input[type=button] {
 598   width: 100%;
 599 }
 600
 601 /* Clipboard */
 602 :root:not(.noVNC_connected) #noVNC_clipboard_button {
 603   display: none;
 604 }
 605 #noVNC_clipboard {
 606   /* Full screen, minus padding and left and right margins */
 607   max-width: calc(100vw - 2*15px - 75px - 25px);
 608 }
 609 #noVNC_clipboard_text {
 610   width: 500px;
 611   max-width: 100%;
 612 }
 613
 614 /* Settings */
 615 #noVNC_settings {
 616 }
 617 #noVNC_settings ul {
 618   list-style: none;
 619   margin: 0px;
 620   padding: 0px;
 621 }
 622 #noVNC_setting_port {
 623   width: 80px;
 624 }
 625 #noVNC_setting_path {
 626   width: 100px;
 627 }
 628
 629 /* Connection Controls */
 630 :root:not(.noVNC_connected) #noVNC_disconnect_button {
 631   display: none;
 632 }
 633
 634 /* ----------------------------------------
 635  * Status Dialog
 636  * ----------------------------------------
 637  */
 638
 639 #noVNC_status {
 640   position: fixed;
 641   top: 0;
 642   left: 0;
 643   width: 100%;
 644   z-index: 100;
 645   transform: translateY(-100%);
 646
 647   cursor: pointer;
 648
 649   transition: 0.5s ease-in-out;
 650
 651   visibility: hidden;
 652   opacity: 0;
 653
 654   padding: 5px;
 655
 656   display: flex;
 657   flex-direction: row;
 658   justify-content: center;
 659   align-content: center;
 660
 661   line-height: 25px;
 662   word-wrap: break-word;
 663   color: #fff;
 664
 665   border-bottom: 1px solid rgba(0, 0, 0, 0.9);
 666 }
 667 #noVNC_status.noVNC_open {
 668   transform: translateY(0);
 669   visibility: visible;
 670   opacity: 1;
 671 }
 672
 673 #noVNC_status::before {
 674   content: "";
 675   display: inline-block;
 676   width: 25px;
 677   height: 25px;
 678   margin-right: 5px;
 679 }
 680
 681 #noVNC_status.noVNC_status_normal {
 682   background: rgba(128,128,128,0.9);
 683 }
 684 #noVNC_status.noVNC_status_normal::before {
 685   content: url("../images/info.svg") " ";
 686 }
 687 #noVNC_status.noVNC_status_error {
 688   background: rgba(200,55,55,0.9);
 689 }
 690 #noVNC_status.noVNC_status_error::before {
 691   content: url("../images/error.svg") " ";
 692 }
 693 #noVNC_status.noVNC_status_warn {
 694   background: rgba(180,180,30,0.9);
 695 }
 696 #noVNC_status.noVNC_status_warn::before {
 697   content: url("../images/warning.svg") " ";
 698 }
 699
 700 /* ----------------------------------------
 701  * Connect Dialog
 702  * ----------------------------------------
 703  */
 704
 705 #noVNC_connect_dlg {
 706   transition: 0.5s ease-in-out;
 707
 708   transform: scale(0, 0);
 709   visibility: hidden;
 710   opacity: 0;
 711 }
 712 #noVNC_connect_dlg.noVNC_open {
 713   transform: scale(1, 1);
 714   visibility: visible;
 715   opacity: 1;
 716 }
 717 #noVNC_connect_dlg .noVNC_logo {
 718   transition: 0.5s ease-in-out;
 719   padding: 10px;
 720   margin-bottom: 10px;
 721
 722   font-size: 80px;
 723   text-align: center;
 724
 725   border-radius: 5px;
 726 }
 727 @media (max-width: 440px) {
 728   #noVNC_connect_dlg {
 729     max-width: calc(100vw - 100px);
 730   }
 731   #noVNC_connect_dlg .noVNC_logo {
 732     font-size: calc(25vw - 30px);
 733   }
 734 }
 735 #noVNC_connect_button {
 736   cursor: pointer;
 737
 738   padding: 10px;
 739
 740   color: white;
 741   background-color: rgb(110, 132, 163);
 742   border-radius: 12px;
 743
 744   text-align: center;
 745   font-size: 20px;
 746
 747   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
 748 }
 749 #noVNC_connect_button div {
 750   margin: 2px;
 751   padding: 5px 30px;
 752   border: 1px solid rgb(83, 99, 122);
 753   border-bottom-width: 2px;
 754   border-radius: 5px;
 755   background: linear-gradient(to top, rgb(110, 132, 163), rgb(99, 119, 147));
 756
 757   /* This avoids it jumping around when :active */
 758   vertical-align: middle;
 759 }
 760 #noVNC_connect_button div:active {
 761   border-bottom-width: 1px;
 762   margin-top: 3px;
 763 }
 764 :root:not(.noVNC_touch) #noVNC_connect_button div:hover {
 765   background: linear-gradient(to top, rgb(110, 132, 163), rgb(105, 125, 155));
 766 }
 767
 768 #noVNC_connect_button img {
 769   vertical-align: bottom;
 770   height: 1.3em;
 771 }
 772
 773 /* ----------------------------------------
 774  * Password Dialog
 775  * ----------------------------------------
 776  */
 777
 778 #noVNC_password_dlg {
 779   position: relative;
 780
 781   transform: translateY(-50px);
 782 }
 783 #noVNC_password_dlg.noVNC_open {
 784   transform: translateY(0);
 785 }
 786 #noVNC_password_dlg ul {
 787   list-style: none;
 788   margin: 0px;
 789   padding: 0px;
 790 }
 791
 792 /* ----------------------------------------
 793  * Main Area
 794  * ----------------------------------------
 795  */
 796
 797 /* Transition screen */
 798 #noVNC_transition {
 799   display: none;
 800
 801   position: fixed;
 802   top: 0;
 803   left: 0;
 804   bottom: 0;
 805   right: 0;
 806
 807   color: white;
 808   background: rgba(0, 0, 0, 0.5);
 809   z-index: 50;
 810
 811   /*display: flex;*/
 812   align-items: center;
 813   justify-content: center;
 814   flex-direction: column;
 815 }
 816 :root.noVNC_loading #noVNC_transition,
 817 :root.noVNC_connecting #noVNC_transition,
 818 :root.noVNC_disconnecting #noVNC_transition,
 819 :root.noVNC_reconnecting #noVNC_transition {
 820   display: flex;
 821 }
 822 :root:not(.noVNC_reconnecting) #noVNC_cancel_reconnect_button {
 823   display: none;
 824 }
 825 #noVNC_transition_text {
 826   font-size: 1.5em;
 827 }
 828
 829 /* Main container */
 830 #noVNC_container {
 831   width: 100%;
 832   height: 100%;
 833   background-color: #313131;
 834   border-bottom-right-radius: 800px 600px;
 835   /*border-top-left-radius: 800px 600px;*/
 836 }
 837
 838 #noVNC_keyboardinput {
 839   width: 1px;
 840   height: 1px;
 841   background-color: #fff;
 842   color: #fff;
 843   border: 0;
 844   position: absolute;
 845   left: -40px;
 846   z-index: -1;
 847   ime-mode: disabled;
 848 }
 849
 850 /* HTML5 Canvas */
 851 #noVNC_screen {
 852   display: flex;
 853   width: 100%;
 854   height: 100%;
 855   overflow: auto;
 856   background-color: rgb(40, 40, 40);
 857 }
 858 :root:not(.noVNC_connected) #noVNC_screen {
 859   display: none;
 860 }
 861
 862 /* Do not set width/height for VNC_canvas or incorrect
 863  * scaling will occur. Canvas size depends on remote VNC
 864  * settings and noVNC settings. */
 865 #noVNC_canvas {
 866   margin: auto;
 867   /* IE miscalculates width without this :( */
 868   flex-shrink: 0;
 869 }
 870
 871 /*Default noVNC logo.*/
 872 /* From: http://fonts.googleapis.com/css?family=Orbitron:700 */
 873 @font-face {
 874   font-family: 'Orbitron';
 875   font-style: normal;
 876   font-weight: 700;
 877   src: local('?'), url('Orbitron700.woff') format('woff'),
 878                    url('Orbitron700.ttf') format('truetype');
 879 }
 880
 881 .noVNC_logo {
 882   color:yellow;
 883   font-family: 'Orbitron', 'OrbitronTTF', sans-serif;
 884   line-height:90%;
 885   text-shadow: 0.1em 0.1em 0 black;
 886 }
 887 .noVNC_logo span{
 888   color:green;
 889 }
 890
 891 #noVNC_bell {
 892   display: none;
 893 }
 894
 895 /* ----------------------------------------
 896  * Media sizing
 897  * ----------------------------------------
 898  */
 899
 900 @media screen and (max-width: 640px){
 901   #noVNC_logo {
 902     font-size: 150px;
 903   }
 904 }
 905
 906 @media screen and (min-width: 321px) and (max-width: 480px) {
 907   #noVNC_logo {
 908     font-size: 110px;
 909   }
 910 }
 911
 912 @media screen and (max-width: 320px) {
 913   #noVNC_logo {
 914     font-size: 90px;
 915   }
 916 }