include/base.css

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