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 1/2] 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; }
 

From c72036b9420c8c60252e4c82998b5d1c9e291894 Mon Sep 17 00:00:00 2001
From: Seyed Mahdi <39972836+SeyedHashtag@users.noreply.github.com>
Date: Tue, 8 Jul 2025 19:24:11 +0330
Subject: [PATCH 2/2] sidebar position is now fixed when scrolling long lists

---
 core/scripts/webpanel/assets/css/custom.css | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/core/scripts/webpanel/assets/css/custom.css b/core/scripts/webpanel/assets/css/custom.css
index d3eee8d..93cc854 100644
--- a/core/scripts/webpanel/assets/css/custom.css
+++ b/core/scripts/webpanel/assets/css/custom.css
@@ -89,7 +89,15 @@ body:not(.dark-mode) #darkModeIcon.fa-sun {
 
 /* --- Sidebar (Using Default Dark AdminLTE Theme) --- */
 
-body:not(.dark-mode) .main-sidebar { background-color: #343a40; }
+body:not(.dark-mode) .main-sidebar {
+  background-color: #343a40;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 250px;
+  height: 100vh;
+  z-index: 1050;
+}
 body:not(.dark-mode) .brand-link {
   border-bottom-color: rgba(255, 255, 255, 0.1);
 }
@@ -287,7 +295,15 @@ body.dark-mode #darkModeIcon.fa-moon {
 }
 
 /* Dark Sidebar */
-body.dark-mode .main-sidebar { background-color: var(--dark-navy-deep) !important; }
+body.dark-mode .main-sidebar {
+  background-color: var(--dark-navy-deep) !important;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 250px;
+  height: 100vh;
+  z-index: 1050;
+}
 body.dark-mode .brand-link { border-bottom: 1px solid var(--dark-navy-accent) !important; }
 body.dark-mode .sidebar .nav-pills .nav-link { color: var(--dark-text-secondary); }
 body.dark-mode .sidebar .nav-pills .nav-link.active,