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