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