Merge pull request #219 from ReturnFI/beta

A small but impactful release focused on UI polish

Author: ReturnFI

changelog

@@ -1,13 +1,7 @@
-# [1.12.0] - 2025-06-03
+# [1.12.1] - 2025-07-09
 
-#### ✨ Features & Enhancements
+#### ✨ UI Enhancements
 
-* 🎨 **UI/UX:** Some **enhancements to the Settings page** with cleaner design and improved interactivity
-* 🌐 **New Tabs:** Added **WARP** and **OBFS** management tabs to the settings panel for easier control
-* 🔍 **OBFS:**
-
-  * Added **OBFS status API endpoint**
-  * Introduced `--check` flag to the `manage_obfs` CLI tool
-  * Enabled **status checking** functionality to monitor OBFS state
-* 🔧 **normalsub:** Improved `edit_subpath` with **better error handling** and **efficient Caddy reload**
-* 📦 **Singbox:** Enhanced **Singbox template configuration** for better maintainability and compatibility
+* 📌 **Sticky Sidebar:** Sidebar now stays fixed when scrolling through long pages for easier navigation
+* 🃏 **Sticky Headers:** Card headers are now sticky with a sleek **bokeh blur** effect – better usability on settings and user lists
+* ⏎ **Login UX:** Pressing **Enter** now submits the login form properly for faster access

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);
 }
@@ -136,6 +144,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;
@@ -280,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,
@@ -305,6 +328,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; }
 

core/scripts/webpanel/templates/login.html

@@ -66,6 +66,17 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
     <!-- AdminLTE App -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.2.0/js/adminlte.min.js"></script>
+    <script>
+        document.addEventListener('keydown', function(event) {
+            if (event.key === 'Enter') {
+                const form = document.querySelector('form[action]');
+                if (form) {
+                    event.preventDefault();
+                    form.submit();
+                }
+            }
+        });
+    </script>
 </body>
 
 </html>