/* Reusable Datepicker Styles * * Redesign tokens (theme/static_src/src/styles.css): brand #3a2ea3 / #2e2482, * brand-50 #e8e7f5, headings #110e31, text #343233 / #4c484a / #b5abaf, * lines #f8f7f7 / #e8e5e6 / #ddd8da. Plain CSS because the dropdowns are built * in JS and moved to . */ .datepicker-input, .datepicker-btn { cursor: pointer; user-select: none; padding: 0.75rem 1rem; border: 1px solid #e8e5e6; border-radius: 12px; background-color: white; color: #343233; transition: border-color 0.15s, box-shadow 0.15s; font-size: 0.875rem; } .datepicker-input:hover, .datepicker-btn:hover { border-color: #3a2ea3; } .datepicker-input:focus, .datepicker-btn:focus { outline: none; border-color: #3a2ea3; box-shadow: 0 0 0 3px rgba(58, 46, 163, 0.15); } .datepicker-dropdown { position: absolute; z-index: 99999 !important; background: white; border-radius: 12px; box-shadow: 0 24px 60px -24px rgba(23, 18, 65, 0.35); padding: 16px; min-width: 320px; margin-top: 0.5rem; left: 0; top: 100%; border: 0.5px solid #ddd8da; color: #110e31; /* Column so the quick dates can sit under the calendar, as in the design. */ flex-direction: column; } /* Ensure datepicker field creates proper stacking context */ .datepicker-field { position: relative; z-index: 100; } .datepicker-field:focus-within { z-index: 99999; } .datepicker-dropdown.hidden { display: none !important; visibility: hidden !important; } .datepicker-header { order: 1; } .datepicker-grid { order: 2; } .quick-dates { order: 3; display: flex; gap: 0.5rem; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e8e5e6; flex-wrap: wrap; } .quick-date-btn { flex: 1; min-width: fit-content; padding: 0.5rem 0.75rem; background: #f8f7f7; color: #343233; border: 1px solid #e8e5e6; border-radius: 8px; font-size: 0.8125rem; font-weight: 700; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .quick-date-btn:hover { border-color: #3a2ea3; color: #3a2ea3; } .datepicker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .datepicker-title { font-weight: 700; font-size: 1rem; color: #110e31; display: flex; gap: 0.25rem; align-items: center; } .datepicker-select { background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 0.25rem 0.5rem; font-size: 1rem; font-weight: 700; color: #110e31; cursor: pointer; transition: background 0.15s, border-color 0.15s; outline: none; } .datepicker-select:hover { background: #f8f7f7; } .datepicker-select:focus { background: white; border-color: #3a2ea3; } .datepicker-nav { background: transparent; border: none; border-radius: 999px; width: 36px; height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #343233; transition: background 0.15s; } .datepicker-nav:hover { background: #f8f7f7; } .datepicker-nav svg { width: 1rem; height: 1rem; color: #343233; } /* In RTL the "previous" button sits on the right, so its chevron points right. */ html[dir="rtl"] .datepicker-nav svg, html[dir="rtl"] .datepicker-nav i, html[dir="rtl"] .datepicker-nav .rh-icon { transform: scaleX(-1); } .datepicker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; } .datepicker-day-header { text-align: center; font-size: 0.8125rem; font-weight: 700; color: #4c484a; padding: 0.375rem 0; } .datepicker-day { aspect-ratio: 1; border: none; background: transparent; border-radius: 999px; font-size: 0.875rem; cursor: pointer; transition: background 0.15s; color: #110e31; font-weight: 700; display: flex; align-items: center; justify-content: center; min-height: 2.5rem; } .datepicker-day:hover:not(.disabled) { background: #e8e7f5; } .datepicker-day.other-month { color: #b5abaf; font-weight: 400; } .datepicker-day.today { box-shadow: inset 0 0 0 1px #ddd8da; } .datepicker-day.selected, .datepicker-day.selected:hover { background: #3a2ea3; color: white; box-shadow: none; } .datepicker-day.disabled { color: #d9d3d6; font-weight: 400; cursor: not-allowed; } .datepicker-day.disabled:hover { background: transparent; } /* RTL Support */ html[dir="rtl"] .datepicker-dropdown { direction: rtl; } html[dir="rtl"] .datepicker-grid { direction: rtl; } /* Responsive Design */ @media (max-width: 640px) { .datepicker-dropdown { min-width: 280px; padding: 0.75rem; } .quick-date-btn { font-size: 0.75rem; padding: 0.375rem 0.5rem; } .datepicker-day { font-size: 0.8125rem; min-height: 2.25rem; } } /* Animation */ @keyframes datepicker-fade-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .datepicker-dropdown:not(.hidden), .drp-panel:not([hidden]) { animation: datepicker-fade-in 0.15s ease-out; } /* ---- Range panel: DateRangePicker in static/js/datepicker.js ------------ * Figma "تاريخ الرحلة" (node 2707-27212): 777px card, two months, chips, * Save / Reset footer. */ .drp-panel { position: fixed; z-index: 1000000; width: min(777px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; display: flex; flex-direction: column; gap: 20px; padding: 16px 24px; background: #fff; border: 0.5px solid #ddd8da; border-radius: 12px; box-shadow: 0 24px 60px -24px rgba(23, 18, 65, 0.35); color: #110e31; font-family: inherit; text-align: start; } .drp-panel[hidden] { display: none !important; } .drp-panel button { font-family: inherit; } .drp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #e8e5e6; } .drp-title { margin: 0; font-size: 20px; font-weight: 700; line-height: 30px; } /* Only the phone sheet needs a close button; on desktop a click outside closes. */ .drp-close { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: #f8f7f7; color: #343233; cursor: pointer; } .drp-body { position: relative; } .drp-months { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .drp-month-title { margin: 0 0 8px; text-align: center; font-size: 18px; font-weight: 700; line-height: 36px; } .drp-nav { position: absolute; top: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: #343233; cursor: pointer; } .drp-nav:hover:not(:disabled) { background: #f8f7f7; } .drp-nav:disabled { color: #ddd8da; cursor: default; } .drp-prev { inset-inline-start: 0; } .drp-next { inset-inline-end: 0; } .drp-panel[dir="rtl"] .drp-nav svg, .drp-panel[dir="rtl"] .drp-nav i { transform: scaleX(-1); } .drp-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 6px; } .drp-dow { padding: 6px 0; text-align: center; font-size: 14px; font-weight: 700; color: #4c484a; } .drp-cell { display: flex; align-items: center; justify-content: center; height: 44px; } .drp-day { width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; font-size: 16px; font-weight: 700; color: #110e31; cursor: pointer; transition: background 0.1s; } .drp-day:hover:not(:disabled):not(.is-edge) { background: #e8e7f5; } .drp-day:focus-visible { outline: 2px solid #3a2ea3; outline-offset: 2px; } .drp-day.is-today { box-shadow: inset 0 0 0 1px #ddd8da; } .drp-day.is-edge { background: #3a2ea3; color: #fff; box-shadow: none; } .drp-day:disabled { color: #d9d3d6; font-weight: 400; cursor: default; } /* The band joins the two end circles: full cells between, half cells at the ends. */ .drp-cell.in-range { background: #e8e7f5; } .drp-cell.in-range .drp-day:hover { background: #d6d3ee; } .drp-cell.in-range:nth-child(7n+1) { border-start-start-radius: 999px; border-end-start-radius: 999px; } .drp-cell.in-range:nth-child(7n) { border-start-end-radius: 999px; border-end-end-radius: 999px; } .drp-cell.range-start { background: linear-gradient(to right, transparent 50%, #e8e7f5 50%); } .drp-cell.range-end { background: linear-gradient(to left, transparent 50%, #e8e7f5 50%); } .drp-panel[dir="rtl"] .drp-cell.range-start { background: linear-gradient(to left, transparent 50%, #e8e7f5 50%); } .drp-panel[dir="rtl"] .drp-cell.range-end { background: linear-gradient(to right, transparent 50%, #e8e7f5 50%); } .drp-sub { margin: 0 0 12px; font-size: 18px; font-weight: 700; } .drp-chips { display: flex; flex-wrap: wrap; gap: 12px; } .drp-chip { min-width: 100px; padding: 10px 20px; border: 1px solid #e8e5e6; border-radius: 8px; background: #f8f7f7; font-size: 15px; font-weight: 700; color: #343233; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .drp-chip:hover:not(:disabled) { border-color: #3a2ea3; color: #3a2ea3; } .drp-chip:disabled { opacity: 0.5; cursor: default; } .drp-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 16px; border-top: 1px solid #e8e5e6; } .drp-reset { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; } .drp-reset { border: 1px solid #e8e5e6; background: #f8f7f7; color: #343233; } .drp-reset:hover { border-color: #ddd8da; background: #e8e5e6; } .drp-reset svg, .drp-reset i { color: #3a2ea3; } /* Laptop-height windows: six-row months at the design's 44px cells need ~640px, so tighten rows and gaps rather than scroll the panel. */ @media (min-width: 640px) and (max-height: 760px) { .drp-panel { gap: 12px; padding-block: 12px; } .drp-head { padding-bottom: 10px; } .drp-month-title { margin-bottom: 2px; line-height: 32px; } .drp-dow { padding: 2px 0; } .drp-grid { row-gap: 2px; } .drp-cell, .drp-day { height: 38px; } .drp-day { width: 38px; font-size: 15px; } .drp-sub { margin-bottom: 8px; font-size: 16px; } .drp-chip { padding-block: 8px; } .drp-foot { padding-top: 12px; } .drp-save, .drp-reset { padding-block: 10px; } } @media (max-width: 639px) { .drp-panel { width: auto; gap: 16px; padding: 14px 16px; } .drp-panel.is-sheet { max-height: calc(100vh - 16px); border-radius: 16px; } .drp-close { display: flex; } .drp-months { grid-template-columns: 1fr; gap: 20px; } .drp-cell, .drp-day { height: 40px; } .drp-day { width: 40px; font-size: 15px; } .drp-chip { flex: 1 1 40%; min-width: 0; padding: 10px 12px; } /* Keep Save reachable while the stacked months scroll. */ .drp-foot { position: sticky; bottom: -14px; margin-bottom: -14px; padding-bottom: 14px; background: #fff; } .drp-foot button { flex: 1; } }