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 8ceda02..502dec7 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 78599b7..5e241a2 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>