From 237aff39c4f96c5016d38684dae91663d6d62997 Mon Sep 17 00:00:00 2001
From: Seyed Mahdi <39972836+SeyedHashtag@users.noreply.github.com>
Date: Tue, 8 Jul 2025 18:07:59 +0330
Subject: [PATCH] feat: Add sticky card-header with bokeh effect for improved
 UI

---
 core/scripts/webpanel/assets/css/custom.css | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/core/scripts/webpanel/assets/css/custom.css b/core/scripts/webpanel/assets/css/custom.css
index e654c66..d3eee8d 100644
--- a/core/scripts/webpanel/assets/css/custom.css
+++ b/core/scripts/webpanel/assets/css/custom.css
@@ -136,6 +136,13 @@ body:not(.dark-mode) .card-header {
   border-bottom: 1px solid var(--border-color-light);
   padding: 0.75rem 1.25rem;
   color: var(--text-dark); /* Ensure header text is dark */
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: rgba(255, 255, 255, 0.75); /* semi-transparent for bokeh */
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px); /* Safari support */
+  transition: background 0.3s;
 }
 body:not(.dark-mode) .card-title {
   font-weight: 600;
@@ -305,6 +312,12 @@ body.dark-mode .card-header {
   border-bottom: 1px solid var(--dark-navy-border) !important;
   color: var(--dark-text-primary);
   padding: 0.75rem 1.25rem;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px); /* Safari support */
+  transition: background 0.3s;
 }
 body.dark-mode .card-body { padding: 1.25rem; }