jcarr
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #947 from samhed/lite_center 

Properly center things in vnc_lite.html
This commit is contained in:
Samuel Mannehed 2017-11-04 11:50:50 +01:00 committed by GitHub
parent 1d6ff4a3e9 ba9e1ecc94
commit a1d547657f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 58 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
app/styles/lite.css
View File

@ -1,89 +1,70 @@
/* /*
* noVNC auto CSS * noVNC auto CSS
* Copyright (C) 2012 Joel Martin * Copyright (C) 2012 Joel Martin
* Copyright (C) 2016 Samuel Mannehed for Cendio AB * Copyright (C) 2017 Samuel Mannehed for Cendio AB
* noVNC is licensed under the MPL 2.0 (see LICENSE.txt) * noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
* This file is licensed under the 2-Clause BSD license (see LICENSE.txt). * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
*/ */
body { body {
margin:0; margin:0;
padding:0; background-color:#313131;
font-family: Helvetica; border-bottom-right-radius: 800px 600px;
/*Background image with light grey curve.*/
background-color:#494949;
background-repeat:no-repeat;
background-position:right bottom;
height:100%; height:100%;
display: flex;
flex-direction: column;
} }
html { html {
background-color:#494949;
height:100%; height:100%;
} }
#noVNC_container { #noVNC_status_bar {
display: table; width: 100%;
width:100%; display:flex;
height:100%; justify-content: space-between;
background-color:#313131;
border-bottom-right-radius: 800px 600px;
/*border-top-left-radius: 800px 600px;*/
} }
#noVNC_status { #noVNC_status {
font-size: 12px;
padding-top: 4px;
height:32px;
text-align: center;
font-weight: bold;
color: #fff; color: #fff;
z-index: 0; font: bold 12px Helvetica;
position: absolute; margin: auto;
width: 100%;
margin-left: 0px;
} }
.noVNC_status_normal { .noVNC_status_normal {
background: #b2bdcd; /* Old browsers */ background: linear-gradient(#b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%);
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 { .noVNC_status_error {
background: #f04040; /* Old browsers */ background: linear-gradient(#c83737 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%);
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 { .noVNC_status_warn {
background: #f0f040; /* Old browsers */ background: linear-gradient(#b4b41e 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%);
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+ */ .noNVC_shown {
background: -o-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */ display: inline;
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 */ .noVNC_hidden {
display: none;
}
#noVNC_left_dummy_elem {
flex: 1;
} }
#noVNC_buttons { #noVNC_buttons {
white-space: nowrap; padding: 1px;
flex: 1;
display: flex;
justify-content: flex-end;
} }
/* Do not set width/height for VNC_canvas or incorrect /* Do not set width/height for VNC_canvas or incorrect
* scaling will occur. Canvas size depends on remote VNC * scaling will occur. Canvas size depends on remote VNC
* settings and noVNC settings. */ * settings and noVNC settings. */
#noVNC_canvas { #noVNC_canvas {
position: absolute; margin: auto;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
} }

61
vnc_lite.html
View File

@ -5,7 +5,7 @@
<!-- <!--
noVNC example: lightweight example using minimal UI and features noVNC example: lightweight example using minimal UI and features
Copyright (C) 2012 Joel Martin Copyright (C) 2012 Joel Martin
Copyright (C) 2013 Samuel Mannehed for Cendio AB Copyright (C) 2017 Samuel Mannehed for Cendio AB
noVNC is licensed under the MPL 2.0 (see LICENSE.txt) noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
This file is licensed under the 2-Clause BSD license (see LICENSE.txt). This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
@ -106,9 +106,8 @@
var html; var html;
var form = document.createElement('form'); var form = document.createElement('form');
form.style = 'margin-bottom: 0px'; form.innerHTML = '<label></label>';
form.innerHTML = '<label></label>' form.innerHTML += '<input type=password size=10 id="password_input">';
form.innerHTML += '<input type=password size=10 id="password_input" class="noVNC_status">';
form.onsubmit = setPassword; form.onsubmit = setPassword;
// bypass status() because it sets text content // bypass status() because it sets text content
@ -146,7 +145,7 @@
default: default:
level = "warn"; level = "warn";
} }
document.getElementById('noVNC_status_bar').setAttribute("class", "noVNC_status_" + level); document.getElementById('noVNC_status_bar').className = "noVNC_status_" + level;
document.getElementById('noVNC_status').textContent = text; document.getElementById('noVNC_status').textContent = text;
} }
function updateState(rfb, state, oldstate) { function updateState(rfb, state, oldstate) {
@ -206,13 +205,12 @@
var xvpbuttons; var xvpbuttons;
xvpbuttons = document.getElementById('noVNC_xvp_buttons'); xvpbuttons = document.getElementById('noVNC_xvp_buttons');
if (ver >= 1) { if (ver >= 1) {
xvpbuttons.style.display = 'inline'; xvpbuttons.className= "noVNC_shown";
} else { } else {
xvpbuttons.style.display = 'none'; xvpbuttons.className = "noVNC_hidden";
} }
} }
document.getElementById('sendCtrlAltDelButton').style.display = "inline";
document.getElementById('sendCtrlAltDelButton').onclick = sendCtrlAltDel; document.getElementById('sendCtrlAltDelButton').onclick = sendCtrlAltDel;
document.getElementById('xvpShutdownButton').onclick = xvpShutdown; document.getElementById('xvpShutdownButton').onclick = xvpShutdown;
document.getElementById('xvpRebootButton').onclick = xvpReboot; document.getElementById('xvpRebootButton').onclick = xvpReboot;
@ -279,31 +277,26 @@
</script> </script>
</head> </head>
<body style="margin: 0px;"> <body>
<div id="noVNC_container"> <div id="noVNC_status_bar">
<div id="noVNC_status_bar" class="noVNC_status_bar" style="margin-top: 0px;"> <div id="noVNC_left_dummy_elem"></div>
<table border=0 width="100%"><tr> <div id="noVNC_status">Loading</div>
<td><div id="noVNC_status" style="position: relative; height: auto;"> <div id="noVNC_buttons">
Loading <input type=button value="Send CtrlAltDel"
</div></td> id="sendCtrlAltDelButton" class="noVNC_shown">
<td width="1%"><div id="noVNC_buttons"> <span id="noVNC_xvp_buttons" class="noVNC_hidden">
<input type=button value="Send CtrlAltDel" <input type=button value="Shutdown"
id="sendCtrlAltDelButton"> id="xvpShutdownButton">
<span id="noVNC_xvp_buttons"> <input type=button value="Reboot"
<input type=button value="Shutdown" id="xvpRebootButton">
id="xvpShutdownButton"> <input type=button value="Reset"
<input type=button value="Reboot" id="xvpResetButton">
id="xvpRebootButton"> </span>
<input type=button value="Reset" </div>
id="xvpResetButton"> </div>
</span> <canvas id="noVNC_canvas" width="0" height="0">
</div></td> Canvas not supported.
</tr></table> </canvas>
</div>
<canvas id="noVNC_canvas" width="640px" height="20px">
Canvas not supported.
</canvas>
</div>
</body> </body>
</html> </html>