Reinstate outer div of noVNC_connect_button

There were two issues with removing the outer div of the connect button.

Firstly, rounded outlines don't work in WebKit browsers like Safari or
Epiphany (https://bugs.webkit.org/show_bug.cgi?id=20807) and this makes
the outline look completely square.

Secondly the code became too complex.

This reverts most of commit 05baf14256a4640e15cda63cc2ac576f44482775.

2 files changed, 14 insertions, 11 deletions

diff --git a/app/styles/base.css b/app/styles/base.css
index e35dee9..06e736a 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -719,7 +719,7 @@ html {
 }
 #noVNC_connect_dlg .noVNC_logo {
   transition: 0.5s ease-in-out;
-  padding: 10px 0;
+  padding: 10px;
   margin-bottom: 10px;
 
   font-size: 80px;
@@ -735,20 +735,24 @@ html {
     font-size: calc(25vw - 30px);
   }
 }
-#noVNC_connect_button {
+#noVNC_connect_dlg div {
+  padding: 12px;
+
+  background-color: rgb(110, 132, 163);
+  border-radius: 12px;
   text-align: center;
   font-size: 20px;
 
+  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
+}
+#noVNC_connect_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;
@@ -759,9 +763,6 @@ html {
 #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_button img {
   vertical-align: bottom;
diff --git a/vnc.html b/vnc.html
index 592d2f8..f420c0a 100644
--- a/vnc.html
+++ b/vnc.html
@@ -264,9 +264,11 @@
     <div class="noVNC_center">
         <div id="noVNC_connect_dlg">
             <p class="noVNC_logo" translate="no"><span>no</span>VNC</p>
-            <button id="noVNC_connect_button">
-                <img alt="" src="app/images/connect.svg"> Connect
-            </button>
+            <div>
+                <button id="noVNC_connect_button">
+                    <img alt="" src="app/images/connect.svg"> Connect
+                </button>
+            </div>
         </div>
     </div>