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 #noVNC_fallback_errormsg {
 209   font-weight: normal;
 210 }
 211
 212 /* ----------------------------------------
 213  * Control Bar
 214  * ----------------------------------------
 215  */
 216
 217 #noVNC_control_bar_anchor {
 218   /* The anchor is needed to get z-stacking to work */
 219   position: fixed;
 220   z-index: 2;
 221
 222   transition: 0.5s ease-in-out;
 223
 224   /* Edge misrenders animations wihthout this */
 225   transform: translateX(0);
 226 }
 227 :root.noVNC_connected #noVNC_control_bar_anchor.noVNC_idle {
 228   opacity: 0.8;
 229 }
 230
 231 #noVNC_control_bar {
 232   position: relative;
 233   /* left: calc(-35px - 10px - 5px - 30px), but IE doesn't animate calc */
 234   left: -80px;
 235
 236   transition: 0.5s ease-in-out;
 237
 238   background-color: rgb(110, 132, 163);
 239   border-radius: 0 10px 10px 0;
 240
 241   /* The extra border is to get a proper shadow */
 242   border-color: rgb(110, 132, 163);
 243   border-style: solid;
 244   border-width: 0 0 0 30px;
 245 }
 246 #noVNC_control_bar.noVNC_open {
 247   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
 248   left: -30px;
 249 }
 250
 251 #noVNC_control_bar_handle {
 252   position: absolute;
 253   right: -15px;
 254   top: 0;
 255   transform: translateY(35px);
 256   width: 50px;
 257   height: 50px;
 258   z-index: -2;
 259   cursor: pointer;
 260   border-radius: 0 5px 5px 0;
 261   background-color: rgb(83, 99, 122);
 262   background-image: url("../images/handle_bg.svg");
 263   background-repeat: no-repeat;
 264   background-position: right;
 265   box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
 266 }
 267 #noVNC_control_bar_handle:after {
 268   content: "";
 269   transition: 0.5s ease-in-out;
 270   background: url("../images/handle.svg");
 271   position: absolute;
 272   top: 22px; /* (50px-6px)/2 */
 273   right: 5px;
 274   width: 5px;
 275   height: 6px;
 276 }
 277 #noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after {
 278   transform: translateX(1px) rotate(180deg);
 279 }
 280 :root:not(.noVNC_connected) #noVNC_control_bar_handle {
 281   display: none;
 282 }
 283 #noVNC_control_bar_handle div {
 284   position: absolute;
 285   right: -35px;
 286   top: 0;
 287   width: 50px;
 288   height: 50px;
 289 }
 290 :root:not(.noVNC_touch) #noVNC_control_bar_handle div {
 291   display: none;
 292 }
 293
 294 #noVNC_control_bar .noVNC_scroll {
 295   max-height: 100vh; /* Chrome is buggy with 100% */
 296   overflow-x: hidden;
 297   overflow-y: auto;
 298   padding: 0 10px 0 5px;
 299 }
 300
 301 /* General button style */
 302 .noVNC_button {
 303   display: block;
 304   padding: 4px 4px;
 305   margin: 10px 0;
 306   vertical-align: middle;
 307   border:1px solid rgba(255, 255, 255, 0.2);
 308   -webkit-border-radius: 6px;
 309   -moz-border-radius: 6px;
 310   border-radius: 6px;
 311 }
 312 .noVNC_button.noVNC_selected {
 313   border-color: rgba(0, 0, 0, 0.8);
 314   background: rgba(0, 0, 0, 0.5);
 315 }
 316 .noVNC_button:disabled {
 317   opacity: 0.4;
 318 }
 319 .noVNC_button:focus {
 320   outline: none;
 321 }
 322 .noVNC_button:active {
 323   padding-top: 5px;
 324   padding-bottom: 3px;
 325 }
 326 :root:not(.noVNC_touch) .noVNC_button.noVNC_selected:hover {
 327   border-color: rgba(0, 0, 0, 0.4);
 328   background: rgba(0, 0, 0, 0.2);
 329 }
 330 :root:not(.noVNC_touch) .noVNC_button:hover {
 331   background: rgba(255, 255, 255, 0.2);
 332 }
 333 .noVNC_button.noVNC_hidden {
 334   display: none;
 335 }
 336
 337 /* Panels */
 338 .noVNC_panel {
 339   transform: translateX(25px);
 340
 341   transition: 0.5s ease-in-out;
 342
 343   max-height: 100vh; /* Chrome is buggy with 100% */
 344   overflow-x: hidden;
 345   overflow-y: auto;
 346
 347   visibility: hidden;
 348   opacity: 0;
 349
 350   padding: 15px;
 351
 352   background: #fff;
 353   -webkit-border-radius: 10px;
 354   -moz-border-radius: 10px;
 355   border-radius: 10px;
 356   color: #000;
 357   border: 2px solid #E0E0E0;
 358   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
 359 }
 360 .noVNC_panel.noVNC_open {
 361   visibility: visible;
 362   opacity: 1;
 363   transform: translateX(75px);
 364 }
 365
 366 .noVNC_panel hr {
 367   border: none;
 368   border-top: 1px solid rgb(192, 192, 192);
 369 }
 370
 371 .noVNC_panel label {
 372   display: block;
 373 }
 374
 375 .noVNC_panel .noVNC_heading {
 376   background-color: rgb(110, 132, 163);
 377   border-radius: 5px;
 378   padding: 5px;
 379   /* Compensate for padding in image */
 380   padding-right: 8px;
 381   color: white;
 382   font-size: 20px;
 383   margin-bottom: 10px;
 384   white-space: nowrap;
 385 }
 386 .noVNC_panel .noVNC_heading img {
 387   vertical-align: bottom;
 388 }
 389
 390 .noVNC_submit {
 391   float: right;
 392 }
 393
 394 :root:not(.noVNC_connected) #noVNC_view_drag_button {
 395   display: none;
 396 }
 397
 398 /* noVNC Touch Device only buttons */
 399 :root:not(.noVNC_connected) #noVNC_mobile_buttons {
 400   display: none;
 401 }
 402 :root:not(.noVNC_touch) #noVNC_mobile_buttons {
 403   display: none;
 404 }
 405
 406 #noVNC_keyboardinput {
 407   width: 1px;
 408   height: 1px;
 409   background-color: #fff;
 410   color: #fff;
 411   border: 0;
 412   position: relative;
 413   left: -40px;
 414   z-index: -1;
 415   ime-mode: disabled;
 416 }
 417
 418 /* Extra manual keys */
 419 :root:not(.noVNC_connected) #noVNC_extra_keys {
 420   display: none;
 421 }
 422
 423 #noVNC_modifiers {
 424   background-color: rgb(92, 92, 92);
 425   border: none;
 426   padding: 0 10px;
 427 }
 428
 429 /* XVP Shutdown/Reboot */
 430 :root:not(.noVNC_connected) #noVNC_xvp_button {
 431   display: none;
 432 }
 433 #noVNC_xvp {
 434 }
 435 #noVNC_xvp_buttons {
 436   display: none;
 437 }
 438
 439 #noVNC_xvp input[type=button] {
 440   width: 100%;
 441 }
 442
 443 /* Clipboard */
 444 :root:not(.noVNC_connected) #noVNC_clipboard_button {
 445   display: none;
 446 }
 447 #noVNC_clipboard {
 448   /* Full screen, minus padding and left and right margins */
 449   max-width: calc(100vw - 2*15px - 75px - 25px);
 450 }
 451 #noVNC_clipboard_text {
 452   width: 500px;
 453   max-width: 100%;
 454 }
 455
 456 /* Settings */
 457 #noVNC_settings {
 458 }
 459 #noVNC_settings ul {
 460   list-style: none;
 461   margin: 0px;
 462   padding: 0px;
 463 }
 464 #noVNC_setting_path {
 465   width: 100px;
 466 }
 467
 468 /* Connection Controls */
 469 :root.noVNC_connected #noVNC_connect_controls_button {
 470   display: none;
 471 }
 472 :root:not(.noVNC_connected) #noVNC_disconnect_button {
 473   display: none;
 474 }
 475 #noVNC_connect_controls ul {
 476   list-style: none;
 477   margin: 0px;
 478   padding: 0px;
 479 }
 480 #noVNC_setting_port {
 481   width: 80px;
 482 }
 483
 484 /* ----------------------------------------
 485  * Status Dialog
 486  * ----------------------------------------
 487  */
 488
 489 #noVNC_status {
 490   position: fixed;
 491   top: 0;
 492   left: 0;
 493   width: 100%;
 494   z-index: 3;
 495   transform: translateY(-100%);
 496
 497   transition: 0.5s ease-in-out;
 498
 499   visibility: hidden;
 500   opacity: 0;
 501
 502   padding: 5px;
 503
 504   display: flex;
 505   flex-direction: row;
 506   justify-content: center;
 507   align-content: center;
 508
 509   line-height: 25px;
 510   word-wrap: break-word;
 511   color: #fff;
 512
 513   border-bottom: 1px solid rgba(0, 0, 0, 0.9);
 514 }
 515 #noVNC_status.noVNC_open {
 516   transform: translateY(0);
 517   visibility: visible;
 518   opacity: 1;
 519 }
 520
 521 #noVNC_status::before {
 522   content: "";
 523   display: inline-block;
 524   width: 25px;
 525   height: 25px;
 526   margin-right: 5px;
 527 }
 528
 529 #noVNC_status.noVNC_status_normal {
 530   background: rgba(128,128,128,0.9);
 531 }
 532 #noVNC_status.noVNC_status_normal::before {
 533   content: url("../images/info.svg") " ";
 534 }
 535 #noVNC_status.noVNC_status_error {
 536   background: rgba(200,55,55,0.9);
 537 }
 538 #noVNC_status.noVNC_status_error::before {
 539   content: url("../images/error.svg") " ";
 540 }
 541 #noVNC_status.noVNC_status_warn {
 542   background: rgba(180,180,30,0.9);
 543 }
 544 #noVNC_status.noVNC_status_warn::before {
 545   content: url("../images/warning.svg") " ";
 546 }
 547
 548 /* ----------------------------------------
 549  * Password Dialog
 550  * ----------------------------------------
 551  */
 552
 553 #noVNC_password_dlg {
 554   transform: translateY(-50px);
 555 }
 556 #noVNC_password_dlg.noVNC_open {
 557   transform: translateY(0);
 558 }
 559 #noVNC_password_dlg ul {
 560   list-style: none;
 561   margin: 0px;
 562   padding: 0px;
 563 }
 564
 565 /* ----------------------------------------
 566  * Main Area
 567  * ----------------------------------------
 568  */
 569
 570 /* Transition screen */
 571 #noVNC_transition {
 572   display: none;
 573
 574   position: fixed;
 575   top: 0;
 576   left: 0;
 577   bottom: 0;
 578   right: 0;
 579
 580   color: white;
 581   background: rgba(0, 0, 0, 0.5);
 582   z-index: 1000;
 583
 584   /*display: flex;*/
 585   align-items: center;
 586   justify-content: center;
 587   flex-direction: column;
 588 }
 589 :root.noVNC_connecting #noVNC_transition,
 590 :root.noVNC_disconnecting #noVNC_transition {
 591   display: flex;
 592 }
 593 #noVNC_transition_text {
 594   font-size: 1.5em;
 595 }
 596
 597 /* Main container */
 598 #noVNC_container {
 599   display: table;
 600   width: 100%;
 601   height: 100%;
 602   background-color: #313131;
 603   border-bottom-right-radius: 800px 600px;
 604   /*border-top-left-radius: 800px 600px;*/
 605 }
 606
 607 /* HTML5 Canvas */
 608 #noVNC_screen {
 609   position: absolute;
 610   margin: 0px;
 611   padding: 0px;
 612   bottom: 0px;
 613   top: 0px;
 614   left: 0px;
 615   right: 0px;
 616   width: auto;
 617   height: auto;
 618 }
 619 :root:not(.noVNC_connected) #noVNC_screen {
 620   display: none;
 621 }
 622
 623 /* Do not set width/height for VNC_canvas or incorrect
 624  * scaling will occur. Canvas size depends on remote VNC
 625  * settings and noVNC settings. */
 626 #noVNC_canvas {
 627   position: absolute;
 628   left: 0;
 629   right: 0;
 630   margin-left: auto;
 631   margin-right: auto;
 632 }
 633
 634 /*Default noVNC logo.*/
 635 /* From: http://fonts.googleapis.com/css?family=Orbitron:700 */
 636 @font-face {
 637   font-family: 'Orbitron';
 638   font-style: normal;
 639   font-weight: 700;
 640   src: local('?'), url('Orbitron700.woff') format('woff'),
 641                    url('Orbitron700.ttf') format('truetype');
 642 }
 643
 644 .noVNC_logo {
 645   color:yellow;
 646   text-align:left;
 647   font-family: 'Orbitron', 'OrbitronTTF', sans-serif;
 648   font-size: 13px;
 649   line-height:90%;
 650   text-shadow: 1px 1px 0 #000;
 651 }
 652 .noVNC_logo span{
 653   color:green;
 654 }
 655
 656 #noVNC_logo {
 657   margin-top: 60px;
 658   margin-left: 60px;
 659   font-size: 180px;
 660   text-shadow:
 661        5px 5px 0 #000,
 662       -1px -1px 0 #000,
 663        1px -1px 0 #000,
 664       -1px 1px 0 #000,
 665        1px 1px 0 #000;
 666 }
 667 :root.noVNC_connected #noVNC_logo {
 668   display: none;
 669 }
 670
 671 #noVNC_bell {
 672   display: none;
 673 }
 674
 675 /* ----------------------------------------
 676  * Media sizing
 677  * ----------------------------------------
 678  */
 679
 680 @media screen and (max-width: 640px){
 681   #noVNC_logo {
 682     font-size: 150px;
 683   }
 684 }
 685
 686 @media screen and (min-width: 321px) and (max-width: 480px) {
 687   #noVNC_logo {
 688     font-size: 110px;
 689   }
 690 }
 691
 692 @media screen and (max-width: 320px) {
 693   #noVNC_logo {
 694     font-size: 90px;
 695   }
 696 }