Added animation for fullscreen log

app/static/css/default.css

@@ -140,10 +140,20 @@ iframe{
   max-width: 100% !important;
 }
 
+:root {
+  --anim-duration: 3s;          /* Basis-Dauer */
+}
+
 .container,
 .container-fluid {
   transition: 
-    max-width 1s ease-in-out,
+    max-width var(--anim-duration) ease-in-out,
-    padding-left 1s ease-in-out,
+    padding-left var(--anim-duration) ease-in-out,
-    padding-right 1s ease-in-out;
+    padding-right var(--anim-duration) ease-in-out;
+}
+
+#navbar_logo {
+  /* start invisible but in the layout (d-none will actually hide it) */
+  opacity: 0;
+  transition: opacity var(--anim-duration) ease-in-out;
 }

app/static/js/fullscreen.js

@@ -14,36 +14,61 @@ function updateUrlFullscreen(enabled) {
  * set both URL params, update button.
  */
 function enterFullscreen() {
-  document.querySelectorAll('header, footer')
+  // hide header/footer
-          .forEach(function(el){ el.style.display = 'none'; });
+  document.querySelectorAll('header, footer').forEach(el => el.style.display = 'none');
+
+  // go full-width
   setFullWidth(true);
   updateUrlFullscreen(true);
 
+  // fade in logo
   const logo = document.getElementById('navbar_logo');
-  if (logo) logo.classList.remove('d-none');
+  if (logo) {
+    logo.classList.remove('d-none');
+    // next frame → trigger transition
+    requestAnimationFrame(() => {
+      logo.style.opacity = '1';
+    });
+  }
 
+  // recalc scrollbars
   if (typeof adjustScrollContainerHeight === 'function') adjustScrollContainerHeight();
   if (typeof updateCustomScrollbar === 'function') updateCustomScrollbar();
 }
 
+
 /**
  * Exit fullscreen: show header/footer, disable full width, recalc scroll,
  * clear both URL params, update button.
  */
 function exitFullscreen() {
-  document.querySelectorAll('header, footer')
+  // show header/footer
-          .forEach(function(el){ el.style.display = ''; });
+  document.querySelectorAll('header, footer').forEach(el => el.style.display = '');
+
+  // fade out logo
+  const logo = document.getElementById('navbar_logo');
+  if (logo) {
+    logo.style.opacity = '0';
+    logo.addEventListener('transitionend', function handler(e) {
+      // only once, and only for opacity
+      if (e.propertyName === 'opacity') {
+        logo.classList.add('d-none');
+        logo.removeEventListener('transitionend', handler);
+      }
+    });
+  }
+
+  // reset width
   setFullWidth(false);
   updateUrlFullscreen(false);
 
-  const logo = document.getElementById('navbar_logo');
+  // recalc scrollbars
-  if (logo) logo.classList.add('d-none');
-
   if (typeof adjustScrollContainerHeight === 'function') adjustScrollContainerHeight();
   if (typeof updateCustomScrollbar === 'function') updateCustomScrollbar();
   if (typeof syncIframeHeight === 'function') syncIframeHeight();
 }
 
+
 /**
  * Toggle between enter and exit fullscreen.
  */