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