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.

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;
 }

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);

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>