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