Moving CSS definitions to the correct place

Viewer/assets/templates/default/defaultTemplate.html

@@ -1,43 +1,3 @@
-<style>
-    loading-screen {
-        position: absolute;
-        z-index: 100;
-        opacity: 1;
-        pointer-events: none;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        -webkit-transition: opacity 2s ease;
-        -moz-transition: opacity 2s ease;
-        transition: opacity 2s ease;
-    }
-
-    viewer {
-        position: relative;
-        overflow: hidden;
-        /* Start stage */
-        flex: 1;
-        z-index: 1;
-        justify-content: center;
-        align-items: center;
-
-        width: 100%;
-        height: 100%;
-    }
-
-    overlay {
-        position: absolute;
-        z-index: 99;
-        opacity: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        -webkit-transition: opacity 1s ease;
-        -moz-transition: opacity 1s ease;
-        transition: opacity 1s ease;
-    }
-</style>
-
 <viewer></viewer>
 <loading-screen></loading-screen>
 <overlay></overlay>

Viewer/assets/templates/default/defaultViewer.html

@@ -1,35 +1,22 @@
 <style>
-    .babylonjs-canvas {
+    viewer {
+        position: relative;
+        overflow: hidden;
+        /* Start stage */
         flex: 1;
+        z-index: 1;
+        justify-content: center;
+        align-items: center;
+
         width: 100%;
         height: 100%;
-        touch-action: none;
     }
 
-    nav-bar {
-        position: absolute;
-        height: 160px;
+    .babylonjs-canvas {
+        flex: 1;
         width: 100%;
-        bottom: 0;
-        background-color: rgba(0, 0, 0, 0.3);
-        color: white;
-        transition: 1s;
-        align-items: flex-start;
-        justify-content: space-around;
-        display: flex;
-
-        flex-direction: column;
-    }
-
-    /* Big screens have room for the entire navbar */
-
-    @media screen and (min-width: 768px) {
-        nav-bar {
-            align-items: center;
-            flex-direction: row;
-            justify-content: space-between;
-            height: 80px;
-        }
+        height: 100%;
+        touch-action: none;
     }
 </style>
 

Viewer/assets/templates/default/loadingScreen.html

@@ -1,4 +1,19 @@
 <style>
+    /* Loading Screen element */
+
+    loading-screen {
+        position: absolute;
+        z-index: 100;
+        opacity: 1;
+        pointer-events: none;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        -webkit-transition: opacity 2s ease;
+        -moz-transition: opacity 2s ease;
+        transition: opacity 2s ease;
+    }
+
     img.loading-image {
         -webkit-animation: spin 2s linear infinite;
         animation: spin 2s linear infinite;

Viewer/assets/templates/default/navbar.html

@@ -1,4 +1,30 @@
 <style>
+    nav-bar {
+        position: absolute;
+        height: 160px;
+        width: 100%;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, 0.3);
+        color: white;
+        transition: 1s;
+        align-items: flex-start;
+        justify-content: space-around;
+        display: flex;
+
+        flex-direction: column;
+    }
+
+    /* Big screens have room for the entire navbar */
+
+    @media screen and (min-width: 768px) {
+        nav-bar {
+            align-items: center;
+            flex-direction: row;
+            justify-content: space-between;
+            height: 80px;
+        }
+    }
+
     div.flex-container {
         display: flex;
         width: 100%;

Viewer/assets/templates/default/overlay.html

@@ -1,5 +1,17 @@
 <style>
-    .overlay {
+    overlay {
+        position: absolute;
+        z-index: 99;
+        opacity: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        -webkit-transition: opacity 1s ease;
+        -moz-transition: opacity 1s ease;
+        transition: opacity 1s ease;
+    }
+
+    .overlay-item {
         width: 100%;
         height: 100%;
         display: none;
@@ -8,7 +20,7 @@
         background-color: rgba(121, 121, 121, 0.3);
     }
 
-    error.overlay {
+    error.overlay-item {
         background-color: rgba(121, 121, 121, 1);
     }
 
@@ -29,6 +41,6 @@
 <div id="close-button">
     <img src="{{closeImage}}" alt="{{closeText}}">
 </div>
-<help class="overlay"></help>
-<error class="overlay"></error>
-<share class="overlay"></share>
+<help class="overlay-item"></help>
+<error class="overlay-item"></error>
+<share class="overlay-item"></share>