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

View File

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