Clean up z index ordering
We have enough layers now that we need to have some system for this. E.g. make sure that dialogs during connect show up in front of the blocking transition layer.
This commit is contained in:
parent
b3c932c386
commit
cac935ffc2
|
@ -7,6 +7,20 @@
|
|||
* This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
|
||||
*/
|
||||
|
||||
/*
|
||||
* Z index layers:
|
||||
*
|
||||
* 0: Main screen
|
||||
* 10: Control bar
|
||||
* 50: Transition blocker
|
||||
* 60: Connection popups
|
||||
* 100: Status bar
|
||||
* ...
|
||||
* 1000: Javascript crash
|
||||
* ...
|
||||
* 10000: Max (used for polyfills)
|
||||
*/
|
||||
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
|
@ -172,6 +186,15 @@ input[type=button]:active, select:active {
|
|||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* ----------------------------------------
|
||||
* Layering
|
||||
* ----------------------------------------
|
||||
*/
|
||||
|
||||
.noVNC_connect_layer {
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
/* ----------------------------------------
|
||||
* Fallback error
|
||||
* ----------------------------------------
|
||||
|
@ -179,7 +202,7 @@ input[type=button]:active, select:active {
|
|||
|
||||
#noVNC_fallback_error {
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
z-index: 1000;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50px);
|
||||
transition: 0.5s ease-in-out;
|
||||
|
@ -234,7 +257,7 @@ input[type=button]:active, select:active {
|
|||
#noVNC_control_bar_anchor {
|
||||
/* The anchor is needed to get z-stacking to work */
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
z-index: 10;
|
||||
|
||||
transition: 0.5s ease-in-out;
|
||||
|
||||
|
@ -294,7 +317,7 @@ input[type=button]:active, select:active {
|
|||
transform: translateY(35px);
|
||||
width: calc(100% + 30px);
|
||||
height: 50px;
|
||||
z-index: -2;
|
||||
z-index: -1;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
background-color: rgb(83, 99, 122);
|
||||
|
@ -576,7 +599,7 @@ input[type=button]:active, select:active {
|
|||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
z-index: 100;
|
||||
transform: translateY(-100%);
|
||||
|
||||
transition: 0.5s ease-in-out;
|
||||
|
@ -709,6 +732,8 @@ input[type=button]:active, select:active {
|
|||
*/
|
||||
|
||||
#noVNC_password_dlg {
|
||||
position: relative;
|
||||
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
#noVNC_password_dlg.noVNC_open {
|
||||
|
@ -737,7 +762,7 @@ input[type=button]:active, select:active {
|
|||
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
z-index: 50;
|
||||
|
||||
/*display: flex;*/
|
||||
align-items: center;
|
||||
|
|
Loading…
Reference in New Issue