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