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:
Pierre Ossman 2016-11-14 17:17:05 +01:00
parent b3c932c386
commit cac935ffc2
2 changed files with 31 additions and 6 deletions

View File

@ -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;

View File

@ -272,7 +272,7 @@
</div>
<!-- Password Dialog -->
<div class="noVNC_center">
<div class="noVNC_center noVNC_connect_layer">
<div id="noVNC_password_dlg" class="noVNC_panel">
<ul>
<li>