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