From 291549ab11f7a2c82ca2d5400e5f9979a53bb919 Mon Sep 17 00:00:00 2001 From: Mohamed Eltayar <152964073+maltayyar2@users.noreply.github.com> Date: Thu, 28 Aug 2025 16:03:52 +0300 Subject: [PATCH] Create modern CSS for Hijri datepicker with Odoo-compatible styling --- .../static/src/scss/hijri_modern.css | 265 ++++++++++++++++++ 1 file changed, 265 insertions(+) create mode 100644 odex25_base/web_hijri_datepicker/static/src/scss/hijri_modern.css diff --git a/odex25_base/web_hijri_datepicker/static/src/scss/hijri_modern.css b/odex25_base/web_hijri_datepicker/static/src/scss/hijri_modern.css new file mode 100644 index 000000000..db0dbd269 --- /dev/null +++ b/odex25_base/web_hijri_datepicker/static/src/scss/hijri_modern.css @@ -0,0 +1,265 @@ +/* + * Modern Hijri Datepicker CSS + * Designed to integrate seamlessly with Odoo's UI + * Version: 2.2.0 Compatible + */ + +/* ==================== MODERN HIJRI DATEPICKER ==================== */ + +.calendars-popup { + z-index: 10000 !important; + position: absolute !important; + border: 1px solid #e0e0e0; + border-radius: 8px; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); + background: #ffffff; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + font-size: 13px; + overflow: hidden; +} + +/* Main calendar container */ +.calendars { + min-width: 280px; + padding: 0; + background: #ffffff; + border-radius: 8px; +} + +/* Calendar header */ +.calendars-month-header { + background: linear-gradient(135deg, #6c5ce7, #74b9ff); + color: white; + padding: 12px 16px; + display: flex !important; + justify-content: space-between; + align-items: center; + font-weight: 600; + font-size: 14px; +} + +.calendars-month-header .calendars-month-year { + font-size: 16px; + font-weight: 700; + flex: 1; + text-align: center; + color: white; +} + +/* Navigation buttons */ +.calendars-nav { + background: transparent; + border: none; + color: white; + padding: 8px 12px; + border-radius: 6px; + cursor: pointer; + font-size: 16px; + transition: all 0.2s ease; + margin: 0 4px; +} + +.calendars-nav:hover { + background: rgba(255, 255, 255, 0.2); + transform: scale(1.1); +} + +/* Week header */ +.calendars thead { + background: #f8f9fa; + border-bottom: 1px solid #e9ecef; +} + +.calendars thead th { + padding: 12px 8px; + font-weight: 600; + color: #6c757d; + font-size: 12px; + text-align: center; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +/* Calendar days */ +.calendars td { + position: relative; + padding: 0; + border: none; + background: white; +} + +.calendars td a, +.calendars td span { + display: block; + width: 36px; + height: 36px; + line-height: 36px; + text-align: center; + text-decoration: none; + color: #495057; + border-radius: 6px; + margin: 2px; + transition: all 0.2s ease; + font-weight: 500; + position: relative; +} + +/* Selectable dates */ +.calendars td a { + cursor: pointer; +} + +.calendars td a:hover { + background: #e3f2fd; + color: #1976d2; + transform: scale(1.05); + box-shadow: 0 2px 8px rgba(25, 118, 210, 0.2); +} + +/* Selected date */ +.calendars .calendars-selected a { + background: linear-gradient(135deg, #4caf50, #66bb6a) !important; + color: white !important; + font-weight: 700; + box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3); +} + +/* Today */ +.calendars .calendars-today a { + background: #fff3e0; + color: #f57c00; + border: 2px solid #ff9800; + font-weight: 600; +} + +.calendars .calendars-today a:hover { + background: #ff9800; + color: white; +} + +/* Weekend days */ +.calendars .calendars-weekend a { + color: #f44336; + font-weight: 600; +} + +/* Other month dates */ +.calendars .calendars-other-month span { + color: #bdbdbd; + font-weight: 400; +} + +/* Disabled dates */ +.calendars .calendars-disabled span { + color: #e0e0e0 !important; + cursor: not-allowed; + opacity: 0.5; +} + +/* Control buttons footer */ +.calendars-commands { + background: #f8f9fa; + border-top: 1px solid #e9ecef; + padding: 12px 16px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.calendars-cmd { + background: #ffffff; + border: 1px solid #dee2e6; + color: #495057; + padding: 6px 12px; + border-radius: 4px; + font-size: 12px; + cursor: pointer; + transition: all 0.2s ease; + font-weight: 500; +} + +.calendars-cmd:hover { + background: #007bff; + color: white; + border-color: #007bff; + transform: translateY(-1px); + box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2); +} + +/* RTL Support */ +.calendars.calendars-rtl { + direction: rtl; +} + +.calendars.calendars-rtl .calendars-month-header { + flex-direction: row-reverse; +} + +/* Responsive design */ +@media (max-width: 480px) { + .calendars { + min-width: 260px; + } + + .calendars td a, + .calendars td span { + width: 32px; + height: 32px; + line-height: 32px; + font-size: 12px; + } + + .calendars-month-header { + padding: 10px 12px; + font-size: 13px; + } +} + +/* Animation for popup appearance */ +@keyframes hijriSlideIn { + from { + opacity: 0; + transform: translateY(-10px) scale(0.95); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +.calendars-popup { + animation: hijriSlideIn 0.2s ease-out; +} + +/* Special styling for Arabic numbers */ +.calendars.arabic-numbers { + font-family: 'Arial Unicode MS', 'Tahoma', sans-serif; +} + +/* Status bar styling if enabled */ +.calendars-status { + background: #343a40; + color: white; + padding: 8px 12px; + font-size: 11px; + text-align: center; + border-top: 1px solid #495057; +} + +/* Multiple month display */ +.calendars-multi .calendars-month { + display: inline-block; + vertical-align: top; + margin: 0 4px; +} + +/* Clear button special styling */ +.calendars-cmd.calendars-clear { + color: #dc3545; + border-color: #dc3545; +} + +.calendars-cmd.calendars-clear:hover { + background: #dc3545; + color: white; +} \ No newline at end of file