Properly center status message in vnc_lite

This gets rid of the table and uses a flexbox instead.
This commit is contained in:
Samuel Mannehed 2017-10-31 18:51:33 +01:00
parent cf3b528281
commit 4023a6e1c7
2 changed files with 28 additions and 26 deletions

View File

@ -11,8 +11,6 @@ body {
background-color:#313131;
border-bottom-right-radius: 800px 600px;
height:100%;
width:100%;
display: table;
}
html {
@ -21,18 +19,15 @@ html {
}
#noVNC_status_bar {
margin-top:0px;
width: 100%;
display:flex;
justify-content: space-between;
}
#noVNC_status {
padding-top: 4px;
height: auto;
text-align: center;
color: #fff;
font: bold 12px Helvetica;
position: relative;
width: 100%;
margin-left: 0px;
margin: auto;
}
.noVNC_status_normal {
@ -54,6 +49,16 @@ html {
display: none;
}
#noVNC_left_dummy_elem {
flex: 1;
}
#noVNC_buttons {
flex: 1;
display: flex;
justify-content: flex-end;
}
/* Do not set width/height for VNC_canvas or incorrect
* scaling will occur. Canvas size depends on remote VNC
* settings and noVNC settings. */

View File

@ -279,11 +279,9 @@
<body>
<div id="noVNC_status_bar">
<table border=0 width="100%"><tr>
<td><div id="noVNC_status">
Loading
</div></td>
<td width="1%"><div id="noVNC_buttons">
<div id="noVNC_left_dummy_elem"></div>
<div id="noVNC_status">Loading</div>
<div id="noVNC_buttons">
<input type=button value="Send CtrlAltDel"
id="sendCtrlAltDelButton" class="noVNC_shown">
<span id="noVNC_xvp_buttons" class="noVNC_hidden">
@ -294,8 +292,7 @@
<input type=button value="Reset"
id="xvpResetButton">
</span>
</div></td>
</tr></table>
</div>
</div>
<canvas id="noVNC_canvas" width="0" height="0">
Canvas not supported.