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