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

Bling up popups 

Make the popups a bit more prominent by adding shadows and animations.
This commit is contained in:
Pierre Ossman 2016-08-25 20:11:11 +02:00
parent b0c6d3c6aa
commit 24d8b311ca
1 changed files with 26 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
app/styles/base.css
View File

@ -88,33 +88,30 @@ html {
/* Panels */ /* Panels */
.noVNC_panel { .noVNC_panel {
display: none; position: fixed;
position: relative; top: 46px;
right: 15px;
transform: translate(0, -50px);
transition: 0.5s ease-in-out;
visibility: hidden;
opacity: 0;
padding: 15px; padding: 15px;
color: #fff;
background: #fff; /* default background for browsers without gradient support */ background: #fff;
/* css3 */
/*background: -webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
background: -moz-linear-gradient(#2e88c4, #075698);
background: -o-linear-gradient(#2e88c4, #075698);
background: linear-gradient(#2e88c4, #075698);*/
-webkit-border-radius: 10px; -webkit-border-radius: 10px;
-moz-border-radius: 10px; -moz-border-radius: 10px;
border-radius: 10px; border-radius: 10px;
color: #000; color: #000;
border: 2px solid #E0E0E0; border: 2px solid #E0E0E0;
} box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
.noVNC_panel:after {
content: "";
position: absolute;
top: -40px; /* value = - border-top-width - border-bottom-width */
right: 50px; /* controls horizontal position */
border-style: solid;
border-width: 40px 40px 0 0; /* vary these values to change the angle of the vertex */
border-color: transparent #E0E0E0;
} }
.noVNC_panel.noVNC_open { .noVNC_panel.noVNC_open {
display: block; visibility: visible;
opacity: 1;
transform: translate(0, 0);
} }
/* noVNC Touch Device only buttons */ /* noVNC Touch Device only buttons */
@ -186,12 +183,6 @@ html {
/* XVP Shutdown/Reboot */ /* XVP Shutdown/Reboot */
#noVNC_xvp { #noVNC_xvp {
top: 73px;
right: 30px;
position: fixed;
}
#noVNC_xvp:after {
right: 125px;
} }
#noVNC_xvp_buttons { #noVNC_xvp_buttons {
display: none; display: none;
@ -199,12 +190,6 @@ html {
/* Clipboard */ /* Clipboard */
#noVNC_clipboard { #noVNC_clipboard {
top: 73px;
right: 30px;
position: fixed;
}
#noVNC_clipboard:after {
right: 85px;
} }
#noVNC_clipboard_text { #noVNC_clipboard_text {
width: 500px; width: 500px;
@ -215,9 +200,6 @@ html {
/* Settings */ /* Settings */
#noVNC_settings { #noVNC_settings {
top: 73px;
right: 20px;
position: fixed;
} }
#noVNC_settings ul { #noVNC_settings ul {
list-style: none; list-style: none;
@ -233,12 +215,6 @@ html {
/* Connection Controls */ /* Connection Controls */
#noVNC_connect_controls { #noVNC_connect_controls {
top: 73px;
right: 12px;
position: fixed;
}
#noVNC_connect_controls:after {
right:15px;
} }
#noVNC_connect_controls ul { #noVNC_connect_controls ul {
list-style: none; list-style: none;
@ -268,15 +244,21 @@ html {
*/ */
#noVNC_status { #noVNC_status {
display: none;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 3; z-index: 3;
transform: translateY(-100%);
transition: 0.5s ease-in-out;
visibility: hidden;
opacity: 0;
padding: 5px; padding: 5px;
display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
@ -288,7 +270,9 @@ html {
border-bottom: 1px solid rgba(0, 0, 0, 0.9); border-bottom: 1px solid rgba(0, 0, 0, 0.9);
} }
#noVNC_status.noVNC_open { #noVNC_status.noVNC_open {
display: flex; transform: translateY(0);
visibility: visible;
opacity: 1;
} }
#noVNC_status::before { #noVNC_status::before {