Maintain z-index values for the views stack.

src/mami.css/_main.css

@@ -2,8 +2,8 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    position: relative;
     outline-style: none;
-    -webkit-text-size-adjust: none;
     text-size-adjust: none;
 }
 
@@ -13,7 +13,6 @@ body {
     height: 100%;
     background: #000;
     color: #fff;
-    overflow: hidden;
 }
 
 a {
@@ -29,17 +28,6 @@ a:hover {
     display: none !important;
 }
 
-body > div {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    min-width: 0;
-    min-height: 0;
-    overflow: auto;
-}
-
 .noscript {
     width: 100%;
     height: 100%;

src/mami.css/input.css

@@ -1,7 +1,6 @@
 .input {
     flex-grow: 0;
     flex-shrink: 0;
-    position: relative;
 }
 
 .input__main {

src/mami.css/main.css

@@ -1,5 +1,6 @@
 @include __animations.css;
 @include _main.css;
+@include views.css;
 @include chat.css;
 @include domaintrans.css;
 @include eeprom.css;

src/mami.css/views.css

@@ -0,0 +1,17 @@
+.views {
+    overflow: hidden;
+}
+
+.views-item {
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+}
+
+.views-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+}

src/mami.js/ui/views.js

@@ -4,6 +4,8 @@ const MamiUIViews = function(targetBody) {
     if(!(targetBody instanceof Element))
         throw 'targetBody must be an instance of window.Element';
 
+    targetBody.classList.toggle('views', true);
+
     const views = [];
 
     const extractElement = elementInfo => {
@@ -32,6 +34,12 @@ const MamiUIViews = function(targetBody) {
         await transition(ctx);
     };
 
+    const updateZIncides = () => {
+        let index = 0;
+        for(const view of views)
+            extractElement(view).style.zIndex = (++index).toString();
+    };
+
     const push = async (elementInfo, transition) => {
         if(typeof elementInfo !== 'object')
             throw 'elementInfo must be an object';
@@ -41,13 +49,21 @@ const MamiUIViews = function(targetBody) {
         if(!views.includes(elementInfo))
             views.push(elementInfo);
 
+        element.classList.toggle('hidden', false);
+        element.classList.toggle('views-item', true);
+        element.classList.toggle('views-background', false);
+
         if(!targetBody.contains(element))
             targetBody.appendChild(element);
 
+        updateZIncides();
+
         if(views.length > 1) {
             const prevElemInfo = views[views.length - 2];
             const prevElem = extractElement(prevElemInfo);
 
+            prevElem.classList.toggle('views-background', true);
+
             await doTransition(transition, {
                 toInfo: elementInfo,
                 toElem: element,
@@ -55,12 +71,9 @@ const MamiUIViews = function(targetBody) {
                 fromElem: prevElem,
             });
 
-            if(!prevElem.classList.contains('hidden'))
+            prevElem.classList.toggle('hidden', true);
-                prevElem.classList.add('hidden');
         }
 
-        if(element.classList.contains('hidden'))
-            element.classList.remove('hidden');
     };
 
     const pop = async transition => {
@@ -70,12 +83,14 @@ const MamiUIViews = function(targetBody) {
 
         const element = extractElement(elementInfo);
 
+        element.classList.toggle('views-background', true);
+
         if(views.length > 0) {
             const nextElemInfo = views[views.length - 1];
             const nextElem = extractElement(nextElemInfo);
 
-            if(nextElem.classList.contains('hidden'))
+            nextElem.classList.toggle('hidden', false);
-                nextElem.classList.remove('hidden');
+            nextElem.classList.toggle('views-background', false);
 
             await doTransition(transition, {
                 toInfo: nextElemInfo,
@@ -85,12 +100,13 @@ const MamiUIViews = function(targetBody) {
             });
         }
 
-        if(!element.classList.contains('hidden'))
+        element.classList.toggle('hidden', true);
-            element.classList.add('hidden');
 
         if(targetBody.contains(element))
             targetBody.removeChild(element);
 
+        updateZIncides();
+
         return elementInfo;
     };
 
@@ -125,11 +141,14 @@ const MamiUIViews = function(targetBody) {
             if(!views.includes(elementInfo))
                 views.unshift(elementInfo);
 
-            if(!element.classList.contains('hidden'))
+            element.classList.toggle('hidden', true);
-                element.classList.add('hidden');
+            element.classList.toggle('views-item', true);
+            element.classList.toggle('views-background', true);
 
             if(!targetBody.contains(element))
                 targetBody.appendChild(element);
+
+            updateZIncides();
         },
         shift: async () => {
             if(views.length < 2)
@@ -138,12 +157,13 @@ const MamiUIViews = function(targetBody) {
             const elementInfo = views.shift();
             const element = extractElement(elementInfo);
 
-            if(element.classList.contains('hidden'))
+            element.classList.toggle('hidden', false);
-                element.classList.remove('hidden');
 
             if(targetBody.contains(element))
                 targetBody.removeChild(element);
 
+            updateZIncides();
+
             return elementInfo;
         },
     };