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  * noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
   6  * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
   7  */
   8
   9 body {
  10   margin:0;
  11   padding:0;
  12   font-family: Helvetica;
  13   /*Background image with light grey curve.*/
  14   background-color:#494949;
  15   background-repeat:no-repeat;
  16   background-position:right bottom;
  17   height:100%;
  18 }
  19
  20 html {
  21   height:100%;
  22 }
  23
  24 #noVNC_controls ul {
  25   list-style: none;
  26   margin: 0px;
  27   padding: 0px;
  28 }
  29 #noVNC_controls li {
  30   padding-bottom:8px;
  31 }
  32
  33 #noVNC_setting_host {
  34   width:150px;
  35 }
  36 #noVNC_setting_port {
  37   width: 80px;
  38 }
  39 #noVNC_setting_password {
  40   width: 150px;
  41 }
  42 #noVNC_setting_encrypt {
  43 }
  44 #noVNC_setting_path {
  45   width: 100px;
  46 }
  47 #noVNC_connect_button {
  48   width: 110px;
  49   float:right;
  50 }
  51
  52 #noVNC_buttons {
  53   white-space: nowrap;
  54 }
  55
  56 #noVNC_view_drag_button {
  57   display: none;
  58 }
  59 #noVNC_sendCtrlAltDel_button {
  60   display: none;
  61 }
  62 #noVNC_fullscreen_button {
  63   display: none;
  64 }
  65 #noVNC_xvp_buttons {
  66   display: none;
  67 }
  68 #noVNC_mobile_buttons {
  69   display: none;
  70 }
  71
  72 #noVNC_extra_keys {
  73   display: inline;
  74   list-style-type: none;
  75   padding: 0px;
  76   margin: 0px;
  77   position: relative;
  78 }
  79
  80 .noVNC_buttons_left {
  81   float: left;
  82   z-index: 1;
  83   position: relative;
  84 }
  85
  86 .noVNC_buttons_right {
  87   float:right;
  88   right: 0px;
  89   z-index: 2;
  90   position: absolute;
  91 }
  92
  93 #noVNC_status {
  94   font-size: 12px;
  95   padding-top: 4px;
  96   height:32px;
  97   text-align: center;
  98   font-weight: bold;
  99   color: #fff;
 100 }
 101
 102 #noVNC_settings_menu {
 103   margin: 3px;
 104   text-align: left;
 105 }
 106 #noVNC_settings_menu ul {
 107   list-style: none;
 108   margin: 0px;
 109   padding: 0px;
 110 }
 111
 112 #noVNC_settings_apply {
 113   float:right;
 114 }
 115
 116 #noVNC_container {
 117   display: table;
 118   width:100%;
 119   height:100%;
 120   background-color:#313131;
 121   border-bottom-right-radius: 800px 600px;
 122   /*border-top-left-radius: 800px 600px;*/
 123 }
 124
 125 #noVNC_screen {
 126   display: none;
 127   position: absolute;
 128   margin: 0px;
 129   padding: 0px;
 130   bottom: 0px;
 131   top: 36px; /* the height of the control bar */
 132   left: 0px;
 133   right: 0px;
 134   width: auto;
 135   height: auto;
 136 }
 137
 138 /* Do not set width/height for VNC_canvas or incorrect
 139  * scaling will occur. Canvas size depends on remote VNC
 140  * settings and noVNC settings. */
 141 #noVNC_canvas {
 142   position: absolute;
 143   left: 0;
 144   right: 0;
 145   margin-left: auto;
 146   margin-right: auto;
 147 }
 148
 149 #VNC_clipboard_clear_button {
 150   float:right;
 151 }
 152 #VNC_clipboard_text {
 153   font-size: 11px;
 154 }
 155
 156 #noVNC_clipboard_clear_button {
 157   float:right;
 158 }
 159
 160 /*Bubble contents divs*/
 161 #noVNC_settings {
 162   display:none;
 163   margin-top:73px;
 164   right:20px;
 165   position:fixed;
 166 }
 167
 168 #noVNC_controls {
 169   display:none;
 170   margin-top:73px;
 171   right:12px;
 172   position:fixed;
 173 }
 174 #noVNC_controls.top:after  {
 175   right:15px;
 176 }
 177
 178 #noVNC_description {
 179   display:none;
 180   position:fixed;
 181
 182   margin-top:73px;
 183   right:20px;
 184   left:20px;
 185   padding:15px;
 186   color:#000;
 187   background:#eee; /* default background for browsers without gradient support */
 188
 189   border:2px solid #E0E0E0;
 190   -webkit-border-radius:10px;
 191   -moz-border-radius:10px;
 192   border-radius:10px;
 193 }
 194
 195 #noVNC_popup_status {
 196   display:none;
 197   position: fixed;
 198   z-index: 1;
 199
 200   margin:15px;
 201   margin-top:60px;
 202   padding:15px;
 203   width:auto;
 204
 205   text-align:center;
 206   font-weight:bold;
 207   word-wrap:break-word;
 208   color:#fff;
 209   background:rgba(0,0,0,0.65);
 210
 211   -webkit-border-radius:10px;
 212   -moz-border-radius:10px;
 213   border-radius:10px;
 214 }
 215
 216 #noVNC_xvp {
 217   display:none;
 218   margin-top:73px;
 219   right:30px;
 220   position:fixed;
 221 }
 222 #noVNC_xvp.top:after {
 223   right:125px;
 224 }
 225
 226 #noVNC_clipboard {
 227   display:none;
 228   margin-top:73px;
 229   right:30px;
 230   position:fixed;
 231 }
 232 #noVNC_clipboard.top:after {
 233   right:85px;
 234 }
 235
 236 #noVNC_keyboardinput {
 237   width:1px;
 238   height:1px;
 239   background-color:#fff;
 240   color:#fff;
 241   border:0;
 242   position: relative;
 243   left: -40px;
 244   z-index: -1;
 245   ime-mode: disabled;
 246 }
 247
 248 /*
 249  * Advanced Styling
 250  */
 251
 252 .noVNC_status_normal {
 253   background: #b2bdcd; /* Old browsers */
 254   background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
 255   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+ */
 256   background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
 257   background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
 258   background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
 259   background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
 260 }
 261 .noVNC_status_error {
 262   background: #f04040; /* Old browsers */
 263   background: -moz-linear-gradient(top, #f04040 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
 264   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f04040), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
 265   background: -webkit-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
 266   background: -o-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
 267   background: -ms-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
 268   background: linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
 269 }
 270 .noVNC_status_warn {
 271   background: #f0f040; /* Old browsers */
 272   background: -moz-linear-gradient(top, #f0f040 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
 273   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f040), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
 274   background: -webkit-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
 275   background: -o-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
 276   background: -ms-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
 277   background: linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
 278 }
 279
 280 /* Control bar */
 281 #noVNC_control_bar {
 282   position:fixed;
 283
 284   display:block;
 285   height:36px;
 286   left:0;
 287   top:0;
 288   width:100%;
 289   z-index:200;
 290 }
 291
 292 .noVNC_status_button {
 293   padding: 4px 4px;
 294   vertical-align: middle;
 295   border:1px solid #869dbc;
 296   -webkit-border-radius: 6px;
 297   -moz-border-radius: 6px;
 298   border-radius: 6px;
 299   background: #b2bdcd; /* Old browsers */
 300   background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
 301   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+ */
 302   background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
 303   background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
 304   background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
 305   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2bdcd', endColorstr='#6e84a3',GradientType=0 ); /* IE6-9 */
 306   background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
 307   /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
 308 }
 309
 310 .noVNC_status_button_selected {
 311   padding: 4px 4px;
 312   vertical-align: middle;
 313   border:1px solid #4366a9;
 314   -webkit-border-radius: 6px;
 315   -moz-border-radius: 6px;
 316   background: #779ced; /* Old browsers */
 317   background: -moz-linear-gradient(top, #779ced 0%, #3970e0 49%, #2160dd 51%, #2463df 100%); /* FF3.6+ */
 318   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+ */
 319   background: -webkit-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Chrome10+,Safari5.1+ */
 320   background: -o-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Opera11.10+ */
 321   background: -ms-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* IE10+ */
 322   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#779ced', endColorstr='#2463df',GradientType=0 ); /* IE6-9 */
 323   background: linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* W3C */
 324  /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
 325 }
 326
 327 .noVNC_status_button:disabled {
 328   opacity: 0.4;
 329 }
 330
 331
 332 /*Settings Bubble*/
 333 .triangle-right {
 334   position:relative;
 335   padding:15px;
 336   margin:1em 0 3em;
 337   color:#fff;
 338   background:#fff; /* default background for browsers without gradient support */
 339   /* css3 */
 340   /*background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
 341   background:-moz-linear-gradient(#2e88c4, #075698);
 342   background:-o-linear-gradient(#2e88c4, #075698);
 343   background:linear-gradient(#2e88c4, #075698);*/
 344   -webkit-border-radius:10px;
 345   -moz-border-radius:10px;
 346   border-radius:10px;
 347   color:#000;
 348   border:2px solid #E0E0E0;
 349 }
 350
 351 .triangle-right.top:after {
 352   border-color: transparent #E0E0E0;
 353   border-width: 20px 20px 0 0;
 354   bottom: auto;
 355   left: auto;
 356   right: 50px;
 357   top: -20px;
 358 }
 359
 360 .triangle-right:after {
 361   content:"";
 362   position:absolute;
 363   bottom:-20px; /* value = - border-top-width - border-bottom-width */
 364   left:50px; /* controls horizontal position */
 365   border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
 366   border-style:solid;
 367   border-color:#E0E0E0 transparent;
 368   /* reduce the damage in FF3.0 */
 369   display:block;
 370   width:0;
 371 }
 372
 373 .triangle-right.top:after {
 374   top:-40px; /* value = - border-top-width - border-bottom-width */
 375   right:50px; /* controls horizontal position */
 376   bottom:auto;
 377   left:auto;
 378   border-width:40px 40px 0 0; /* vary these values to change the angle of the vertex */
 379   border-color:transparent #E0E0E0;
 380 }
 381
 382 /*Default noVNC logo.*/
 383 /* From: http://fonts.googleapis.com/css?family=Orbitron:700 */
 384 @font-face {
 385   font-family: 'Orbitron';
 386   font-style: normal;
 387   font-weight: 700;
 388   src: local('?'), url('Orbitron700.woff') format('woff'),
 389                    url('Orbitron700.ttf') format('truetype');
 390 }
 391
 392 #noVNC_logo {
 393   margin-top: 170px;
 394   margin-left: 10px;
 395   color:yellow;
 396   text-align:left;
 397   font-family: 'Orbitron', 'OrbitronTTF', sans-serif;
 398   line-height:90%;
 399   text-shadow:
 400        5px 5px 0 #000,
 401       -1px -1px 0 #000,
 402        1px -1px 0 #000,
 403       -1px 1px 0 #000,
 404        1px 1px 0 #000;
 405 }
 406
 407
 408 #noVNC_logo span{
 409   color:green;
 410 }
 411
 412 #noVNC_bell {
 413   display: none;
 414 }
 415
 416 /* ----------------------------------------
 417  * Media sizing
 418  * ----------------------------------------
 419  */
 420
 421
 422 .noVNC_status_button {
 423   font-size: 12px;
 424 }
 425
 426 #noVNC_clipboard_text {
 427   width: 500px;
 428 }
 429
 430 #noVNC_logo {
 431   font-size: 180px;
 432 }
 433
 434 .noVNC_buttons_left {
 435   padding-left: 10px;
 436 }
 437
 438 .noVNC_buttons_right {
 439   padding-right: 10px;
 440 }
 441
 442 #noVNC_status {
 443   z-index: 0;
 444   position: absolute;
 445   width: 100%;
 446   margin-left: 0px;
 447 }
 448
 449 #noVNC_toggleExtraKeys_button { display: none; }
 450 #noVNC_toggleCtrl_button { display: inline; }
 451 #noVNC_toggleAlt_button {  display: inline; }
 452 #noVNC_sendTab_button { display: inline; }
 453 #noVNC_sendEsc_button { display: inline; }
 454
 455 /* left-align the status text on lower resolutions */
 456 @media screen and (max-width: 800px){
 457   #noVNC_status {
 458     z-index: 1;
 459     position: relative;
 460     width: auto;
 461     float: left;
 462     margin-left: 4px;
 463   }
 464 }
 465
 466 @media screen and (max-width: 640px){
 467   #noVNC_clipboard_text {
 468     width: 410px;
 469   }
 470   #noVNC_logo {
 471     font-size: 150px;
 472   }
 473   .noVNC_status_button {
 474     font-size: 10px;
 475   }
 476   .noVNC_buttons_left {
 477     padding-left: 0px;
 478   }
 479   .noVNC_buttons_right {
 480     padding-right: 0px;
 481   }
 482   /* collapse the extra keys on lower resolutions */
 483   #noVNC_toggleExtraKeys_button {
 484     display: inline;
 485   }
 486   #noVNC_toggleCtrl_button {
 487     display: none;
 488     position: absolute;
 489     top: 30px;
 490     left: 0px;
 491   }
 492   #noVNC_toggleAlt_button {
 493     display: none;
 494     position: absolute;
 495     top: 65px;
 496     left: 0px;
 497   }
 498   #noVNC_sendTab_button {
 499     display: none;
 500     position: absolute;
 501     top: 100px;
 502     left: 0px;
 503   }
 504   #noVNC_sendEsc_button {
 505     display: none;
 506     position: absolute;
 507     top: 135px;
 508     left: 0px;
 509   }
 510 }
 511
 512 @media screen and (min-width: 321px) and (max-width: 480px) {
 513   #noVNC_clipboard_text {
 514     width: 250px;
 515   }
 516   #noVNC_logo {
 517     font-size: 110px;
 518   }
 519 }
 520
 521 @media screen and (max-width: 320px) {
 522   .noVNC_status_button {
 523     font-size: 9px;
 524   }
 525   #noVNC_clipboard_text {
 526     width: 220px;
 527   }
 528   #noVNC_logo {
 529     font-size: 90px;
 530   }
 531 }