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.

diff --git a/app/styles/base.css b/app/styles/base.css
index 8ceda02cd15fe3e562baccc35f25643482d2b3ce..502dec7541b3cab0da62264a84bab9bf567f5b9c 100644 (file)
--- 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 78599b7e715ce955b75790f481bc4eecbcbe4a94..5e241a2a9b6aa17eb9ee55285a4fde9bb38b59a6 100644 (file)
--- 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>