From c327865b4bd937e74ee633be683cd25b96612a61 Mon Sep 17 00:00:00 2001 From: Chris Gordon Date: Mon, 5 Sep 2011 13:31:00 +1000 Subject: [PATCH] Add base.css. Bar position formatting. --- include/base.css | 249 ++++++++++++++++++++++++++++++++++++++++++++++ include/black.css | 2 +- include/ui.js | 19 ++-- 3 files changed, 258 insertions(+), 12 deletions(-) create mode 100644 include/base.css diff --git a/include/base.css b/include/base.css new file mode 100644 index 00000000..39ed303c --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/include/black.css b/include/black.css index 201d441a..04d54ae0 100644 --- a/include/black.css +++ b/include/black.css @@ -1,4 +1,4 @@ -.noVNC-control-bar { +#noVNC-control-bar { background-position:50% 100%; } diff --git a/include/ui.js b/include/ui.js index ee630fbd..8c900443 100644 --- a/include/ui.js +++ b/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.