From 16400eef12c74d75a6662a0cb2142e5fa21e6f4e Mon Sep 17 00:00:00 2001
From: tuanOts <anhtuanbtx1@gmail.com>
Date: Sat, 14 Jun 2025 22:36:02 +0700
Subject: [PATCH] =?UTF-8?q?=EF=BF=BD=20Improved=20Calendar=20Page=20Header?=
 =?UTF-8?q?=20Balance=20&=20Positioning?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Visual Balance Improvements:
- Reduced header padding from 25px 30px to 20px 25px for better proportion
- Added margin-top: 15px to create proper spacing from page top
- Decreased title font-size from 2rem to 1.75rem for better hierarchy
- Softened box-shadow from 0 8px 32px to 0 6px 25px for subtle depth
- Reduced font-weight from 700 to 600 for less aggressive appearance

� Enhanced Responsive Design:
- Tablet (768px): Optimized padding 18px 20px, font-size 1.5rem
- Mobile (480px): Compact padding 15px 18px, font-size 1.3rem
- Progressive margin adjustments: 15px → 10px → 8px for top spacing
- Consistent gap reductions: 15px → 12px for better mobile layout

� Dark Mode Refinements:
- Enhanced shadow depth for dark theme: rgba(0,0,0,0.15)
- Maintained visual hierarchy in dark mode
- Better contrast and readability

� Layout Harmony:
- Header now properly balanced with sidebar and main calendar
- Improved typography hierarchy throughout the page
- Better visual flow and content organization
- Smoother responsive transitions across all breakpoints

� Result:
- More balanced and professional page layout
- Better visual hierarchy and content flow
- Improved user experience across all devices
- Consistent spacing and proportions
---
 src/style/css/calendar-custom.css | 32 +++++++++++++++++--------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/style/css/calendar-custom.css b/src/style/css/calendar-custom.css
index a39e597..6299afa 100644
--- a/src/style/css/calendar-custom.css
+++ b/src/style/css/calendar-custom.css
@@ -47,9 +47,10 @@
 .calendar-page-header {
   background: rgba(255,255,255,0.95) !important;
   border-radius: 15px !important;
-  padding: 25px 30px !important;
-  margin-bottom: 25px !important;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
+  padding: 20px 25px !important;
+  margin-top: 15px !important;
+  margin-bottom: 20px !important;
+  box-shadow: 0 6px 25px rgba(0,0,0,0.08) !important;
   backdrop-filter: blur(10px) !important;
   border: 1px solid rgba(255,255,255,0.2) !important;
   position: relative !important;
@@ -85,13 +86,13 @@
   -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
   background-clip: text !important;
-  font-weight: 700 !important;
+  font-weight: 600 !important;
   margin: 0 !important;
-  font-size: 2rem !important;
-  line-height: 1.2 !important;
+  font-size: 1.75rem !important;
+  line-height: 1.3 !important;
   display: flex !important;
   align-items: center !important;
-  gap: 10px !important;
+  gap: 8px !important;
 }
 
 .calendar-page-header .page-title {
@@ -773,8 +774,9 @@
 
 @media (max-width: 768px) {
   .calendar-page-header {
-    padding: 20px !important;
-    margin-bottom: 20px !important;
+    padding: 18px 20px !important;
+    margin-top: 10px !important;
+    margin-bottom: 18px !important;
   }
 
   .calendar-page-header .col-lg-8,
@@ -783,9 +785,9 @@
   }
 
   .calendar-page-header h3 {
-    font-size: 1.6rem !important;
+    font-size: 1.5rem !important;
     text-align: center !important;
-    margin-bottom: 15px !important;
+    margin-bottom: 12px !important;
   }
 
   .calendar-page-header .col-lg-4 {
@@ -795,13 +797,14 @@
 
 @media (max-width: 480px) {
   .calendar-page-header {
-    padding: 15px !important;
+    padding: 15px 18px !important;
+    margin-top: 8px !important;
     margin-bottom: 15px !important;
   }
 
   .calendar-page-header .row {
     flex-direction: column !important;
-    gap: 15px !important;
+    gap: 12px !important;
   }
 
   .calendar-page-header .col-lg-8,
@@ -811,7 +814,7 @@
   }
 
   .calendar-page-header h3 {
-    font-size: 1.4rem !important;
+    font-size: 1.3rem !important;
     text-align: center !important;
     margin: 0 !important;
   }
@@ -917,6 +920,7 @@
 [data-layout-mode="dark_mode"] .calendar-page-header {
   background: rgba(44, 62, 80, 0.95) !important;
   border-color: rgba(52, 73, 94, 0.3) !important;
+  box-shadow: 0 6px 25px rgba(0,0,0,0.15) !important;
 }
 
 [data-layout-mode="dark_mode"] .calendar-page-header::before {