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   cursor: pointer;
 607
 608   transition: 0.5s ease-in-out;
 609
 610   visibility: hidden;
 611   opacity: 0;
 612
 613   padding: 5px;
 614
 615   display: flex;
 616   flex-direction: row;
 617   justify-content: center;
 618   align-content: center;
 619
 620   line-height: 25px;
 621   word-wrap: break-word;
 622   color: #fff;
 623
 624   border-bottom: 1px solid rgba(0, 0, 0, 0.9);
 625 }
 626 #noVNC_status.noVNC_open {
 627   transform: translateY(0);
 628   visibility: visible;
 629   opacity: 1;
 630 }
 631
 632 #noVNC_status::before {
 633   content: "";
 634   display: inline-block;
 635   width: 25px;
 636   height: 25px;
 637   margin-right: 5px;
 638 }
 639
 640 #noVNC_status.noVNC_status_normal {
 641   background: rgba(128,128,128,0.9);
 642 }
 643 #noVNC_status.noVNC_status_normal::before {
 644   content: url("../images/info.svg") " ";
 645 }
 646 #noVNC_status.noVNC_status_error {
 647   background: rgba(200,55,55,0.9);
 648 }
 649 #noVNC_status.noVNC_status_error::before {
 650   content: url("../images/error.svg") " ";
 651 }
 652 #noVNC_status.noVNC_status_warn {
 653   background: rgba(180,180,30,0.9);
 654 }
 655 #noVNC_status.noVNC_status_warn::before {
 656   content: url("../images/warning.svg") " ";
 657 }
 658
 659 /* ----------------------------------------
 660  * Connect Dialog
 661  * ----------------------------------------
 662  */
 663
 664 #noVNC_connect_dlg {
 665   transition: 0.5s ease-in-out;
 666
 667   transform: scale(0, 0);
 668   visibility: hidden;
 669   opacity: 0;
 670 }
 671 #noVNC_connect_dlg.noVNC_open {
 672   transform: scale(1, 1);
 673   visibility: visible;
 674   opacity: 1;
 675 }
 676 #noVNC_connect_dlg .noVNC_logo {
 677   transition: 0.5s ease-in-out;
 678   padding: 10px;
 679   margin-bottom: 10px;
 680
 681   font-size: 80px;
 682   text-align: center;
 683
 684   border-radius: 5px;
 685 }
 686 @media (max-width: 440px) {
 687   #noVNC_connect_dlg {
 688     max-width: calc(100vw - 100px);
 689   }
 690   #noVNC_connect_dlg .noVNC_logo {
 691     font-size: calc(25vw - 30px);
 692   }
 693 }
 694 #noVNC_connect_button {
 695   cursor: pointer;
 696
 697   padding: 10px;
 698
 699   color: white;
 700   background-color: rgb(110, 132, 163);
 701   border-radius: 12px;
 702
 703   text-align: center;
 704   font-size: 20px;
 705
 706   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
 707 }
 708 #noVNC_connect_button div {
 709   margin: 2px;
 710   padding: 5px 30px;
 711   border: 1px solid rgb(83, 99, 122);
 712   border-bottom-width: 2px;
 713   border-radius: 5px;
 714   background: linear-gradient(to top, rgb(110, 132, 163), rgb(99, 119, 147));
 715
 716   /* This avoids it jumping around when :active */
 717   vertical-align: middle;
 718 }
 719 #noVNC_connect_button div:active {
 720   border-bottom-width: 1px;
 721   margin-top: 3px;
 722 }
 723 :root:not(.noVNC_touch) #noVNC_connect_button div:hover {
 724   background: linear-gradient(to top, rgb(110, 132, 163), rgb(105, 125, 155));
 725 }
 726
 727 #noVNC_connect_button img {
 728   vertical-align: bottom;
 729   height: 1.3em;
 730 }
 731
 732 /* ----------------------------------------
 733  * Password Dialog
 734  * ----------------------------------------
 735  */
 736
 737 #noVNC_password_dlg {
 738   position: relative;
 739
 740   transform: translateY(-50px);
 741 }
 742 #noVNC_password_dlg.noVNC_open {
 743   transform: translateY(0);
 744 }
 745 #noVNC_password_dlg ul {
 746   list-style: none;
 747   margin: 0px;
 748   padding: 0px;
 749 }
 750
 751 /* ----------------------------------------
 752  * Main Area
 753  * ----------------------------------------
 754  */
 755
 756 /* Transition screen */
 757 #noVNC_transition {
 758   display: none;
 759
 760   position: fixed;
 761   top: 0;
 762   left: 0;
 763   bottom: 0;
 764   right: 0;
 765
 766   color: white;
 767   background: rgba(0, 0, 0, 0.5);
 768   z-index: 50;
 769
 770   /*display: flex;*/
 771   align-items: center;
 772   justify-content: center;
 773   flex-direction: column;
 774 }
 775 :root.noVNC_connecting #noVNC_transition,
 776 :root.noVNC_disconnecting #noVNC_transition {
 777   display: flex;
 778 }
 779 #noVNC_transition_text {
 780   font-size: 1.5em;
 781 }
 782
 783 /* Main container */
 784 #noVNC_container {
 785   display: table;
 786   width: 100%;
 787   height: 100%;
 788   background-color: #313131;
 789   border-bottom-right-radius: 800px 600px;
 790   /*border-top-left-radius: 800px 600px;*/
 791 }
 792 :root.noVNC_connected #noVNC_container {
 793   background-color: rgb(40, 40, 40);
 794   border-radius: 0;
 795 }
 796
 797 /* HTML5 Canvas */
 798 #noVNC_screen {
 799   position: absolute;
 800   margin: 0px;
 801   padding: 0px;
 802   bottom: 0px;
 803   top: 0px;
 804   left: 0px;
 805   right: 0px;
 806   width: auto;
 807   height: auto;
 808 }
 809 :root:not(.noVNC_connected) #noVNC_screen {
 810   display: none;
 811 }
 812
 813 /* Do not set width/height for VNC_canvas or incorrect
 814  * scaling will occur. Canvas size depends on remote VNC
 815  * settings and noVNC settings. */
 816 #noVNC_canvas {
 817   position: absolute;
 818   top: 0;
 819   left: 0;
 820   right: 0;
 821   bottom: 0;
 822   margin: auto;
 823 }
 824
 825 /*Default noVNC logo.*/
 826 /* From: http://fonts.googleapis.com/css?family=Orbitron:700 */
 827 @font-face {
 828   font-family: 'Orbitron';
 829   font-style: normal;
 830   font-weight: 700;
 831   src: local('?'), url('Orbitron700.woff') format('woff'),
 832                    url('Orbitron700.ttf') format('truetype');
 833 }
 834
 835 .noVNC_logo {
 836   color:yellow;
 837   font-family: 'Orbitron', 'OrbitronTTF', sans-serif;
 838   line-height:90%;
 839   text-shadow: 0.1em 0.1em 0 black;
 840 }
 841 .noVNC_logo span{
 842   color:green;
 843 }
 844
 845 #noVNC_bell {
 846   display: none;
 847 }
 848
 849 /* ----------------------------------------
 850  * Media sizing
 851  * ----------------------------------------
 852  */
 853
 854 @media screen and (max-width: 640px){
 855   #noVNC_logo {
 856     font-size: 150px;
 857   }
 858 }
 859
 860 @media screen and (min-width: 321px) and (max-width: 480px) {
 861   #noVNC_logo {
 862     font-size: 110px;
 863   }
 864 }
 865
 866 @media screen and (max-width: 320px) {
 867   #noVNC_logo {
 868     font-size: 90px;
 869   }
 870 }