base.css

/*
 * noVNC base CSS
 * Copyright (C) 2012 Joel Martin
 * Copyright (C) 2013 Samuel Mannehed for Cendio AB
 * noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
 * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
 */

body {
  margin:0;
  padding:0;
  font-family: Helvetica;
  /*Background image with light grey curve.*/
  background-color:#494949;
  background-repeat:no-repeat;
  background-position:right bottom;
  height:100%;
}

html {
  height:100%;
}

#noVNC_controls ul {
	visibility:hidden;
}
#noVNC_controls li {
	visibility:hidden;
}

#noVNC_host {
	visibility:hidden;
}
#noVNC_port {
	visibility:hidden;
}
#noVNC_password {
	visibility:hidden;
}
#noVNC_encrypt {
	visibility:hidden;
}
#noVNC_path {
	visibility:hidden;
}
#noVNC_connect_button {
	visibility:hidden;
}

#noVNC_buttons {
	display:none;
}

#noVNC_view_drag_button {
	visibility:hidden;
}
#sendCtrlAltDelButton {
	visibility:hidden;
}
#noVNC_xvp_buttons {
	visibility:hidden;
}
#noVNC_mobile_buttons {
	visibility:hidden;
}

#noVNC_extra_keys {
display: none;
}



#noVNC_status {
display: none;
}

#noVNC_settings_menu {
display: none;
}
#noVNC_settings_menu ul {
display: none;
}

#noVNC_apply {
display: none;
}

/* Do not set width/height for VNC_screen or VNC_canvas or incorrect
 * scaling will occur. Canvas resizes to remote VNC settings */
#noVNC_screen {
  display: table;
  width:100%;
  height:100%;
  background-color:#313131;
  border-bottom-right-radius: 800px 600px;
  /*border-top-left-radius: 800px 600px;*/
}

#noVNC_container {
  display: none;
  position: absolute;
  margin: 0px;
  padding: 0px;
  bottom: 0px;
  top: 36px; /* the height of the control bar */
  left: 0px;
  right: 0px;
  width: auto;
  height: auto;
}

#noVNC_canvas {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

#VNC_clipboard_clear_button {
  float:right;
}
#VNC_clipboard_text {
  font-size: 11px;
}

#noVNC_clipboard_clear_button {
  float:right;
}

/*Bubble contents divs*/
#noVNC_settings {
	visibility:hidden;
}

#noVNC_controls {
	visibility:hidden;
}
#noVNC_controls.top:after  {
	visibility:hidden;
}

#noVNC_description {
	visibility:hidden;
}

#noVNC_popup_status_panel {
	visibility:hidden;
}

#noVNC_xvp {
  display:none;
  margin-top:73px;
  right:30px;
  position:fixed;
}
#noVNC_xvp.top:after {
  right:125px;
}

#noVNC_clipboard {
  display:none;
  margin-top:73px;
  right:30px;
  position:fixed;
}
#noVNC_clipboard.top:after {
  right:85px;
}

#keyboardinput {
  width:1px;
  height:1px;
  background-color:#fff;
  color:#fff;
  border:0;
  position: relative;
  left: -40px;
  z-index: -1;
  ime-mode: disabled;
}

/*
 * Advanced Styling
 */

.noVNC_status_normal {
  background: #b2bdcd; /* Old browsers */
  background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
  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+ */
  background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
  background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
}
.noVNC_status_error {
  background: #f04040; /* Old browsers */
  background: -moz-linear-gradient(top, #f04040 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
  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+ */
  background: -webkit-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
  background: linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
}
.noVNC_status_warn {
  background: #f0f040; /* Old browsers */
  background: -moz-linear-gradient(top, #f0f040 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
  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+ */
  background: -webkit-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
  background: linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
}

/* Control bar */
#noVNC-control-bar {
  position:fixed;
  
  display:block;
  height:36px;
  left:0;
  top:0;
  width:100%;
  z-index:200;
}

.noVNC_status_button {
	visibility:hidden;
}

.noVNC_status_button_selected {
 	visibility:hidden;
}


/*Settings Bubble*/
.triangle-right {
 	visibility:hidden;
}

.triangle-right.top:after {
	visibility:hidden;
}

.triangle-right:after {
	visibility:hidden;
}

.triangle-right.top:after {
	visibility:hidden;
}

/*Default noVNC logo.*/
/* From: http://fonts.googleapis.com/css?family=Orbitron:700 */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 700;
  src: local('?'), url('Orbitron700.woff') format('woff'),
                   url('Orbitron700.ttf') format('truetype');
}

#noVNC_logo {
	visibility:hidden;
}


#noVNC_logo span{
  color:green;
}

/* ----------------------------------------
 * Media sizing
 * ----------------------------------------
 */


.noVNC_status_button {
	visibility:hidden;
}

#noVNC_clipboard_text {
	visibility:hidden;
}

#noVNC_logo {
	visibility:hidden;
}

.noVNC-buttons-left {
 	visibility:hidden;
}

.noVNC-buttons-right {
	visibility:hidden;
}

#noVNC_status {
	visibility:hidden;
}

#showExtraKeysButton { display: none; }
#toggleCtrlButton { display: inline; }
#toggleAltButton {  display: inline; }
#sendTabButton { display: inline; }
#sendEscButton { display: inline; }

/* left-align the status text on lower resolutions */
@media screen and (max-width: 800px){
  #noVNC_status {
    z-index: 1;
	visibility:hidden;
  }
}

@media screen and (max-width: 640px){
  #noVNC_clipboard_text {
	visibility:hidden;
  }
  #noVNC_logo {
	visibility:hidden;
  }
  .noVNC_status_button {
	visibility:hidden;
  }
  .noVNC-buttons-left {
	visibility:hidden;
  }
  .noVNC-buttons-right {
	visibility:hidden;
  }
  /* collapse the extra keys on lower resolutions */
  #showExtraKeysButton {
	visibility:hidden;
  }
  #toggleCtrlButton {
	visibility:hidden;
  }
  #toggleAltButton {
	visibility:hidden;
  }
  #sendTabButton {
	visibility:hidden;
  }
  #sendEscButton {
	visibility:hidden;
  }
}

@media screen and (min-width: 321px) and (max-width: 480px) {
  #noVNC_clipboard_text {
	visibility:hidden;
  }
  #noVNC_logo {
	visibility:hidden;
  }
}

@media screen and (max-width: 320px) {
  .noVNC_status_button {
	visibility:hidden;
  }
  #noVNC_clipboard_text {
	visibility:hidden;
  }
  #noVNC_logo {
	visibility:hidden;
  }
}