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