diff options
| author | Pierre Ossman <ossman@cendio.se> | 2021-11-19 16:18:51 +0100 |
|---|---|---|
| committer | Pierre Ossman <ossman@cendio.se> | 2021-11-19 16:18:51 +0100 |
| commit | 7ad4e60df60fa007c6c89f61479c02487aba837b (patch) | |
| tree | e5ee9ae3089a974d3383de12aeb0db376c403603 | |
| parent | 301714928bfd45a0f11d8cbaec8f9fe538cefe79 (diff) | |
| download | novnc-7ad4e60df60fa007c6c89f61479c02487aba837b.tar.gz | |
Add transition animation to transition screen
Avoid a harsh switch to the transition screen (loading, connecting) by
using some CSS transition animation.
| -rw-r--r-- | app/styles/base.css | 9 |
1 files changed, 7 insertions, 2 deletions
diff --git a/app/styles/base.css b/app/styles/base.css index fd78b79..adad415 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -871,7 +871,11 @@ select:active { /* Transition screen */ #noVNC_transition { - display: none; + transition: 0.5s ease-in-out; + + display: flex; + opacity: 0; + visibility: hidden; position: fixed; top: 0; @@ -892,7 +896,8 @@ select:active { :root.noVNC_connecting #noVNC_transition, :root.noVNC_disconnecting #noVNC_transition, :root.noVNC_reconnecting #noVNC_transition { - display: flex; + opacity: 1; + visibility: visible; } :root:not(.noVNC_reconnecting) #noVNC_cancel_reconnect_button { display: none; |