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 /* Extra manual keys */
 524 :root:not(.noVNC_connected) #noVNC_extra_keys {
 525   display: none;
 526 }
 527
 528 #noVNC_modifiers {
 529   background-color: rgb(92, 92, 92);
 530   border: none;
 531   padding: 0 10px;
 532 }
 533
 534 /* XVP Shutdown/Reboot */
 535 :root:not(.noVNC_connected) #noVNC_xvp_button {
 536   display: none;
 537 }
 538 #noVNC_xvp {
 539 }
 540 #noVNC_xvp_buttons {
 541   display: none;
 542 }
 543
 544 #noVNC_xvp input[type=button] {
 545   width: 100%;
 546 }
 547
 548 /* Clipboard */
 549 :root:not(.noVNC_connected) #noVNC_clipboard_button {
 550   display: none;
 551 }
 552 #noVNC_clipboard {
 553   /* Full screen, minus padding and left and right margins */
 554   max-width: calc(100vw - 2*15px - 75px - 25px);
 555 }
 556 #noVNC_clipboard_text {
 557   width: 500px;
 558   max-width: 100%;
 559 }
 560
 561 /* Settings */
 562 #noVNC_settings {
 563 }
 564 #noVNC_settings ul {
 565   list-style: none;
 566   margin: 0px;
 567   padding: 0px;
 568 }
 569 #noVNC_setting_port {
 570   width: 80px;
 571 }
 572 #noVNC_setting_path {
 573   width: 100px;
 574 }
 575
 576 /* Connection Controls */
 577 :root:not(.noVNC_connected) #noVNC_disconnect_button {
 578   display: none;
 579 }
 580
 581 /* ----------------------------------------
 582  * Status Dialog
 583  * ----------------------------------------
 584  */
 585
 586 #noVNC_status {
 587   position: fixed;
 588   top: 0;
 589   left: 0;
 590   width: 100%;
 591   z-index: 100;
 592   transform: translateY(-100%);
 593
 594   cursor: pointer;
 595
 596   transition: 0.5s ease-in-out;
 597
 598   visibility: hidden;
 599   opacity: 0;
 600
 601   padding: 5px;
 602
 603   display: flex;
 604   flex-direction: row;
 605   justify-content: center;
 606   align-content: center;
 607
 608   line-height: 25px;
 609   word-wrap: break-word;
 610   color: #fff;
 611
 612   border-bottom: 1px solid rgba(0, 0, 0, 0.9);
 613 }
 614 #noVNC_status.noVNC_open {
 615   transform: translateY(0);
 616   visibility: visible;
 617   opacity: 1;
 618 }
 619
 620 #noVNC_status::before {
 621   content: "";
 622   display: inline-block;
 623   width: 25px;
 624   height: 25px;
 625   margin-right: 5px;
 626 }
 627
 628 #noVNC_status.noVNC_status_normal {
 629   background: rgba(128,128,128,0.9);
 630 }
 631 #noVNC_status.noVNC_status_normal::before {
 632   content: url("../images/info.svg") " ";
 633 }
 634 #noVNC_status.noVNC_status_error {
 635   background: rgba(200,55,55,0.9);
 636 }
 637 #noVNC_status.noVNC_status_error::before {
 638   content: url("../images/error.svg") " ";
 639 }
 640 #noVNC_status.noVNC_status_warn {
 641   background: rgba(180,180,30,0.9);
 642 }
 643 #noVNC_status.noVNC_status_warn::before {
 644   content: url("../images/warning.svg") " ";
 645 }
 646
 647 /* ----------------------------------------
 648  * Connect Dialog
 649  * ----------------------------------------
 650  */
 651
 652 #noVNC_connect_dlg {
 653   transition: 0.5s ease-in-out;
 654
 655   transform: scale(0, 0);
 656   visibility: hidden;
 657   opacity: 0;
 658 }
 659 #noVNC_connect_dlg.noVNC_open {
 660   transform: scale(1, 1);
 661   visibility: visible;
 662   opacity: 1;
 663 }
 664 #noVNC_connect_dlg .noVNC_logo {
 665   transition: 0.5s ease-in-out;
 666   padding: 10px;
 667   margin-bottom: 10px;
 668
 669   font-size: 80px;
 670   text-align: center;
 671
 672   border-radius: 5px;
 673 }
 674 @media (max-width: 440px) {
 675   #noVNC_connect_dlg {
 676     max-width: calc(100vw - 100px);
 677   }
 678   #noVNC_connect_dlg .noVNC_logo {
 679     font-size: calc(25vw - 30px);
 680   }
 681 }
 682 #noVNC_connect_button {
 683   cursor: pointer;
 684
 685   padding: 10px;
 686
 687   color: white;
 688   background-color: rgb(110, 132, 163);
 689   border-radius: 12px;
 690
 691   text-align: center;
 692   font-size: 20px;
 693
 694   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
 695 }
 696 #noVNC_connect_button div {
 697   margin: 2px;
 698   padding: 5px 30px;
 699   border: 1px solid rgb(83, 99, 122);
 700   border-bottom-width: 2px;
 701   border-radius: 5px;
 702   background: linear-gradient(to top, rgb(110, 132, 163), rgb(99, 119, 147));
 703
 704   /* This avoids it jumping around when :active */
 705   vertical-align: middle;
 706 }
 707 #noVNC_connect_button div:active {
 708   border-bottom-width: 1px;
 709   margin-top: 3px;
 710 }
 711 :root:not(.noVNC_touch) #noVNC_connect_button div:hover {
 712   background: linear-gradient(to top, rgb(110, 132, 163), rgb(105, 125, 155));
 713 }
 714
 715 #noVNC_connect_button img {
 716   vertical-align: bottom;
 717   height: 1.3em;
 718 }
 719
 720 /* ----------------------------------------
 721  * Password Dialog
 722  * ----------------------------------------
 723  */
 724
 725 #noVNC_password_dlg {
 726   position: relative;
 727
 728   transform: translateY(-50px);
 729 }
 730 #noVNC_password_dlg.noVNC_open {
 731   transform: translateY(0);
 732 }
 733 #noVNC_password_dlg ul {
 734   list-style: none;
 735   margin: 0px;
 736   padding: 0px;
 737 }
 738
 739 /* ----------------------------------------
 740  * Main Area
 741  * ----------------------------------------
 742  */
 743
 744 /* Transition screen */
 745 #noVNC_transition {
 746   display: none;
 747
 748   position: fixed;
 749   top: 0;
 750   left: 0;
 751   bottom: 0;
 752   right: 0;
 753
 754   color: white;
 755   background: rgba(0, 0, 0, 0.5);
 756   z-index: 50;
 757
 758   /*display: flex;*/
 759   align-items: center;
 760   justify-content: center;
 761   flex-direction: column;
 762 }
 763 :root.noVNC_connecting #noVNC_transition,
 764 :root.noVNC_disconnecting #noVNC_transition,
 765 :root.noVNC_reconnecting #noVNC_transition {
 766   display: flex;
 767 }
 768 :root:not(.noVNC_reconnecting) #noVNC_cancel_reconnect_button {
 769   display: none;
 770 }
 771 #noVNC_transition_text {
 772   font-size: 1.5em;
 773 }
 774
 775 /* Main container */
 776 #noVNC_container {
 777   width: 100%;
 778   height: 100%;
 779   background-color: #313131;
 780   border-bottom-right-radius: 800px 600px;
 781   /*border-top-left-radius: 800px 600px;*/
 782 }
 783
 784 #noVNC_keyboardinput {
 785   width: 1px;
 786   height: 1px;
 787   background-color: #fff;
 788   color: #fff;
 789   border: 0;
 790   position: absolute;
 791   left: -40px;
 792   z-index: -1;
 793   ime-mode: disabled;
 794 }
 795
 796 /* HTML5 Canvas */
 797 #noVNC_screen {
 798   display: flex;
 799   width: 100%;
 800   height: 100%;
 801   overflow: auto;
 802   background-color: rgb(40, 40, 40);
 803 }
 804 :root:not(.noVNC_connected) #noVNC_screen {
 805   display: none;
 806 }
 807
 808 /* Do not set width/height for VNC_canvas or incorrect
 809  * scaling will occur. Canvas size depends on remote VNC
 810  * settings and noVNC settings. */
 811 #noVNC_canvas {
 812   margin: auto;
 813 }
 814
 815 /*Default noVNC logo.*/
 816 /* From: http://fonts.googleapis.com/css?family=Orbitron:700 */
 817 @font-face {
 818   font-family: 'Orbitron';
 819   font-style: normal;
 820   font-weight: 700;
 821   src: local('?'), url('Orbitron700.woff') format('woff'),
 822                    url('Orbitron700.ttf') format('truetype');
 823 }
 824
 825 .noVNC_logo {
 826   color:yellow;
 827   font-family: 'Orbitron', 'OrbitronTTF', sans-serif;
 828   line-height:90%;
 829   text-shadow: 0.1em 0.1em 0 black;
 830 }
 831 .noVNC_logo span{
 832   color:green;
 833 }
 834
 835 #noVNC_bell {
 836   display: none;
 837 }
 838
 839 /* ----------------------------------------
 840  * Media sizing
 841  * ----------------------------------------
 842  */
 843
 844 @media screen and (max-width: 640px){
 845   #noVNC_logo {
 846     font-size: 150px;
 847   }
 848 }
 849
 850 @media screen and (min-width: 321px) and (max-width: 480px) {
 851   #noVNC_logo {
 852     font-size: 110px;
 853   }
 854 }
 855
 856 @media screen and (max-width: 320px) {
 857   #noVNC_logo {
 858     font-size: 90px;
 859   }
 860 }