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