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_buttons {
  26   white-space: nowrap;
  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
 126 /* ----------------------------------------
 127  * Control Bar
 128  * ----------------------------------------
 129  */
 130
 131 #noVNC_control_bar {
 132   position: fixed;
 133   display: block;
 134   height: 36px;
 135   left: 0;
 136   top: 0;
 137   width: 100%;
 138   z-index: 200;
 139
 140   background: #b2bdcd; /* Old browsers */
 141   background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
 142   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
 143   background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
 144   background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
 145   background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
 146   background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
 147 }
 148
 149 /* General button style */
 150 .noVNC_button {
 151   padding: 4px 4px;
 152   vertical-align: middle;
 153   border:1px solid #869dbc;
 154   -webkit-border-radius: 6px;
 155   -moz-border-radius: 6px;
 156   border-radius: 6px;
 157   background: #b2bdcd; /* Old browsers */
 158   background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
 159   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
 160   background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
 161   background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
 162   background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
 163   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2bdcd', endColorstr='#6e84a3',GradientType=0 ); /* IE6-9 */
 164   background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
 165   /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
 166   font-size: 12px;
 167 }
 168 .noVNC_button.noVNC_selected {
 169   border-color: #4366a9;
 170   background: #779ced; /* Old browsers */
 171   background: -moz-linear-gradient(top, #779ced 0%, #3970e0 49%, #2160dd 51%, #2463df 100%); /* FF3.6+ */
 172   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#779ced), color-stop(49%,#3970e0), color-stop(51%,#2160dd), color-stop(100%,#2463df)); /* Chrome,Safari4+ */
 173   background: -webkit-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Chrome10+,Safari5.1+ */
 174   background: -o-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Opera11.10+ */
 175   background: -ms-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* IE10+ */
 176   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#779ced', endColorstr='#2463df',GradientType=0 ); /* IE6-9 */
 177   background: linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* W3C */
 178 }
 179 .noVNC_button:disabled {
 180   opacity: 0.4;
 181 }
 182 .noVNC_button.noVNC_hidden {
 183   display: none;
 184 }
 185
 186 /* Panels */
 187 .noVNC_panel {
 188   position: fixed;
 189   top: 46px;
 190   right: 15px;
 191   transform: translate(0, -50px);
 192
 193   transition: 0.5s ease-in-out;
 194
 195   visibility: hidden;
 196   opacity: 0;
 197
 198   padding: 15px;
 199
 200   background: #fff;
 201   -webkit-border-radius: 10px;
 202   -moz-border-radius: 10px;
 203   border-radius: 10px;
 204   color: #000;
 205   border: 2px solid #E0E0E0;
 206   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
 207 }
 208 .noVNC_panel.noVNC_open {
 209   visibility: visible;
 210   opacity: 1;
 211   transform: translate(0, 0);
 212 }
 213
 214 .noVNC_submit {
 215   float: right;
 216 }
 217
 218 /* noVNC Touch Device only buttons */
 219 #noVNC_mobile_buttons {
 220   display: inline;
 221 }
 222 #noVNC_mobile_buttons.noVNC_hidden {
 223   display: none;
 224 }
 225
 226 #noVNC_keyboardinput {
 227   width: 1px;
 228   height: 1px;
 229   background-color: #fff;
 230   color: #fff;
 231   border: 0;
 232   position: relative;
 233   left: -40px;
 234   z-index: -1;
 235   ime-mode: disabled;
 236 }
 237
 238 #noVNC_toggle_extra_keys_button {
 239   display: none;
 240 }
 241
 242 #noVNC_extra_keys {
 243   display: inline;
 244   list-style-type: none;
 245   padding: 0px;
 246   margin: 0px;
 247   position: relative;
 248 }
 249 #noVNC_extra_keys.noVNC_hidden {
 250   display: none;
 251 }
 252 #noVNC_toggle_ctrl_button {
 253   display: inline;
 254 }
 255 #noVNC_toggle_alt_button {
 256   display: inline;
 257 }
 258 #noVNC_send_tab_button {
 259   display: inline;
 260 }
 261 #noVNC_send_esc_button {
 262   display: inline;
 263 }
 264 #noVNC_modifiers {
 265   display: inline;
 266 }
 267
 268 .noVNC_buttons {
 269   float: right;
 270   z-index: 1;
 271   position: relative;
 272   padding-right: 10px;
 273   padding-left: 10px;
 274 }
 275
 276 /* XVP Shutdown/Reboot */
 277 #noVNC_xvp {
 278 }
 279 #noVNC_xvp_buttons {
 280   display: none;
 281 }
 282
 283 /* Clipboard */
 284 #noVNC_clipboard {
 285 }
 286 #noVNC_clipboard_text {
 287   width: 500px;
 288 }
 289
 290 /* Settings */
 291 #noVNC_settings {
 292 }
 293 #noVNC_settings ul {
 294   list-style: none;
 295   margin: 3px;
 296   padding: 0px;
 297 }
 298 #noVNC_setting_path {
 299   width: 100px;
 300 }
 301
 302 /* Connection Controls */
 303 #noVNC_connect_controls {
 304 }
 305 #noVNC_connect_controls ul {
 306   list-style: none;
 307   margin: 0px;
 308   padding: 0px;
 309 }
 310 #noVNC_connect_controls li {
 311   padding-bottom:8px;
 312 }
 313 #noVNC_setting_host {
 314   width:150px;
 315 }
 316 #noVNC_setting_port {
 317   width: 80px;
 318 }
 319 #noVNC_setting_password {
 320   width: 150px;
 321 }
 322
 323 /* ----------------------------------------
 324  * Status Dialog
 325  * ----------------------------------------
 326  */
 327
 328 #noVNC_status {
 329   position: fixed;
 330   top: 0;
 331   left: 0;
 332   width: 100%;
 333   z-index: 3;
 334   transform: translateY(-100%);
 335
 336   transition: 0.5s ease-in-out;
 337
 338   visibility: hidden;
 339   opacity: 0;
 340
 341   padding: 5px;
 342
 343   display: flex;
 344   flex-direction: row;
 345   justify-content: center;
 346   align-content: center;
 347
 348   line-height: 25px;
 349   word-wrap: break-word;
 350   color: #fff;
 351
 352   border-bottom: 1px solid rgba(0, 0, 0, 0.9);
 353 }
 354 #noVNC_status.noVNC_open {
 355   transform: translateY(0);
 356   visibility: visible;
 357   opacity: 1;
 358 }
 359
 360 #noVNC_status::before {
 361   content: "";
 362   display: inline-block;
 363   width: 25px;
 364   height: 25px;
 365   margin-right: 5px;
 366 }
 367
 368 #noVNC_status.noVNC_status_normal {
 369   background: rgba(128,128,128,0.9);
 370 }
 371 #noVNC_status.noVNC_status_normal::before {
 372   content: url("../images/info.svg") " ";
 373 }
 374 #noVNC_status.noVNC_status_error {
 375   background: rgba(200,55,55,0.9);
 376 }
 377 #noVNC_status.noVNC_status_error::before {
 378   content: url("../images/error.svg") " ";
 379 }
 380 #noVNC_status.noVNC_status_warn {
 381   background: rgba(180,180,30,0.9);
 382 }
 383 #noVNC_status.noVNC_status_warn::before {
 384   content: url("../images/warning.svg") " ";
 385 }
 386
 387 /* ----------------------------------------
 388  * Password Dialog
 389  * ----------------------------------------
 390  */
 391
 392 #noVNC_password_dlg {
 393   transform: translateY(-50px);
 394 }
 395 #noVNC_password_dlg.noVNC_open {
 396   transform: translateY(0);
 397 }
 398 #noVNC_password_dlg ul {
 399   list-style: none;
 400   margin: 0px;
 401   padding: 0px;
 402 }
 403 #noVNC_password_dlg li {
 404   padding-bottom:8px;
 405 }
 406 #noVNC_password_input {
 407   width: 150px;
 408 }
 409
 410 /* ----------------------------------------
 411  * Main Area
 412  * ----------------------------------------
 413  */
 414
 415 #noVNC_container {
 416   display: table;
 417   width: 100%;
 418   height: 100%;
 419   background-color: #313131;
 420   border-bottom-right-radius: 800px 600px;
 421   /*border-top-left-radius: 800px 600px;*/
 422 }
 423
 424 /* HTML5 Canvas */
 425 #noVNC_screen {
 426   position: absolute;
 427   margin: 0px;
 428   padding: 0px;
 429   bottom: 0px;
 430   top: 36px; /* the height of the control bar */
 431   left: 0px;
 432   right: 0px;
 433   width: auto;
 434   height: auto;
 435 }
 436 #noVNC_screen.noVNC_hidden {
 437   display: none;
 438 }
 439
 440 /* Do not set width/height for VNC_canvas or incorrect
 441  * scaling will occur. Canvas size depends on remote VNC
 442  * settings and noVNC settings. */
 443 #noVNC_canvas {
 444   position: absolute;
 445   left: 0;
 446   right: 0;
 447   margin-left: auto;
 448   margin-right: auto;
 449 }
 450
 451 /*Default noVNC logo.*/
 452 /* From: http://fonts.googleapis.com/css?family=Orbitron:700 */
 453 @font-face {
 454   font-family: 'Orbitron';
 455   font-style: normal;
 456   font-weight: 700;
 457   src: local('?'), url('Orbitron700.woff') format('woff'),
 458                    url('Orbitron700.ttf') format('truetype');
 459 }
 460
 461 #noVNC_logo {
 462   margin-top: 170px;
 463   margin-left: 10px;
 464   color:yellow;
 465   text-align:left;
 466   font-family: 'Orbitron', 'OrbitronTTF', sans-serif;
 467   font-size: 180px;
 468   line-height:90%;
 469   text-shadow:
 470        5px 5px 0 #000,
 471       -1px -1px 0 #000,
 472        1px -1px 0 #000,
 473       -1px 1px 0 #000,
 474        1px 1px 0 #000;
 475 }
 476 #noVNC_logo.noVNC_hidden {
 477   display: none;
 478 }
 479
 480 #noVNC_logo span{
 481   color:green;
 482 }
 483
 484 /* ----------------------------------------
 485  * Media sizing
 486  * ----------------------------------------
 487  */
 488
 489 @media screen and (max-width: 640px){
 490   #noVNC_clipboard_text {
 491     width: 410px;
 492   }
 493   #noVNC_logo {
 494     font-size: 150px;
 495   }
 496   .noVNC_button {
 497     font-size: 10px;
 498   }
 499   .noVNC_buttons_left {
 500     padding-left: 0px;
 501   }
 502   .noVNC_buttons_right {
 503     padding-right: 0px;
 504   }
 505   /* collapse the extra keys on lower resolutions */
 506   #noVNC_toggle_extra_keys_button {
 507     display: inline;
 508   }
 509   #noVNC_modifiers {
 510     display: none;
 511   }
 512   #noVNC_modifiers.noVNC_open {
 513     display: inline;
 514   }
 515   #noVNC_toggle_ctrl_button {
 516     position: absolute;
 517     top: 30px;
 518     left: 0px;
 519   }
 520   #noVNC_toggle_alt_button {
 521     position: absolute;
 522     top: 65px;
 523     left: 0px;
 524   }
 525   #noVNC_send_tab_button {
 526     position: absolute;
 527     top: 100px;
 528     left: 0px;
 529   }
 530   #noVNC_send_esc_button {
 531     position: absolute;
 532     top: 135px;
 533     left: 0px;
 534   }
 535 }
 536
 537 @media screen and (min-width: 321px) and (max-width: 480px) {
 538   #noVNC_clipboard_text {
 539     width: 250px;
 540   }
 541   #noVNC_logo {
 542     font-size: 110px;
 543   }
 544 }
 545
 546 @media screen and (max-width: 320px) {
 547   .noVNC_button {
 548     font-size: 9px;
 549   }
 550   #noVNC_clipboard_text {
 551     width: 220px;
 552   }
 553   #noVNC_logo {
 554     font-size: 90px;
 555   }
 556 }