Remove outer div from noVNC_connect_button

Instead of having an outer "box", we can use an outline on the button
itself to create this "platform". Since the outline isn't part of the
size of the element, it will appear wider than before, when compared to
the logo. To counteract that we remove the left and right padding from
the logo to make the entire noVNC_connect_dlg more narrow.

We also had to slightly adjust the :active style since we don't want the
entire "platform" to move when the button is clicked.

3 files changed, 13 insertions, 16 deletions

diff --git a/app/styles/base.css b/app/styles/base.css
index d47ad1f..1c18415 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -714,7 +714,7 @@ html {
 }
 #noVNC_connect_dlg .noVNC_logo {
   transition: 0.5s ease-in-out;
-  padding: 10px;
+  padding: 10px 0;
   margin-bottom: 10px;
 
   font-size: 80px;
@@ -730,25 +730,20 @@ html {
     font-size: calc(25vw - 30px);
   }
 }
-#noVNC_connect_box {
-  padding: 12px;
-
-  background-color: rgb(110, 132, 163);
-  border-radius: 12px;
-
+#noVNC_connect_button {
   text-align: center;
   font-size: 20px;
 
-  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
-}
-#noVNC_connect_box button {
   width: 100%;
   padding: 5px 30px;
+  margin-top: 12px;
 
   cursor: pointer;
 
   border-color: rgb(83, 99, 122);
   border-radius: 5px;
+  outline: 12px solid rgb(110, 132, 163);
+  box-shadow: 6px 6px 0px 12px rgba(0, 0, 0, 0.5);
 
   background: linear-gradient(to top, rgb(110, 132, 163), rgb(99, 119, 147));
   color: white;
@@ -756,11 +751,14 @@ html {
   /* This avoids it jumping around when :active */
   vertical-align: middle;
 }
-#noVNC_connect_box button:hover {
+#noVNC_connect_button:hover {
   background: linear-gradient(to top, rgb(110, 132, 163), rgb(105, 125, 155));
 }
+#noVNC_connect_button:active {
+  border-top-width: 2px;
+}
 
-#noVNC_connect_box img {
+#noVNC_connect_button img {
   vertical-align: bottom;
   height: 1.3em;
 }
diff --git a/app/ui.js b/app/ui.js
index ec508e3..ff0f176 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -318,8 +318,7 @@ const UI = {
     addConnectionControlHandlers() {
         document.getElementById("noVNC_disconnect_button")
             .addEventListener('click', UI.disconnect);
-        document.getElementById("noVNC_connect_box")
-            .getElementsByTagName('button')[0]
+        document.getElementById("noVNC_connect_button")
             .addEventListener('click', UI.connect);
         document.getElementById("noVNC_cancel_reconnect_button")
             .addEventListener('click', UI.cancelReconnect);
diff --git a/vnc.html b/vnc.html
index 8fbe1eb..2458b43 100644
--- a/vnc.html
+++ b/vnc.html
@@ -274,9 +274,9 @@
     <div class="noVNC_center">
         <div id="noVNC_connect_dlg">
             <div class="noVNC_logo" translate="no"><span>no</span>VNC</div>
-            <div id="noVNC_connect_box"><button>
+            <button id="noVNC_connect_button">
                 <img alt="" src="app/images/connect.svg"> Connect
-            </button></div>
+            </button>
         </div>
     </div>