Limit fallback error width to window width

Change the layout a bit to make sure the entire message can be read.
This commit is contained in:
Pierre Ossman 2017-03-02 14:21:29 +01:00
parent c361080be8
commit 13c558e3a0
2 changed files with 19 additions and 15 deletions

View File

@ -216,19 +216,22 @@ select:active {
*/
#noVNC_fallback_error {
position: fixed;
z-index: 1000;
left: 50%;
transform: translate(-50%, -50px);
visibility: hidden;
}
#noVNC_fallback_error.noVNC_open {
visibility: visible;
}
#noVNC_fallback_error > div {
max-width: 90%;
padding: 15px;
transition: 0.5s ease-in-out;
visibility: hidden;
transform: translateY(-50px);
opacity: 0;
top: 60px;
padding: 15px;
width: auto;
text-align: center;
font-weight: bold;
color: #fff;
@ -237,9 +240,8 @@ select:active {
box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
background: rgba(200,55,55,0.8);
}
#noVNC_fallback_error.noVNC_open {
transform: translate(-50%, 0);
visibility: visible;
#noVNC_fallback_error.noVNC_open > div {
transform: translateY(0);
opacity: 1;
}

View File

@ -72,10 +72,12 @@
<body>
<div id="noVNC_fallback_error">
<div>noVNC encountered an error:</div>
<br>
<div id="noVNC_fallback_errormsg"></div>
<div id="noVNC_fallback_error" class="noVNC_center">
<div>
<div>noVNC encountered an error:</div>
<br>
<div id="noVNC_fallback_errormsg"></div>
</div>
</div>
<!-- noVNC Control Bar -->