include/base.css

   1 /*
   2  * noVNC base CSS
   3  * Copyright (C) 2012 Joel Martin
   4  * noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
   5  * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
   6  */
   7
   8 body {
   9   margin:0;
  10   padding:0;
  11   font-family: Helvetica;
  12   /*Background image with light grey curve.*/
  13   background-color:#494949;
  14   background-repeat:no-repeat;
  15   background-position:right bottom;
  16   height:100%;
  17 }
  18
  19 html {
  20   height:100%;
  21 }
  22
  23 #noVNC_controls ul {
  24   list-style: none;
  25   margin: 0px;
  26   padding: 0px;
  27 }
  28 #noVNC_controls li {
  29   padding-bottom:8px;
  30 }
  31
  32 #noVNC_host {
  33   width:150px;
  34 }
  35 #noVNC_port {
  36   width: 80px;
  37 }
  38 #noVNC_password {
  39   width: 150px;
  40 }
  41 #noVNC_encrypt {
  42 }
  43 #noVNC_connectTimeout {
  44   width: 30px;
  45 }
  46 #noVNC_path {
  47   width: 100px;
  48 }
  49 #noVNC_connect_button {
  50   width: 110px;
  51   float:right;
  52 }
  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   padding-left:10px;
  68   padding-top:4px;
  69   z-index: 1;
  70   position: relative;
  71 }
  72
  73 .noVNC-buttons-right {
  74   float:right;
  75   right: 0px;
  76   padding-right:10px;
  77   padding-top:4px;
  78   z-index: 1;
  79   position: relative;
  80 }
  81
  82 #noVNC_status_bar {
  83   margin-top: 0px;
  84   padding: 0px;
  85   z-index: 0;
  86   position: absolute;
  87   width: 100%;
  88 }
  89
  90 #noVNC_status_bar div {
  91   font-size: 12px;
  92   padding-top: 4px;
  93 }
  94
  95 #noVNC_status {
  96   height:20px;
  97   text-align: center;
  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 .noVNC_status_normal {
 114   background: transparent;
 115 }
 116 .noVNC_status_error {
 117   background: rgba(240,64,64,0.5);
 118 }
 119 .noVNC_status_warn {
 120   background: rgba(240,240,64,0.5);
 121 }
 122
 123 /* Do not set width/height for VNC_screen or VNC_canvas or incorrect
 124  * scaling will occur. Canvas resizes to remote VNC settings */
 125 #noVNC_screen_pad {
 126   margin: 0px;
 127   padding: 0px;
 128   height: 44px;
 129 }
 130 #noVNC_screen {
 131   text-align: center;
 132   display: table;
 133   width:100%;
 134   height:100%;
 135   background-color:#313131;
 136   border-bottom-right-radius: 800px 600px;
 137   /*border-top-left-radius: 800px 600px;*/
 138 }
 139
 140 #noVNC_container, #noVNC_canvas {
 141   margin: 0px;
 142   padding: 0px;
 143 }
 144
 145 #noVNC_canvas {
 146   left: 0px;
 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:77px;
 164   right:20px;
 165   position:fixed;
 166 }
 167
 168 #noVNC_controls {
 169   display:none;
 170   margin-top:77px;
 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:77px;
 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_panel {
 196   display:none;
 197   position: fixed;
 198
 199   margin:15px;
 200   margin-top:60px;
 201   padding:15px;
 202   width:auto;
 203
 204   text-align:center;
 205   font-weight:bold;
 206   word-wrap:break-word;
 207   color:#fff;
 208   background:rgba(0,0,0,0.65);
 209
 210   -webkit-border-radius:10px;
 211   -moz-border-radius:10px;
 212   border-radius:10px;
 213 }
 214
 215 #noVNC_clipboard {
 216   display:none;
 217   margin-top:77px;
 218   right:30px;
 219   position:fixed;
 220 }
 221 #noVNC_clipboard.top:after {
 222   right:85px;
 223 }
 224
 225 #keyboardinput {
 226   width:1px;
 227   height:1px;
 228   background-color:#fff;
 229   color:#fff;
 230   border:0;
 231   position: relative;
 232   left: -40px;
 233   z-index: -1;
 234 }
 235
 236 .noVNC_status_warn {
 237   background-color:yellow;
 238 }
 239
 240 /*
 241  * Advanced Styling
 242  */
 243
 244 /* Control bar */
 245 #noVNC-control-bar {
 246   position:fixed;
 247   background: #b2bdcd; /* Old browsers */
 248   background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
 249   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+ */
 250   background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
 251   background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
 252   background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
 253   background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
 254
 255   display:block;
 256   height:44px;
 257   left:0;
 258   top:0;
 259   width:100%;
 260   z-index:200;
 261 }
 262
 263 .noVNC_status_button {
 264   padding: 4px 4px;
 265   vertical-align: middle;
 266   border:1px solid #869dbc;
 267   -webkit-border-radius: 6px;
 268   -moz-border-radius: 6px;
 269   border-radius: 6px;
 270   background: #b2bdcd; /* Old browsers */
 271   background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
 272   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+ */
 273   background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
 274   background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
 275   background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
 276   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2bdcd', endColorstr='#6e84a3',GradientType=0 ); /* IE6-9 */
 277   background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
 278   /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
 279 }
 280
 281 .noVNC_status_button_selected {
 282   padding: 4px 4px;
 283   vertical-align: middle;
 284   border:1px solid #4366a9;
 285   -webkit-border-radius: 6px;
 286   -moz-border-radius: 6px;
 287   background: #779ced; /* Old browsers */
 288   background: -moz-linear-gradient(top, #779ced 0%, #3970e0 49%, #2160dd 51%, #2463df 100%); /* FF3.6+ */
 289   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+ */
 290   background: -webkit-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Chrome10+,Safari5.1+ */
 291   background: -o-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Opera11.10+ */
 292   background: -ms-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* IE10+ */
 293   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#779ced', endColorstr='#2463df',GradientType=0 ); /* IE6-9 */
 294   background: linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* W3C */
 295  /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
 296 }
 297
 298
 299 /*Settings Bubble*/
 300 .triangle-right {
 301   position:relative;
 302   padding:15px;
 303   margin:1em 0 3em;
 304   color:#fff;
 305   background:#fff; /* default background for browsers without gradient support */
 306   /* css3 */
 307   /*background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
 308   background:-moz-linear-gradient(#2e88c4, #075698);
 309   background:-o-linear-gradient(#2e88c4, #075698);
 310   background:linear-gradient(#2e88c4, #075698);*/
 311   -webkit-border-radius:10px;
 312   -moz-border-radius:10px;
 313   border-radius:10px;
 314   color:#000;
 315   border:2px solid #E0E0E0;
 316 }
 317
 318 .triangle-right.top:after {
 319   border-color: transparent #E0E0E0;
 320   border-width: 20px 20px 0 0;
 321   bottom: auto;
 322   left: auto;
 323   right: 50px;
 324   top: -20px;
 325 }
 326
 327 .triangle-right:after {
 328   content:"";
 329   position:absolute;
 330   bottom:-20px; /* value = - border-top-width - border-bottom-width */
 331   left:50px; /* controls horizontal position */
 332   border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
 333   border-style:solid;
 334   border-color:#E0E0E0 transparent;
 335   /* reduce the damage in FF3.0 */
 336   display:block;
 337   width:0;
 338 }
 339
 340 .triangle-right.top:after {
 341   top:-40px; /* value = - border-top-width - border-bottom-width */
 342   right:50px; /* controls horizontal position */
 343   bottom:auto;
 344   left:auto;
 345   border-width:40px 40px 0 0; /* vary these values to change the angle of the vertex */
 346   border-color:transparent #E0E0E0;
 347 }
 348
 349 /*Default noVNC logo.*/
 350 /* From: http://fonts.googleapis.com/css?family=Orbitron:700 */
 351 @font-face {
 352   font-family: 'Orbitron';
 353   font-style: normal;
 354   font-weight: 700;
 355   src: local('?'), url('Orbitron700.woff') format('woff'),
 356                    url('Orbitron700.ttf') format('truetype');
 357 }
 358
 359 #noVNC_logo {
 360   margin-top: 170px;
 361   margin-left: 10px;
 362   color:yellow;
 363   text-align:left;
 364   font-family: 'Orbitron', 'OrbitronTTF', sans-serif;
 365   line-height:90%;
 366   text-shadow:
 367        5px 5px 0 #000,
 368       -1px -1px 0 #000,
 369        1px -1px 0 #000,
 370       -1px 1px 0 #000,
 371        1px 1px 0 #000;
 372 }
 373
 374
 375 #noVNC_logo span{
 376   color:green;
 377 }
 378
 379 /* ----------------------------------------
 380  * Media sizing
 381  * ----------------------------------------
 382  */
 383
 384
 385 .noVNC_status_button {
 386   font-size: 12px;
 387 }
 388
 389 #noVNC_clipboard_text {
 390   width: 500px;
 391 }
 392
 393 #noVNC_logo {
 394   font-size: 180px;
 395 }
 396
 397 @media screen and (min-width: 481px) and (max-width: 640px) {
 398   .noVNC_status_button {
 399     font-size: 10px;
 400   }
 401   #noVNC_clipboard_text {
 402     width: 410px;
 403   }
 404   #noVNC_logo {
 405     font-size: 150px;
 406   }
 407 }
 408
 409 @media screen and (min-width: 321px) and (max-width: 480px) {
 410   .noVNC_status_button {
 411     font-size: 10px;
 412   }
 413   #noVNC_clipboard_text {
 414     width: 250px;
 415   }
 416   #noVNC_logo {
 417     font-size: 110px;
 418   }
 419 }
 420
 421 @media screen and (max-width: 320px) {
 422   .noVNC_status_button {
 423     font-size: 9px;
 424   }
 425   #noVNC_clipboard_text {
 426     width: 220px;
 427   }
 428   #noVNC_logo {
 429     font-size: 90px;
 430   }
 431 }