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