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  * Copyright (C) 2016 Pierre Ossman for Cendio AB
   6  * noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
   7  * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
   8  */
   9
  10 body {
  11   margin:0;
  12   padding:0;
  13   font-family: Helvetica;
  14   /*Background image with light grey curve.*/
  15   background-color:#494949;
  16   background-repeat:no-repeat;
  17   background-position:right bottom;
  18   height:100%;
  19 }
  20
  21 html {
  22   height:100%;
  23 }
  24
  25 #noVNC_buttons {
  26   white-space: nowrap;
  27 }
  28
  29 /* ----------------------------------------
  30  * Control Bar
  31  * ----------------------------------------
  32  */
  33
  34 #noVNC_control_bar {
  35   position: fixed;
  36   display: block;
  37   height: 36px;
  38   left: 0;
  39   top: 0;
  40   width: 100%;
  41   z-index: 200;
  42
  43   background: #b2bdcd; /* Old browsers */
  44   background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
  45   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+ */
  46   background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
  47   background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
  48   background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
  49   background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
  50 }
  51
  52 /* General button style */
  53 .noVNC_button {
  54   padding: 4px 4px;
  55   vertical-align: middle;
  56   border:1px solid #869dbc;
  57   -webkit-border-radius: 6px;
  58   -moz-border-radius: 6px;
  59   border-radius: 6px;
  60   background: #b2bdcd; /* Old browsers */
  61   background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
  62   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+ */
  63   background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
  64   background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
  65   background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
  66   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2bdcd', endColorstr='#6e84a3',GradientType=0 ); /* IE6-9 */
  67   background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
  68   /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
  69   font-size: 12px;
  70 }
  71 .noVNC_button.noVNC_selected {
  72   border-color: #4366a9;
  73   background: #779ced; /* Old browsers */
  74   background: -moz-linear-gradient(top, #779ced 0%, #3970e0 49%, #2160dd 51%, #2463df 100%); /* FF3.6+ */
  75   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+ */
  76   background: -webkit-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Chrome10+,Safari5.1+ */
  77   background: -o-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Opera11.10+ */
  78   background: -ms-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* IE10+ */
  79   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#779ced', endColorstr='#2463df',GradientType=0 ); /* IE6-9 */
  80   background: linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* W3C */
  81 }
  82 .noVNC_button:disabled {
  83   opacity: 0.4;
  84 }
  85 .noVNC_button.noVNC_hidden {
  86   display: none;
  87 }
  88
  89 /* Panels */
  90 .noVNC_panel {
  91   position: fixed;
  92   top: 46px;
  93   right: 15px;
  94   transform: translate(0, -50px);
  95
  96   transition: 0.5s ease-in-out;
  97
  98   visibility: hidden;
  99   opacity: 0;
 100
 101   padding: 15px;
 102
 103   background: #fff;
 104   -webkit-border-radius: 10px;
 105   -moz-border-radius: 10px;
 106   border-radius: 10px;
 107   color: #000;
 108   border: 2px solid #E0E0E0;
 109   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
 110 }
 111 .noVNC_panel.noVNC_open {
 112   visibility: visible;
 113   opacity: 1;
 114   transform: translate(0, 0);
 115 }
 116
 117 /* noVNC Touch Device only buttons */
 118 #noVNC_mobile_buttons {
 119   display: inline;
 120 }
 121 #noVNC_mobile_buttons.noVNC_hidden {
 122   display: none;
 123 }
 124
 125 #noVNC_keyboardinput {
 126   width: 1px;
 127   height: 1px;
 128   background-color: #fff;
 129   color: #fff;
 130   border: 0;
 131   position: relative;
 132   left: -40px;
 133   z-index: -1;
 134   ime-mode: disabled;
 135 }
 136
 137 #noVNC_toggle_extra_keys_button {
 138   display: none;
 139 }
 140
 141 #noVNC_extra_keys {
 142   display: inline;
 143   list-style-type: none;
 144   padding: 0px;
 145   margin: 0px;
 146   position: relative;
 147 }
 148 #noVNC_extra_keys.noVNC_hidden {
 149   display: none;
 150 }
 151 #noVNC_toggle_ctrl_button {
 152   display: inline;
 153 }
 154 #noVNC_toggle_alt_button {
 155   display: inline;
 156 }
 157 #noVNC_send_tab_button {
 158   display: inline;
 159 }
 160 #noVNC_send_esc_button {
 161   display: inline;
 162 }
 163 #noVNC_modifiers {
 164   display: inline;
 165 }
 166
 167 /* Left side buttons */
 168 .noVNC_buttons_left {
 169   float: left;
 170   z-index: 1;
 171   position: relative;
 172   padding-left: 10px;
 173 }
 174
 175 /* Right side buttons */
 176 .noVNC_buttons_right {
 177   float: right;
 178   right: 0px;
 179   z-index: 2;
 180   position: absolute;
 181   padding-right: 10px;
 182 }
 183
 184 /* XVP Shutdown/Reboot */
 185 #noVNC_xvp {
 186 }
 187 #noVNC_xvp_buttons {
 188   display: none;
 189 }
 190
 191 /* Clipboard */
 192 #noVNC_clipboard {
 193 }
 194 #noVNC_clipboard_text {
 195   width: 500px;
 196 }
 197 #noVNC_clipboard_clear_button {
 198   float: right;
 199 }
 200
 201 /* Settings */
 202 #noVNC_settings {
 203 }
 204 #noVNC_settings ul {
 205   list-style: none;
 206   margin: 3px;
 207   padding: 0px;
 208 }
 209 #noVNC_setting_path {
 210   width: 100px;
 211 }
 212 #noVNC_settings_apply {
 213   float: right;
 214 }
 215
 216 /* Connection Controls */
 217 #noVNC_connect_controls {
 218 }
 219 #noVNC_connect_controls ul {
 220   list-style: none;
 221   margin: 0px;
 222   padding: 0px;
 223 }
 224 #noVNC_connect_controls li {
 225   padding-bottom:8px;
 226 }
 227 #noVNC_setting_host {
 228   width:150px;
 229 }
 230 #noVNC_setting_port {
 231   width: 80px;
 232 }
 233 #noVNC_setting_password {
 234   width: 150px;
 235 }
 236 #noVNC_connect_button {
 237   width: 110px;
 238   float: right;
 239 }
 240
 241 /* ----------------------------------------
 242  * Status Dialog
 243  * ----------------------------------------
 244  */
 245
 246 #noVNC_status {
 247   position: fixed;
 248   top: 0;
 249   left: 0;
 250   width: 100%;
 251   z-index: 3;
 252   transform: translateY(-100%);
 253
 254   transition: 0.5s ease-in-out;
 255
 256   visibility: hidden;
 257   opacity: 0;
 258
 259   padding: 5px;
 260
 261   display: flex;
 262   flex-direction: row;
 263   justify-content: center;
 264   align-content: center;
 265
 266   line-height: 25px;
 267   word-wrap: break-word;
 268   color: #fff;
 269
 270   border-bottom: 1px solid rgba(0, 0, 0, 0.9);
 271 }
 272 #noVNC_status.noVNC_open {
 273   transform: translateY(0);
 274   visibility: visible;
 275   opacity: 1;
 276 }
 277
 278 #noVNC_status::before {
 279   content: "";
 280   display: inline-block;
 281   width: 25px;
 282   height: 25px;
 283   margin-right: 5px;
 284 }
 285
 286 #noVNC_status.noVNC_status_normal {
 287   background: rgba(128,128,128,0.9);
 288 }
 289 #noVNC_status.noVNC_status_normal::before {
 290   content: url("../images/info.svg") " ";
 291 }
 292 #noVNC_status.noVNC_status_error {
 293   background: rgba(200,55,55,0.9);
 294 }
 295 #noVNC_status.noVNC_status_error::before {
 296   content: url("../images/error.svg") " ";
 297 }
 298 #noVNC_status.noVNC_status_warn {
 299   background: rgba(180,180,30,0.9);
 300 }
 301 #noVNC_status.noVNC_status_warn::before {
 302   content: url("../images/warning.svg") " ";
 303 }
 304
 305 /* ----------------------------------------
 306  * Main Area
 307  * ----------------------------------------
 308  */
 309
 310 #noVNC_container {
 311   display: table;
 312   width: 100%;
 313   height: 100%;
 314   background-color: #313131;
 315   border-bottom-right-radius: 800px 600px;
 316   /*border-top-left-radius: 800px 600px;*/
 317 }
 318
 319 /* HTML5 Canvas */
 320 #noVNC_screen {
 321   position: absolute;
 322   margin: 0px;
 323   padding: 0px;
 324   bottom: 0px;
 325   top: 36px; /* the height of the control bar */
 326   left: 0px;
 327   right: 0px;
 328   width: auto;
 329   height: auto;
 330 }
 331 #noVNC_screen.noVNC_hidden {
 332   display: none;
 333 }
 334
 335 /* Do not set width/height for VNC_canvas or incorrect
 336  * scaling will occur. Canvas size depends on remote VNC
 337  * settings and noVNC settings. */
 338 #noVNC_canvas {
 339   position: absolute;
 340   left: 0;
 341   right: 0;
 342   margin-left: auto;
 343   margin-right: auto;
 344 }
 345
 346 /*Default noVNC logo.*/
 347 /* From: http://fonts.googleapis.com/css?family=Orbitron:700 */
 348 @font-face {
 349   font-family: 'Orbitron';
 350   font-style: normal;
 351   font-weight: 700;
 352   src: local('?'), url('Orbitron700.woff') format('woff'),
 353                    url('Orbitron700.ttf') format('truetype');
 354 }
 355
 356 #noVNC_logo {
 357   margin-top: 170px;
 358   margin-left: 10px;
 359   color:yellow;
 360   text-align:left;
 361   font-family: 'Orbitron', 'OrbitronTTF', sans-serif;
 362   font-size: 180px;
 363   line-height:90%;
 364   text-shadow:
 365        5px 5px 0 #000,
 366       -1px -1px 0 #000,
 367        1px -1px 0 #000,
 368       -1px 1px 0 #000,
 369        1px 1px 0 #000;
 370 }
 371 #noVNC_logo.noVNC_hidden {
 372   display: none;
 373 }
 374
 375 #noVNC_logo span{
 376   color:green;
 377 }
 378
 379 /* ----------------------------------------
 380  * Media sizing
 381  * ----------------------------------------
 382  */
 383
 384 @media screen and (max-width: 640px){
 385   #noVNC_clipboard_text {
 386     width: 410px;
 387   }
 388   #noVNC_logo {
 389     font-size: 150px;
 390   }
 391   .noVNC_button {
 392     font-size: 10px;
 393   }
 394   .noVNC_buttons_left {
 395     padding-left: 0px;
 396   }
 397   .noVNC_buttons_right {
 398     padding-right: 0px;
 399   }
 400   /* collapse the extra keys on lower resolutions */
 401   #noVNC_toggle_extra_keys_button {
 402     display: inline;
 403   }
 404   #noVNC_modifiers {
 405     display: none;
 406   }
 407   #noVNC_modifiers.noVNC_open {
 408     display: inline;
 409   }
 410   #noVNC_toggle_ctrl_button {
 411     position: absolute;
 412     top: 30px;
 413     left: 0px;
 414   }
 415   #noVNC_toggle_alt_button {
 416     position: absolute;
 417     top: 65px;
 418     left: 0px;
 419   }
 420   #noVNC_send_tab_button {
 421     position: absolute;
 422     top: 100px;
 423     left: 0px;
 424   }
 425   #noVNC_send_esc_button {
 426     position: absolute;
 427     top: 135px;
 428     left: 0px;
 429   }
 430 }
 431
 432 @media screen and (min-width: 321px) and (max-width: 480px) {
 433   #noVNC_clipboard_text {
 434     width: 250px;
 435   }
 436   #noVNC_logo {
 437     font-size: 110px;
 438   }
 439 }
 440
 441 @media screen and (max-width: 320px) {
 442   .noVNC_button {
 443     font-size: 9px;
 444   }
 445   #noVNC_clipboard_text {
 446     width: 220px;
 447   }
 448   #noVNC_logo {
 449     font-size: 90px;
 450   }
 451 }