/* * Penocrm Persian (Shamsi) date picker - tweaks * * The MD.BootstrapPersianDateTimePicker stylesheet ships its own Bootstrap-5 * scoped popover. We add a few Bootstrap-3 friendly overrides so the popover * looks consistent with the rest of the admin theme and renders correctly on * RTL pages. */ /* Bootstrap-3 friendly popover surface that mimics BS5 just enough for the * MD Persian picker. Scoped to its own popover so it doesn't interfere with * other tooltips/popovers on the page. */ .mds-bs-persian-datetime-picker-popover { direction: rtl; font-family: "Vazirmatn", "IRANSans", "Tahoma", sans-serif; z-index: 1080; max-width: 300px; min-width: 280px; position: absolute; top: 0; left: 0; background: #fff; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 6px; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.18); padding: 0; } .mds-bs-persian-datetime-picker-popover .popover-header { background-color: #f7f7f7; color: #333; border-bottom: 1px solid #eee; border-radius: 6px 6px 0 0; padding: 6px 10px; margin: 0; font-size: 14px; text-align: center; } .mds-bs-persian-datetime-picker-popover .popover-body { background-color: #fff; color: #333; padding: 0; } .mds-bs-persian-datetime-picker-popover .popover-arrow { display: none; /* Bootstrap 3 hosts don't ship arrow geometry. */ } /* Minimal BS5 utility classes used inside the picker template. */ .mds-bs-persian-datetime-picker-popover .text-center { text-align: center; } .mds-bs-persian-datetime-picker-popover .p-0 { padding: 0 !important; } .mds-bs-persian-datetime-picker-popover .p-1 { padding: 4px !important; } .mds-bs-persian-datetime-picker-popover .m-0 { margin: 0 !important; } .mds-bs-persian-datetime-picker-popover .table { margin-bottom: 0; } .mds-bs-persian-datetime-picker-popover .btn, .mds-bs-persian-datetime-picker-popover button { font-family: inherit; } /* The Bootstrap 3 .form-control rules on `input` get inherited by the new * visible Persian display, but the original (now hidden) input must stay * invisible. We rely on `type="hidden"` already, this is just a safety net. */ input.persian-date-hidden { display: none !important; } input.persian-date-display { direction: rtl; text-align: right; font-family: "Vazirmatn", "IRANSans", "Tahoma", sans-serif; background-color: #fff; } /* ── Bootstrap 3 / Bootstrap 5 conflict fixes ────────────────────────────── * * The Persian datepicker uses Bootstrap 5's Popover API while the rest of * the admin theme runs Bootstrap 3. Three rules must be overridden so that * the calendar popup renders and behaves correctly. * * 1. Bootstrap 3: `.popover { display: none }` * Bootstrap 5 never sets `display` explicitly – it relies on its own CSS * which is NOT loaded here. Force `display:block` so the element the * picker inserts into is actually visible. */ .mds-bs-persian-datetime-picker-popover { display: block !important; } /* * 2. Bootstrap 3: `.fade { opacity: 0; transition: opacity .15s linear }` * Bootstrap 5 adds class `fade` (animation mode) to the popover element. * Bootstrap 3's rule makes it permanently invisible. * — Without `.show` (transitioning out): keep opacity:0 so the element * appears hidden before Bootstrap 5 removes it from the DOM. * — With `.show` (visible): force opacity:1. * — `transition:none` ensures Bootstrap 5's internal `_queueCallback` * (which waits for transitionend) fires in ~5 ms instead of 150 ms, * so the `shown.bs.popover` event fires and click-handlers inside the * calendar are wired up promptly. */ .mds-bs-persian-datetime-picker-popover.fade { opacity: 0; transition: none !important; } .mds-bs-persian-datetime-picker-popover.fade.show { opacity: 1 !important; } /* * 3. Bootstrap 3: `.dropdown-menu { display: none }` revealed by `.open` * Bootstrap 5 uses `.dropdown-menu.show` instead of a parent `.open`. * Override so the month-selector dropdown inside the calendar works. */ .mds-bs-dtp-container .dropdown-menu.show { display: block !important; } /* Inline calendars used inside reminder popovers etc. */ .mds-bs-dtp-container { font-family: "Vazirmatn", "IRANSans", "Tahoma", sans-serif; } /* Persian-friendly base font for the whole admin / customer area when locale * is Persian. Loaded only on Persian pages via assets_helper. We target * `html[lang="fa"]` rather than a body class because the customer-area * body tag does not carry a lang-* class - the attribute * is rendered by both admin and customer area templates. */ html[lang="fa"] body, html[lang="fa"] body .form-control, html[lang="fa"] body .btn, html[lang="fa"] body .table, html[lang="fa"] body .menu-text, html[lang="fa"] body .panel, html[lang="fa"] body .modal, body.lang-persian, body.lang-persian .form-control, body.lang-persian .btn, body.lang-persian .table, body.lang-persian .menu-text, body.lang-persian .panel, body.lang-persian .modal { font-family: "Vazirmatn", "IRANSans", "Tahoma", "Segoe UI", sans-serif !important; }