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