jcarr
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 05baf14256.
This commit is contained in:
Samuel Mannehed 2022-12-23 13:29:52 +01:00
parent bd2d3a58b0
commit 820b39c7d3
2 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/styles/base.css
View File

@ -719,7 +719,7 @@ html {
} }
#noVNC_connect_dlg .noVNC_logo { #noVNC_connect_dlg .noVNC_logo {
transition: 0.5s ease-in-out; transition: 0.5s ease-in-out;
padding: 10px 0; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 80px; font-size: 80px;
@ -735,20 +735,24 @@ html {
font-size: calc(25vw - 30px); 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; text-align: center;
font-size: 20px; font-size: 20px;
box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
}
#noVNC_connect_button {
width: 100%; width: 100%;
padding: 5px 30px; padding: 5px 30px;
margin-top: 12px;
cursor: pointer; cursor: pointer;
border-color: rgb(83, 99, 122); border-color: rgb(83, 99, 122);
border-radius: 5px; 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)); background: linear-gradient(to top, rgb(110, 132, 163), rgb(99, 119, 147));
color: white; color: white;
@ -759,9 +763,6 @@ html {
#noVNC_connect_button:hover { #noVNC_connect_button:hover {
background: linear-gradient(to top, rgb(110, 132, 163), rgb(105, 125, 155)); 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 { #noVNC_connect_button img {
vertical-align: bottom; vertical-align: bottom;

8
vnc.html
View File

@ -264,9 +264,11 @@
<div class="noVNC_center"> <div class="noVNC_center">
<div id="noVNC_connect_dlg"> <div id="noVNC_connect_dlg">
<p class="noVNC_logo" translate="no"><span>no</span>VNC</p> <p class="noVNC_logo" translate="no"><span>no</span>VNC</p>
<button id="noVNC_connect_button"> <div>
<img alt="" src="app/images/connect.svg"> Connect <button id="noVNC_connect_button">
</button> <img alt="" src="app/images/connect.svg"> Connect
</button>
</div>
</div> </div>
</div> </div>