Add base.css. Bar position formatting.

include/base.css

@@ -0,0 +1,249 @@
+body {
+	margin:0;
+	padding:0;
+	font-family: Helvetica;
+	/*Background image with light grey curve.*/
+	background-image:url('../images/screenbg.png');
+	background-color:#313131;
+	background-repeat:no-repeat;
+	background-position:right bottom;
+}
+
+html {
+	height:100%;
+}
+
+#noVNC_controls ul {
+    list-style: none;
+    margin: 0px;
+    padding: 0px;
+}
+#noVNC_controls li {
+	padding-bottom:8px;
+}
+
+#noVNC_host {
+	width:150px;
+}	
+#noVNC_port {
+    width: 80px;
+}
+#noVNC_password {
+    width: 150px;
+}
+#noVNC_encrypt {
+}
+#noVNC_connectTimeout {
+    width: 30px;
+}
+#noVNC_connect_button {
+    width: 110px;
+	float:right;
+}
+
+/*Mobile buttons bar.*/
+#noVNC-control-bar {
+  position:fixed;
+  background-attachment:initial;
+  background-clip:initial;
+  background-color:initial;
+  background-image:url(../images/bg.png);
+  background-origin:initial;
+  background-position:50% 0;
+  /*
+  For Black:
+  background-position:50% 100%;
+  */
+  background-repeat:repeat no-repeat;
+  display:block;
+  height:44px;
+  left:0;
+  top:0;
+  width:100%;
+  z-index:200;
+} 
+
+#noVNC_mobile_buttons {
+	position:fixed;
+	padding-left:10px;
+	padding-top:9px;
+	display: none;
+}
+	
+.noVNC_mobile_buttons_right {
+	position:fixed;
+	padding-right:10px;
+	padding-top:9px;
+	right:0;
+}
+
+#noVNC_status_bar {
+    margin-top: 15px;
+    padding: 0px;
+}
+
+#noVNC_status_bar div {
+    font-size: 12px;
+    padding-top: 4px;
+	width:100%;
+	margin-top: 2px;
+}
+
+.VNC_status_button, #clipboardbutton, #connectbutton {
+    font-size: 14px;
+}
+
+#noVNC_status {
+	height:20px;
+    text-align: center;
+}
+#noVNC_settings_menu {
+	margin: 3px;
+    text-align: left;
+}
+#noVNC_settings_menu ul {
+    list-style: none;
+    margin: 0px;
+    padding: 0px;
+}
+
+#noVNC_apply {
+	float:right;
+}
+
+.VNC_buttons_right {
+    text-align: right;
+}
+.VNC_buttons_left {
+    text-align: left;
+}
+.noVNC_status_normal {
+    background: #eee;
+}
+.noVNC_status_error {
+    background: #f44;
+}
+.norVNC_status_warn {
+    background: #ff4;
+}
+
+/* Do not set width/height for VNC_screen or VNC_canvas or incorrect
+ * scaling will occur. Canvas resizes to remote VNC settings */
+#noVNC_screen {
+	padding-top:40px;
+    text-align: center;
+    display: table;
+	width:100%;
+	height:100%;
+}
+#VNC_canvas {
+    background: #eee;
+}
+
+#VNC_clipboard_clear_button {
+	float:right;
+}
+#VNC_clipboard_text {
+    font-size: 11px;
+}
+
+#noVNC_Settings {
+	width:200px;
+}
+
+#noVNC_clipboard_clear_button {
+	float:right;
+}
+
+/*Settings Bubble*/
+.triangle-right {
+	position:relative;
+	padding:15px;
+	margin:1em 0 3em;
+	color:#fff;
+	background:#fff; /* default background for browsers without gradient support */
+	/* css3 */
+	/*background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
+	background:-moz-linear-gradient(#2e88c4, #075698);
+	background:-o-linear-gradient(#2e88c4, #075698);
+	background:linear-gradient(#2e88c4, #075698);*/
+	-webkit-border-radius:10px;
+	-moz-border-radius:10px;
+	border-radius:10px;
+	color:#000;
+	border:2px solid #E0E0E0;
+}
+
+.triangle-right.top:after {
+    border-color: transparent #E0E0E0;
+    border-width: 20px 20px 0 0;
+    bottom: auto;
+    left: auto;
+    right: 50px;
+    top: -20px;
+}
+
+.triangle-right:after {
+	content:"";
+	position:absolute;
+	bottom:-20px; /* value = - border-top-width - border-bottom-width */
+	left:50px; /* controls horizontal position */
+	border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
+	border-style:solid;
+	border-color:#E0E0E0 transparent; 
+    /* reduce the damage in FF3.0 */
+    display:block; 
+    width:0;
+}
+
+.triangle-right.top:after {
+	top:-40px; /* value = - border-top-width - border-bottom-width */
+	right:50px; /* controls horizontal position */
+	bottom:auto;
+	left:auto;
+	border-width:40px 40px 0 0; /* vary these values to change the angle of the vertex */
+	border-color:transparent #E0E0E0; 
+}
+
+/*Bubble contents divs*/
+#noVNC_Settings {
+	margin-top:72px;
+	position:fixed;
+	right:100px;
+	display:none; 
+}
+
+#noVNC_controls {
+	margin-top:72px;
+	position:fixed;
+	right:10px;
+}
+
+#noVNC_clipboard {
+	display:none; 
+	margin-top:72px;
+	position:fixed;
+	right:180px;
+}
+
+/*Default noVNC screen.*/
+#noVNC_defaultScreen {
+	width:400px;
+	margin-left:auto;
+	margin-right:auto;
+	font-size:160px;
+	color:yellow;
+	text-align:left;
+	font-family: 'Orbitron', sans-serif;
+	line-height:90%;
+    text-shadow:
+       5px 5px 0 #000,
+      -1px -1px 0 #000,
+       1px -1px 0 #000,
+      -1px 1px 0 #000,
+       1px 1px 0 #000;
+}
+
+#noVNC_defaultScreen span{
+	color:green;
+}

include/black.css

@@ -1,4 +1,4 @@
-.noVNC-control-bar {
+#noVNC-control-bar {
 	  background-position:50% 100%;
 }
 

include/ui.js

@@ -72,11 +72,10 @@ load: function() {
 
 	//iOS Safari does not support CSS position:fixed. This detects iOS devices and enables javascript workaround.  
 	if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {	
-		alert("here");
-	setOnscroll();
-		setResize();
+ 
+		setOnscroll();
+		setResize(); 
 	}
-
 },
 
 // Read form control compatible setting from cookie
@@ -445,7 +444,6 @@ function showkeyboard(){
 var scrollx = (document.all)?document.body.scrollLeft:window.pageXOffset;   
 var scrolly = (document.all)?document.body.scrollTop:window.pageYOffset; 
 
-
 //Stop browser zooming on textbox.
 zoomDisable();
 		$D('keyboardinput').focus();
@@ -496,13 +494,12 @@ function setResize() {
 }
 
 function setBarPosition() {
-  $D('VNC_mobile_bar').style.top = (window.pageYOffset) + 'px';
-  $D('VNC_mobile_buttons').style.left = (window.pageXOffset) + 'px';
-   
-  $D('VNC_mobile_buttons_right').style.right = 0 + 'px'; 
+  $D('noVNC-control-bar').style.top = (window.pageYOffset) + 'px';
+  $D('noVNC_mobile_buttons').style.left = (window.pageXOffset) + 'px';
+  $D('noVNC_mobile_buttons_right').style.right = 0 + 'px'; 
   
-   var vncwidth = $('#VNC_screen').width();
-   $D('VNC_mobile_bar').style.width = vncwidth + 'px';
+   var vncwidth = $('#noVNC_screen').width();
+   $D('noVNC-control-bar').style.width = vncwidth + 'px';
 }
 
 //Helper to add options to dropdown.