[#181] fix output loading gears for mobile, add a _structure css file in /themes that is shared across themes

src/web/TODO.md

@@ -8,8 +8,8 @@
 - test drag and drop etc. Regular mobile events / UX
 - view-heights not correct due to variable taskbar on mobile devices
 
-- loading gears on mobile ( some ingredient labels 'shine through' and the cancel button isnt visible )
 - need long press checks on mobile to add favourites and switch ingredient order
+- fix "hitbox" ( event bubbling ) for maximiser icon / button
 
 ### Desktop UI:
 ### General UI:

src/web/stylesheets/components/io/_io.css

@@ -73,7 +73,8 @@ label[for="output-text"] {
 
 #output-loader {
     position: absolute;
-    bottom: 0;
+    bottom: var(--controls-height);
+    z-index: 100;
     left: 0;
     width: 100%;
     height: 100%;
@@ -87,6 +88,12 @@ label[for="output-text"] {
     transition: all 0.5s ease;
 }
 
+@media only screen and (min-width: 768px){
+    #output-loader {
+        bottom: 0;
+    }
+}
+
 #output-loader-animation {
     display: block;
     position: absolute;

src/web/stylesheets/index.css

@@ -7,6 +7,7 @@
  */
 
 /* Themes */
+@import "./themes/_structure.css";
 @import "./themes/_classic.css";
 @import "./themes/_dark.css";
 @import "./themes/_geocities.css";

src/web/stylesheets/layout/_structure.css

@@ -6,15 +6,6 @@
  * @license Apache-2.0
  */
 
-:root {
-    --banner-height: 40px;
-    --controls-height: 70px;
-    --workspace-height: calc( 100vh - var(--banner-height) - var(--controls-height));
-    --recipe-height: 38vh;
-    --operations-height: 89px;
-    --io-height: calc(100vh - var(--banner-height) - var(--controls-height) - var(--recipe-height) - var(--operations-height));
-}
-
 #banner,
 #content-wrapper {
     position: absolute;
@@ -42,9 +33,9 @@
     bottom: 0;
 }
 
-#IO {
-    padding-bottom: var(--controls-height);
-}
+/*#IO {*/
+/*    padding-bottom: var(--controls-height);*/
+/*}*/
 
 #recipe.maximised-pane,
 #input.maximised-pane,

src/web/stylesheets/themes/_structure.css

@@ -0,0 +1,8 @@
+:root {
+    --banner-height: 40px;
+    --controls-height: 70px;
+    --workspace-height: calc( 100vh - var(--banner-height) - var(--controls-height));
+    --recipe-height: 38vh;
+    --operations-height: 89px;
+    --io-height: calc(100vh - var(--banner-height) - var(--controls-height) - var(--recipe-height) - var(--operations-height));
+}