push

Author: janfaracik

src/main/scss/components/_app-bar.scss

@@ -126,7 +126,7 @@
 }
 
 .jenkins-bottom-app-bar__shadow {
-  --semi-translucent: color-mix(in sRGB, var(--background) 100%, transparent);
+  --semi-translucent: color-mix(in sRGB, var(--background) 70%, transparent);
 
   position: sticky;
   height: calc(
@@ -162,11 +162,13 @@
   }
 
   &--stuck {
+    backdrop-filter: blur(20px);
     background: linear-gradient(
       to right,
       var(--background),
-      var(--semi-translucent) 3rem,
-      var(--semi-translucent) calc(100% - 3rem),
+      var(--background) 3rem,
+      var(--semi-translucent),
+      var(--background) calc(100% - 3rem),
       var(--background)
     );
 

war/src/main/webapp/scripts/hudson-behavior.js

@@ -1762,19 +1762,16 @@ function rowvgStartEachRow(recursive, f) {
     },
   );
 
-  window.addEventListener("load", function () {
     // Add a class to the bottom bar when it's stuck to the bottom of the screen
     Behaviour.specify(".jenkins-bottom-app-bar__shadow", "jenkins-bottom-app-bar__shadow", 0, function (el) {
       const dialog = el.closest("dialog");
 
       const observer = new IntersectionObserver(
-        function (entries) {
-          const e = entries[0];
-          el.classList.toggle(
+        ([e]) =>
+          e.target.classList.toggle(
             "jenkins-bottom-app-bar__shadow--stuck",
             e.intersectionRatio < 1,
-          );
-        },
+          ),
         {
           threshold: [1],
           root: dialog || null,
@@ -1783,7 +1780,6 @@ function rowvgStartEachRow(recursive, f) {
 
       observer.observe(el);
     });
-  });
 
   /**
    * Function that provides compatibility to the checkboxes without title on an f:entry