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