fix(ui): make loading-overlay cover the logout button

Signed-off-by: ernolf <raphael.gradenwitz@googlemail.com>

php/public/style.css

@@ -418,6 +418,7 @@ label {
     font-size: 36px; /* Adjust font size */
     cursor: pointer; /* Change cursor to pointer */
     outline: none;
+    z-index: 9999; /* Ensures the icon is on top of every layer */
 }
 
 /* Icon styling: default state */
@@ -449,7 +450,6 @@ label {
     position: relative; /* Ensures stacking order */
     filter: grayscale(0%); /* Restore full color */
     opacity: 1; /* Fully visible on hover */
-    z-index: 1; /* Ensures the icon is on top of the shadow */
 }
 
 /* Inner glow when hovered */
@@ -461,4 +461,4 @@ label {
 /* Remove hover effects when not hovering */
 #theme-toggle:not(:hover) #theme-icon {
     opacity: 0.6; /* Slightly transparent */
-}
+}

php/templates/containers.twig

@@ -683,7 +683,4 @@
 
         </main>
     </div>
-    <div id="overlay">
-        <div class="loader"></div>
-    </div>
-{% endblock %}
+{% endblock %}

php/templates/layout.twig

@@ -12,5 +12,8 @@
         </div>
         <button id="theme-toggle" onclick="toggleTheme()"><span id="theme-icon"/></button>
         <script type="text/javascript" src="toggle-dark-mode.js"></script>
+        <div id="overlay">
+            <div class="loader"></div>
+        </div>
     </body>
-</html>
+</html>

php/templates/login.twig

@@ -22,7 +22,4 @@
         {% endif %}
     </div>
     <script type="text/javascript" src="before-unload.js"></script>
-    <div id="overlay">
-        <div class="loader"></div>
-    </div>
-{% endblock %}
+{% endblock %}