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