Add base.css. Bar position formatting.
This commit is contained in:
Chris Gordon
Joel Martin
parent
53fc7392bb
commit
c327865b4b
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
.noVNC-control-bar {
|
||||
#noVNC-control-bar {
|
||||
background-position:50% 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
Loading…
Reference in New Issue