From cac935ffc2e3d9a05b5d54b609ecda7d8e811e85 Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Mon, 14 Nov 2016 17:17:05 +0100
Subject: [PATCH] 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.
---
 app/styles/base.css | 35 ++++++++++++++++++++++++++++++-----
 vnc.html            |  2 +-
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index 8ceda02c..502dec75 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -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;
diff --git a/vnc.html b/vnc.html
index 78599b7e..5e241a2a 100644
--- a/vnc.html
+++ b/vnc.html
@@ -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>