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