From 0bc4e4eb8a34092dac8745d2fcc3c551a3e2641e Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Mon, 30 Oct 2017 15:29:19 +0100
Subject: [PATCH 1/9] Remove prefixed versions of linear-gradient

Other parts of noVNC have significantly higher requirements than this.
All supported browsers will be able to handle the real linear-gradient.
---
 app/styles/lite.css | 24 +++---------------------
 1 file changed, 3 insertions(+), 21 deletions(-)

diff --git a/app/styles/lite.css b/app/styles/lite.css
index 50f9a822..a65d1ab1 100644
--- a/app/styles/lite.css
+++ b/app/styles/lite.css
@@ -44,33 +44,15 @@ html {
 }
 
 .noVNC_status_normal {
-  background: #b2bdcd; /* Old browsers */
-  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 */
+  background: linear-gradient(#b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%);
 }
 
 .noVNC_status_error {
-  background: #f04040; /* Old browsers */
-  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 */
+  background: linear-gradient(#f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%);
 }
 
 .noVNC_status_warn {
-  background: #f0f040; /* Old browsers */
-  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+ */
-  background: -o-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
-  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 */
+  background: linear-gradient(#f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%);
 }
 
 #noVNC_buttons {

From 082bc6b47804ac5b76dfade4a99b59e2b5aeee3d Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Mon, 30 Oct 2017 15:31:56 +0100
Subject: [PATCH 2/9] Use more subtle colors for warn and error in lite

The clear red and yellow colors used before does not match well with the
rest of noVNC's color scheme.
---
 app/styles/lite.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/styles/lite.css b/app/styles/lite.css
index a65d1ab1..3150c9af 100644
--- a/app/styles/lite.css
+++ b/app/styles/lite.css
@@ -48,11 +48,11 @@ html {
 }
 
 .noVNC_status_error {
-  background: linear-gradient(#f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%);
+  background: linear-gradient(#c83737 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%);
 }
 
 .noVNC_status_warn {
-  background: linear-gradient(#f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%);
+  background: linear-gradient(#b4b41e 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%);
 }
 
 #noVNC_buttons {

From 178bf8ec97b4da5cfdfb20ef4edaff52133105b8 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Tue, 31 Oct 2017 16:06:57 +0100
Subject: [PATCH 3/9] Get rid of unnecessary noVNC_container in lite

If we want to keep vnc_lite simple, we shouldn't have unnecessary
elements. All aspects of the container could be moved up a step in the
hierarchy.
---
 app/styles/lite.css | 20 ++++++-----------
 vnc_lite.html       | 52 ++++++++++++++++++++++-----------------------
 2 files changed, 31 insertions(+), 41 deletions(-)

diff --git a/app/styles/lite.css b/app/styles/lite.css
index 3150c9af..b623a009 100644
--- a/app/styles/lite.css
+++ b/app/styles/lite.css
@@ -1,7 +1,7 @@
 /*
  * noVNC auto CSS
  * 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)
  * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
  */
@@ -10,26 +10,18 @@ body {
   margin:0;
   padding:0;
   font-family: Helvetica;
-  /*Background image with light grey curve.*/
-  background-color:#494949;
-  background-repeat:no-repeat;
-  background-position:right bottom;
+  background-color:#313131;
+  border-bottom-right-radius: 800px 600px;
   height:100%;
+  width:100%;
+  display: table;
 }
 
 html {
+  background-color:#494949;
   height:100%;
 }
 
-#noVNC_container {
-  display: table;
-  width:100%;
-  height:100%;
-  background-color:#313131;
-  border-bottom-right-radius: 800px 600px;
-  /*border-top-left-radius: 800px 600px;*/
-}
-
 #noVNC_status {
   font-size: 12px;
   padding-top: 4px;
diff --git a/vnc_lite.html b/vnc_lite.html
index f54cb13a..497f3f16 100644
--- a/vnc_lite.html
+++ b/vnc_lite.html
@@ -5,7 +5,7 @@
     <!--
     noVNC example: lightweight example using minimal UI and features
     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)
     This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
 
@@ -279,31 +279,29 @@
     </script>
 </head>
 
-<body style="margin: 0px;">
-    <div id="noVNC_container">
-            <div id="noVNC_status_bar" class="noVNC_status_bar" style="margin-top: 0px;">
-                <table border=0 width="100%"><tr>
-                    <td><div id="noVNC_status" style="position: relative; height: auto;">
-                        Loading
-                    </div></td>
-                    <td width="1%"><div id="noVNC_buttons">
-                        <input type=button value="Send CtrlAltDel"
-                            id="sendCtrlAltDelButton">
-                        <span id="noVNC_xvp_buttons">
-                        <input type=button value="Shutdown"
-                            id="xvpShutdownButton">
-                        <input type=button value="Reboot"
-                            id="xvpRebootButton">
-                        <input type=button value="Reset"
-                            id="xvpResetButton">
-                        </span>
-                            </div></td>
-                </tr></table>
-            </div>
-            <canvas id="noVNC_canvas" width="640px" height="20px">
-                Canvas not supported.
-            </canvas>
-        </div>
+<body>
+  <div id="noVNC_status_bar" style="margin-top: 0px;">
+    <table border=0 width="100%"><tr>
+        <td><div id="noVNC_status" style="position: relative; height: auto;">
+            Loading
+        </div></td>
+        <td width="1%"><div id="noVNC_buttons">
+            <input type=button value="Send CtrlAltDel"
+                   id="sendCtrlAltDelButton">
+            <span id="noVNC_xvp_buttons">
+              <input type=button value="Shutdown"
+                     id="xvpShutdownButton">
+              <input type=button value="Reboot"
+                     id="xvpRebootButton">
+              <input type=button value="Reset"
+                     id="xvpResetButton">
+            </span>
+        </div></td>
+    </tr></table>
+  </div>
+  <canvas id="noVNC_canvas" width="0" height="0">
+    Canvas not supported.
+  </canvas>
 
-    </body>
+</body>
 </html>

From 8167e459bca2d00630cc1cdc441e8ed2b58e21ac Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Tue, 31 Oct 2017 16:16:29 +0100
Subject: [PATCH 4/9] Remove unnecessary css rules for lite

---
 app/styles/lite.css | 15 +++------------
 vnc_lite.html       |  2 +-
 2 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/app/styles/lite.css b/app/styles/lite.css
index b623a009..9e2cf8f9 100644
--- a/app/styles/lite.css
+++ b/app/styles/lite.css
@@ -8,8 +8,6 @@
 
 body {
   margin:0;
-  padding:0;
-  font-family: Helvetica;
   background-color:#313131;
   border-bottom-right-radius: 800px 600px;
   height:100%;
@@ -23,14 +21,12 @@ html {
 }
 
 #noVNC_status {
-  font-size: 12px;
   padding-top: 4px;
   height:32px;
   text-align: center;
-  font-weight: bold;
   color: #fff;
-  z-index: 0;
-  position: absolute;
+  font: bold 12px Helvetica;
+  position: relative;
   width: 100%;
   margin-left: 0px;
 }
@@ -47,10 +43,6 @@ html {
   background: linear-gradient(#b4b41e 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%);
 }
 
-#noVNC_buttons {
-  white-space: nowrap;
-}
-
 /* Do not set width/height for VNC_canvas or incorrect
  * scaling will occur. Canvas size depends on remote VNC
  * settings and noVNC settings. */
@@ -58,6 +50,5 @@ html {
   position: absolute;
   left: 0;
   right: 0;
-  margin-left: auto;
-  margin-right: auto;
+  margin: auto;
 }
diff --git a/vnc_lite.html b/vnc_lite.html
index 497f3f16..52b809b7 100644
--- a/vnc_lite.html
+++ b/vnc_lite.html
@@ -108,7 +108,7 @@
             var form = document.createElement('form');
             form.style = 'margin-bottom: 0px';
             form.innerHTML = '<label></label>'
-            form.innerHTML += '<input type=password size=10 id="password_input" class="noVNC_status">';
+            form.innerHTML += '<input type=password size=10 id="password_input">';
             form.onsubmit = setPassword;
 
             // bypass status() because it sets text content

From dc905e859f197cca3360012119543bf310c63014 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Tue, 31 Oct 2017 16:37:12 +0100
Subject: [PATCH 5/9] Move styling from vnc_lite.html to css

This clears up some conflicting style attributes as well. HTML
inline-styling is prioritized above css styling.
---
 app/styles/lite.css | 13 ++++++++++++-
 vnc_lite.html       | 16 +++++++---------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/app/styles/lite.css b/app/styles/lite.css
index 9e2cf8f9..8fe39e30 100644
--- a/app/styles/lite.css
+++ b/app/styles/lite.css
@@ -20,9 +20,13 @@ html {
   height:100%;
 }
 
+#noVNC_status_bar {
+  margin-top:0px;
+}
+
 #noVNC_status {
   padding-top: 4px;
-  height:32px;
+  height: auto;
   text-align: center;
   color: #fff;
   font: bold 12px Helvetica;
@@ -43,6 +47,13 @@ html {
   background: linear-gradient(#b4b41e 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%);
 }
 
+.noNVC_shown {
+  display: inline;
+}
+.noVNC_hidden {
+  display: none;
+}
+
 /* Do not set width/height for VNC_canvas or incorrect
  * scaling will occur. Canvas size depends on remote VNC
  * settings and noVNC settings. */
diff --git a/vnc_lite.html b/vnc_lite.html
index 52b809b7..563ba168 100644
--- a/vnc_lite.html
+++ b/vnc_lite.html
@@ -106,7 +106,6 @@
             var html;
 
             var form = document.createElement('form');
-            form.style = 'margin-bottom: 0px';
             form.innerHTML = '<label></label>'
             form.innerHTML += '<input type=password size=10 id="password_input">';
             form.onsubmit = setPassword;
@@ -146,7 +145,7 @@
                 default:
                     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;
         }
         function updateState(rfb, state, oldstate) {
@@ -206,13 +205,12 @@
             var xvpbuttons;
             xvpbuttons = document.getElementById('noVNC_xvp_buttons');
             if (ver >= 1) {
-                xvpbuttons.style.display = 'inline';
+                xvpbuttons.className= "noVNC_shown";
             } else {
-                xvpbuttons.style.display = 'none';
+                xvpbuttons.className = "noVNC_hidden";
             }
         }
 
-        document.getElementById('sendCtrlAltDelButton').style.display = "inline";
         document.getElementById('sendCtrlAltDelButton').onclick = sendCtrlAltDel;
         document.getElementById('xvpShutdownButton').onclick = xvpShutdown;
         document.getElementById('xvpRebootButton').onclick = xvpReboot;
@@ -280,15 +278,15 @@
 </head>
 
 <body>
-  <div id="noVNC_status_bar" style="margin-top: 0px;">
+  <div id="noVNC_status_bar">
     <table border=0 width="100%"><tr>
-        <td><div id="noVNC_status" style="position: relative; height: auto;">
+        <td><div id="noVNC_status">
             Loading
         </div></td>
         <td width="1%"><div id="noVNC_buttons">
             <input type=button value="Send CtrlAltDel"
-                   id="sendCtrlAltDelButton">
-            <span id="noVNC_xvp_buttons">
+                   id="sendCtrlAltDelButton" class="noVNC_shown">
+            <span id="noVNC_xvp_buttons" class="noVNC_hidden">
               <input type=button value="Shutdown"
                      id="xvpShutdownButton">
               <input type=button value="Reboot"

From cf3b528281fec44367341f40438bbfa6e644ddf4 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Tue, 31 Oct 2017 18:50:34 +0100
Subject: [PATCH 6/9] Add missing semicolon

---
 vnc_lite.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vnc_lite.html b/vnc_lite.html
index 563ba168..b8cb47e4 100644
--- a/vnc_lite.html
+++ b/vnc_lite.html
@@ -106,7 +106,7 @@
             var html;
 
             var form = document.createElement('form');
-            form.innerHTML = '<label></label>'
+            form.innerHTML = '<label></label>';
             form.innerHTML += '<input type=password size=10 id="password_input">';
             form.onsubmit = setPassword;
 

From 4023a6e1c7bd8bcbe5e53922d101df8a60bc81b7 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Tue, 31 Oct 2017 18:51:33 +0100
Subject: [PATCH 7/9] Properly center status message in vnc_lite

This gets rid of the table and uses a flexbox instead.
---
 app/styles/lite.css | 23 ++++++++++++++---------
 vnc_lite.html       | 31 ++++++++++++++-----------------
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/app/styles/lite.css b/app/styles/lite.css
index 8fe39e30..c8db9967 100644
--- a/app/styles/lite.css
+++ b/app/styles/lite.css
@@ -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. */
diff --git a/vnc_lite.html b/vnc_lite.html
index b8cb47e4..671d78e6 100644
--- a/vnc_lite.html
+++ b/vnc_lite.html
@@ -279,23 +279,20 @@
 
 <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">
-            <input type=button value="Send CtrlAltDel"
-                   id="sendCtrlAltDelButton" class="noVNC_shown">
-            <span id="noVNC_xvp_buttons" class="noVNC_hidden">
-              <input type=button value="Shutdown"
-                     id="xvpShutdownButton">
-              <input type=button value="Reboot"
-                     id="xvpRebootButton">
-              <input type=button value="Reset"
-                     id="xvpResetButton">
-            </span>
-        </div></td>
-    </tr></table>
+    <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">
+        <input type=button value="Shutdown"
+               id="xvpShutdownButton">
+        <input type=button value="Reboot"
+               id="xvpRebootButton">
+        <input type=button value="Reset"
+               id="xvpResetButton">
+      </span>
+    </div>
   </div>
   <canvas id="noVNC_canvas" width="0" height="0">
     Canvas not supported.

From 3c07dc51afc8e2f23744ab2b5e9f576d044deec7 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Wed, 1 Nov 2017 08:39:50 +0100
Subject: [PATCH 8/9] Add small padding to buttons in vnc_lite

---
 app/styles/lite.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/styles/lite.css b/app/styles/lite.css
index c8db9967..422ed4df 100644
--- a/app/styles/lite.css
+++ b/app/styles/lite.css
@@ -54,6 +54,7 @@ html {
 }
 
 #noVNC_buttons {
+  padding: 1px;
   flex: 1;
   display: flex;
   justify-content: flex-end;

From ba9e1ecc942519d8dd09cd2f1354b924527c0328 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Wed, 1 Nov 2017 08:40:11 +0100
Subject: [PATCH 9/9] Center canvas vertically as well in vnc_lite

Fixes issue #881.
---
 app/styles/lite.css | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/styles/lite.css b/app/styles/lite.css
index 422ed4df..b7df1e39 100644
--- a/app/styles/lite.css
+++ b/app/styles/lite.css
@@ -11,6 +11,8 @@ body {
   background-color:#313131;
   border-bottom-right-radius: 800px 600px;
   height:100%;
+  display: flex;
+  flex-direction: column;
 }
 
 html {
@@ -64,8 +66,5 @@ html {
  * scaling will occur. Canvas size depends on remote VNC
  * settings and noVNC settings. */
 #noVNC_canvas {
-  position: absolute;
-  left: 0;
-  right: 0;
   margin: auto;
 }